feat: redesign Layout with dark gaming sidebar

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/views/Layout.vue

@@ -1,197 +1,423 @@
-<!-- src/views/Layout.vue -->
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useGroupStore } from '@/stores/group'
 import { useTeamStore } from '@/stores/team'
+import { useNotificationStore } from '@/stores/notification'
 import StatusToggle from '@/components/team/StatusToggle.vue'
 import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
-import { ElBadge, ElButton, ElIcon } from 'element-plus'
+import NotificationPanel from '@/components/common/NotificationPanel.vue'
 
 const router = useRouter()
+const route = useRoute()
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const teamStore = useTeamStore()
+const notificationStore = useNotificationStore()
 
 const showScheduleModal = ref(false)
-const pendingCount = ref(0)
 
 onMounted(async () => {
   await userStore.initUser()
   await groupStore.loadGroups()
   await teamStore.loadActiveSession()
-  pendingCount.value = await teamStore.getPendingCount()
+  await notificationStore.loadPendingInvitations()
 })
 
-async function handleLogout() {
+function handleLogout() {
   userStore.logout()
   router.push({ name: 'Login' })
 }
 
-function showInviteModal() {
+function selectGroup(groupId: string) {
-  // TODO: 实现邀请模态框
+  groupStore.setCurrentGroup(groupId)
+  router.push({ name: 'GroupView', params: { id: groupId } })
+}
+
+function goHome() {
+  router.push({ name: 'Home' })
 }
 </script>
 
 <template>
-  <div class="layout">
+  <div class="app-layout">
-    <!-- 顶部导航 -->
+    <!-- 侧边栏 -->
-    <header class="header">
+    <aside class="sidebar">
-      <div class="header-left">
+      <div class="sidebar-top">
-        <h1 class="logo">Game Group</h1>
+        <div class="logo" @click="goHome">
+          <span class="logo-icon">🎮</span>
+          <span class="logo-text">Game Group</span>
+        </div>
       </div>
 
-      <div class="header-center">
+      <nav class="sidebar-nav">
-        <nav class="nav">
+        <router-link to="/" class="nav-item" active-class="nav-item--active">
-          <router-link to="/" class="nav-link" active-class="active">
+          <span class="nav-icon">🏠</span>
-            首页
+          <span>首页</span>
         </router-link>
-          <router-link to="/games" class="nav-link" active-class="active">
+        <router-link to="/games" class="nav-item" active-class="nav-item--active">
-            游戏库
+          <span class="nav-icon">🎯</span>
+          <span>游戏库</span>
         </router-link>
       </nav>
+
+      <div class="sidebar-divider" />
+
+      <div class="sidebar-groups">
+        <div class="section-header">
+          <span class="section-title">我的群组</span>
+        </div>
+        <div v-if="groupStore.groups.length === 0" class="empty-groups">
+          暂无群组
+        </div>
+        <div
+          v-for="group in groupStore.groups"
+          :key="group.id"
+          class="group-item"
+          :class="{ 'group-item--active': route.params.id === group.id }"
+          @click="selectGroup(group.id)"
+        >
+          <span class="group-name">{{ group.name }}</span>
+          <span class="group-count">{{ group.members?.length || 0 }}</span>
+        </div>
       </div>
 
-      <div class="header-right">
+      <div class="sidebar-bottom">
-        <el-badge :value="pendingCount" :hidden="pendingCount === 0">
+        <div class="sidebar-divider" />
-          <el-button circle @click="showInviteModal">
+        <div class="user-section">
-            <el-icon>🔔</el-icon>
+          <StatusToggle />
-          </el-button>
+          <button class="schedule-btn" @click="showScheduleModal = true" title="设置工作时间">
-        </el-badge>
+            ⏰
-
+          </button>
-        <status-toggle />
+        </div>
-
+        <div class="user-info">
-        <el-dropdown trigger="click">
-          <span class="user-dropdown">
           <img
             :src="userStore.user?.avatar || '/default-avatar.png'"
             class="user-avatar"
+            alt=""
           />
           <span class="user-name">{{ userStore.user?.username }}</span>
+          <button class="logout-btn" @click="handleLogout" title="退出登录">
+            🚪
+          </button>
+        </div>
+      </div>
+    </aside>
+
+    <!-- 右侧 -->
+    <div class="main-wrapper">
+      <header class="top-header">
+        <h2 class="page-title">
+          {{ $route.name === 'GroupView' ? groupStore.currentGroup?.name : $route.name === 'GamesLibrary' ? '游戏库' : $route.name === 'Profile' ? '个人中心' : $route.name === 'Settings' ? '设置' : '首页' }}
+        </h2>
+        <div class="header-actions">
+          <button class="icon-btn" @click="notificationStore.togglePanel()">
+            <span v-if="notificationStore.unreadCount > 0" class="badge">
+              {{ notificationStore.unreadCount }}
             </span>
-          <template #dropdown>
+            🔔
-            <el-dropdown-menu>
+          </button>
-              <el-dropdown-item @click="router.push('/profile')">
-                个人中心
-              </el-dropdown-item>
-              <el-dropdown-item @click="router.push('/settings')">
-                设置
-              </el-dropdown-item>
-              <el-dropdown-item divided @click="handleLogout">
-                退出登录
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
         </div>
       </header>
 
-    <!-- 主体内容 -->
+      <main class="main-content">
-    <main class="main">
         <router-view />
       </main>
+    </div>
 
-    <!-- 工作时间设置弹窗 -->
+    <!-- 弹窗 -->
-    <work-schedule-modal v-model="showScheduleModal" />
+    <WorkScheduleModal v-model="showScheduleModal" />
+    <NotificationPanel />
   </div>
 </template>
 
 <style scoped>
-.layout {
+.app-layout {
+  display: flex;
   min-height: 100vh;
-  background: var(--el-bg-color-page);
+  background: var(--gg-bg);
 }
 
-.header {
+/* ── 侧边栏 ── */
+.sidebar {
+  width: 240px;
+  background: var(--gg-bg-card);
+  border-right: 1px solid var(--gg-border);
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: space-between;
+  position: fixed;
-  padding: 0 24px;
-  height: 60px;
-  background: var(--el-bg-color);
-  border-bottom: 1px solid var(--el-border-color);
-  position: sticky;
   top: 0;
+  left: 0;
+  bottom: 0;
   z-index: 100;
 }
 
-.header-left {
+.sidebar-top {
-  display: flex;
+  padding: 20px;
-  align-items: center;
 }
 
 .logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.logo-icon {
+  font-size: 24px;
+}
+
+.logo-text {
   font-size: 20px;
   font-weight: 700;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--gg-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin: 0;
+  background-clip: text;
 }
 
-.header-center {
+/* ── 导航 ── */
-  flex: 1;
+.sidebar-nav {
+  padding: 0 12px;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.nav {
+.nav-item {
   display: flex;
-  gap: 8px;
+  align-items: center;
-}
+  gap: 10px;
-
+  padding: 10px 14px;
-.nav-link {
+  border-radius: var(--gg-radius-sm);
-  padding: 8px 16px;
+  color: var(--gg-text-secondary);
-  border-radius: 8px;
   text-decoration: none;
-  color: var(--el-text-color-primary);
   font-size: 14px;
   transition: all 0.2s;
 }
 
-.nav-link:hover {
+.nav-item:hover {
-  background: var(--el-fill-color-light);
+  background: var(--gg-bg-hover);
+  color: var(--gg-text);
 }
 
-.nav-link.active {
+.nav-item--active {
-  background: var(--el-color-primary-light-9);
+  background: rgba(99, 102, 241, 0.15);
-  color: var(--el-color-primary);
+  color: var(--gg-primary-light);
 }
 
-.header-right {
+.nav-icon {
+  font-size: 16px;
+}
+
+/* ── 分割线 ── */
+.sidebar-divider {
+  height: 1px;
+  background: var(--gg-border);
+  margin: 12px 20px;
+}
+
+/* ── 群组列表 ── */
+.sidebar-groups {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 12px;
+}
+
+.section-header {
   display: flex;
   align-items: center;
-  gap: 16px;
+  justify-content: space-between;
+  padding: 4px 14px;
+  margin-bottom: 8px;
 }
 
-.user-dropdown {
+.section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--gg-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.empty-groups {
+  text-align: center;
+  color: var(--gg-text-muted);
+  font-size: 13px;
+  padding: 16px;
+}
+
+.group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-radius: var(--gg-radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.group-item:hover {
+  background: var(--gg-bg-hover);
+}
+
+.group-item--active {
+  background: rgba(99, 102, 241, 0.15);
+  border-left: 3px solid var(--gg-primary);
+}
+
+.group-name {
+  font-size: 14px;
+  color: var(--gg-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-count {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+  background: var(--gg-bg-elevated);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* ── 底部用户区 ── */
+.sidebar-bottom {
+  padding: 0 12px 16px;
+}
+
+.user-section {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 8px 0;
+}
+
+.schedule-btn {
+  background: none;
+  border: none;
+  font-size: 16px;
   cursor: pointer;
-  padding: 4px 8px;
+  padding: 6px 10px;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
   transition: background-color 0.2s;
 }
 
-.user-dropdown:hover {
+.schedule-btn:hover {
-  background: var(--el-fill-color-light);
+  background: var(--gg-bg-hover);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--gg-bg);
+  border-radius: var(--gg-radius-sm);
 }
 
 .user-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
+  object-fit: cover;
 }
 
 .user-name {
+  flex: 1;
   font-size: 14px;
+  color: var(--gg-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.main {
+.logout-btn {
-  max-width: 1200px;
+  background: none;
-  margin: 0 auto;
+  border: none;
-  padding: 24px;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.logout-btn:hover {
+  opacity: 1;
+}
+
+/* ── 右侧主区域 ── */
+.main-wrapper {
+  flex: 1;
+  margin-left: 240px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.top-header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+  background: var(--gg-bg-card);
+  border-bottom: 1px solid var(--gg-border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--gg-text);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-btn {
+  position: relative;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: var(--gg-radius-sm);
+  transition: background-color 0.2s;
+}
+
+.icon-btn:hover {
+  background: var(--gg-bg-hover);
+}
+
+.badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: var(--gg-danger);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  border-radius: 8px;
+  padding: 0 4px;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px 28px;
 }
 </style>