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_DATA=./pb_data
|
||||
PB_MIGRATIONS=./pb_migrations
|
||||
PB_UID=1000
|
||||
PB_GID=1000
|
||||
|
||||
@@ -2,10 +2,11 @@ version: '3.8'
|
||||
|
||||
services:
|
||||
pocketbase:
|
||||
image: ghcr.io/muchobien/pocketbase:v0.22.4
|
||||
image: ghcr.io/muchobien/pocketbase:0.22.4
|
||||
container_name: gamegroup-pb
|
||||
user: "${PB_UID:-1000}:${PB_GID:-1000}"
|
||||
ports:
|
||||
- "${PB_PORT:-8090}:8090"
|
||||
- "${PB_PORT:-8711}:8090"
|
||||
volumes:
|
||||
- ./pb_data:/pb_data
|
||||
- ./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