Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 congsh
|
6895fd05be | ||
|
congsh
|
00fdb02d80 | ||
|
congsh
|
d0c75d25cf | ||
|
congsh
|
5c007ac069 | ||
|
congsh
|
e4b3340ffb | ||
|
congsh
|
443b22e142 | ||
|
congsh
|
0acc1e12e1 | ||
|
congsh
|
b1a9995767 | ||
|
congsh
|
87937b0722 |
+6
-1
@@ -13,7 +13,7 @@ docker-compose up -d
|
||||
```
|
||||
|
||||
访问: http://localhost:8090/_/
|
||||
管理后台: http://localhost:8090/_/ (admin/admin)
|
||||
管理后台: http://localhost:8090/_/ （首次访问时创建管理员账号）
|
||||
|
||||
## 环境变量
|
||||
|
||||
@@ -25,6 +25,11 @@ PB_DATA=./pb_data
|
||||
PB_MIGRATIONS=./pb_migrations
|
||||
```
|
||||
|
||||
## 数据库集合
|
||||
|
||||
数据库集合通过 PocketBase 管理后台手动创建。`pb_migrations/` 目录无自动迁移文件。
|
||||
如需重建数据库，请在管理后台中创建以下集合：users、groups、team_sessions、invitations、games。
|
||||
|
||||
## 开发环境
|
||||
|
||||
访问管理后台: http://localhost:8090/_/
|
||||
|
||||
+128
-128
@@ -8,13 +8,139 @@ import (
|
||||
"github.com/pocketbase/pocketbase/core"
|
||||
)
|
||||
|
||||
// isGroupMember checks if a user is a member of a group
|
||||
func main() {
|
||||
app := pocketbase.New()
|
||||
|
||||
// ── Groups ──
|
||||
|
||||
app.OnRecordBeforeCreateRequest("groups").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
e.Record.Set("owner", authRecord.Id)
|
||||
e.Record.Set("members", []string{authRecord.Id})
|
||||
return nil
|
||||
})
|
||||
|
||||
app.OnRecordBeforeUpdateRequest("groups").Add(func(e *core.RecordUpdateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
original, err := app.Dao().FindRecordById("groups", e.Record.Id)
|
||||
if err != nil {
|
||||
return apis.NewNotFoundError("群组不存在", nil)
|
||||
}
|
||||
if original.GetString("owner") != authRecord.Id {
|
||||
return apis.NewForbiddenError("只有群组所有者可以更新群组", nil)
|
||||
}
|
||||
// 保护 owner 字段不被篡改
|
||||
e.Record.Set("owner", original.GetString("owner"))
|
||||
// 验证 members 数量
|
||||
members := e.Record.GetStringSlice("members")
|
||||
maxMembers := e.Record.GetInt("maxMembers")
|
||||
if maxMembers > 0 && len(members) > maxMembers {
|
||||
return apis.NewBadRequestError("成员数量超过上限", nil)
|
||||
}
|
||||
return nil
|
||||
})
|
||||
|
||||
app.OnRecordBeforeDeleteRequest("groups").Add(func(e *core.RecordDeleteEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
|
||||
if err != nil || !isOwner {
|
||||
return apis.NewForbiddenError("只有群组所有者可以删除群组", nil)
|
||||
}
|
||||
return nil
|
||||
})
|
||||
|
||||
// ── Team Sessions ──
|
||||
|
||||
app.OnRecordBeforeCreateRequest("team_sessions").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
groupId := e.Record.GetString("sourceGroup")
|
||||
isMember, err := isGroupMember(app, groupId, authRecord.Id)
|
||||
if err != nil || !isMember {
|
||||
return apis.NewForbiddenError("只有群组成员可以创建团队会话", nil)
|
||||
}
|
||||
return nil
|
||||
})
|
||||
|
||||
// ── Invitations ──
|
||||
|
||||
app.OnRecordBeforeCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
// 强制设置 from 为当前用户
|
||||
e.Record.Set("from", authRecord.Id)
|
||||
e.Record.Set("status", "pending")
|
||||
return nil
|
||||
})
|
||||
|
||||
// 接受邀请：自动加入 team session + 更新用户状态
|
||||
app.OnRecordBeforeUpdateRequest("invitations").Add(func(e *core.RecordUpdateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
// 只有 recipient 可以更新邀请
|
||||
if e.Record.GetString("to") != authRecord.Id {
|
||||
return apis.NewForbiddenError("无权操作此邀请", nil)
|
||||
}
|
||||
|
||||
newStatus := e.Record.GetString("status")
|
||||
if newStatus == "accepted" {
|
||||
teamSessionId := e.Record.GetString("teamSession")
|
||||
teamSession, err := app.Dao().FindRecordById("team_sessions", teamSessionId)
|
||||
if err != nil {
|
||||
return apis.NewNotFoundError("临时小组不存在", nil)
|
||||
}
|
||||
// 将用户加入 team session members
|
||||
members := teamSession.GetStringSlice("members")
|
||||
alreadyIn := false
|
||||
for _, m := range members {
|
||||
if m == authRecord.Id {
|
||||
alreadyIn = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if !alreadyIn {
|
||||
members = append(members, authRecord.Id)
|
||||
teamSession.Set("members", members)
|
||||
if err := app.Dao().SaveRecord(teamSession); err != nil {
|
||||
return apis.NewBadRequestError("加入临时小组失败", nil)
|
||||
}
|
||||
}
|
||||
|
||||
// 更新用户状态为 in_team
|
||||
user, err := app.Dao().FindRecordById("users", authRecord.Id)
|
||||
if err == nil {
|
||||
user.Set("status", "in_team")
|
||||
app.Dao().SaveRecord(user)
|
||||
}
|
||||
}
|
||||
return nil
|
||||
})
|
||||
|
||||
if err := app.Start(); err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
func isGroupMember(app *pocketbase.PocketBase, groupId string, userId string) (bool, error) {
|
||||
group, err := app.Dao().FindRecordById("groups", groupId)
|
||||
if err != nil {
|
||||
return false, err
|
||||
}
|
||||
|
||||
members := group.GetStringSlice("members")
|
||||
for _, member := range members {
|
||||
if member == userId {
|
||||
@@ -24,7 +150,6 @@ func isGroupMember(app *pocketbase.PocketBase, groupId string, userId string) (b
|
||||
return false, nil
|
||||
}
|
||||
|
||||
// isGroupOwner checks if a user is the owner of a group
|
||||
func isGroupOwner(app *pocketbase.PocketBase, groupId string, userId string) (bool, error) {
|
||||
group, err := app.Dao().FindRecordById("groups", groupId)
|
||||
if err != nil {
|
||||
@@ -32,128 +157,3 @@ func isGroupOwner(app *pocketbase.PocketBase, groupId string, userId string) (bo
|
||||
}
|
||||
return group.GetString("owner") == userId, nil
|
||||
}
|
||||
|
||||
func main() {
|
||||
app := pocketbase.New()
|
||||
|
||||
// Groups API Rules
|
||||
app.OnRecordBeforeCreateRequest("groups").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
|
||||
// Set the owner to the current user
|
||||
e.Record.Set("owner", authRecord.Id)
|
||||
// Initialize members array with the owner
|
||||
e.Record.Set("members", []string{authRecord.Id})
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
app.OnRecordBeforeUpdateRequest("groups").Add(func(e *core.RecordUpdateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
|
||||
// Only owner can update the group
|
||||
isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
|
||||
if err != nil || !isOwner {
|
||||
return apis.NewForbiddenError("只有群组所有者可以更新群组", nil)
|
||||
}
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
app.OnRecordBeforeDeleteRequest("groups").Add(func(e *core.RecordDeleteEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
|
||||
// Only owner can delete the group
|
||||
isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
|
||||
if err != nil || !isOwner {
|
||||
return apis.NewForbiddenError("只有群组所有者可以删除群组", nil)
|
||||
}
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
// Team Sessions API Rules
|
||||
app.OnRecordBeforeCreateRequest("team_sessions").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
|
||||
groupId := e.Record.GetString("group")
|
||||
|
||||
// Check if user is a member of the group
|
||||
isMember, err := isGroupMember(app, groupId, authRecord.Id)
|
||||
if err != nil || !isMember {
|
||||
return apis.NewForbiddenError("只有群组成员可以创建团队会话", nil)
|
||||
}
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
// Invitations API Rules
|
||||
app.OnRecordBeforeCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
|
||||
authRecord, _ := e.HttpContext.AuthRecord()
|
||||
if authRecord == nil {
|
||||
return apis.NewForbiddenError("需要登录", nil)
|
||||
}
|
||||
|
||||
groupId := e.Record.GetString("group")
|
||||
|
||||
// Only group owner can create invitations
|
||||
isOwner, err := isGroupOwner(app, groupId, authRecord.Id)
|
||||
if err != nil || !isOwner {
|
||||
return apis.NewForbiddenError("只有群组所有者可以创建邀请", nil)
|
||||
}
|
||||
|
||||
// Set status to pending
|
||||
e.Record.Set("status", "pending")
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
app.OnRecordAfterCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
|
||||
// Send real-time notification to the invited user
|
||||
message := map[string]interface{}{
|
||||
"action": "invitation",
|
||||
"data": map[string]interface{}{
|
||||
"id": e.Record.Id,
|
||||
"group": e.Record.GetString("group"),
|
||||
"invited_by": e.Record.GetString("invited_by"),
|
||||
"status": e.Record.GetString("status"),
|
||||
"created": e.Record.Created.Time(),
|
||||
},
|
||||
}
|
||||
|
||||
// Broadcast to the invited user's channel
|
||||
if err := app.Subscriptions().Broadcast("invitations", message); err != nil {
|
||||
log.Printf("Error broadcasting invitation: %v", err)
|
||||
}
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
// Real-time subscription rules
|
||||
app.OnRecordAfterAuthWithTokenRequest().Add(func(e *core.RecordAuthEvent) error {
|
||||
// Subscribe to invitations channel and user's groups channel
|
||||
app.Subscriptions().Subscribe(e.HttpContext.Response(), []string{
|
||||
"invitations",
|
||||
"groups:" + e.Record.Id,
|
||||
"team_sessions",
|
||||
})
|
||||
|
||||
return nil
|
||||
})
|
||||
|
||||
if err := app.Start(); err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
// src/api/invitations.ts
|
||||
import pb from './pocketbase'
|
||||
import type { Invitation, InviteStatus } from '@/types'
|
||||
import { joinTeamSession } from './sessions'
|
||||
import { updateUserStatus } from './users'
|
||||
import type { Invitation } from '@/types'
|
||||
|
||||
// 发送邀请
|
||||
export async function sendInvitation(data: {
|
||||
@@ -71,35 +69,16 @@ export async function respondInvitation(
|
||||
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()
|
||||
const updateData: Record<string, unknown> = {
|
||||
status: response
|
||||
}
|
||||
|
||||
if (response === 'rejected' && rejectReason) {
|
||||
updateData.rejectReason = rejectReason
|
||||
}
|
||||
|
||||
// 更新邀请状态
|
||||
// 后端 hook 会自动处理：加入 team members + 更新用户状态
|
||||
await pb.collection('invitations').update(invitationId, updateData)
|
||||
|
||||
// 如果接受，加入临时小组
|
||||
if (response === 'accepted') {
|
||||
await joinTeamSession(invitation.teamSession)
|
||||
// 更新用户状态
|
||||
await updateUserStatus('in_team')
|
||||
}
|
||||
|
||||
return updateData
|
||||
}
|
||||
|
||||
// 订阅邀请变更
|
||||
|
||||
@@ -51,17 +51,6 @@ export async function updateTeamStatus(sessionId: string, status: TeamStatus): P
|
||||
|
||||
// 结束游戏（解散临时小组）
|
||||
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')
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--gg-primary: #6366f1;
|
||||
--gg-primary-light: #818cf8;
|
||||
--gg-primary-dark: #4f46e5;
|
||||
--gg-accent: #a855f7;
|
||||
--gg-accent-light: #c084fc;
|
||||
|
||||
/* 背景色 */
|
||||
--gg-bg: #0f172a;
|
||||
--gg-bg-card: #1e293b;
|
||||
--gg-bg-elevated: #334155;
|
||||
--gg-bg-hover: #334155;
|
||||
|
||||
/* 文字色 */
|
||||
--gg-text: #f1f5f9;
|
||||
--gg-text-secondary: #94a3b8;
|
||||
--gg-text-muted: #64748b;
|
||||
|
||||
/* 边框 */
|
||||
--gg-border: #334155;
|
||||
--gg-border-light: #475569;
|
||||
|
||||
/* 状态色 */
|
||||
--gg-success: #22c55e;
|
||||
--gg-danger: #ef4444;
|
||||
--gg-warning: #f59e0b;
|
||||
--gg-info: #3b82f6;
|
||||
|
||||
/* 圆角 */
|
||||
--gg-radius-sm: 8px;
|
||||
--gg-radius-md: 12px;
|
||||
--gg-radius-lg: 16px;
|
||||
--gg-radius-xl: 20px;
|
||||
|
||||
/* 阴影 */
|
||||
--gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
--gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* 渐变 */
|
||||
--gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
||||
--gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
--gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
|
||||
/* ── Element Plus 覆盖 ── */
|
||||
--el-color-primary: #6366f1;
|
||||
--el-color-primary-light-3: #818cf8;
|
||||
--el-color-primary-light-5: #a5b4fc;
|
||||
--el-color-primary-light-7: #c7d2fe;
|
||||
--el-color-primary-light-9: #312e81;
|
||||
--el-color-primary-dark-2: #4f46e5;
|
||||
|
||||
--el-color-success: #22c55e;
|
||||
--el-color-warning: #f59e0b;
|
||||
--el-color-danger: #ef4444;
|
||||
--el-color-info: #64748b;
|
||||
|
||||
--el-bg-color: #1e293b;
|
||||
--el-bg-color-page: #0f172a;
|
||||
--el-bg-color-overlay: #1e293b;
|
||||
|
||||
--el-text-color-primary: #f1f5f9;
|
||||
--el-text-color-regular: #e2e8f0;
|
||||
--el-text-color-secondary: #94a3b8;
|
||||
--el-text-color-placeholder: #64748b;
|
||||
|
||||
--el-border-color: #334155;
|
||||
--el-border-color-light: #475569;
|
||||
--el-border-color-lighter: #334155;
|
||||
--el-border-color-extra-light: #1e293b;
|
||||
|
||||
--el-fill-color: #334155;
|
||||
--el-fill-color-light: #1e293b;
|
||||
--el-fill-color-lighter: #0f172a;
|
||||
--el-fill-color-extra-light: #1e293b;
|
||||
--el-fill-color-blank: #1e293b;
|
||||
--el-fill-color-dark: #475569;
|
||||
|
||||
--el-mask-color: rgba(0, 0, 0, 0.6);
|
||||
--el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ── 全局基础 ── */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--gg-bg);
|
||||
color: var(--gg-text);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gg-primary-light);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--gg-accent);
|
||||
}
|
||||
|
||||
/* ── Element Plus 组件覆盖 ── */
|
||||
|
||||
/* Card */
|
||||
.el-card {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
}
|
||||
.el-card__header {
|
||||
border-color: var(--gg-border) !important;
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
.el-dialog {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border: 1px solid var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-lg) !important;
|
||||
}
|
||||
.el-dialog__header {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.el-input__wrapper {
|
||||
background: var(--gg-bg) !important;
|
||||
box-shadow: 0 0 0 1px var(--gg-border) inset !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px var(--gg-border-light) inset !important;
|
||||
}
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--gg-primary) inset !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
.el-input__inner::placeholder {
|
||||
color: var(--gg-text-muted) !important;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
background: var(--gg-bg) !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.el-dropdown-menu {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
padding: 6px !important;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--gg-text) !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
padding: 8px 14px !important;
|
||||
}
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
background: var(--gg-border) !important;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.el-drawer {
|
||||
background: var(--gg-bg-card) !important;
|
||||
}
|
||||
.el-drawer__header {
|
||||
color: var(--gg-text) !important;
|
||||
border-bottom: 1px solid var(--gg-border);
|
||||
margin-bottom: 0 !important;
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
.el-drawer__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.el-button--primary {
|
||||
background: var(--gg-gradient) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
.el-button--primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-button--default {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
.el-button--default:hover {
|
||||
border-color: var(--gg-primary) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.el-badge__content {
|
||||
background-color: var(--gg-danger) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
.el-tag {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
/* Message */
|
||||
.el-message {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
}
|
||||
.el-message__content {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.el-pagination {
|
||||
--el-pagination-button-bg-color: var(--gg-bg-elevated);
|
||||
--el-pagination-hover-color: var(--gg-primary-light);
|
||||
}
|
||||
.el-pager li {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
color: var(--gg-text-secondary) !important;
|
||||
}
|
||||
.el-pager li.is-active {
|
||||
background: var(--gg-gradient) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.el-select-dropdown {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--gg-primary-light) !important;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
.el-checkbox {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
.el-checkbox__label {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.el-time-panel {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
|
||||
/* MessageBox */
|
||||
.el-message-box {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
.el-message-box__title {
|
||||
color: var(--gg-text) !important;
|
||||
}
|
||||
.el-message-box__message {
|
||||
color: var(--gg-text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.el-loading-mask {
|
||||
background: rgba(15, 23, 42, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ── 工具类 ── */
|
||||
.gg-gradient {
|
||||
background: var(--gg-gradient);
|
||||
}
|
||||
|
||||
.gg-glow {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.gg-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.gg-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.gg-text-gradient {
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gg-status-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gg-status-dot--idle { background: var(--gg-success); box-shadow: 0 0 6px var(--gg-success); }
|
||||
.gg-status-dot--working { background: var(--gg-danger); box-shadow: 0 0 6px var(--gg-danger); }
|
||||
.gg-status-dot--in_team { background: var(--gg-info); box-shadow: 0 0 6px var(--gg-info); }
|
||||
.gg-status-dot--away { background: var(--gg-text-muted); }
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--gg-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--gg-border-light);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useNotificationStore } from '@/stores/notification'
|
||||
import InvitationCard from '@/components/team/InvitationCard.vue'
|
||||
|
||||
const store = useNotificationStore()
|
||||
|
||||
onMounted(() => {
|
||||
store.loadPendingInvitations()
|
||||
})
|
||||
|
||||
function onInvitationResponded(id: string, _accepted: boolean) {
|
||||
store.removeInvitation(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="store.showPanel"
|
||||
title="通知"
|
||||
direction="rtl"
|
||||
size="380px"
|
||||
>
|
||||
<div class="notification-panel">
|
||||
<div v-if="store.pendingInvitations.length === 0" class="empty">
|
||||
暂无新通知
|
||||
</div>
|
||||
<div v-else class="invitation-list">
|
||||
<InvitationCard
|
||||
v-for="invitation in store.pendingInvitations"
|
||||
:key="invitation.id"
|
||||
:invitation="invitation"
|
||||
@responded="onInvitationResponded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notification-panel {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.invitation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { createGroup } from '@/api/groups'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
maxMembers: 20
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.name.trim()) {
|
||||
ElMessage.warning('请输入群组名称')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const group = await createGroup({
|
||||
name: form.value.name.trim(),
|
||||
description: form.value.description.trim(),
|
||||
maxMembers: form.value.maxMembers
|
||||
})
|
||||
await groupStore.loadGroups()
|
||||
visible.value = false
|
||||
form.value = { name: '', description: '', maxMembers: 20 }
|
||||
ElMessage.success('群组创建成功')
|
||||
if (group?.id) {
|
||||
router.push({ name: 'GroupView', params: { id: group.id } })
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '创建群组失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="创建群组" width="440px">
|
||||
<div class="create-form">
|
||||
<div class="form-field">
|
||||
<label>群组名称 <span class="required">*</span></label>
|
||||
<el-input v-model="form.name" placeholder="给群组起个名字" maxlength="50" show-word-limit />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>群组描述</label>
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="简单介绍这个群组" maxlength="500" show-word-limit />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>最大成员数</label>
|
||||
<el-input-number v-model="form.maxMembers" :min="2" :max="100" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="handleSubmit">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--gg-danger);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const group = computed(() => groupStore.currentGroup)
|
||||
const members = computed(() => groupStore.currentMembers)
|
||||
const isOwner = computed(() => group.value?.owner === userStore.userId)
|
||||
|
||||
function copyGroupId() {
|
||||
if (group.value?.id) {
|
||||
navigator.clipboard.writeText(group.value.id)
|
||||
ElMessage.success('群组 ID 已复制，分享给好友即可加入')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeMember(userId: string, username: string) {
|
||||
if (!isOwner.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要将 ${username} 移出群组吗？`, '确认', { type: 'warning' })
|
||||
const group = groupStore.currentGroup
|
||||
if (!group) return
|
||||
// 直接更新群组的 members 列表
|
||||
const { pb } = await import('@/api/pocketbase')
|
||||
const newMembers = group.members.filter(id => id !== userId)
|
||||
await pb.collection('groups').update(group.id, { members: newMembers })
|
||||
await groupStore.setCurrentGroup(group.id)
|
||||
ElMessage.success('已移除成员')
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="group" class="members-panel">
|
||||
<div class="panel-header">
|
||||
<h3>群组信息</h3>
|
||||
</div>
|
||||
|
||||
<!-- 分享群组 ID -->
|
||||
<div class="share-section">
|
||||
<label>群组 ID（分享给好友）</label>
|
||||
<div class="share-row">
|
||||
<code class="group-id">{{ group.id }}</code>
|
||||
<button class="copy-btn" @click="copyGroupId">复制</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">成员</span>
|
||||
<span class="info-value">{{ members.length }} / {{ group.maxMembers }}</span>
|
||||
</div>
|
||||
|
||||
<div class="members-list">
|
||||
<div v-for="member in members" :key="member.id" class="member-row">
|
||||
<img :src="member.avatar || '/default-avatar.png'" class="member-avatar" alt="" />
|
||||
<div class="member-info">
|
||||
<span class="member-name">{{ member.username }}</span>
|
||||
<span v-if="member.id === group.owner" class="owner-badge">群主</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="isOwner && member.id !== group.owner && member.id !== userStore.userId"
|
||||
class="remove-btn"
|
||||
@click="removeMember(member.id, member.username)"
|
||||
>
|
||||
移除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.members-panel {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.share-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.share-section label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.share-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.group-id {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 6px 14px;
|
||||
background: var(--gg-gradient);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--gg-border);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.member-row:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.owner-badge {
|
||||
font-size: 11px;
|
||||
padding: 1px 8px;
|
||||
background: var(--gg-gradient);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
padding: 4px 10px;
|
||||
background: none;
|
||||
border: 1px solid var(--gg-danger);
|
||||
border-radius: 4px;
|
||||
color: var(--gg-danger);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { getGroup, joinGroup } from '@/api/groups'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
const groupId = ref('')
|
||||
const groupInfo = ref<any>(null)
|
||||
const loading = ref(false)
|
||||
const joining = ref(false)
|
||||
|
||||
async function searchGroup() {
|
||||
if (!groupId.value.trim()) {
|
||||
ElMessage.warning('请输入群组 ID')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
groupInfo.value = await getGroup(groupId.value.trim())
|
||||
} catch (error) {
|
||||
groupInfo.value = null
|
||||
ElMessage.error('未找到该群组')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleJoin() {
|
||||
if (!groupInfo.value) return
|
||||
joining.value = true
|
||||
try {
|
||||
await joinGroup(groupInfo.value.id)
|
||||
await groupStore.loadGroups()
|
||||
visible.value = false
|
||||
groupId.value = ''
|
||||
groupInfo.value = null
|
||||
ElMessage.success('已申请加入群组，等待群主审核')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '加入群组失败')
|
||||
} finally {
|
||||
joining.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
groupId.value = ''
|
||||
groupInfo.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="加入群组" width="440px" @close="reset">
|
||||
<div class="join-form">
|
||||
<div class="form-field">
|
||||
<label>群组 ID</label>
|
||||
<div class="search-row">
|
||||
<el-input v-model="groupId" placeholder="输入群主分享的群组 ID" />
|
||||
<el-button type="primary" :loading="loading" @click="searchGroup">查找</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="groupInfo" class="group-preview">
|
||||
<div class="preview-header">
|
||||
<h3 class="preview-name">{{ groupInfo.name }}</h3>
|
||||
<span class="preview-members">{{ groupInfo.members?.length || 0 }} / {{ groupInfo.maxMembers }} 人</span>
|
||||
</div>
|
||||
<p v-if="groupInfo.description" class="preview-desc">{{ groupInfo.description }}</p>
|
||||
<el-button type="primary" :loading="joining" @click="handleJoin" style="width:100%; margin-top: 12px;">
|
||||
申请加入
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.join-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-row .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.group-preview {
|
||||
padding: 16px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preview-name {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-members {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.preview-desc {
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { searchGames } from '@/api/games'
|
||||
import type { Game } from '@/types'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'select': [gameName: string]
|
||||
}>()
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
const searchQuery = ref('')
|
||||
const loading = ref(false)
|
||||
const games = ref<Game[]>([])
|
||||
const customGameName = ref('')
|
||||
|
||||
watch(() => props.modelValue, (show) => {
|
||||
if (show) {
|
||||
searchQuery.value = ''
|
||||
customGameName.value = ''
|
||||
games.value = []
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSearch() {
|
||||
if (!searchQuery.value.trim()) {
|
||||
games.value = []
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
games.value = await searchGames(searchQuery.value)
|
||||
} catch (error) {
|
||||
console.error('搜索游戏失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectGame(game: Game) {
|
||||
emit('select', game.name)
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
function confirmCustomGame() {
|
||||
if (customGameName.value.trim()) {
|
||||
emit('select', customGameName.value.trim())
|
||||
visible.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="选择游戏"
|
||||
width="480px"
|
||||
>
|
||||
<div class="game-select">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索游戏..."
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
/>
|
||||
|
||||
<div v-if="loading" class="loading">搜索中...</div>
|
||||
|
||||
<div v-else-if="games.length > 0" class="game-list">
|
||||
<div
|
||||
v-for="game in games"
|
||||
:key="game.id"
|
||||
class="game-item"
|
||||
@click="selectGame(game)"
|
||||
>
|
||||
<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>
|
||||
|
||||
<div v-else-if="searchQuery" class="no-results">
|
||||
未找到匹配的游戏，手动输入：
|
||||
</div>
|
||||
|
||||
<div class="custom-input">
|
||||
<el-input
|
||||
v-model="customGameName"
|
||||
placeholder="手动输入游戏名称"
|
||||
@keyup.enter="confirmCustomGame"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!customGameName.trim()"
|
||||
@click="confirmCustomGame"
|
||||
>
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-select {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading, .no-results {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.game-list {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.game-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.game-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -21,12 +21,18 @@ const idleMembers = computed(() =>
|
||||
)
|
||||
|
||||
async function inviteMember(userId: string, username: string) {
|
||||
const { getActiveTeamSession } = await import('@/api/sessions')
|
||||
const session = await getActiveTeamSession()
|
||||
|
||||
if (!session) {
|
||||
ElMessage.warning('请先创建临时小组')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 这里需要先创建临时小组，或者检查是否有活跃的临时小组
|
||||
// 简化版本：发送邀请
|
||||
await sendInvitation({
|
||||
to: userId,
|
||||
teamSession: '' // 实际使用时需要先创建临时小组
|
||||
teamSession: session.id
|
||||
})
|
||||
ElMessage.success(`已邀请 ${username}`)
|
||||
} catch (error: any) {
|
||||
@@ -75,35 +81,38 @@ async function inviteMember(userId: string, username: string) {
|
||||
|
||||
<style scoped>
|
||||
.idle-members-list {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 32px;
|
||||
color: var(--gg-text-muted);
|
||||
padding: 40px 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
@@ -111,13 +120,15 @@ async function inviteMember(userId: string, username: string) {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
transition: background-color 0.2s;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -125,6 +136,7 @@ async function inviteMember(userId: string, username: string) {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
@@ -136,26 +148,29 @@ async function inviteMember(userId: string, username: string) {
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-note {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
padding: 6px 16px;
|
||||
padding: 6px 18px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--el-color-primary);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,17 +85,23 @@ async function rejectInvitation() {
|
||||
|
||||
<style scoped>
|
||||
.invitation-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.invitation-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.12);
|
||||
}
|
||||
|
||||
.invitation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -103,6 +109,7 @@ async function rejectInvitation() {
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.invitation-info {
|
||||
@@ -113,32 +120,35 @@ async function rejectInvitation() {
|
||||
|
||||
.inviter-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.invitation-text {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.session-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.session-name {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.invitation-actions {
|
||||
@@ -150,29 +160,32 @@ async function rejectInvitation() {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.accept {
|
||||
background: var(--el-color-primary);
|
||||
background: var(--gg-gradient-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.reject {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text);
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.reject:hover {
|
||||
background: var(--el-fill-color-dark);
|
||||
border-color: var(--gg-danger);
|
||||
color: var(--gg-danger);
|
||||
}
|
||||
|
||||
.reject-input {
|
||||
@@ -181,15 +194,23 @@ async function rejectInvitation() {
|
||||
|
||||
.reject-input textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
font-size: 13px;
|
||||
resize: none;
|
||||
background: var(--gg-bg);
|
||||
color: var(--gg-text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.reject-input textarea::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.reject-input textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--el-color-primary);
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { sendInvitation } from '@/api/invitations'
|
||||
import { createTeamSession } from '@/api/sessions'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GameSelectDialog from './GameSelectDialog.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
userId: string
|
||||
}>()
|
||||
|
||||
const teamStore = useTeamStore()
|
||||
const groupStore = useGroupStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const loading = ref(false)
|
||||
const showGameSelect = ref(false)
|
||||
|
||||
async function handleInvite() {
|
||||
if (teamStore.currentSession) {
|
||||
await sendInvite(teamStore.currentSession.id)
|
||||
} else {
|
||||
showGameSelect.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGameSelect(gameName: string) {
|
||||
loading.value = true
|
||||
try {
|
||||
const session = await createTeamSession({
|
||||
sourceGroup: groupStore.currentGroupId,
|
||||
name: `${userStore.user?.username || ''}的车队`,
|
||||
gameName,
|
||||
members: [userStore.userId]
|
||||
})
|
||||
teamStore.currentSession = session
|
||||
await sendInvite(session.id)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '创建临时小组失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function sendInvite(teamSessionId: string) {
|
||||
loading.value = true
|
||||
try {
|
||||
await sendInvitation({
|
||||
to: props.userId,
|
||||
teamSession: teamSessionId
|
||||
})
|
||||
ElMessage.success('邀请已发送')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '邀请发送失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="handleInvite"
|
||||
>
|
||||
邀请
|
||||
</el-button>
|
||||
|
||||
<GameSelectDialog
|
||||
v-model="showGameSelect"
|
||||
@select="handleGameSelect"
|
||||
/>
|
||||
</template>
|
||||
@@ -3,12 +3,20 @@
|
||||
import { computed } from 'vue'
|
||||
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
|
||||
import { UserStatusMap, type UserStatus } from '@/types'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const currentStatus = computed(() => userStore.userStatus)
|
||||
const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
|
||||
const statusDotClass = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
idle: 'gg-status-dot--idle',
|
||||
working: 'gg-status-dot--working',
|
||||
in_team: 'gg-status-dot--in_team',
|
||||
away: 'gg-status-dot--away'
|
||||
}
|
||||
return map[currentStatus.value] || 'gg-status-dot--idle'
|
||||
})
|
||||
const statusText = computed(() => UserStatusMap[currentStatus.value])
|
||||
|
||||
async function setStatus(status: UserStatus) {
|
||||
@@ -19,22 +27,22 @@ async function setStatus(status: UserStatus) {
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="setStatus">
|
||||
<span class="status-toggle">
|
||||
<span class="status-icon">{{ statusIcon }}</span>
|
||||
<span class="gg-status-dot" :class="statusDotClass" />
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="idle">
|
||||
<span class="menu-item">🟢 空闲</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--idle" /> 空闲</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="working">
|
||||
<span class="menu-item">🔴 工作中</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--working" /> 工作中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="in_team" :disabled="currentStatus !== 'in_team'">
|
||||
<span class="menu-item">🔵 组队中</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--in_team" /> 组队中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="away">
|
||||
<span class="menu-item">⚫ 离开</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--away" /> 离开</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@@ -47,21 +55,22 @@ async function setStatus(status: UserStatus) {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.status-toggle:hover {
|
||||
background-color: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 16px;
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
|
||||
@@ -79,10 +79,11 @@ async function endGame() {
|
||||
|
||||
<style scoped>
|
||||
.team-session-panel {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
@@ -94,35 +95,40 @@ async function endGame() {
|
||||
|
||||
.session-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.session-status {
|
||||
padding: 4px 12px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
background: var(--gg-primary-light);
|
||||
color: var(--gg-bg);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.session-game {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.game-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.members-section {
|
||||
@@ -133,6 +139,7 @@ async function endGame() {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.members-list {
|
||||
@@ -145,9 +152,16 @@ async function endGame() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -155,34 +169,40 @@ async function endGame() {
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.end-game-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient-danger);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.end-game-btn:hover {
|
||||
background: var(--el-color-danger-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.no-session {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 48px 32px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,6 +99,7 @@ function handleOpen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -109,19 +110,20 @@ function handleOpen() {
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
padding: 12px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
}
|
||||
|
||||
.form-hint p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-info);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import './assets/design.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { Invitation } from '@/types'
|
||||
import { getPendingInvitations } from '@/api/invitations'
|
||||
|
||||
export const useNotificationStore = defineStore('notification', () => {
|
||||
const pendingInvitations = ref<Invitation[]>([])
|
||||
const loading = ref(false)
|
||||
const showPanel = ref(false)
|
||||
|
||||
const unreadCount = computed(() => pendingInvitations.value.length)
|
||||
|
||||
async function loadPendingInvitations() {
|
||||
try {
|
||||
loading.value = true
|
||||
pendingInvitations.value = await getPendingInvitations()
|
||||
} catch (error) {
|
||||
console.error('加载待处理邀请失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function removeInvitation(invitationId: string) {
|
||||
pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitationId)
|
||||
}
|
||||
|
||||
function togglePanel() {
|
||||
showPanel.value = !showPanel.value
|
||||
}
|
||||
|
||||
return {
|
||||
pendingInvitations,
|
||||
loading,
|
||||
showPanel,
|
||||
unreadCount,
|
||||
loadPendingInvitations,
|
||||
removeInvitation,
|
||||
togglePanel
|
||||
}
|
||||
})
|
||||
@@ -89,13 +89,17 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.filters {
|
||||
@@ -109,14 +113,16 @@ function handleSearch() {
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 80px 32px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 80px 32px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
@@ -126,39 +132,46 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.game-card {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
border-radius: var(--gg-radius-sm) var(--gg-radius-sm) 0 0;
|
||||
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
padding: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
@@ -169,10 +182,11 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
background: var(--gg-bg-elevated);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
+425
-110
@@ -1,17 +1,56 @@
|
||||
<!-- src/views/GroupView.vue -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, computed } 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'
|
||||
import GroupMembersPanel from '@/components/group/GroupMembersPanel.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const groupId = route.params.id as string
|
||||
|
||||
const group = computed(() => groupStore.currentGroup)
|
||||
const members = computed(() => groupStore.currentMembers)
|
||||
|
||||
const ownerName = computed(() => {
|
||||
const owner = members.value.find(m => m.id === group.value?.owner)
|
||||
return owner?.username || '未知'
|
||||
})
|
||||
|
||||
const membersByStatus = computed(() => {
|
||||
const groups: Record<string, typeof members.value> = {
|
||||
idle: [],
|
||||
in_team: [],
|
||||
working: [],
|
||||
away: []
|
||||
}
|
||||
for (const m of members.value) {
|
||||
if (groups[m.status]) {
|
||||
groups[m.status].push(m)
|
||||
} else {
|
||||
groups.away.push(m)
|
||||
}
|
||||
}
|
||||
return groups
|
||||
})
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
idle: '空闲',
|
||||
in_team: '组队中',
|
||||
working: '工作中',
|
||||
away: '离开'
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
idle: 'var(--gg-success)',
|
||||
in_team: 'var(--gg-info)',
|
||||
working: 'var(--gg-danger)',
|
||||
away: 'var(--gg-text-muted)'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await groupStore.setCurrentGroup(groupId)
|
||||
})
|
||||
@@ -23,55 +62,81 @@ async function refreshMembers() {
|
||||
|
||||
<template>
|
||||
<div class="group-view">
|
||||
<div class="page-header">
|
||||
<h1>{{ groupStore.currentGroup?.name }}</h1>
|
||||
<p class="description">{{ groupStore.currentGroup?.description }}</p>
|
||||
<!-- 顶部群组信息条 -->
|
||||
<section class="group-header">
|
||||
<div class="header-main">
|
||||
<h1 class="group-name">{{ group?.name }}</h1>
|
||||
<span class="member-count-badge">{{ members.length }} 成员</span>
|
||||
</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 }}
|
||||
<p class="group-desc">{{ group?.description || '暂无群组简介' }}</p>
|
||||
<div class="header-meta">
|
||||
<span class="meta-item">
|
||||
<span class="meta-label">群主:</span>
|
||||
<span class="meta-value">{{ ownerName }}</span>
|
||||
</span>
|
||||
<span class="meta-divider">|</span>
|
||||
<span class="meta-item">
|
||||
<span class="meta-label">容量:</span>
|
||||
<span class="meta-value">{{ members.length }} / {{ group?.maxMembers || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主体双栏 -->
|
||||
<div class="body-grid">
|
||||
<!-- 左列: 主内容 -->
|
||||
<div class="left-col">
|
||||
<!-- 当前临时小组 -->
|
||||
<section class="panel-block">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">⚔</span> 当前临时小组
|
||||
</h2>
|
||||
<div class="panel-card">
|
||||
<TeamSessionPanel />
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<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>
|
||||
<!-- 空闲成员 -->
|
||||
<section class="panel-block">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">🟢</span> 空闲成员
|
||||
</h2>
|
||||
<div class="panel-card">
|
||||
<IdleMembersList status="idle" />
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<idle-membersList />
|
||||
</el-card>
|
||||
<!-- 所有成员 (按状态分组) -->
|
||||
<section class="panel-block">
|
||||
<div class="block-title-row">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">👥</span> 所有成员
|
||||
</h2>
|
||||
<button class="refresh-btn" @click="refreshMembers">刷新</button>
|
||||
</div>
|
||||
<div class="panel-card">
|
||||
<div v-for="(list, status) in membersByStatus" :key="status" class="status-group">
|
||||
<div class="status-group-header">
|
||||
<span class="status-dot" :style="{ background: statusColors[status] }" />
|
||||
<span class="status-group-label">{{ statusLabels[status] }}</span>
|
||||
<span class="status-group-count">{{ list.length }}</span>
|
||||
</div>
|
||||
<div v-if="list.length === 0" class="empty-row">暂无</div>
|
||||
<div v-else class="member-row-list">
|
||||
<div v-for="m in list" :key="m.id" class="member-row">
|
||||
<img :src="m.avatar || '/default-avatar.png'" :alt="m.username" class="avatar" />
|
||||
<span class="member-name">{{ m.username }}</span>
|
||||
<span v-if="m.statusNote" class="member-note">{{ m.statusNote }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 右列: 群组成员管理面板 -->
|
||||
<aside class="right-col">
|
||||
<GroupMembersPanel />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,80 +145,330 @@ async function refreshMembers() {
|
||||
<style scoped>
|
||||
.group-view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
/* ── 顶部群组信息条 ── */
|
||||
.group-header {
|
||||
padding: 24px 28px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
.group-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gg-gradient);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.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;
|
||||
.member-count-badge {
|
||||
font-size: 13px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-divider {
|
||||
color: var(--gg-border);
|
||||
}
|
||||
|
||||
/* ── 主体双栏 ── */
|
||||
.body-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.left-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ── 左列面板 ── */
|
||||
.panel-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.block-title-row .block-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 5px 16px;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
border-color: var(--gg-primary);
|
||||
color: var(--gg-primary-light);
|
||||
}
|
||||
|
||||
/* ── 成员状态分组 ── */
|
||||
.status-group {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.status-group + .status-group {
|
||||
border-top: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.status-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-group-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-group-count {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.empty-row {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.member-row-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.member-row:hover {
|
||||
background: var(--gg-bg-elevated);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.member-note {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ── 右侧信息卡片 ── */
|
||||
.info-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
color: var(--gg-text);
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.info-value.highlight {
|
||||
color: var(--gg-primary-light);
|
||||
}
|
||||
|
||||
/* ── 状态统计 ── */
|
||||
.status-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: grid;
|
||||
grid-template-columns: 8px auto 1fr 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stat-bar-bg {
|
||||
height: 4px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.stat-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
+303
-118
@@ -1,20 +1,29 @@
|
||||
<!-- src/views/Home.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getPopularGames } from '@/api/games'
|
||||
import { UserStatusMap } from '@/types'
|
||||
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 userStore = useUserStore()
|
||||
|
||||
const popularGames = ref<Game[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const statusDotClass = computed(() => {
|
||||
const s = userStore.userStatus
|
||||
return `gg-status-dot gg-status-dot--${s}`
|
||||
})
|
||||
|
||||
const statusText = computed(() => UserStatusMap[userStore.userStatus] || '未知')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadPopularGames()
|
||||
})
|
||||
@@ -38,211 +47,387 @@ function selectGroup(groupId: string) {
|
||||
|
||||
<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>
|
||||
<!-- 欢迎区 -->
|
||||
<section class="welcome-section">
|
||||
<h1 class="welcome-title">
|
||||
欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.username || '玩家' }}</span>!
|
||||
</h1>
|
||||
<div class="status-line">
|
||||
<span :class="statusDotClass" />
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
<span v-if="userStore.user?.statusNote" class="status-note">{{ userStore.user.statusNote }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty">
|
||||
<el-empty description="暂无群组" :image-size="80" />
|
||||
<!-- 主内容双栏 -->
|
||||
<div class="content-grid">
|
||||
<!-- 左列: 我的群组 -->
|
||||
<section class="section groups-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">🎮</span> 我的群组
|
||||
</h2>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🎮</div>
|
||||
<p class="empty-text">暂无群组</p>
|
||||
<p class="empty-hint">创建或加入一个群组，开始组队冒险吧</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="group-list">
|
||||
<div v-else class="group-grid">
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
class="group-card"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<div class="group-info">
|
||||
<div class="group-card-header">
|
||||
<span class="group-name">{{ group.name }}</span>
|
||||
<span class="group-members">{{ group.members.length }} 成员</span>
|
||||
<span class="member-badge">{{ group.members.length }} 人</span>
|
||||
</div>
|
||||
<p class="group-desc">{{ group.description || '暂无简介' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 当前临时小组 -->
|
||||
<team-session-panel />
|
||||
<!-- 右列: 当前临时小组 -->
|
||||
<section class="section session-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">⚔</span> 当前临时小组
|
||||
</h2>
|
||||
<div class="session-card">
|
||||
<TeamSessionPanel />
|
||||
</div>
|
||||
|
||||
<div class="idle-section">
|
||||
<IdleMembersList status="idle" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 热门游戏 -->
|
||||
<el-card class="card mt-16">
|
||||
<template #header>
|
||||
<h3>热门游戏</h3>
|
||||
</template>
|
||||
<section class="section games-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">🔥</span> 热门游戏
|
||||
</h2>
|
||||
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="games-grid">
|
||||
<div v-else-if="popularGames.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🎮</div>
|
||||
<p class="empty-text">暂无热门游戏</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="games-scroll">
|
||||
<div
|
||||
v-for="game in popularGames"
|
||||
:key="game.id"
|
||||
class="game-card"
|
||||
@click="router.push({ name: 'GamesLibrary' })"
|
||||
>
|
||||
<div class="game-cover-wrap">
|
||||
<img
|
||||
:src="game.cover || '/game-placeholder.png'"
|
||||
:alt="game.name"
|
||||
class="game-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<span class="game-name">{{ game.name }}</span>
|
||||
<span class="game-platform">{{ game.platform }}</span>
|
||||
<span v-if="game.platform" class="game-platform-tag">{{ 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>
|
||||
</section>
|
||||
</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;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* ── 欢迎区 ── */
|
||||
.welcome-section {
|
||||
padding: 28px 32px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
.welcome-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gg-gradient);
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 12px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-members {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
.status-note {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--el-text-color-secondary);
|
||||
/* ── 通用 section ── */
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── 双栏内容 ── */
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr 340px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
/* ── 群组区 ── */
|
||||
.group-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 18px 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
|
||||
}
|
||||
|
||||
.group-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.18);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.group-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 临时小组区 ── */
|
||||
.session-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.session-card,
|
||||
.idle-section {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 热门游戏 ── */
|
||||
.games-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.games-scroll {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.games-scroll::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.games-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--gg-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.game-card:hover .game-cover-wrap {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.game-cover-wrap {
|
||||
width: 160px;
|
||||
height: 200px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--gg-bg-elevated);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
.game-platform-tag {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
color: var(--gg-accent-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px dashed var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0 0 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── 加载状态 ── */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--gg-border);
|
||||
border-top-color: var(--gg-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
+347
-90
@@ -1,197 +1,454 @@
|
||||
<!-- src/views/Layout.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
import { useNotificationStore } from '@/stores/notification'
|
||||
import StatusToggle from '@/components/team/StatusToggle.vue'
|
||||
import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
|
||||
import { ElBadge, ElButton, ElIcon } from 'element-plus'
|
||||
import NotificationPanel from '@/components/common/NotificationPanel.vue'
|
||||
import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
|
||||
import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
const groupStore = useGroupStore()
|
||||
const teamStore = useTeamStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
|
||||
const showScheduleModal = ref(false)
|
||||
const pendingCount = ref(0)
|
||||
const showCreateGroup = ref(false)
|
||||
const showJoinGroup = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.initUser()
|
||||
await groupStore.loadGroups()
|
||||
await teamStore.loadActiveSession()
|
||||
pendingCount.value = await teamStore.getPendingCount()
|
||||
await notificationStore.loadPendingInvitations()
|
||||
})
|
||||
|
||||
async function handleLogout() {
|
||||
function handleLogout() {
|
||||
userStore.logout()
|
||||
router.push({ name: 'Login' })
|
||||
}
|
||||
|
||||
function showInviteModal() {
|
||||
// TODO: 实现邀请模态框
|
||||
function selectGroup(groupId: string) {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
router.push({ name: 'Home' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="logo">Game Group</h1>
|
||||
<div class="app-layout">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-top">
|
||||
<div class="logo" @click="goHome">
|
||||
<span class="logo-icon">🎮</span>
|
||||
<span class="logo-text">Game Group</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<nav class="nav">
|
||||
<router-link to="/" class="nav-link" active-class="active">
|
||||
首页
|
||||
<nav class="sidebar-nav">
|
||||
<router-link to="/" class="nav-item" active-class="nav-item--active">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span>首页</span>
|
||||
</router-link>
|
||||
<router-link to="/games" class="nav-link" active-class="active">
|
||||
游戏库
|
||||
<router-link to="/games" class="nav-item" active-class="nav-item--active">
|
||||
<span class="nav-icon">🎯</span>
|
||||
<span>游戏库</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-divider" />
|
||||
|
||||
<div class="sidebar-groups">
|
||||
<div class="section-header">
|
||||
<span class="section-title">我的群组</span>
|
||||
<div class="section-actions">
|
||||
<button class="section-btn" @click="showCreateGroup = true" title="创建群组">+</button>
|
||||
<button class="section-btn" @click="showJoinGroup = true" title="加入群组">🔗</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="groupStore.groups.length === 0" class="empty-groups">
|
||||
暂无群组
|
||||
</div>
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
:class="{ 'group-item--active': route.params.id === group.id }"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<span class="group-name">{{ group.name }}</span>
|
||||
<span class="group-count">{{ group.members?.length || 0 }}</span>
|
||||
</div>
|
||||
</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">
|
||||
<div class="sidebar-bottom">
|
||||
<div class="sidebar-divider" />
|
||||
<div class="user-section">
|
||||
<StatusToggle />
|
||||
<button class="schedule-btn" @click="showScheduleModal = true" title="设置工作时间">
|
||||
⏰
|
||||
</button>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<img
|
||||
:src="userStore.user?.avatar || '/default-avatar.png'"
|
||||
class="user-avatar"
|
||||
alt=""
|
||||
/>
|
||||
<span class="user-name">{{ userStore.user?.username }}</span>
|
||||
<button class="logout-btn" @click="handleLogout" title="退出登录">
|
||||
🚪
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="main-wrapper">
|
||||
<header class="top-header">
|
||||
<h2 class="page-title">
|
||||
{{ $route.name === 'GroupView' ? groupStore.currentGroup?.name : $route.name === 'GamesLibrary' ? '游戏库' : $route.name === 'Profile' ? '个人中心' : $route.name === 'Settings' ? '设置' : '首页' }}
|
||||
</h2>
|
||||
<div class="header-actions">
|
||||
<button class="icon-btn" @click="notificationStore.togglePanel()">
|
||||
<span v-if="notificationStore.unreadCount > 0" class="badge">
|
||||
{{ notificationStore.unreadCount }}
|
||||
</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>
|
||||
🔔
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<main class="main">
|
||||
<main class="main-content">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 工作时间设置弹窗 -->
|
||||
<work-schedule-modal v-model="showScheduleModal" />
|
||||
<!-- 弹窗 -->
|
||||
<WorkScheduleModal v-model="showScheduleModal" />
|
||||
<NotificationPanel />
|
||||
<CreateGroupDialog v-model="showCreateGroup" />
|
||||
<JoinGroupDialog v-model="showJoinGroup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--el-bg-color-page);
|
||||
background: var(--gg-bg);
|
||||
}
|
||||
|
||||
.header {
|
||||
/* ── 侧边栏 ── */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
background: var(--gg-bg-card);
|
||||
border-right: 1px solid var(--gg-border);
|
||||
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;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sidebar-top {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
flex: 1;
|
||||
/* ── 导航 ── */
|
||||
.sidebar-nav {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
.nav-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text-secondary);
|
||||
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-item:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
.nav-item--active {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.nav-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ── 分割线 ── */
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: var(--gg-border);
|
||||
margin: 12px 20px;
|
||||
}
|
||||
|
||||
/* ── 群组列表 ── */
|
||||
.sidebar-groups {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
padding: 4px 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.section-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: 6px;
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.section-btn:hover {
|
||||
border-color: var(--gg-primary);
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.empty-groups {
|
||||
text-align: center;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 13px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
}
|
||||
|
||||
.group-item--active {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
border-left: 3px solid var(--gg-primary);
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
background: var(--gg-bg-elevated);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ── 底部用户区 ── */
|
||||
.sidebar-bottom {
|
||||
padding: 0 12px 16px;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.schedule-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.user-dropdown:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
.schedule-btn:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
.logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── 右侧主区域 ── */
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
margin-left: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 28px;
|
||||
background: var(--gg-bg-card);
|
||||
border-bottom: 1px solid var(--gg-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
position: relative;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: var(--gg-danger);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+143
-30
@@ -40,8 +40,17 @@ function goToRegister() {
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
<div class="stars stars--sm" aria-hidden="true"></div>
|
||||
|
||||
<div class="login-card">
|
||||
<h1 class="title">登录 Game Group</h1>
|
||||
<div class="card-header">
|
||||
<h1 class="brand">
|
||||
<span class="brand-text">Game Group</span>
|
||||
</h1>
|
||||
<p class="subtitle">登录你的账号</p>
|
||||
</div>
|
||||
|
||||
<form class="login-form" @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
@@ -66,6 +75,7 @@ function goToRegister() {
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn" :disabled="loading">
|
||||
<span v-if="loading" class="btn-loader"></span>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</form>
|
||||
@@ -79,36 +89,104 @@ function goToRegister() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.login-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stars--sm {
|
||||
background-image:
|
||||
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
||||
animation: twinkle 6s ease-in-out 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 毛玻璃卡片 ── */
|
||||
.login-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
max-width: 420px;
|
||||
padding: 48px 40px 40px;
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
border-radius: var(--gg-radius-xl);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
/* ── 头部品牌 ── */
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
color: #333;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── 表单 ── */
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -118,59 +196,94 @@ function goToRegister() {
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--gg-text-secondary);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
/* ── 提交按钮 ── */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
padding: 14px;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
transition: box-shadow 0.3s, transform 0.15s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ── 底部链接 ── */
|
||||
.footer-links {
|
||||
margin-top: 24px;
|
||||
margin-top: 28px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
color: var(--gg-primary-light);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--gg-accent-light);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,56 +11,130 @@ function goHome() {
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
|
||||
<div class="content">
|
||||
<h1>404</h1>
|
||||
<p>抱歉，您访问的页面不存在</p>
|
||||
<div class="error-code">404</div>
|
||||
<h1 class="error-title">迷失在星域之中</h1>
|
||||
<p class="error-desc">你访问的页面已消失在浩瀚宇宙中，或许它从未存在过。</p>
|
||||
<button class="home-btn" @click="goHome">
|
||||
返回首页
|
||||
<span class="btn-icon">➤</span>
|
||||
返回基地
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.not-found {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 内容区 ── */
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
/* ── 404 数字 ── */
|
||||
.error-code {
|
||||
font-size: 140px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.35));
|
||||
animation: pulse-glow 3s ease-in-out infinite alternate;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0 0 24px;
|
||||
@keyframes pulse-glow {
|
||||
0% { filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.25)); }
|
||||
100% { filter: drop-shadow(0 0 50px rgba(168, 85, 247, 0.4)); }
|
||||
}
|
||||
|
||||
/* ── 标题 ── */
|
||||
.error-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--gg-text);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
/* ── 描述文字 ── */
|
||||
.error-desc {
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0 0 36px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── 返回按钮 ── */
|
||||
.home-btn {
|
||||
padding: 12px 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 36px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
transition: box-shadow 0.3s, transform 0.15s;
|
||||
}
|
||||
|
||||
.home-btn:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.home-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -77,10 +77,14 @@ function handleAvatarUpload() {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
@@ -101,6 +105,8 @@ function handleAvatarUpload() {
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -111,13 +117,16 @@ function handleAvatarUpload() {
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-display {
|
||||
padding: 8px 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 6px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
||||
+142
-29
@@ -56,8 +56,17 @@ function goToLogin() {
|
||||
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
<div class="stars stars--sm" aria-hidden="true"></div>
|
||||
|
||||
<div class="register-card">
|
||||
<h1 class="title">注册 Game Group</h1>
|
||||
<div class="card-header">
|
||||
<h1 class="brand">
|
||||
<span class="brand-text">Game Group</span>
|
||||
</h1>
|
||||
<p class="subtitle">创建你的账号</p>
|
||||
</div>
|
||||
|
||||
<form class="register-form" @submit.prevent="handleRegister">
|
||||
<div class="form-group">
|
||||
@@ -103,6 +112,7 @@ function goToLogin() {
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn" :disabled="loading">
|
||||
<span v-if="loading" class="btn-loader"></span>
|
||||
{{ loading ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
</form>
|
||||
@@ -116,36 +126,104 @@ function goToLogin() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.register-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stars--sm {
|
||||
background-image:
|
||||
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
||||
animation: twinkle 6s ease-in-out 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 毛玻璃卡片 ── */
|
||||
.register-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
max-width: 420px;
|
||||
padding: 44px 40px 40px;
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
border-radius: var(--gg-radius-xl);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
/* ── 头部品牌 ── */
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
color: #333;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── 表单 ── */
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -155,59 +233,94 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--gg-text-secondary);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
/* ── 提交按钮 ── */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
padding: 14px;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
transition: box-shadow 0.3s, transform 0.15s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ── 底部链接 ── */
|
||||
.footer-links {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
color: var(--gg-primary-light);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--gg-accent-light);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,12 +56,16 @@ const showScheduleModal = ref(false)
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
@@ -69,9 +73,15 @@ const showScheduleModal = ref(false)
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.setting-item:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
@@ -80,33 +90,39 @@ const showScheduleModal = ref(false)
|
||||
|
||||
.setting-info h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-btn {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: none;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.setting-btn:hover:not(:disabled) {
|
||||
background: var(--el-fill-color);
|
||||
border-color: var(--el-border-color-darker);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.setting-btn:disabled {
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text-muted);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user