congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: beautify all team components and pages with dark gaming theme

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-04-17 17:38:27 +08:00
parent 5c007ac069
commit d0c75d25cf
10 changed files with 1020 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/team/IdleMembersList.vue
+28 -19
View File
@@ -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>
frontend/src/components/team/InvitationCard.vue
+46 -25
View File
@@ -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>
frontend/src/components/team/StatusToggle.vue
+22 -12
View File
@@ -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 {
frontend/src/components/team/TeamSessionPanel.vue
+45 -25
View File
@@ -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>
frontend/src/components/team/WorkScheduleModal.vue
+8 -6
View File
@@ -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>