From d0c75d25cf50d3764e6fd41e6a69a9914c80a019 Mon Sep 17 00:00:00 2001
From: congsh <congsh@jiulu-gameplay.com.cn>
Date: Fri, 17 Apr 2026 17:38:27 +0800
Subject: [PATCH] feat: beautify all team components and pages with dark gaming
 theme

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/team/IdleMembersList.vue   |  47 +-
 .../src/components/team/InvitationCard.vue    |  71 ++-
 frontend/src/components/team/StatusToggle.vue |  34 +-
 .../src/components/team/TeamSessionPanel.vue  |  70 ++-
 .../src/components/team/WorkScheduleModal.vue |  14 +-
 frontend/src/views/GamesLibrary.vue           |  44 +-
 frontend/src/views/GroupView.vue              | 579 ++++++++++++++----
 frontend/src/views/Home.vue                   | 477 ++++++++++-----
 frontend/src/views/Profile.vue                |  17 +-
 frontend/src/views/Settings.vue               |  40 +-
 10 files changed, 1020 insertions(+), 373 deletions(-)

diff --git a/frontend/src/components/team/IdleMembersList.vue b/frontend/src/components/team/IdleMembersList.vue
index 49cf379..6297c71 100644
--- a/frontend/src/components/team/IdleMembersList.vue
+++ b/frontend/src/components/team/IdleMembersList.vue
@@ -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>
diff --git a/frontend/src/components/team/InvitationCard.vue b/frontend/src/components/team/InvitationCard.vue
index 72680bf..b3c4bd2 100644
--- a/frontend/src/components/team/InvitationCard.vue
+++ b/frontend/src/components/team/InvitationCard.vue
@@ -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>
diff --git a/frontend/src/components/team/StatusToggle.vue b/frontend/src/components/team/StatusToggle.vue
index 71f8497..8da0413 100644
--- a/frontend/src/components/team/StatusToggle.vue
+++ b/frontend/src/components/team/StatusToggle.vue
@@ -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 {
diff --git a/frontend/src/components/team/TeamSessionPanel.vue b/frontend/src/components/team/TeamSessionPanel.vue
index 9df1ffb..4b49371 100644
--- a/frontend/src/components/team/TeamSessionPanel.vue
+++ b/frontend/src/components/team/TeamSessionPanel.vue
@@ -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>
diff --git a/frontend/src/components/team/WorkScheduleModal.vue b/frontend/src/components/team/WorkScheduleModal.vue
index 736635e..50162cb 100644
--- a/frontend/src/components/team/WorkScheduleModal.vue
+++ b/frontend/src/components/team/WorkScheduleModal.vue
@@ -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>
diff --git a/frontend/src/views/GamesLibrary.vue b/frontend/src/views/GamesLibrary.vue
index 1db9b3b..0bfc004 100644
--- a/frontend/src/views/GamesLibrary.vue
+++ b/frontend/src/views/GamesLibrary.vue
@@ -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>
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
index 88d777a..a03aea0 100644
--- a/frontend/src/views/GroupView.vue
+++ b/frontend/src/views/GroupView.vue
@@ -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">&#x2694;</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">&#x1F7E2;</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">&#x1F465;</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>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 8fe2428..0ee3e64 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -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">&#x1F3AE;</span> 我的群组
+        </h2>
+
+        <div v-if="groupStore.groups.length === 0" class="empty-state">
+          <div class="empty-icon">&#x1F3AE;</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">&#x2694;</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">&#x1F525;</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">&#x1F3AE;</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>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 97e43aa..6a8b82a 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -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 {
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index fff7a4c..a71d2bf 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -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>