feat: add GameGroup2 project with frontend and backend
- Add .gitignore for Node.js and PocketBase projects - Add frontend (Vue 3 + Vite + TypeScript) - Add backend (PocketBase) - Add deployment scripts and Docker compose configs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
congsh
+38
@@ -0,0 +1,38 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# PocketBase
|
||||||
|
backend/pb_data/
|
||||||
|
backend/pb_migrations.bak/
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
.cache/
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
# Game Group V2 部署指南
|
||||||
|
|
||||||
|
## 端口分配
|
||||||
|
|
||||||
|
| 服务 | 端口 |
|
||||||
|
|------|------|
|
||||||
|
| PocketBase | 8711 |
|
||||||
|
| Dev 前端 | 7033 |
|
||||||
|
| UAT 前端 | 7034 |
|
||||||
|
|
||||||
|
## 部署脚本
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 部署 PocketBase 后端
|
||||||
|
./deploy-backend.sh
|
||||||
|
|
||||||
|
# 部署 Dev 前端
|
||||||
|
./deploy-dev.sh
|
||||||
|
|
||||||
|
# 部署 UAT 前端
|
||||||
|
./deploy-uat.sh
|
||||||
|
|
||||||
|
# 停止所有服务
|
||||||
|
./stop-all.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
## 访问地址
|
||||||
|
|
||||||
|
| 服务 | 地址 |
|
||||||
|
|------|------|
|
||||||
|
| PocketBase API | http://192.168.1.14:8711/api/ |
|
||||||
|
| PocketBase 管理面板 | http://192.168.1.14:8711/_/ |
|
||||||
|
| Dev 环境 | http://192.168.1.14:7033 |
|
||||||
|
| UAT 环境 | http://192.168.1.14:7034 |
|
||||||
|
|
||||||
|
## 手动操作
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 只启动后端
|
||||||
|
docker compose -f docker-compose.backend.yml up -d
|
||||||
|
|
||||||
|
# 只启动 Dev
|
||||||
|
docker compose -f docker-compose.dev.yml up -d --build
|
||||||
|
|
||||||
|
# 只启动 UAT
|
||||||
|
docker compose -f docker-compose.uat.yml up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 查看日志
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 后端日志
|
||||||
|
docker logs -f gamegroup-pb
|
||||||
|
|
||||||
|
# Dev 日志
|
||||||
|
docker logs -f gamegroup-frontend-dev
|
||||||
|
|
||||||
|
# UAT 日志
|
||||||
|
docker logs -f gamegroup-frontend-uat
|
||||||
|
```
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
PB_PORT=8090
|
PB_PORT=8090
|
||||||
PB_DATA=./pb_data
|
PB_DATA=./pb_data
|
||||||
PB_MIGRATIONS=./pb_migrations
|
PB_MIGRATIONS=./pb_migrations
|
||||||
|
PB_UID=1000
|
||||||
|
PB_GID=1000
|
||||||
|
|||||||
@@ -2,10 +2,11 @@ version: '3.8'
|
|||||||
|
|
||||||
services:
|
services:
|
||||||
pocketbase:
|
pocketbase:
|
||||||
image: ghcr.io/muchobien/pocketbase:v0.22.4
|
image: ghcr.io/muchobien/pocketbase:0.22.4
|
||||||
container_name: gamegroup-pb
|
container_name: gamegroup-pb
|
||||||
|
user: "${PB_UID:-1000}:${PB_GID:-1000}"
|
||||||
ports:
|
ports:
|
||||||
- "${PB_PORT:-8090}:8090"
|
- "${PB_PORT:-8711}:8090"
|
||||||
volumes:
|
volumes:
|
||||||
- ./pb_data:/pb_data
|
- ./pb_data:/pb_data
|
||||||
- ./pb_migrations:/pb_migrations
|
- ./pb_migrations:/pb_migrations
|
||||||
|
|||||||
@@ -1,781 +0,0 @@
|
|||||||
/// <reference path="../pb_data/types.d.ts" />
|
|
||||||
|
|
||||||
migrate((app) => {
|
|
||||||
// Users collection
|
|
||||||
app.deleteCollection("users");
|
|
||||||
app.createCollection("users", {
|
|
||||||
id: "users",
|
|
||||||
name: "users",
|
|
||||||
type: "auth",
|
|
||||||
fields: [
|
|
||||||
{
|
|
||||||
id: "new_aQr3td8dJl",
|
|
||||||
name: "username",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: true,
|
|
||||||
options: {
|
|
||||||
min: 3,
|
|
||||||
max: 20,
|
|
||||||
pattern: "^[a-zA-Z0-9_]+$",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Jx4zWq9kLm",
|
|
||||||
name: "displayName",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 50,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Xp7vR2sT4u",
|
|
||||||
name: "avatar",
|
|
||||||
type: "url",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
exceptDomains: null,
|
|
||||||
onlyDomains: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Nh8gD3fF6g",
|
|
||||||
name: "bio",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 500,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Vc5bH8kJ7o",
|
|
||||||
name: "region",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"cn",
|
|
||||||
"us",
|
|
||||||
"eu",
|
|
||||||
"asia",
|
|
||||||
"other"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Tf6rK9mP8q",
|
|
||||||
name: "preferences",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Dg7hL0nR9s",
|
|
||||||
name: "stats",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Wm8jO1pS0t",
|
|
||||||
name: "isActive",
|
|
||||||
type: "bool",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Yn9kQ2qT1u",
|
|
||||||
name: "lastSeen",
|
|
||||||
type: "date",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
indexes: [
|
|
||||||
"create index users_username_idx on users (username)",
|
|
||||||
"create index users_region_idx on users (region)",
|
|
||||||
"create index users_isActive_idx on users (isActive)",
|
|
||||||
],
|
|
||||||
listRule: "id = @request.auth.id",
|
|
||||||
viewRule: "id = @request.auth.id",
|
|
||||||
createRule: null,
|
|
||||||
updateRule: "id = @request.auth.id",
|
|
||||||
deleteRule: "id = @request.auth.id",
|
|
||||||
options: {
|
|
||||||
allowEmailAuth: true,
|
|
||||||
allowOAuth2Auth: false,
|
|
||||||
allowUsernameAuth: false,
|
|
||||||
exceptEmailDomains: null,
|
|
||||||
manageRule: null,
|
|
||||||
minPasswordLength: 8,
|
|
||||||
onlyEmailDomains: null,
|
|
||||||
requireEmail: false,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Games collection
|
|
||||||
app.deleteCollection("games");
|
|
||||||
app.createCollection("games", {
|
|
||||||
id: "games",
|
|
||||||
name: "games",
|
|
||||||
type: "base",
|
|
||||||
fields: [
|
|
||||||
{
|
|
||||||
id: "new_Zp3wT8sV5x",
|
|
||||||
name: "name",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: true,
|
|
||||||
options: {
|
|
||||||
min: 1,
|
|
||||||
max: 100,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Bq4xU9tW6y",
|
|
||||||
name: "nameEn",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 100,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Cr5yV0uX7z",
|
|
||||||
name: "cover",
|
|
||||||
type: "url",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
exceptDomains: null,
|
|
||||||
onlyDomains: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ds6zW1vY8a",
|
|
||||||
name: "description",
|
|
||||||
type: "editor",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
convertUrls: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Et7aX2wZ9b",
|
|
||||||
name: "type",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"fps",
|
|
||||||
"moba",
|
|
||||||
"rpg",
|
|
||||||
"strategy",
|
|
||||||
"racing",
|
|
||||||
"sports",
|
|
||||||
"casual",
|
|
||||||
"other"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Fu8bY3xA0c",
|
|
||||||
name: "platform",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"pc",
|
|
||||||
"mobile",
|
|
||||||
"console",
|
|
||||||
"crossplay"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Gv9cZ4yB1d",
|
|
||||||
name: "maxTeamSize",
|
|
||||||
type: "number",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: 2,
|
|
||||||
max: 100,
|
|
||||||
noDecimal: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Hw0dA5zC2e",
|
|
||||||
name: "tags",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 5000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ix1eB6aD3f",
|
|
||||||
name: "isActive",
|
|
||||||
type: "bool",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
indexes: [
|
|
||||||
"create index games_name_idx on games (name)",
|
|
||||||
"create index games_type_idx on games (type)",
|
|
||||||
"create index games_platform_idx on games (platform)",
|
|
||||||
"create index games_isActive_idx on games (isActive)",
|
|
||||||
],
|
|
||||||
listRule: "",
|
|
||||||
viewRule: "",
|
|
||||||
createRule: null,
|
|
||||||
updateRule: null,
|
|
||||||
deleteRule: null,
|
|
||||||
options: {
|
|
||||||
allowEmailAuth: false,
|
|
||||||
allowOAuth2Auth: false,
|
|
||||||
allowUsernameAuth: false,
|
|
||||||
exceptEmailDomains: null,
|
|
||||||
manageRule: null,
|
|
||||||
onlyEmailDomains: null,
|
|
||||||
requireEmail: false,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Groups collection
|
|
||||||
app.deleteCollection("groups");
|
|
||||||
app.createCollection("groups", {
|
|
||||||
id: "groups",
|
|
||||||
name: "groups",
|
|
||||||
type: "base",
|
|
||||||
fields: [
|
|
||||||
{
|
|
||||||
id: "new_Jy2fC7bE4g",
|
|
||||||
name: "name",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: 3,
|
|
||||||
max: 50,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Kz3gD8cF5h",
|
|
||||||
name: "description",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 500,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_La4hE9dG6i",
|
|
||||||
name: "avatar",
|
|
||||||
type: "url",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
exceptDomains: null,
|
|
||||||
onlyDomains: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Mb5iF0eH7j",
|
|
||||||
name: "owner",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: true,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Nc6jG1fI8k",
|
|
||||||
name: "game",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "games",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"name"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Od7kH2gJ9l",
|
|
||||||
name: "members",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: null,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Pe8lI3hK0m",
|
|
||||||
name: "maxMembers",
|
|
||||||
type: "number",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: 2,
|
|
||||||
max: 100,
|
|
||||||
noDecimal: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Qf9mJ4iL1n",
|
|
||||||
name: "status",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"recruiting",
|
|
||||||
"full",
|
|
||||||
"inactive"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Rg0nK5jM2o",
|
|
||||||
name: "tags",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 5000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Sh1oL6kN3p",
|
|
||||||
name: "requirements",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ti2pM7lO4q",
|
|
||||||
name: "stats",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
indexes: [
|
|
||||||
"create index groups_name_idx on groups (name)",
|
|
||||||
"create index groups_owner_idx on groups (owner)",
|
|
||||||
"create index groups_game_idx on groups (game)",
|
|
||||||
"create index groups_status_idx on groups (status)",
|
|
||||||
],
|
|
||||||
listRule: "",
|
|
||||||
viewRule: "",
|
|
||||||
createRule: "@request.auth.id != \"\"",
|
|
||||||
updateRule: "owner = @request.auth.id",
|
|
||||||
deleteRule: "owner = @request.auth.id",
|
|
||||||
options: {
|
|
||||||
allowEmailAuth: false,
|
|
||||||
allowOAuth2Auth: false,
|
|
||||||
allowUsernameAuth: false,
|
|
||||||
exceptEmailDomains: null,
|
|
||||||
manageRule: null,
|
|
||||||
onlyEmailDomains: null,
|
|
||||||
requireEmail: false,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Team Sessions collection
|
|
||||||
app.deleteCollection("teamSessions");
|
|
||||||
app.createCollection("teamSessions", {
|
|
||||||
id: "teamSessions",
|
|
||||||
name: "teamSessions",
|
|
||||||
type: "base",
|
|
||||||
fields: [
|
|
||||||
{
|
|
||||||
id: "new_Uj3qN8mP5r",
|
|
||||||
name: "group",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "groups",
|
|
||||||
cascadeDelete: true,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"name"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Vk4rO9nQ6s",
|
|
||||||
name: "host",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Wl5sP0oR7t",
|
|
||||||
name: "participants",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: null,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Xm6tQ1pS8u",
|
|
||||||
name: "status",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"waiting",
|
|
||||||
"playing",
|
|
||||||
"completed",
|
|
||||||
"cancelled"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Yn7uR2qT9v",
|
|
||||||
name: "voiceChat",
|
|
||||||
type: "bool",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Zo8vS3rU0w",
|
|
||||||
name: "roomInfo",
|
|
||||||
type: "json",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSize: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ap9wT4sV1x",
|
|
||||||
name: "notes",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 1000,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Bq0xU5tW2y",
|
|
||||||
name: "scheduledAt",
|
|
||||||
type: "date",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Cr1yV6uX3z",
|
|
||||||
name: "startedAt",
|
|
||||||
type: "date",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ds2zW7vY4a",
|
|
||||||
name: "endedAt",
|
|
||||||
type: "date",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
indexes: [
|
|
||||||
"create index teamSessions_group_idx on teamSessions (group)",
|
|
||||||
"create index teamSessions_host_idx on teamSessions (host)",
|
|
||||||
"create index teamSessions_status_idx on teamSessions (status)",
|
|
||||||
"create index teamSessions_scheduledAt_idx on teamSessions (scheduledAt)",
|
|
||||||
],
|
|
||||||
listRule: "group.owner = @request.auth.id || group.members.id = @request.auth.id",
|
|
||||||
viewRule: "group.owner = @request.auth.id || group.members.id = @request.auth.id",
|
|
||||||
createRule: "@request.auth.id != \"\"",
|
|
||||||
updateRule: "group.owner = @request.auth.id",
|
|
||||||
deleteRule: "group.owner = @request.auth.id",
|
|
||||||
options: {
|
|
||||||
allowEmailAuth: false,
|
|
||||||
allowOAuth2Auth: false,
|
|
||||||
allowUsernameAuth: false,
|
|
||||||
exceptEmailDomains: null,
|
|
||||||
manageRule: null,
|
|
||||||
onlyEmailDomains: null,
|
|
||||||
requireEmail: false,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Invitations collection
|
|
||||||
app.deleteCollection("invitations");
|
|
||||||
app.createCollection("invitations", {
|
|
||||||
id: "invitations",
|
|
||||||
name: "invitations",
|
|
||||||
type: "base",
|
|
||||||
fields: [
|
|
||||||
{
|
|
||||||
id: "new_Et3yZ8wB5c",
|
|
||||||
name: "group",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "groups",
|
|
||||||
cascadeDelete: true,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"name"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Fu4zA9xC6d",
|
|
||||||
name: "sender",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Gv5aB0yD7e",
|
|
||||||
name: "recipient",
|
|
||||||
type: "relation",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
collectionId: "users",
|
|
||||||
cascadeDelete: false,
|
|
||||||
minSelect: null,
|
|
||||||
maxSelect: 1,
|
|
||||||
displayFields: [
|
|
||||||
"username",
|
|
||||||
"displayName"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Hw6bC1zE8f",
|
|
||||||
name: "status",
|
|
||||||
type: "select",
|
|
||||||
system: false,
|
|
||||||
required: true,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
maxSelect: 1,
|
|
||||||
values: [
|
|
||||||
"pending",
|
|
||||||
"accepted",
|
|
||||||
"rejected",
|
|
||||||
"cancelled"
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Ix7cD2aF9g",
|
|
||||||
name: "message",
|
|
||||||
type: "text",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: null,
|
|
||||||
max: 500,
|
|
||||||
pattern: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "new_Jy8dE3bG0h",
|
|
||||||
name: "respondedAt",
|
|
||||||
type: "date",
|
|
||||||
system: false,
|
|
||||||
required: false,
|
|
||||||
unique: false,
|
|
||||||
options: {
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
indexes: [
|
|
||||||
"create index invitations_group_idx on invitations (group)",
|
|
||||||
"create index invitations_sender_idx on invitations (sender)",
|
|
||||||
"create index invitations_recipient_idx on invitations (recipient)",
|
|
||||||
"create index invitations_status_idx on invitations (status)",
|
|
||||||
"create unique index invitations_unique_pending on invitations (group, recipient) where status = 'pending'",
|
|
||||||
],
|
|
||||||
listRule: "sender = @request.auth.id || recipient = @request.auth.id || group.owner = @request.auth.id",
|
|
||||||
viewRule: "sender = @request.auth.id || recipient = @request.auth.id || group.owner = @request.auth.id",
|
|
||||||
createRule: "group.owner = @request.auth.id",
|
|
||||||
updateRule: "recipient = @request.auth.id",
|
|
||||||
deleteRule: "sender = @request.auth.id || group.owner = @request.auth.id",
|
|
||||||
options: {
|
|
||||||
allowEmailAuth: false,
|
|
||||||
allowOAuth2Auth: false,
|
|
||||||
allowUsernameAuth: false,
|
|
||||||
exceptEmailDomains: null,
|
|
||||||
manageRule: null,
|
|
||||||
onlyEmailDomains: null,
|
|
||||||
requireEmail: false,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}, (app) => {
|
|
||||||
// Rollback
|
|
||||||
app.deleteCollection("invitations");
|
|
||||||
app.deleteCollection("teamSessions");
|
|
||||||
app.deleteCollection("groups");
|
|
||||||
app.deleteCollection("games");
|
|
||||||
app.deleteCollection("users");
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 部署 PocketBase 后端
|
||||||
|
|
||||||
|
echo "🚀 部署 PocketBase 后端..."
|
||||||
|
|
||||||
|
docker compose -f docker-compose.backend.yml up -d --force-recreate
|
||||||
|
|
||||||
|
echo "✅ PocketBase 已启动"
|
||||||
|
echo "📡 API 地址: http://192.168.1.14:8711/api/"
|
||||||
|
echo "🔧 管理面板: http://192.168.1.14:8711/_/"
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 部署 Dev 前端
|
||||||
|
|
||||||
|
echo "🚀 部署 Dev 前端..."
|
||||||
|
|
||||||
|
# 确保网络存在
|
||||||
|
docker network create gamegroup-net 2>/dev/null || true
|
||||||
|
|
||||||
|
docker compose -f docker-compose.dev.yml up -d --build --force-recreate
|
||||||
|
|
||||||
|
echo "✅ Dev 环境已启动"
|
||||||
|
echo "🌐 访问地址: http://192.168.1.14:7033"
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 部署 UAT 前端
|
||||||
|
|
||||||
|
echo "🚀 部署 UAT 前端..."
|
||||||
|
|
||||||
|
# 确保网络存在
|
||||||
|
docker network create gamegroup-net 2>/dev/null || true
|
||||||
|
|
||||||
|
docker compose -f docker-compose.uat.yml up -d --build --force-recreate
|
||||||
|
|
||||||
|
echo "✅ UAT 环境已启动"
|
||||||
|
echo "🌐 访问地址: http://192.168.1.14:7034"
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
services:
|
||||||
|
pocketbase:
|
||||||
|
image: ghcr.io/muchobien/pocketbase:0.22.4
|
||||||
|
container_name: gamegroup-pb
|
||||||
|
ports:
|
||||||
|
- "8711:8090"
|
||||||
|
volumes:
|
||||||
|
- ./backend/pb_data:/pb_data
|
||||||
|
- ./backend/pb_migrations:/pb_migrations
|
||||||
|
environment:
|
||||||
|
- GO_ENV=production
|
||||||
|
restart: unless-stopped
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8090/api/health"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 40s
|
||||||
|
networks:
|
||||||
|
- gamegroup-net
|
||||||
|
|
||||||
|
networks:
|
||||||
|
gamegroup-net:
|
||||||
|
driver: bridge
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
services:
|
||||||
|
frontend-dev:
|
||||||
|
build:
|
||||||
|
context: ./frontend
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: gamegroup-frontend-dev
|
||||||
|
ports:
|
||||||
|
- "7033:80"
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=production
|
||||||
|
restart: unless-stopped
|
||||||
|
networks:
|
||||||
|
- gamegroup-net
|
||||||
|
|
||||||
|
networks:
|
||||||
|
gamegroup-net:
|
||||||
|
driver: bridge
|
||||||
|
external: true
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
services:
|
||||||
|
frontend-uat:
|
||||||
|
build:
|
||||||
|
context: ./frontend
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: gamegroup-frontend-uat
|
||||||
|
ports:
|
||||||
|
- "7034:80"
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=production
|
||||||
|
restart: unless-stopped
|
||||||
|
networks:
|
||||||
|
- gamegroup-net
|
||||||
|
|
||||||
|
networks:
|
||||||
|
gamegroup-net:
|
||||||
|
driver: bridge
|
||||||
|
external: true
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Dev Environment
|
||||||
|
VITE_PB_URL=http://192.168.1.14:8711
|
||||||
|
VITE_PORT=7033
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# UAT Environment
|
||||||
|
VITE_PB_URL=http://192.168.1.14:8711
|
||||||
|
VITE_PORT=7034
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
# 构建阶段
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 复制 package 文件
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# 复制源码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 设置构建参数并构建（默认使用相对路径，由 nginx 代理）
|
||||||
|
ARG VITE_PB_URL=/api
|
||||||
|
ENV VITE_PB_URL=$VITE_PB_URL
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# 生产阶段
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# 复制构建产物
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# 复制 nginx 配置
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Game Group V2</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# 开启 gzip 压缩
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# API 代理到局域网 PocketBase
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://192.168.1.14:8711/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 静态资源缓存
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "gamegroup-v2-frontend",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"dev:dev": "bash scripts/start-dev.sh",
|
||||||
|
"dev:uat": "bash scripts/start-uat.sh",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-router": "^4.3.0",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"element-plus": "^2.6.3",
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"pocketbase": "^0.21.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vue-tsc": "^2.0.11",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"tailwindcss": "^3.4.3",
|
||||||
|
"autoprefixer": "^10.4.19",
|
||||||
|
"postcss": "^8.4.38"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 启动 Dev 环境
|
||||||
|
|
||||||
|
cd "$(dirname "$0")/../"
|
||||||
|
|
||||||
|
export $(cat .env.dev | xargs)
|
||||||
|
|
||||||
|
echo "🚀 启动 Dev 环境"
|
||||||
|
echo "📡 PocketBase: $VITE_PB_URL"
|
||||||
|
echo "🌐 Frontend Port: $VITE_PORT"
|
||||||
|
|
||||||
|
npm run dev
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 启动 UAT 环境
|
||||||
|
|
||||||
|
cd "$(dirname "$0")/../"
|
||||||
|
|
||||||
|
export $(cat .env.uat | xargs)
|
||||||
|
|
||||||
|
echo "🚀 启动 UAT 环境"
|
||||||
|
echo "📡 PocketBase: $VITE_PB_URL"
|
||||||
|
echo "🌐 Frontend Port: $VITE_PORT"
|
||||||
|
|
||||||
|
npm run dev
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
<!-- src/App.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
// App 根组件
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
// src/api/games.ts
|
||||||
|
import pb from './pocketbase'
|
||||||
|
import type { Game, GamePlatform } from '@/types'
|
||||||
|
|
||||||
|
// 获取游戏列表
|
||||||
|
export async function getGames(options?: {
|
||||||
|
page?: number
|
||||||
|
limit?: number
|
||||||
|
platform?: GamePlatform
|
||||||
|
search?: string
|
||||||
|
}): Promise<{ items: Game[], total: number }> {
|
||||||
|
const { page = 1, limit = 20, platform, search } = options || {}
|
||||||
|
|
||||||
|
let filter = ''
|
||||||
|
if (platform) {
|
||||||
|
filter = `platform="${platform}"`
|
||||||
|
}
|
||||||
|
if (search) {
|
||||||
|
const searchFilter = `name ~ "${search}"`
|
||||||
|
filter = filter ? `${filter} && ${searchFilter}` : searchFilter
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await pb.collection('games').getList(page, limit, {
|
||||||
|
filter,
|
||||||
|
sort: '-popularCount'
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
items: result.items as unknown as Game[],
|
||||||
|
total: result.totalItems
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取热门游戏
|
||||||
|
export async function getPopularGames(limit = 10): Promise<Game[]> {
|
||||||
|
const result = await pb.collection('games').getList(1, limit, {
|
||||||
|
sort: '-popularCount'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as Game[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索游戏
|
||||||
|
export async function searchGames(query: string, limit = 20): Promise<Game[]> {
|
||||||
|
if (!query.trim()) return []
|
||||||
|
|
||||||
|
const result = await pb.collection('games').getList(1, limit, {
|
||||||
|
filter: `name ~ "${query}"`,
|
||||||
|
sort: '-popularCount'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as Game[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加游戏（需要管理员权限）
|
||||||
|
export async function addGame(data: {
|
||||||
|
name: string
|
||||||
|
platform: GamePlatform
|
||||||
|
tags?: string[]
|
||||||
|
cover?: string
|
||||||
|
}) {
|
||||||
|
return pb.collection('games').create(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新游戏热度
|
||||||
|
export async function incrementGamePopularity(gameId: string) {
|
||||||
|
const game = await pb.collection('games').getOne(gameId)
|
||||||
|
return pb.collection('games').update(gameId, {
|
||||||
|
popularCount: (game.popularCount || 0) + 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取游戏详情
|
||||||
|
export async function getGame(gameId: string): Promise<Game> {
|
||||||
|
return pb.collection('games').getOne(gameId) as unknown as Game
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按平台获取游戏
|
||||||
|
export async function getGamesByPlatform(platform: GamePlatform): Promise<Game[]> {
|
||||||
|
const result = await pb.collection('games').getList(1, 50, {
|
||||||
|
filter: `platform="${platform}"`,
|
||||||
|
sort: '-popularCount'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as Game[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有平台
|
||||||
|
export function getAllPlatforms(): GamePlatform[] {
|
||||||
|
return ['PC', 'PS5', 'Xbox', 'Switch', 'Mobile']
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅游戏变更
|
||||||
|
export function subscribeGames(callback: (game: Game) => void) {
|
||||||
|
return pb.collection('games').subscribe('*', (payload) => {
|
||||||
|
callback(payload.record as unknown as Game)
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
// src/api/groups.ts
|
||||||
|
import pb from './pocketbase'
|
||||||
|
import type { Group } from '@/types'
|
||||||
|
|
||||||
|
// 创建群组
|
||||||
|
export async function createGroup(data: {
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
maxMembers: number
|
||||||
|
}) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
return pb.collection('groups').create({
|
||||||
|
...data,
|
||||||
|
owner: user.id,
|
||||||
|
members: [user.id]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户的群组列表
|
||||||
|
export async function getUserGroups(): Promise<Group[]> {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) return []
|
||||||
|
|
||||||
|
// 通过 members 字段过滤
|
||||||
|
return pb.collection('groups').getList(1, 50, {
|
||||||
|
filter: `members ~ "${user.id}"`
|
||||||
|
}).then(res => res.items as unknown as Group[])
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取群组详情
|
||||||
|
export async function getGroup(groupId: string): Promise<Group> {
|
||||||
|
return pb.collection('groups').getOne(groupId, {
|
||||||
|
expand: 'members'
|
||||||
|
}) as unknown as Group
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加入群组
|
||||||
|
export async function joinGroup(groupId: string) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
const group = await pb.collection('groups').getOne(groupId)
|
||||||
|
const members = group.members as string[]
|
||||||
|
|
||||||
|
if (members.length >= group.maxMembers) {
|
||||||
|
throw new Error('群组已满')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (members.includes(user.id)) {
|
||||||
|
throw new Error('已是群组成员')
|
||||||
|
}
|
||||||
|
|
||||||
|
return pb.collection('groups').update(groupId, {
|
||||||
|
members: [...members, user.id]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 退出群组
|
||||||
|
export async function leaveGroup(groupId: string) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
const group = await pb.collection('groups').getOne(groupId)
|
||||||
|
|
||||||
|
if (group.owner === user.id) {
|
||||||
|
throw new Error('群主不能退出群组，请先转让群主或解散群组')
|
||||||
|
}
|
||||||
|
|
||||||
|
const members = group.members as string[]
|
||||||
|
return pb.collection('groups').update(groupId, {
|
||||||
|
members: members.filter(id => id !== user.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解散群组
|
||||||
|
export async function dissolveGroup(groupId: string) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
const group = await pb.collection('groups').getOne(groupId)
|
||||||
|
|
||||||
|
if (group.owner !== user.id) {
|
||||||
|
throw new Error('只有群主可以解散群组')
|
||||||
|
}
|
||||||
|
|
||||||
|
return pb.collection('groups').delete(groupId)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅群组变更
|
||||||
|
export function subscribeGroup(groupId: string, callback: (group: Group) => void) {
|
||||||
|
return pb.collection('groups').subscribe('*', (payload) => {
|
||||||
|
if (payload.record.id === groupId) {
|
||||||
|
callback(payload.record as unknown as Group)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取群组成员
|
||||||
|
export async function getGroupMembers(groupId: string) {
|
||||||
|
const group = await getGroup(groupId)
|
||||||
|
const members = group.members as string[]
|
||||||
|
|
||||||
|
// 批量获取用户信息
|
||||||
|
const users = await pb.collection('users').getList(1, 50, {
|
||||||
|
filter: members.map(id => `id="${id}"`).join(' || ')
|
||||||
|
})
|
||||||
|
|
||||||
|
return users.items
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
// src/api/invitations.ts
|
||||||
|
import pb from './pocketbase'
|
||||||
|
import type { Invitation, InviteStatus } from '@/types'
|
||||||
|
import { joinTeamSession } from './sessions'
|
||||||
|
import { updateUserStatus } from './users'
|
||||||
|
|
||||||
|
// 发送邀请
|
||||||
|
export async function sendInvitation(data: {
|
||||||
|
to: string
|
||||||
|
teamSession: string
|
||||||
|
}) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
// 检查是否已有待处理邀请
|
||||||
|
const existing = await pb.collection('invitations').getList(1, 1, {
|
||||||
|
filter: `from="${user.id}" && to="${data.to}" && teamSession="${data.teamSession}" && status="pending"`
|
||||||
|
})
|
||||||
|
|
||||||
|
if (existing.items.length > 0) {
|
||||||
|
throw new Error('已有待处理的邀请')
|
||||||
|
}
|
||||||
|
|
||||||
|
return pb.collection('invitations').create({
|
||||||
|
...data,
|
||||||
|
from: user.id,
|
||||||
|
status: 'pending'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量发送邀请
|
||||||
|
export async function sendBulkInvitations(recipients: string[], teamSessionId: string) {
|
||||||
|
const promises = recipients.map(to =>
|
||||||
|
sendInvitation({ to, teamSession: teamSessionId })
|
||||||
|
)
|
||||||
|
|
||||||
|
return Promise.allSettled(promises)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户的待处理邀请
|
||||||
|
export async function getPendingInvitations(): Promise<Invitation[]> {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) return []
|
||||||
|
|
||||||
|
const result = await pb.collection('invitations').getList(1, 50, {
|
||||||
|
filter: `to="${user.id}" && status="pending"`,
|
||||||
|
sort: '-created',
|
||||||
|
expand: 'from,teamSession'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as Invitation[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取我发送的邀请
|
||||||
|
export async function getMySentInvitations(): Promise<Invitation[]> {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) return []
|
||||||
|
|
||||||
|
const result = await pb.collection('invitations').getList(1, 50, {
|
||||||
|
filter: `from="${user.id}"`,
|
||||||
|
sort: '-created',
|
||||||
|
expand: 'to,teamSession'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as Invitation[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应邀请
|
||||||
|
export async function respondInvitation(
|
||||||
|
invitationId: string,
|
||||||
|
response: 'accepted' | 'rejected',
|
||||||
|
rejectReason?: string
|
||||||
|
) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
const invitation = await pb.collection('invitations').getOne(invitationId)
|
||||||
|
|
||||||
|
if (invitation.to !== user.id) {
|
||||||
|
throw new Error('无权操作此邀请')
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateData: Partial<Invitation> = {
|
||||||
|
status: response as InviteStatus,
|
||||||
|
respondedAt: new Date().toISOString()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response === 'rejected' && rejectReason) {
|
||||||
|
updateData.rejectReason = rejectReason
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新邀请状态
|
||||||
|
await pb.collection('invitations').update(invitationId, updateData)
|
||||||
|
|
||||||
|
// 如果接受，加入临时小组
|
||||||
|
if (response === 'accepted') {
|
||||||
|
await joinTeamSession(invitation.teamSession)
|
||||||
|
// 更新用户状态
|
||||||
|
await updateUserStatus('in_team')
|
||||||
|
}
|
||||||
|
|
||||||
|
return updateData
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅邀请变更
|
||||||
|
export function subscribeInvitations(callback: (invitation: Invitation) => void) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) return () => {}
|
||||||
|
|
||||||
|
return pb.collection('invitations').subscribe('*', (payload) => {
|
||||||
|
const invite = payload.record as unknown as Invitation
|
||||||
|
if (invite.to === user.id || invite.from === user.id) {
|
||||||
|
callback(invite)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
// src/api/pocketbase.ts
|
||||||
|
import PocketBase from 'pocketbase'
|
||||||
|
|
||||||
|
const pbUrl = import.meta.env.VITE_PB_URL || '/api'
|
||||||
|
|
||||||
|
export const pb = new PocketBase(pbUrl)
|
||||||
|
|
||||||
|
// 认证状态持久化
|
||||||
|
pb.authStore.loadFromCookie(document.cookie)
|
||||||
|
|
||||||
|
// 保存认证状态到 cookie
|
||||||
|
pb.authStore.onChange(() => {
|
||||||
|
document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取当前用户
|
||||||
|
export function getCurrentUser() {
|
||||||
|
return pb.authStore.model
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否已登录
|
||||||
|
export function isAuthenticated(): boolean {
|
||||||
|
return pb.authStore.isValid
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登出
|
||||||
|
export function logout() {
|
||||||
|
pb.authStore.clear()
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default pb
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
// src/api/sessions.ts
|
||||||
|
import pb from './pocketbase'
|
||||||
|
import type { TeamSession, TeamStatus } from '@/types'
|
||||||
|
|
||||||
|
// 创建临时小组
|
||||||
|
export async function createTeamSession(data: {
|
||||||
|
sourceGroup: string
|
||||||
|
name: string
|
||||||
|
gameName: string
|
||||||
|
members: string[]
|
||||||
|
}): Promise<TeamSession> {
|
||||||
|
return pb.collection('teamSessions').create({
|
||||||
|
...data,
|
||||||
|
status: 'recruiting'
|
||||||
|
}) as unknown as TeamSession
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户的活跃临时小组
|
||||||
|
export async function getActiveTeamSession(): Promise<TeamSession | null> {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) return null
|
||||||
|
|
||||||
|
const result = await pb.collection('teamSessions').getList(1, 1, {
|
||||||
|
filter: `members ~ "${user.id}" && status != "dissolved" && status != "finished"`,
|
||||||
|
sort: '-created'
|
||||||
|
})
|
||||||
|
|
||||||
|
return (result.items[0] as unknown as TeamSession) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取群组的临时小组列表
|
||||||
|
export async function getGroupTeamSessions(groupId: string): Promise<TeamSession[]> {
|
||||||
|
const result = await pb.collection('teamSessions').getList(1, 20, {
|
||||||
|
filter: `sourceGroup="${groupId}"`,
|
||||||
|
sort: '-created'
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.items as unknown as TeamSession[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新临时小组状态
|
||||||
|
export async function updateTeamStatus(sessionId: string, status: TeamStatus): Promise<TeamSession> {
|
||||||
|
const updateData: Partial<TeamSession> = { status }
|
||||||
|
|
||||||
|
if (status === 'dissolved') {
|
||||||
|
updateData.dissolvedAt = new Date().toISOString()
|
||||||
|
}
|
||||||
|
|
||||||
|
return pb.collection('teamSessions').update(sessionId, updateData) as unknown as TeamSession
|
||||||
|
}
|
||||||
|
|
||||||
|
// 结束游戏（解散临时小组）
|
||||||
|
export async function endGame(sessionId: string) {
|
||||||
|
const session = await pb.collection('teamSessions').getOne(sessionId)
|
||||||
|
|
||||||
|
// 将所有成员状态恢复为 idle
|
||||||
|
const members = session.members as string[]
|
||||||
|
const updatePromises = members.map(userId =>
|
||||||
|
pb.collection('users').update(userId, { status: 'idle' })
|
||||||
|
)
|
||||||
|
|
||||||
|
await Promise.all(updatePromises)
|
||||||
|
|
||||||
|
// 解散临时小组
|
||||||
|
return updateTeamStatus(sessionId, 'dissolved')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加入临时小组
|
||||||
|
export async function joinTeamSession(sessionId: string) {
|
||||||
|
const user = pb.authStore.model
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
const session = await pb.collection('teamSessions').getOne(sessionId) as { members: string[] }
|
||||||
|
const members = session.members as string[]
|
||||||
|
|
||||||
|
if (members.includes(user.id)) {
|
||||||
|
throw new Error('已在小组中')
|
||||||
|
}
|
||||||
|
|
||||||
|
return pb.collection('teamSessions').update(sessionId, {
|
||||||
|
members: [...members, user.id]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅临时小组变更
|
||||||
|
export function subscribeTeamSession(sessionId: string, callback: (session: TeamSession) => void) {
|
||||||
|
return pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||||
|
if (payload.record.id === sessionId) {
|
||||||
|
callback(payload.record as unknown as TeamSession)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
// src/api/users.ts
|
||||||
|
import pb, { getCurrentUser } from './pocketbase'
|
||||||
|
import type { User, UserStatus, WorkSchedule } from '@/types'
|
||||||
|
|
||||||
|
// 更新用户状态
|
||||||
|
export async function updateUserStatus(status: UserStatus, note?: string) {
|
||||||
|
const user = getCurrentUser()
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
return pb.collection('users').update(user.id, {
|
||||||
|
status,
|
||||||
|
statusNote: note || ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新工作时间设置
|
||||||
|
export async function updateWorkSchedule(schedule: WorkSchedule) {
|
||||||
|
const user = getCurrentUser()
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
// 计算下次工作时间
|
||||||
|
const nextWorkTime = calculateNextWorkTime(schedule.workdays, schedule.workStartTime)
|
||||||
|
|
||||||
|
return pb.collection('users').update(user.id, {
|
||||||
|
workdays: schedule.workdays,
|
||||||
|
workStartTime: schedule.workStartTime,
|
||||||
|
nextWorkTime
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算下次工作时间戳
|
||||||
|
function calculateNextWorkTime(workdays: number[], startTime: string): number {
|
||||||
|
const now = new Date()
|
||||||
|
const [hours, minutes] = startTime.split(':').map(Number)
|
||||||
|
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
const checkDate = new Date(now)
|
||||||
|
checkDate.setDate(now.getDate() + i)
|
||||||
|
checkDate.setHours(hours, minutes, 0, 0)
|
||||||
|
|
||||||
|
const dayOfWeek = checkDate.getDay() || 7 // 转换为 1-7 (周一到周日)
|
||||||
|
|
||||||
|
if (workdays.includes(dayOfWeek)) {
|
||||||
|
// 如果是今天，检查时间是否已过
|
||||||
|
if (i === 0 && checkDate <= now) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
return Math.floor(checkDate.getTime() / 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认返回下周
|
||||||
|
const nextWeek = new Date(now)
|
||||||
|
nextWeek.setDate(now.getDate() + 7)
|
||||||
|
nextWeek.setHours(hours, minutes, 0, 0)
|
||||||
|
return Math.floor(nextWeek.getTime() / 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
export async function getUser(userId: string): Promise<User> {
|
||||||
|
return pb.collection('users').getOne(userId)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新用户资料
|
||||||
|
export async function updateProfile(data: Partial<Pick<User, 'username' | 'avatar'>>) {
|
||||||
|
const user = getCurrentUser()
|
||||||
|
if (!user) throw new Error('未登录')
|
||||||
|
|
||||||
|
return pb.collection('users').update(user.id, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅用户状态变更
|
||||||
|
export function subscribeUserStatus(userId: string, callback: (user: User) => void) {
|
||||||
|
return pb.collection('users').subscribe('*', (payload) => {
|
||||||
|
if (payload.record.id === userId) {
|
||||||
|
callback(payload.record as unknown as User)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<!-- src/components/common/PasswordInput.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: string
|
||||||
|
placeholder?: string
|
||||||
|
id?: string
|
||||||
|
required?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: string): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
|
||||||
|
const inputType = computed(() => visible.value ? 'text' : 'password')
|
||||||
|
|
||||||
|
const inputValue = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val)
|
||||||
|
})
|
||||||
|
|
||||||
|
function toggleVisibility() {
|
||||||
|
visible.value = !visible.value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="password-input">
|
||||||
|
<input
|
||||||
|
:id="id"
|
||||||
|
:type="inputType"
|
||||||
|
:value="inputValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:required="required"
|
||||||
|
@input="(e: any) => inputValue = e.target.value"
|
||||||
|
/>
|
||||||
|
<button type="button" class="toggle-btn" @click="toggleVisibility">
|
||||||
|
<svg v-if="!visible" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||||
|
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.password-input {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-input input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 40px 12px 16px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-input input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn:hover {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,161 @@
|
|||||||
|
<!-- src/components/team/IdleMembersList.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import type { UserStatus } from '@/types'
|
||||||
|
import { sendInvitation } from '@/api/invitations'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
status?: UserStatus
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
status: 'idle'
|
||||||
|
})
|
||||||
|
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
|
||||||
|
const idleMembers = computed(() =>
|
||||||
|
groupStore.currentMembers.filter(m => m.status === props.status)
|
||||||
|
)
|
||||||
|
|
||||||
|
async function inviteMember(userId: string, username: string) {
|
||||||
|
try {
|
||||||
|
// 这里需要先创建临时小组，或者检查是否有活跃的临时小组
|
||||||
|
// 简化版本：发送邀请
|
||||||
|
await sendInvitation({
|
||||||
|
to: userId,
|
||||||
|
teamSession: '' // 实际使用时需要先创建临时小组
|
||||||
|
})
|
||||||
|
ElMessage.success(`已邀请 ${username}`)
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '邀请失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="idle-members-list">
|
||||||
|
<h3 class="list-title">
|
||||||
|
{{ status === 'idle' ? '空闲成员' : '成员列表' }}
|
||||||
|
<span class="count">({{ idleMembers.length }})</span>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div v-if="idleMembers.length === 0" class="empty">
|
||||||
|
{{ status === 'idle' ? '暂无空闲成员' : '暂无成员' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="member-list">
|
||||||
|
<div
|
||||||
|
v-for="member in idleMembers"
|
||||||
|
:key="member.id"
|
||||||
|
class="member-item"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="member.avatar || '/default-avatar.png'"
|
||||||
|
:alt="member.username"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<div class="member-info">
|
||||||
|
<span class="username">{{ member.username }}</span>
|
||||||
|
<span v-if="member.statusNote" class="status-note">{{ member.statusNote }}</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="status === 'idle'"
|
||||||
|
class="invite-btn"
|
||||||
|
@click="inviteMember(member.id, member.username)"
|
||||||
|
>
|
||||||
|
邀请
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.idle-members-list {
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--el-bg-color-page);
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item:hover {
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-note {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invite-btn {
|
||||||
|
padding: 6px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--el-color-primary);
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invite-btn:hover {
|
||||||
|
background: var(--el-color-primary-light-3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
<!-- src/components/team/InvitationCard.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import type { Invitation } from '@/types'
|
||||||
|
import { respondInvitation } from '@/api/invitations'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
invitation: Invitation
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
const emit = defineEmits<{
|
||||||
|
responded: [id: string, accepted: boolean]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const rejectReason = ref('')
|
||||||
|
const showRejectInput = ref(false)
|
||||||
|
|
||||||
|
async function acceptInvitation() {
|
||||||
|
try {
|
||||||
|
await respondInvitation(props.invitation.id, 'accepted')
|
||||||
|
ElMessage.success('已接受邀请')
|
||||||
|
emit('responded', props.invitation.id, true)
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '接受邀请失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function rejectInvitation() {
|
||||||
|
if (!showRejectInput.value) {
|
||||||
|
showRejectInput.value = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await respondInvitation(props.invitation.id, 'rejected', rejectReason.value)
|
||||||
|
ElMessage.success('已拒绝邀请')
|
||||||
|
emit('responded', props.invitation.id, false)
|
||||||
|
showRejectInput.value = false
|
||||||
|
rejectReason.value = ''
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '拒绝邀请失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="invitation-card">
|
||||||
|
<div class="invitation-header">
|
||||||
|
<img
|
||||||
|
:src="invitation.expand?.from?.avatar || '/default-avatar.png'"
|
||||||
|
:alt="invitation.expand?.from?.username"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<div class="invitation-info">
|
||||||
|
<span class="inviter-name">{{ invitation.expand?.from?.username }}</span>
|
||||||
|
<span class="invitation-text">邀请你加入</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="invitation.expand?.teamSession" class="session-info">
|
||||||
|
<span class="game-name">{{ invitation.expand.teamSession.gameName }}</span>
|
||||||
|
<span class="session-name">{{ invitation.expand.teamSession.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="invitation-actions">
|
||||||
|
<button class="action-btn accept" @click="acceptInvitation">
|
||||||
|
接受
|
||||||
|
</button>
|
||||||
|
<button class="action-btn reject" @click="rejectInvitation">
|
||||||
|
{{ showRejectInput ? '确认拒绝' : '拒绝' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="showRejectInput" class="reject-input">
|
||||||
|
<textarea
|
||||||
|
v-model="rejectReason"
|
||||||
|
placeholder="填写拒绝原因（可选）"
|
||||||
|
rows="2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.invitation-card {
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inviter-name {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--el-bg-color-page);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invitation-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accept {
|
||||||
|
background: var(--el-color-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accept:hover {
|
||||||
|
background: var(--el-color-primary-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject {
|
||||||
|
background: var(--el-fill-color);
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject:hover {
|
||||||
|
background: var(--el-fill-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject-input {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject-input textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject-input textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<!-- src/components/team/StatusToggle.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const currentStatus = computed(() => userStore.userStatus)
|
||||||
|
const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
|
||||||
|
const statusText = computed(() => UserStatusMap[currentStatus.value])
|
||||||
|
|
||||||
|
async function setStatus(status: UserStatus) {
|
||||||
|
await userStore.setStatus(status)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-dropdown trigger="click" @command="setStatus">
|
||||||
|
<span class="status-toggle">
|
||||||
|
<span class="status-icon">{{ statusIcon }}</span>
|
||||||
|
<span class="status-text">{{ statusText }}</span>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="idle">
|
||||||
|
<span class="menu-item">🟢 空闲</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="working">
|
||||||
|
<span class="menu-item">🔴 工作中</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="in_team" :disabled="currentStatus !== 'in_team'">
|
||||||
|
<span class="menu-item">🔵 组队中</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="away">
|
||||||
|
<span class="menu-item">⚫ 离开</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.status-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-toggle:hover {
|
||||||
|
background-color: var(--el-bg-color-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
<!-- src/components/team/TeamSessionPanel.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useTeamStore } from '@/stores/team'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import { TeamStatusMap } from '@/types'
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
|
const teamStore = useTeamStore()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
|
||||||
|
const session = computed(() => teamStore.currentSession)
|
||||||
|
const statusText = computed(() => session.value ? TeamStatusMap[session.value.status] : '')
|
||||||
|
|
||||||
|
const memberDetails = computed(() => {
|
||||||
|
if (!session.value) return []
|
||||||
|
return session.value.members
|
||||||
|
.map(id => groupStore.currentMembers.find(m => m.id === id))
|
||||||
|
.filter((m): m is NonNullable<typeof m> => Boolean(m))
|
||||||
|
})
|
||||||
|
|
||||||
|
async function endGame() {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
'确定要结束当前游戏吗？临时小组将被解散。',
|
||||||
|
'确认',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
await teamStore.finishGame()
|
||||||
|
} catch {
|
||||||
|
// 用户取消
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="session" class="team-session-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<h3 class="session-name">{{ session.name }}</h3>
|
||||||
|
<span class="session-status">{{ statusText }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="session-game">
|
||||||
|
<span class="game-label">游戏:</span>
|
||||||
|
<span class="game-name">{{ session.gameName }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="members-section">
|
||||||
|
<h4 class="members-title">成员 ({{ memberDetails.length }})</h4>
|
||||||
|
<div class="members-list">
|
||||||
|
<div
|
||||||
|
v-for="member in memberDetails"
|
||||||
|
:key="member.id"
|
||||||
|
class="member-item"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="member.avatar || '/default-avatar.png'"
|
||||||
|
:alt="member.username"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<span class="username">{{ member.username }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="end-game-btn" @click="endGame">
|
||||||
|
游戏结束
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="no-session">
|
||||||
|
<p>暂未加入任何临时小组</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.team-session-panel {
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid var(--el-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-status {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--el-color-primary-light-9);
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-game {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--el-bg-color-page);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-label {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-name {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-section {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
background: var(--el-bg-color-page);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-game-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--el-color-danger);
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-game-btn:hover {
|
||||||
|
background: var(--el-color-danger-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-session {
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 32px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
<!-- src/components/team/WorkScheduleModal.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { ElDialog, ElCheckbox, ElTimeSelect, ElButton } from 'element-plus'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
modelValue: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:modelValue': [value: boolean]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const workdays = ref<number[]>(userStore.user?.workdays || [])
|
||||||
|
const workStartTime = ref<string>(userStore.user?.workStartTime || '09:00')
|
||||||
|
|
||||||
|
const dayOptions = [
|
||||||
|
{ label: '周一', value: 1 },
|
||||||
|
{ label: '周二', value: 2 },
|
||||||
|
{ label: '周三', value: 3 },
|
||||||
|
{ label: '周四', value: 4 },
|
||||||
|
{ label: '周五', value: 5 },
|
||||||
|
{ label: '周六', value: 6 },
|
||||||
|
{ label: '周日', value: 7 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val)
|
||||||
|
})
|
||||||
|
|
||||||
|
async function saveSchedule() {
|
||||||
|
try {
|
||||||
|
await userStore.setWorkSchedule({
|
||||||
|
workdays: workdays.value,
|
||||||
|
workStartTime: workStartTime.value
|
||||||
|
})
|
||||||
|
visible.value = false
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('保存工作时间失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOpen() {
|
||||||
|
workdays.value = userStore.user?.workdays || []
|
||||||
|
workStartTime.value = userStore.user?.workStartTime || '09:00'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
title="设置工作时间"
|
||||||
|
width="400px"
|
||||||
|
@open="handleOpen"
|
||||||
|
>
|
||||||
|
<div class="schedule-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">工作日</label>
|
||||||
|
<el-checkbox-group v-model="workdays">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="day in dayOptions"
|
||||||
|
:key="day.value"
|
||||||
|
:label="day.value"
|
||||||
|
>
|
||||||
|
{{ day.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">工作开始时间</label>
|
||||||
|
<el-time-select
|
||||||
|
v-model="workStartTime"
|
||||||
|
start="00:00"
|
||||||
|
end="23:30"
|
||||||
|
step="00:30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-hint">
|
||||||
|
<p>在工作日的设定时间，你的状态会自动变为"工作中"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="visible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveSchedule">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.schedule-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-hint {
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--el-color-info-light-9);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-hint p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-color-info);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
// src/composables/useRealtime.ts
|
||||||
|
import { onUnmounted } from 'vue'
|
||||||
|
import { pb } from '@/api/pocketbase'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import { useTeamStore } from '@/stores/team'
|
||||||
|
|
||||||
|
type UnsubscribeFunc = () => Promise<void>
|
||||||
|
|
||||||
|
export function useRealtime() {
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
const teamStore = useTeamStore()
|
||||||
|
|
||||||
|
const subscriptions: UnsubscribeFunc[] = []
|
||||||
|
|
||||||
|
// 订阅用户状态变更（群组成员）
|
||||||
|
async function subscribeGroupMembers() {
|
||||||
|
if (!groupStore.currentGroup) return
|
||||||
|
|
||||||
|
const unsub = await pb.collection('users').subscribe('*', (payload) => {
|
||||||
|
const userId = payload.record.id
|
||||||
|
const isMember = groupStore.currentGroup?.members.includes(userId)
|
||||||
|
|
||||||
|
if (isMember) {
|
||||||
|
// 更新成员状态 - 重新加载成员列表
|
||||||
|
groupStore.setCurrentGroup(groupStore.currentGroupId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
subscriptions.push(unsub)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅邀请变更
|
||||||
|
async function subscribeInvitations() {
|
||||||
|
const userId = userStore.userId
|
||||||
|
if (!userId) return
|
||||||
|
|
||||||
|
const unsub = await pb.collection('invitations').subscribe('*', async () => {
|
||||||
|
// 更新邀请数量
|
||||||
|
await teamStore.getPendingCount()
|
||||||
|
// TODO: 更新 UI 显示邀请数量
|
||||||
|
})
|
||||||
|
|
||||||
|
subscriptions.push(unsub)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅临时小组变更
|
||||||
|
async function subscribeTeamSession() {
|
||||||
|
const session = teamStore.currentSession
|
||||||
|
if (!session) return
|
||||||
|
|
||||||
|
const unsub = await pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||||
|
if (payload.record.id === session.id) {
|
||||||
|
// 更新临时小组状态
|
||||||
|
teamStore.loadActiveSession()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
subscriptions.push(unsub)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅群组变更
|
||||||
|
async function subscribeGroup(groupId: string) {
|
||||||
|
const unsub = await pb.collection('groups').subscribe('*', (payload) => {
|
||||||
|
if (payload.record.id === groupId) {
|
||||||
|
// 更新群组信息
|
||||||
|
groupStore.loadGroups()
|
||||||
|
if (groupStore.currentGroupId === groupId) {
|
||||||
|
groupStore.setCurrentGroup(groupId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
subscriptions.push(unsub)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理所有订阅
|
||||||
|
async function unsubscribeAll() {
|
||||||
|
for (const sub of subscriptions) {
|
||||||
|
try {
|
||||||
|
await sub()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('取消订阅失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
subscriptions.length = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件卸载时自动清理
|
||||||
|
onUnmounted(() => {
|
||||||
|
unsubscribeAll()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribeGroupMembers,
|
||||||
|
subscribeInvitations,
|
||||||
|
subscribeTeamSession,
|
||||||
|
subscribeGroup,
|
||||||
|
unsubscribeAll
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
// src/main.ts
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
// 注册所有 Element Plus 图标
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(router)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
// src/router/index.ts
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import type { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { isAuthenticated } from '@/api/pocketbase'
|
||||||
|
|
||||||
|
// 路由配置
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('@/views/Login.vue'),
|
||||||
|
meta: { requiresGuest: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
name: 'Register',
|
||||||
|
component: () => import('@/views/Register.vue'),
|
||||||
|
meta: { requiresGuest: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('@/views/Layout.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'Home',
|
||||||
|
component: () => import('@/views/Home.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'group/:id',
|
||||||
|
name: 'GroupView',
|
||||||
|
component: () => import('@/views/GroupView.vue'),
|
||||||
|
props: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'games',
|
||||||
|
name: 'GamesLibrary',
|
||||||
|
component: () => import('@/views/GamesLibrary.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'profile',
|
||||||
|
name: 'Profile',
|
||||||
|
component: () => import('@/views/Profile.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'settings',
|
||||||
|
name: 'Settings',
|
||||||
|
component: () => import('@/views/Settings.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)*',
|
||||||
|
name: 'NotFound',
|
||||||
|
component: () => import('@/views/NotFound.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 创建路由实例
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// 路由守卫
|
||||||
|
router.beforeEach((to, _from, next) => {
|
||||||
|
const authenticated = isAuthenticated()
|
||||||
|
|
||||||
|
// 需要登录的页面
|
||||||
|
if (to.meta.requiresAuth && !authenticated) {
|
||||||
|
next({ name: 'Login', query: { redirect: to.fullPath } })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已登录用户访问登录/注册页
|
||||||
|
if (to.meta.requiresGuest && authenticated) {
|
||||||
|
next({ name: 'Home' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
// src/stores/group.ts
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import type { Group, User } from '@/types'
|
||||||
|
import { getUserGroups, getGroup, getGroupMembers } from '@/api/groups'
|
||||||
|
|
||||||
|
export const useGroupStore = defineStore('group', () => {
|
||||||
|
// 状态
|
||||||
|
const groups = ref<Group[]>([])
|
||||||
|
const currentGroup = ref<Group | null>(null)
|
||||||
|
const currentMembers = ref<User[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const currentGroupId = computed(() => currentGroup.value?.id || '')
|
||||||
|
const isGroupOwner = computed(() => {
|
||||||
|
const userId = localStorage.getItem('userId')
|
||||||
|
return currentGroup.value?.owner === userId
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载用户的群组列表
|
||||||
|
async function loadGroups() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
groups.value = await getUserGroups()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载群组列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置当前群组
|
||||||
|
async function setCurrentGroup(groupId: string) {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
currentGroup.value = await getGroup(groupId)
|
||||||
|
currentMembers.value = await getGroupMembers(groupId) as unknown as User[]
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载群组详情失败:', error)
|
||||||
|
throw error
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除当前群组
|
||||||
|
function clearCurrentGroup() {
|
||||||
|
currentGroup.value = null
|
||||||
|
currentMembers.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新群组成员列表
|
||||||
|
function updateMembers(members: User[]) {
|
||||||
|
currentMembers.value = members
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加群组到列表
|
||||||
|
function addGroup(group: Group) {
|
||||||
|
groups.value.push(group)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从列表中移除群组
|
||||||
|
function removeGroup(groupId: string) {
|
||||||
|
const index = groups.value.findIndex(g => g.id === groupId)
|
||||||
|
if (index !== -1) {
|
||||||
|
groups.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
if (currentGroup.value?.id === groupId) {
|
||||||
|
clearCurrentGroup()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
groups,
|
||||||
|
currentGroup,
|
||||||
|
currentMembers,
|
||||||
|
loading,
|
||||||
|
currentGroupId,
|
||||||
|
isGroupOwner,
|
||||||
|
loadGroups,
|
||||||
|
setCurrentGroup,
|
||||||
|
clearCurrentGroup,
|
||||||
|
updateMembers,
|
||||||
|
addGroup,
|
||||||
|
removeGroup
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
// src/stores/index.ts
|
||||||
|
export { useUserStore } from './user'
|
||||||
|
export { useGroupStore } from './group'
|
||||||
|
export { useTeamStore } from './team'
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
// src/stores/team.ts
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import type { TeamSession, TeamStatus } from '@/types'
|
||||||
|
import { getActiveTeamSession, createTeamSession, updateTeamStatus, endGame } from '@/api/sessions'
|
||||||
|
import { getPendingInvitations, sendBulkInvitations } from '@/api/invitations'
|
||||||
|
|
||||||
|
export const useTeamStore = defineStore('team', () => {
|
||||||
|
// 状态
|
||||||
|
const currentSession = ref<TeamSession | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const isInTeam = computed(() => currentSession.value !== null)
|
||||||
|
const teamStatus = computed(() => currentSession.value?.status || 'dissolved')
|
||||||
|
const teamMembers = computed(() => currentSession.value?.members || [])
|
||||||
|
|
||||||
|
// 加载活跃的临时小组
|
||||||
|
async function loadActiveSession() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const session = await getActiveTeamSession()
|
||||||
|
currentSession.value = session
|
||||||
|
return session
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载临时小组失败:', error)
|
||||||
|
currentSession.value = null
|
||||||
|
return null
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建临时小组
|
||||||
|
async function createSession(data: {
|
||||||
|
sourceGroup: string
|
||||||
|
name: string
|
||||||
|
gameName: string
|
||||||
|
members: string[]
|
||||||
|
}) {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const session = await createTeamSession(data)
|
||||||
|
currentSession.value = session
|
||||||
|
|
||||||
|
// 发送邀请
|
||||||
|
await sendBulkInvitations(data.members, session.id)
|
||||||
|
|
||||||
|
return session
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('创建临时小组失败:', error)
|
||||||
|
throw error
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新小组状态
|
||||||
|
async function updateStatus(status: TeamStatus) {
|
||||||
|
if (!currentSession.value) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const updated = await updateTeamStatus(currentSession.value.id, status)
|
||||||
|
currentSession.value = updated
|
||||||
|
return updated
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('更新小组状态失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 结束游戏
|
||||||
|
async function finishGame() {
|
||||||
|
if (!currentSession.value) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await endGame(currentSession.value.id)
|
||||||
|
currentSession.value = null
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('结束游戏失败:', error)
|
||||||
|
throw error
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除当前小组
|
||||||
|
function clearSession() {
|
||||||
|
currentSession.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取待处理邀请数量
|
||||||
|
async function getPendingCount() {
|
||||||
|
try {
|
||||||
|
const invitations = await getPendingInvitations()
|
||||||
|
return invitations.length
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取邀请数量失败:', error)
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentSession,
|
||||||
|
loading,
|
||||||
|
isInTeam,
|
||||||
|
teamStatus,
|
||||||
|
teamMembers,
|
||||||
|
loadActiveSession,
|
||||||
|
createSession,
|
||||||
|
updateStatus,
|
||||||
|
finishGame,
|
||||||
|
clearSession,
|
||||||
|
getPendingCount
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
// src/stores/user.ts
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import type { User, UserStatus, WorkSchedule } from '@/types'
|
||||||
|
import { pb, getCurrentUser, isAuthenticated, logout as pbLogout } from '@/api/pocketbase'
|
||||||
|
import { getUser, updateUserStatus, updateWorkSchedule } from '@/api/users'
|
||||||
|
|
||||||
|
export const useUserStore = defineStore('user', () => {
|
||||||
|
// 状态
|
||||||
|
const user = ref<User | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const isLoggedIn = computed(() => isAuthenticated() && user.value !== null)
|
||||||
|
const userStatus = computed(() => user.value?.status || 'away')
|
||||||
|
const userId = computed(() => user.value?.id || '')
|
||||||
|
|
||||||
|
// 初始化用户信息
|
||||||
|
async function initUser() {
|
||||||
|
if (!isAuthenticated()) {
|
||||||
|
user.value = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const authUser = getCurrentUser() as User
|
||||||
|
// 获取完整用户信息
|
||||||
|
user.value = await getUser(authUser.id)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('初始化用户信息失败:', error)
|
||||||
|
user.value = null
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
async function login(email: string, password: string) {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await pb.collection('users').authWithPassword(email, password)
|
||||||
|
await initUser()
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.message || '登录失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册
|
||||||
|
async function register(data: { email: string; password: string; passwordConfirm: string; username: string }) {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await pb.collection('users').create(data)
|
||||||
|
await login(data.email, data.password)
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.message || '注册失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登出
|
||||||
|
function logout() {
|
||||||
|
pbLogout()
|
||||||
|
user.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新状态
|
||||||
|
async function setStatus(status: UserStatus, note?: string) {
|
||||||
|
try {
|
||||||
|
const updated = await updateUserStatus(status, note)
|
||||||
|
if (user.value) {
|
||||||
|
user.value.status = status
|
||||||
|
user.value.statusNote = note
|
||||||
|
}
|
||||||
|
return updated
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.message || '更新状态失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新工作时间
|
||||||
|
async function setWorkSchedule(schedule: WorkSchedule) {
|
||||||
|
try {
|
||||||
|
const updated = await updateWorkSchedule(schedule)
|
||||||
|
if (user.value) {
|
||||||
|
user.value.workdays = schedule.workdays
|
||||||
|
user.value.workStartTime = schedule.workStartTime
|
||||||
|
user.value.nextWorkTime = updated.nextWorkTime
|
||||||
|
}
|
||||||
|
return updated
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.message || '更新工作时间失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查并自动更新工作时间状态
|
||||||
|
function checkWorkSchedule() {
|
||||||
|
if (!user.value || !user.value.nextWorkTime) return
|
||||||
|
|
||||||
|
const now = Math.floor(Date.now() / 1000)
|
||||||
|
if (now >= user.value.nextWorkTime && user.value.status === 'idle') {
|
||||||
|
setStatus('working')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
loading,
|
||||||
|
isLoggedIn,
|
||||||
|
userStatus,
|
||||||
|
userId,
|
||||||
|
initUser,
|
||||||
|
login,
|
||||||
|
register,
|
||||||
|
logout,
|
||||||
|
setStatus,
|
||||||
|
setWorkSchedule,
|
||||||
|
checkWorkSchedule
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
// src/types/index.ts
|
||||||
|
|
||||||
|
// 用户状态
|
||||||
|
export type UserStatus = 'idle' | 'working' | 'in_team' | 'away'
|
||||||
|
|
||||||
|
// 用户状态中文映射
|
||||||
|
export const UserStatusMap: Record<UserStatus, string> = {
|
||||||
|
idle: '空闲',
|
||||||
|
working: '工作中',
|
||||||
|
in_team: '组队中',
|
||||||
|
away: '离开'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户状态图标
|
||||||
|
export const UserStatusIcon: Record<UserStatus, string> = {
|
||||||
|
idle: '🟢',
|
||||||
|
working: '🔴',
|
||||||
|
in_team: '🔵',
|
||||||
|
away: '⚫'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 临时小组状态
|
||||||
|
export type TeamStatus = 'recruiting' | 'playing' | 'finished' | 'dissolved'
|
||||||
|
|
||||||
|
export const TeamStatusMap: Record<TeamStatus, string> = {
|
||||||
|
recruiting: '招募中',
|
||||||
|
playing: '游戏中',
|
||||||
|
finished: '已结束',
|
||||||
|
dissolved: '已解散'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 邀请状态
|
||||||
|
export type InviteStatus = 'pending' | 'accepted' | 'rejected'
|
||||||
|
|
||||||
|
export const InviteStatusMap: Record<InviteStatus, string> = {
|
||||||
|
pending: '等待响应',
|
||||||
|
accepted: '已接受',
|
||||||
|
rejected: '已拒绝'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 游戏平台
|
||||||
|
export type GamePlatform = 'PC' | 'PS5' | 'Xbox' | 'Switch' | 'Mobile'
|
||||||
|
|
||||||
|
// 用户
|
||||||
|
export interface User {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
email: string
|
||||||
|
avatar?: string
|
||||||
|
status: UserStatus
|
||||||
|
statusNote?: string
|
||||||
|
maxGroups: number
|
||||||
|
workdays: number[]
|
||||||
|
workStartTime: string
|
||||||
|
nextWorkTime?: number
|
||||||
|
points: number
|
||||||
|
created: string
|
||||||
|
updated: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 群组
|
||||||
|
export interface Group {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description?: string
|
||||||
|
owner: string
|
||||||
|
members: string[]
|
||||||
|
maxMembers: number
|
||||||
|
created: string
|
||||||
|
updated: string
|
||||||
|
expand?: {
|
||||||
|
owner?: User
|
||||||
|
members?: User[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 临时小组
|
||||||
|
export interface TeamSession {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
sourceGroup: string
|
||||||
|
gameName: string
|
||||||
|
members: string[]
|
||||||
|
status: TeamStatus
|
||||||
|
dissolvedAt?: string
|
||||||
|
created: string
|
||||||
|
updated: string
|
||||||
|
expand?: {
|
||||||
|
members?: User[]
|
||||||
|
sourceGroup?: Group
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 邀请
|
||||||
|
export interface Invitation {
|
||||||
|
id: string
|
||||||
|
from: string
|
||||||
|
to: string
|
||||||
|
teamSession: string
|
||||||
|
status: InviteStatus
|
||||||
|
rejectReason?: string
|
||||||
|
respondedAt?: string
|
||||||
|
created: string
|
||||||
|
updated: string
|
||||||
|
expand?: {
|
||||||
|
from?: User
|
||||||
|
to?: User
|
||||||
|
teamSession?: TeamSession
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 游戏
|
||||||
|
export interface Game {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
platform?: GamePlatform
|
||||||
|
tags?: string[]
|
||||||
|
cover?: string
|
||||||
|
popularCount: number
|
||||||
|
created: string
|
||||||
|
updated: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工作时间设定
|
||||||
|
export interface WorkSchedule {
|
||||||
|
workdays: number[]
|
||||||
|
workStartTime: string
|
||||||
|
}
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
<!-- src/views/GamesLibrary.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { getGames, getAllPlatforms } from '@/api/games'
|
||||||
|
import type { Game, GamePlatform } from '@/types'
|
||||||
|
import { ElCard, ElInput, ElSelect, ElOption } from 'element-plus'
|
||||||
|
|
||||||
|
const games = ref<Game[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const searchQuery = ref('')
|
||||||
|
const selectedPlatform = ref<GamePlatform | ''>('')
|
||||||
|
const platforms = getAllPlatforms()
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadGames()
|
||||||
|
})
|
||||||
|
|
||||||
|
async function loadGames() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const result = await getGames({
|
||||||
|
limit: 50,
|
||||||
|
search: searchQuery.value || undefined,
|
||||||
|
platform: selectedPlatform.value || undefined
|
||||||
|
})
|
||||||
|
games.value = result.items
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载游戏失败:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSearch() {
|
||||||
|
loadGames()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="games-library">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>游戏库</h1>
|
||||||
|
<div class="filters">
|
||||||
|
<el-input
|
||||||
|
v-model="searchQuery"
|
||||||
|
placeholder="搜索游戏..."
|
||||||
|
clearable
|
||||||
|
@input="handleSearch"
|
||||||
|
/>
|
||||||
|
<el-select v-model="selectedPlatform" placeholder="选择平台" clearable @change="loadGames">
|
||||||
|
<el-option
|
||||||
|
v-for="platform in platforms"
|
||||||
|
:key="platform"
|
||||||
|
:label="platform"
|
||||||
|
:value="platform"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="loading" class="loading">加载中...</div>
|
||||||
|
|
||||||
|
<div v-else-if="games.length === 0" class="empty">
|
||||||
|
<p>暂无游戏</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="games-grid">
|
||||||
|
<el-card v-for="game in games" :key="game.id" class="game-card">
|
||||||
|
<img
|
||||||
|
:src="game.cover || '/game-placeholder.png'"
|
||||||
|
:alt="game.name"
|
||||||
|
class="game-cover"
|
||||||
|
/>
|
||||||
|
<div class="game-info">
|
||||||
|
<h3 class="game-name">{{ game.name }}</h3>
|
||||||
|
<p class="game-platform">{{ game.platform }}</p>
|
||||||
|
<div class="game-tags">
|
||||||
|
<span v-for="tag in game.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.games-library {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters .el-input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.games-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-cover {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/4;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-info {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-platform {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
<!-- src/views/GroupView.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||||
|
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||||
|
import { ElCard, ElButton } from 'element-plus'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
|
||||||
|
const groupId = route.params.id as string
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await groupStore.setCurrentGroup(groupId)
|
||||||
|
})
|
||||||
|
|
||||||
|
async function refreshMembers() {
|
||||||
|
await groupStore.setCurrentGroup(groupId)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="group-view">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>{{ groupStore.currentGroup?.name }}</h1>
|
||||||
|
<p class="description">{{ groupStore.currentGroup?.description }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<!-- 左侧边栏 -->
|
||||||
|
<aside class="sidebar-left">
|
||||||
|
<team-session-panel />
|
||||||
|
|
||||||
|
<el-card class="card mt-16">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>群组信息</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="group-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">成员数</span>
|
||||||
|
<span class="value">{{ groupStore.currentMembers.length }} / {{ groupStore.currentGroup?.maxMembers }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">群主</span>
|
||||||
|
<span class="value">
|
||||||
|
{{ groupStore.currentMembers.find(m => m.id === groupStore.currentGroup?.owner)?.username }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<idle-membersList status="idle" />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 右侧边栏 -->
|
||||||
|
<aside class="sidebar-right">
|
||||||
|
<el-card class="card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>所有成员</h3>
|
||||||
|
<el-button size="small" @click="refreshMembers">刷新</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<idle-membersList />
|
||||||
|
</el-card>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.group-view {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 320px 1fr 280px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left,
|
||||||
|
.sidebar-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-16 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item .label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item .value {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,248 @@
|
|||||||
|
<!-- src/views/Home.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import { getPopularGames } from '@/api/games'
|
||||||
|
import type { Game } from '@/types'
|
||||||
|
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||||
|
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||||
|
import { ElCard, ElButton, ElEmpty } from 'element-plus'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
|
||||||
|
const popularGames = ref<Game[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadPopularGames()
|
||||||
|
})
|
||||||
|
|
||||||
|
async function loadPopularGames() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
popularGames.value = await getPopularGames(8)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载热门游戏失败:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectGroup(groupId: string) {
|
||||||
|
groupStore.setCurrentGroup(groupId)
|
||||||
|
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="home-page">
|
||||||
|
<div class="page-content">
|
||||||
|
<!-- 左侧边栏 -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<el-card class="card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>我的群组</h3>
|
||||||
|
<el-button size="small" type="primary">+ 创建</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="groupStore.groups.length === 0" class="empty">
|
||||||
|
<el-empty description="暂无群组" :image-size="80" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="group-list">
|
||||||
|
<div
|
||||||
|
v-for="group in groupStore.groups"
|
||||||
|
:key="group.id"
|
||||||
|
class="group-item"
|
||||||
|
@click="selectGroup(group.id)"
|
||||||
|
>
|
||||||
|
<div class="group-info">
|
||||||
|
<span class="group-name">{{ group.name }}</span>
|
||||||
|
<span class="group-members">{{ group.members.length }} 成员</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<!-- 当前临时小组 -->
|
||||||
|
<team-session-panel />
|
||||||
|
|
||||||
|
<!-- 热门游戏 -->
|
||||||
|
<el-card class="card mt-16">
|
||||||
|
<template #header>
|
||||||
|
<h3>热门游戏</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="loading" class="loading">加载中...</div>
|
||||||
|
|
||||||
|
<div v-else class="games-grid">
|
||||||
|
<div
|
||||||
|
v-for="game in popularGames"
|
||||||
|
:key="game.id"
|
||||||
|
class="game-card"
|
||||||
|
@click="router.push({ name: 'GamesLibrary' })"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="game.cover || '/game-placeholder.png'"
|
||||||
|
:alt="game.name"
|
||||||
|
class="game-cover"
|
||||||
|
/>
|
||||||
|
<div class="game-info">
|
||||||
|
<span class="game-name">{{ game.name }}</span>
|
||||||
|
<span class="game-platform">{{ game.platform }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 右侧边栏 -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<el-card class="card">
|
||||||
|
<template #header>
|
||||||
|
<h3>空闲成员</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<idle-membersList />
|
||||||
|
</el-card>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home-page {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr 280px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-16 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-item {
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-item:hover {
|
||||||
|
background: var(--el-fill-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-members {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.games-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-cover {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/4;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-platform {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,197 @@
|
|||||||
|
<!-- src/views/Layout.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { useGroupStore } from '@/stores/group'
|
||||||
|
import { useTeamStore } from '@/stores/team'
|
||||||
|
import StatusToggle from '@/components/team/StatusToggle.vue'
|
||||||
|
import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
|
||||||
|
import { ElBadge, ElButton, ElIcon } from 'element-plus'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
const teamStore = useTeamStore()
|
||||||
|
|
||||||
|
const showScheduleModal = ref(false)
|
||||||
|
const pendingCount = ref(0)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await userStore.initUser()
|
||||||
|
await groupStore.loadGroups()
|
||||||
|
await teamStore.loadActiveSession()
|
||||||
|
pendingCount.value = await teamStore.getPendingCount()
|
||||||
|
})
|
||||||
|
|
||||||
|
async function handleLogout() {
|
||||||
|
userStore.logout()
|
||||||
|
router.push({ name: 'Login' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function showInviteModal() {
|
||||||
|
// TODO: 实现邀请模态框
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h1 class="logo">Game Group</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="nav">
|
||||||
|
<router-link to="/" class="nav-link" active-class="active">
|
||||||
|
首页
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/games" class="nav-link" active-class="active">
|
||||||
|
游戏库
|
||||||
|
</router-link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
<el-badge :value="pendingCount" :hidden="pendingCount === 0">
|
||||||
|
<el-button circle @click="showInviteModal">
|
||||||
|
<el-icon>🔔</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-badge>
|
||||||
|
|
||||||
|
<status-toggle />
|
||||||
|
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<span class="user-dropdown">
|
||||||
|
<img
|
||||||
|
:src="userStore.user?.avatar || '/default-avatar.png'"
|
||||||
|
class="user-avatar"
|
||||||
|
/>
|
||||||
|
<span class="user-name">{{ userStore.user?.username }}</span>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="router.push('/profile')">
|
||||||
|
个人中心
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="router.push('/settings')">
|
||||||
|
设置
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item divided @click="handleLogout">
|
||||||
|
退出登录
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<main class="main">
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 工作时间设置弹窗 -->
|
||||||
|
<work-schedule-modal v-model="showScheduleModal" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.layout {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--el-bg-color-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 24px;
|
||||||
|
height: 60px;
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-bottom: 1px solid var(--el-border-color);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-center {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active {
|
||||||
|
background: var(--el-color-primary-light-9);
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dropdown {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dropdown:hover {
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
<!-- src/views/Login.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import PasswordInput from '@/components/common/PasswordInput.vue'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const email = ref('')
|
||||||
|
const password = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
async function handleLogin() {
|
||||||
|
if (!email.value || !password.value) {
|
||||||
|
ElMessage.warning('请输入邮箱和密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await userStore.login(email.value, password.value)
|
||||||
|
|
||||||
|
const redirect = route.query.redirect as string || '/'
|
||||||
|
router.push(redirect)
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '登录失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goToRegister() {
|
||||||
|
router.push({ name: 'Register', query: route.query })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="login-page">
|
||||||
|
<div class="login-card">
|
||||||
|
<h1 class="title">登录 Game Group</h1>
|
||||||
|
|
||||||
|
<form class="login-form" @submit.prevent="handleLogin">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">邮箱</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
v-model="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">密码</label>
|
||||||
|
<PasswordInput
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="submit-btn" :disabled="loading">
|
||||||
|
{{ loading ? '登录中...' : '登录' }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="footer-links">
|
||||||
|
<span>还没有账号？</span>
|
||||||
|
<a @click="goToRegister">立即注册</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-page {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 40px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 32px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
padding: 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover:not(:disabled) {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
margin-top: 24px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
color: #667eea;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<!-- src/views/NotFound.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
function goHome() {
|
||||||
|
router.push({ name: 'Home' })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="not-found">
|
||||||
|
<div class="content">
|
||||||
|
<h1>404</h1>
|
||||||
|
<p>抱歉，您访问的页面不存在</p>
|
||||||
|
<button class="home-btn" @click="goHome">
|
||||||
|
返回首页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.not-found {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 72px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
margin: 0 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
padding: 12px 32px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
<!-- src/views/Profile.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { ElCard, ElInput, ElButton, ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const username = ref(userStore.user?.username || '')
|
||||||
|
const email = ref(userStore.user?.email || '')
|
||||||
|
const avatar = ref(userStore.user?.avatar || '')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
async function saveProfile() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
// await updateProfile({ username: username.value, avatar: avatar.value })
|
||||||
|
ElMessage.success('保存成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '保存失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAvatarUpload() {
|
||||||
|
// TODO: 实现头像上传
|
||||||
|
ElMessage.info('头像上传功能待实现')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="profile-page">
|
||||||
|
<h1>个人中心</h1>
|
||||||
|
|
||||||
|
<el-card class="profile-card">
|
||||||
|
<div class="profile-form">
|
||||||
|
<div class="avatar-section">
|
||||||
|
<img :src="avatar || '/default-avatar.png'" class="avatar" />
|
||||||
|
<el-button @click="handleAvatarUpload">更换头像</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>用户名</label>
|
||||||
|
<el-input v-model="username" placeholder="请输入用户名" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>邮箱</label>
|
||||||
|
<el-input v-model="email" disabled />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>状态</label>
|
||||||
|
<div class="status-display">
|
||||||
|
<span>{{ userStore.userStatus }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<el-button type="primary" :loading="loading" @click="saveProfile">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.profile-page {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-page h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-display {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
<!-- src/views/Register.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useUserStore } from '@/stores/user'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import PasswordInput from '@/components/common/PasswordInput.vue'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const username = ref('')
|
||||||
|
const email = ref('')
|
||||||
|
const password = ref('')
|
||||||
|
const passwordConfirm = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
async function handleRegister() {
|
||||||
|
if (!username.value || !email.value || !password.value) {
|
||||||
|
ElMessage.warning('请填写所有必填项')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value !== passwordConfirm.value) {
|
||||||
|
ElMessage.warning('两次输入的密码不一致')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value.length < 6) {
|
||||||
|
ElMessage.warning('密码长度至少为 6 位')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await userStore.register({
|
||||||
|
username: username.value,
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
passwordConfirm: passwordConfirm.value
|
||||||
|
})
|
||||||
|
|
||||||
|
ElMessage.success('注册成功')
|
||||||
|
router.push({ name: 'Home' })
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '注册失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goToLogin() {
|
||||||
|
router.push({ name: 'Login' })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="register-page">
|
||||||
|
<div class="register-card">
|
||||||
|
<h1 class="title">注册 Game Group</h1>
|
||||||
|
|
||||||
|
<form class="register-form" @submit.prevent="handleRegister">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">用户名</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
v-model="username"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">邮箱</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
v-model="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">密码</label>
|
||||||
|
<PasswordInput
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
placeholder="请输入密码（至少6位）"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="passwordConfirm">确认密码</label>
|
||||||
|
<PasswordInput
|
||||||
|
id="passwordConfirm"
|
||||||
|
v-model="passwordConfirm"
|
||||||
|
placeholder="请再次输入密码"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="submit-btn" :disabled="loading">
|
||||||
|
{{ loading ? '注册中...' : '注册' }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="footer-links">
|
||||||
|
<span>已有账号？</span>
|
||||||
|
<a @click="goToLogin">立即登录</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.register-page {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 40px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 32px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
padding: 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover:not(:disabled) {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
margin-top: 24px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
color: #667eea;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
<!-- src/views/Settings.vue -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
|
||||||
|
|
||||||
|
const showScheduleModal = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="settings-page">
|
||||||
|
<h1>设置</h1>
|
||||||
|
|
||||||
|
<div class="settings-list">
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<h3>工作时间</h3>
|
||||||
|
<p>设置工作日和工作开始时间，系统会自动将你的状态设置为"工作中"</p>
|
||||||
|
</div>
|
||||||
|
<button class="setting-btn" @click="showScheduleModal = true">
|
||||||
|
配置
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<h3>通知设置</h3>
|
||||||
|
<p>配置邀请通知的显示方式</p>
|
||||||
|
</div>
|
||||||
|
<button class="setting-btn" disabled>
|
||||||
|
即将推出
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<h3>隐私设置</h3>
|
||||||
|
<p>控制谁可以看到你的在线状态</p>
|
||||||
|
</div>
|
||||||
|
<button class="setting-btn" disabled>
|
||||||
|
即将推出
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<work-schedule-modal v-model="showScheduleModal" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.settings-page {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-page h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info p {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--el-fill-color-light);
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn:hover:not(:disabled) {
|
||||||
|
background: var(--el-fill-color);
|
||||||
|
border-color: var(--el-border-color-darker);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Vendored
+15
@@ -0,0 +1,15 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_PB_URL: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
200: '#bae6fd',
|
||||||
|
300: '#7dd3fc',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
700: '#0369a1',
|
||||||
|
800: '#075985',
|
||||||
|
900: '#0c4a6e',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'node:path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: Number(process.env.VITE_PORT) || 5173,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: process.env.VITE_PB_URL || 'http://192.168.1.14:8711',
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
+10
@@ -0,0 +1,10 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 停止所有服务
|
||||||
|
|
||||||
|
echo "🛑 停止所有服务..."
|
||||||
|
|
||||||
|
docker compose -f docker-compose.backend.yml down
|
||||||
|
docker compose -f docker-compose.dev.yml down
|
||||||
|
docker compose -f docker-compose.uat.yml down
|
||||||
|
|
||||||
|
echo "✅ 所有服务已停止"
|
||||||
Reference in New Issue
Block a user