feat: beautify all team components and pages with dark gaming theme
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
@@ -81,35 +81,38 @@ async function inviteMember(userId: string, username: string) {
|
||||
|
||||
<style scoped>
|
||||
.idle-members-list {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 32px;
|
||||
color: var(--gg-text-muted);
|
||||
padding: 40px 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
@@ -117,13 +120,15 @@ async function inviteMember(userId: string, username: string) {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
transition: background-color 0.2s;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -131,6 +136,7 @@ async function inviteMember(userId: string, username: string) {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
@@ -142,26 +148,29 @@ async function inviteMember(userId: string, username: string) {
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-note {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
padding: 6px 16px;
|
||||
padding: 6px 18px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--el-color-primary);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,17 +85,23 @@ async function rejectInvitation() {
|
||||
|
||||
<style scoped>
|
||||
.invitation-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.invitation-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.12);
|
||||
}
|
||||
|
||||
.invitation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -103,6 +109,7 @@ async function rejectInvitation() {
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.invitation-info {
|
||||
@@ -113,32 +120,35 @@ async function rejectInvitation() {
|
||||
|
||||
.inviter-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.invitation-text {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.session-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.session-name {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.invitation-actions {
|
||||
@@ -150,29 +160,32 @@ async function rejectInvitation() {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.accept {
|
||||
background: var(--el-color-primary);
|
||||
background: var(--gg-gradient-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.reject {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text);
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.reject:hover {
|
||||
background: var(--el-fill-color-dark);
|
||||
border-color: var(--gg-danger);
|
||||
color: var(--gg-danger);
|
||||
}
|
||||
|
||||
.reject-input {
|
||||
@@ -181,15 +194,23 @@ async function rejectInvitation() {
|
||||
|
||||
.reject-input textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
font-size: 13px;
|
||||
resize: none;
|
||||
background: var(--gg-bg);
|
||||
color: var(--gg-text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.reject-input textarea::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.reject-input textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--el-color-primary);
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,15 @@ import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
|
||||
const userStore = useUserStore()
|
||||
|
||||
const currentStatus = computed(() => userStore.userStatus)
|
||||
const statusDotClass = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
idle: 'gg-status-dot--idle',
|
||||
working: 'gg-status-dot--working',
|
||||
in_team: 'gg-status-dot--in_team',
|
||||
away: 'gg-status-dot--away'
|
||||
}
|
||||
return map[currentStatus.value] || 'gg-status-dot--idle'
|
||||
})
|
||||
const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
|
||||
const statusText = computed(() => UserStatusMap[currentStatus.value])
|
||||
|
||||
@@ -19,22 +28,22 @@ async function setStatus(status: UserStatus) {
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="setStatus">
|
||||
<span class="status-toggle">
|
||||
<span class="status-icon">{{ statusIcon }}</span>
|
||||
<span class="gg-status-dot" :class="statusDotClass" />
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="idle">
|
||||
<span class="menu-item">🟢 空闲</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--idle" /> 空闲</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="working">
|
||||
<span class="menu-item">🔴 工作中</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--working" /> 工作中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="in_team" :disabled="currentStatus !== 'in_team'">
|
||||
<span class="menu-item">🔵 组队中</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--in_team" /> 组队中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="away">
|
||||
<span class="menu-item">⚫ 离开</span>
|
||||
<span class="menu-item"><span class="gg-status-dot gg-status-dot--away" /> 离开</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@@ -47,21 +56,22 @@ async function setStatus(status: UserStatus) {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.status-toggle:hover {
|
||||
background-color: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 16px;
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
|
||||
@@ -79,10 +79,11 @@ async function endGame() {
|
||||
|
||||
<style scoped>
|
||||
.team-session-panel {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
@@ -94,35 +95,40 @@ async function endGame() {
|
||||
|
||||
.session-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.session-status {
|
||||
padding: 4px 12px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
background: var(--gg-primary-light);
|
||||
color: var(--gg-bg);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.session-game {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.game-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.members-section {
|
||||
@@ -133,6 +139,7 @@ async function endGame() {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.members-list {
|
||||
@@ -145,9 +152,16 @@ async function endGame() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: var(--gg-bg-hover);
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -155,34 +169,40 @@ async function endGame() {
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.end-game-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient-danger);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.end-game-btn:hover {
|
||||
background: var(--el-color-danger-light-3);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.no-session {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 48px 32px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,6 +99,7 @@ function handleOpen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -109,19 +110,20 @@ function handleOpen() {
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
padding: 12px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
}
|
||||
|
||||
.form-hint p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-info);
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,13 +89,17 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.filters {
|
||||
@@ -109,14 +113,16 @@ function handleSearch() {
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 80px 32px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 80px 32px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
@@ -126,39 +132,46 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.game-card {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
border-radius: var(--gg-radius-sm) var(--gg-radius-sm) 0 0;
|
||||
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
padding: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
@@ -169,10 +182,11 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
background: var(--gg-bg-elevated);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
+470
-109
@@ -1,17 +1,57 @@
|
||||
<!-- src/views/GroupView.vue -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { UserStatusMap, UserStatusIcon } from '@/types'
|
||||
import type { UserStatus } from '@/types'
|
||||
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
|
||||
|
||||
const group = computed(() => groupStore.currentGroup)
|
||||
const members = computed(() => groupStore.currentMembers)
|
||||
|
||||
const ownerName = computed(() => {
|
||||
const owner = members.value.find(m => m.id === group.value?.owner)
|
||||
return owner?.username || '未知'
|
||||
})
|
||||
|
||||
const membersByStatus = computed(() => {
|
||||
const groups: Record<string, typeof members.value> = {
|
||||
idle: [],
|
||||
in_team: [],
|
||||
working: [],
|
||||
away: []
|
||||
}
|
||||
for (const m of members.value) {
|
||||
if (groups[m.status]) {
|
||||
groups[m.status].push(m)
|
||||
} else {
|
||||
groups.away.push(m)
|
||||
}
|
||||
}
|
||||
return groups
|
||||
})
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
idle: '空闲',
|
||||
in_team: '组队中',
|
||||
working: '工作中',
|
||||
away: '离开'
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
idle: 'var(--gg-success)',
|
||||
in_team: 'var(--gg-info)',
|
||||
working: 'var(--gg-danger)',
|
||||
away: 'var(--gg-text-muted)'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await groupStore.setCurrentGroup(groupId)
|
||||
})
|
||||
@@ -23,55 +63,126 @@ async function refreshMembers() {
|
||||
|
||||
<template>
|
||||
<div class="group-view">
|
||||
<div class="page-header">
|
||||
<h1>{{ groupStore.currentGroup?.name }}</h1>
|
||||
<p class="description">{{ groupStore.currentGroup?.description }}</p>
|
||||
</div>
|
||||
<!-- 顶部群组信息条 -->
|
||||
<section class="group-header">
|
||||
<div class="header-main">
|
||||
<h1 class="group-name">{{ group?.name }}</h1>
|
||||
<span class="member-count-badge">{{ members.length }} 成员</span>
|
||||
</div>
|
||||
<p class="group-desc">{{ group?.description || '暂无群组简介' }}</p>
|
||||
<div class="header-meta">
|
||||
<span class="meta-item">
|
||||
<span class="meta-label">群主:</span>
|
||||
<span class="meta-value">{{ ownerName }}</span>
|
||||
</span>
|
||||
<span class="meta-divider">|</span>
|
||||
<span class="meta-item">
|
||||
<span class="meta-label">容量:</span>
|
||||
<span class="meta-value">{{ members.length }} / {{ group?.maxMembers || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="sidebar-left">
|
||||
<team-session-panel />
|
||||
<!-- 主体双栏 -->
|
||||
<div class="body-grid">
|
||||
<!-- 左列: 主内容 -->
|
||||
<div class="left-col">
|
||||
<!-- 当前临时小组 -->
|
||||
<section class="panel-block">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">⚔</span> 当前临时小组
|
||||
</h2>
|
||||
<div class="panel-card">
|
||||
<TeamSessionPanel />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-card class="card mt-16">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>群组信息</h3>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 空闲成员 -->
|
||||
<section class="panel-block">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">🟢</span> 空闲成员
|
||||
</h2>
|
||||
<div class="panel-card">
|
||||
<IdleMembersList status="idle" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<!-- 所有成员 (按状态分组) -->
|
||||
<section class="panel-block">
|
||||
<div class="block-title-row">
|
||||
<h2 class="block-title">
|
||||
<span class="title-icon">👥</span> 所有成员
|
||||
</h2>
|
||||
<button class="refresh-btn" @click="refreshMembers">刷新</button>
|
||||
</div>
|
||||
<div class="panel-card">
|
||||
<div v-for="(list, status) in membersByStatus" :key="status" class="status-group">
|
||||
<div class="status-group-header">
|
||||
<span class="status-dot" :style="{ background: statusColors[status] }" />
|
||||
<span class="status-group-label">{{ statusLabels[status] }}</span>
|
||||
<span class="status-group-count">{{ list.length }}</span>
|
||||
</div>
|
||||
<div v-if="list.length === 0" class="empty-row">暂无</div>
|
||||
<div v-else class="member-row-list">
|
||||
<div v-for="m in list" :key="m.id" class="member-row">
|
||||
<img :src="m.avatar || '/default-avatar.png'" :alt="m.username" class="avatar" />
|
||||
<span class="member-name">{{ m.username }}</span>
|
||||
<span v-if="m.statusNote" class="member-note">{{ m.statusNote }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<IdleMembersList 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>
|
||||
<!-- 右列: 群组信息侧边栏 -->
|
||||
<aside class="right-col">
|
||||
<div class="info-card">
|
||||
<h3 class="info-card-title">群组信息</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">群组名</span>
|
||||
<span class="info-value">{{ group?.name || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-row">
|
||||
<span class="info-label">群主</span>
|
||||
<span class="info-value highlight">{{ ownerName }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">成员数</span>
|
||||
<span class="info-value">{{ members.length }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">最大容量</span>
|
||||
<span class="info-value">{{ group?.maxMembers || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">创建时间</span>
|
||||
<span class="info-value">{{ group?.created ? new Date(group.created).toLocaleDateString('zh-CN') : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<IdleMembersList />
|
||||
</el-card>
|
||||
<!-- 成员状态统计 -->
|
||||
<div class="info-card">
|
||||
<h3 class="info-card-title">成员状态</h3>
|
||||
<div class="status-stats">
|
||||
<div v-for="(list, status) in membersByStatus" :key="status" class="stat-item">
|
||||
<span class="stat-dot" :style="{ background: statusColors[status] }" />
|
||||
<span class="stat-label">{{ statusLabels[status] }}</span>
|
||||
<span class="stat-count">{{ list.length }}</span>
|
||||
<div class="stat-bar-bg">
|
||||
<div
|
||||
class="stat-bar-fill"
|
||||
:style="{
|
||||
width: members.length ? (list.length / members.length * 100) + '%' : '0%',
|
||||
background: statusColors[status]
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,80 +191,330 @@ async function refreshMembers() {
|
||||
<style scoped>
|
||||
.group-view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
/* ── 顶部群组信息条 ── */
|
||||
.group-header {
|
||||
padding: 24px 28px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
.group-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gg-gradient);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr 280px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-left,
|
||||
.sidebar-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
font-size: 14px;
|
||||
.member-count-badge {
|
||||
font-size: 13px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-divider {
|
||||
color: var(--gg-border);
|
||||
}
|
||||
|
||||
/* ── 主体双栏 ── */
|
||||
.body-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.left-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ── 左列面板 ── */
|
||||
.panel-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.block-title-row .block-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 5px 16px;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
border-color: var(--gg-primary);
|
||||
color: var(--gg-primary-light);
|
||||
}
|
||||
|
||||
/* ── 成员状态分组 ── */
|
||||
.status-group {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.status-group + .status-group {
|
||||
border-top: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.status-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-group-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-group-count {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.empty-row {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.member-row-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.member-row:hover {
|
||||
background: var(--gg-bg-elevated);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.member-note {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ── 右侧信息卡片 ── */
|
||||
.info-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
color: var(--gg-text);
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.info-value.highlight {
|
||||
color: var(--gg-primary-light);
|
||||
}
|
||||
|
||||
/* ── 状态统计 ── */
|
||||
.status-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: grid;
|
||||
grid-template-columns: 8px auto 1fr 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stat-bar-bg {
|
||||
height: 4px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.stat-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
+331
-146
@@ -1,20 +1,29 @@
|
||||
<!-- src/views/Home.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getPopularGames } from '@/api/games'
|
||||
import { UserStatusMap } from '@/types'
|
||||
import type { Game } from '@/types'
|
||||
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||
import { ElCard, ElButton, ElEmpty } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const groupStore = useGroupStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const popularGames = ref<Game[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const statusDotClass = computed(() => {
|
||||
const s = userStore.userStatus
|
||||
return `gg-status-dot gg-status-dot--${s}`
|
||||
})
|
||||
|
||||
const statusText = computed(() => UserStatusMap[userStore.userStatus] || '未知')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadPopularGames()
|
||||
})
|
||||
@@ -38,211 +47,387 @@ function selectGroup(groupId: string) {
|
||||
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="page-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<el-card class="card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>我的群组</h3>
|
||||
<el-button size="small" type="primary">+ 创建</el-button>
|
||||
<!-- 欢迎区 -->
|
||||
<section class="welcome-section">
|
||||
<h1 class="welcome-title">
|
||||
欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.username || '玩家' }}</span>!
|
||||
</h1>
|
||||
<div class="status-line">
|
||||
<span :class="statusDotClass" />
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
<span v-if="userStore.user?.statusNote" class="status-note">{{ userStore.user.statusNote }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主内容双栏 -->
|
||||
<div class="content-grid">
|
||||
<!-- 左列: 我的群组 -->
|
||||
<section class="section groups-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">🎮</span> 我的群组
|
||||
</h2>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🎮</div>
|
||||
<p class="empty-text">暂无群组</p>
|
||||
<p class="empty-hint">创建或加入一个群组，开始组队冒险吧</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="group-grid">
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-card"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<div class="group-card-header">
|
||||
<span class="group-name">{{ group.name }}</span>
|
||||
<span class="member-badge">{{ group.members.length }} 人</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty">
|
||||
<el-empty description="暂无群组" :image-size="80" />
|
||||
<p class="group-desc">{{ group.description || '暂无简介' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<!-- 右列: 当前临时小组 -->
|
||||
<section class="section session-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">⚔</span> 当前临时小组
|
||||
</h2>
|
||||
<div class="session-card">
|
||||
<TeamSessionPanel />
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<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>
|
||||
|
||||
<IdleMembersList />
|
||||
</el-card>
|
||||
</aside>
|
||||
<div class="idle-section">
|
||||
<IdleMembersList status="idle" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 热门游戏 -->
|
||||
<section class="section games-section">
|
||||
<h2 class="section-title">
|
||||
<span class="section-icon">🔥</span> 热门游戏
|
||||
</h2>
|
||||
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="popularGames.length === 0" class="empty-state">
|
||||
<div class="empty-icon">🎮</div>
|
||||
<p class="empty-text">暂无热门游戏</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="games-scroll">
|
||||
<div
|
||||
v-for="game in popularGames"
|
||||
:key="game.id"
|
||||
class="game-card"
|
||||
@click="router.push({ name: 'GamesLibrary' })"
|
||||
>
|
||||
<div class="game-cover-wrap">
|
||||
<img
|
||||
:src="game.cover || '/game-placeholder.png'"
|
||||
:alt="game.name"
|
||||
class="game-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<span class="game-name">{{ game.name }}</span>
|
||||
<span v-if="game.platform" class="game-platform-tag">{{ game.platform }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 280px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* ── 欢迎区 ── */
|
||||
.welcome-section {
|
||||
padding: 28px 32px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
.welcome-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gg-gradient);
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 12px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
background: var(--el-fill-color);
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-members {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
.status-note {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--el-text-color-secondary);
|
||||
/* ── 通用 section ── */
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── 双栏内容 ── */
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr 340px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
/* ── 群组区 ── */
|
||||
.group-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 18px 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
|
||||
}
|
||||
|
||||
.group-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.18);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.group-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 临时小组区 ── */
|
||||
.session-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.session-card,
|
||||
.idle-section {
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 热门游戏 ── */
|
||||
.games-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.games-scroll {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.games-scroll::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.games-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--gg-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.game-card:hover .game-cover-wrap {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.game-cover-wrap {
|
||||
width: 160px;
|
||||
height: 200px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--gg-bg-elevated);
|
||||
border: 1px solid var(--gg-border);
|
||||
transition: box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
.game-platform-tag {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
color: var(--gg-accent-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px dashed var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0 0 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── 加载状态 ── */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--gg-border);
|
||||
border-top-color: var(--gg-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -77,10 +77,14 @@ function handleAvatarUpload() {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
@@ -101,6 +105,8 @@ function handleAvatarUpload() {
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid var(--gg-primary);
|
||||
box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -111,13 +117,16 @@ function handleAvatarUpload() {
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.status-display {
|
||||
padding: 8px 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 6px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
||||
@@ -56,12 +56,16 @@ const showScheduleModal = ref(false)
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
@@ -69,9 +73,15 @@ const showScheduleModal = ref(false)
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: var(--gg-bg-card);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.setting-item:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
@@ -80,33 +90,39 @@ const showScheduleModal = ref(false)
|
||||
|
||||
.setting-info h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
color: var(--gg-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-btn {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: none;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: opacity 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.setting-btn:hover:not(:disabled) {
|
||||
background: var(--el-fill-color);
|
||||
border-color: var(--el-border-color-darker);
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.setting-btn:disabled {
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text-muted);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user