feat: add group management - create, join, member panel with owner controls

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

backend/README.md

@@ -13,7 +13,7 @@ docker-compose up -d
 ```
 
 访问: http://localhost:8090/_/
-管理后台: http://localhost:8090/_/ (admin/admin)
+管理后台: http://localhost:8090/_/ （首次访问时创建管理员账号）
 
 ## 环境变量
 
@@ -25,6 +25,11 @@ PB_DATA=./pb_data
 PB_MIGRATIONS=./pb_migrations
 ```
 
+## 数据库集合
+
+数据库集合通过 PocketBase 管理后台手动创建。`pb_migrations/` 目录无自动迁移文件。
+如需重建数据库，请在管理后台中创建以下集合：users、groups、team_sessions、invitations、games。
+
 ## 开发环境
 
 访问管理后台: http://localhost:8090/_/

backend/pb_hooks/main.go

@@ -8,13 +8,139 @@ import (
 	"github.com/pocketbase/pocketbase/core"
 )
 
-// isGroupMember checks if a user is a member of a group
+func main() {
+	app := pocketbase.New()
+
+	// ── Groups ──
+
+	app.OnRecordBeforeCreateRequest("groups").Add(func(e *core.RecordCreateEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		e.Record.Set("owner", authRecord.Id)
+		e.Record.Set("members", []string{authRecord.Id})
+		return nil
+	})
+
+	app.OnRecordBeforeUpdateRequest("groups").Add(func(e *core.RecordUpdateEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		original, err := app.Dao().FindRecordById("groups", e.Record.Id)
+		if err != nil {
+			return apis.NewNotFoundError("群组不存在", nil)
+		}
+		if original.GetString("owner") != authRecord.Id {
+			return apis.NewForbiddenError("只有群组所有者可以更新群组", nil)
+		}
+		// 保护 owner 字段不被篡改
+		e.Record.Set("owner", original.GetString("owner"))
+		// 验证 members 数量
+		members := e.Record.GetStringSlice("members")
+		maxMembers := e.Record.GetInt("maxMembers")
+		if maxMembers > 0 && len(members) > maxMembers {
+			return apis.NewBadRequestError("成员数量超过上限", nil)
+		}
+		return nil
+	})
+
+	app.OnRecordBeforeDeleteRequest("groups").Add(func(e *core.RecordDeleteEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
+		if err != nil || !isOwner {
+			return apis.NewForbiddenError("只有群组所有者可以删除群组", nil)
+		}
+		return nil
+	})
+
+	// ── Team Sessions ──
+
+	app.OnRecordBeforeCreateRequest("team_sessions").Add(func(e *core.RecordCreateEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		groupId := e.Record.GetString("sourceGroup")
+		isMember, err := isGroupMember(app, groupId, authRecord.Id)
+		if err != nil || !isMember {
+			return apis.NewForbiddenError("只有群组成员可以创建团队会话", nil)
+		}
+		return nil
+	})
+
+	// ── Invitations ──
+
+	app.OnRecordBeforeCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		// 强制设置 from 为当前用户
+		e.Record.Set("from", authRecord.Id)
+		e.Record.Set("status", "pending")
+		return nil
+	})
+
+	// 接受邀请：自动加入 team session + 更新用户状态
+	app.OnRecordBeforeUpdateRequest("invitations").Add(func(e *core.RecordUpdateEvent) error {
+		authRecord, _ := e.HttpContext.AuthRecord()
+		if authRecord == nil {
+			return apis.NewForbiddenError("需要登录", nil)
+		}
+		// 只有 recipient 可以更新邀请
+		if e.Record.GetString("to") != authRecord.Id {
+			return apis.NewForbiddenError("无权操作此邀请", nil)
+		}
+
+		newStatus := e.Record.GetString("status")
+		if newStatus == "accepted" {
+			teamSessionId := e.Record.GetString("teamSession")
+			teamSession, err := app.Dao().FindRecordById("team_sessions", teamSessionId)
+			if err != nil {
+				return apis.NewNotFoundError("临时小组不存在", nil)
+			}
+			// 将用户加入 team session members
+			members := teamSession.GetStringSlice("members")
+			alreadyIn := false
+			for _, m := range members {
+				if m == authRecord.Id {
+					alreadyIn = true
+					break
+				}
+			}
+			if !alreadyIn {
+				members = append(members, authRecord.Id)
+				teamSession.Set("members", members)
+				if err := app.Dao().SaveRecord(teamSession); err != nil {
+					return apis.NewBadRequestError("加入临时小组失败", nil)
+				}
+			}
+
+			// 更新用户状态为 in_team
+			user, err := app.Dao().FindRecordById("users", authRecord.Id)
+			if err == nil {
+				user.Set("status", "in_team")
+				app.Dao().SaveRecord(user)
+			}
+		}
+		return nil
+	})
+
+	if err := app.Start(); err != nil {
+		log.Fatal(err)
+	}
+}
+
 func isGroupMember(app *pocketbase.PocketBase, groupId string, userId string) (bool, error) {
 	group, err := app.Dao().FindRecordById("groups", groupId)
 	if err != nil {
 		return false, err
 	}
-
 	members := group.GetStringSlice("members")
 	for _, member := range members {
 		if member == userId {
@@ -24,7 +150,6 @@ func isGroupMember(app *pocketbase.PocketBase, groupId string, userId string) (b
 	return false, nil
 }
 
-// isGroupOwner checks if a user is the owner of a group
 func isGroupOwner(app *pocketbase.PocketBase, groupId string, userId string) (bool, error) {
 	group, err := app.Dao().FindRecordById("groups", groupId)
 	if err != nil {
@@ -32,128 +157,3 @@ func isGroupOwner(app *pocketbase.PocketBase, groupId string, userId string) (bo
 	}
 	return group.GetString("owner") == userId, nil
 }
-
-func main() {
-	app := pocketbase.New()
-
-	// Groups API Rules
-	app.OnRecordBeforeCreateRequest("groups").Add(func(e *core.RecordCreateEvent) error {
-		authRecord, _ := e.HttpContext.AuthRecord()
-		if authRecord == nil {
-			return apis.NewForbiddenError("需要登录", nil)
-		}
-
-		// Set the owner to the current user
-		e.Record.Set("owner", authRecord.Id)
-		// Initialize members array with the owner
-		e.Record.Set("members", []string{authRecord.Id})
-
-		return nil
-	})
-
-	app.OnRecordBeforeUpdateRequest("groups").Add(func(e *core.RecordUpdateEvent) error {
-		authRecord, _ := e.HttpContext.AuthRecord()
-		if authRecord == nil {
-			return apis.NewForbiddenError("需要登录", nil)
-		}
-
-		// Only owner can update the group
-		isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
-		if err != nil || !isOwner {
-			return apis.NewForbiddenError("只有群组所有者可以更新群组", nil)
-		}
-
-		return nil
-	})
-
-	app.OnRecordBeforeDeleteRequest("groups").Add(func(e *core.RecordDeleteEvent) error {
-		authRecord, _ := e.HttpContext.AuthRecord()
-		if authRecord == nil {
-			return apis.NewForbiddenError("需要登录", nil)
-		}
-
-		// Only owner can delete the group
-		isOwner, err := isGroupOwner(app, e.Record.Id, authRecord.Id)
-		if err != nil || !isOwner {
-			return apis.NewForbiddenError("只有群组所有者可以删除群组", nil)
-		}
-
-		return nil
-	})
-
-	// Team Sessions API Rules
-	app.OnRecordBeforeCreateRequest("team_sessions").Add(func(e *core.RecordCreateEvent) error {
-		authRecord, _ := e.HttpContext.AuthRecord()
-		if authRecord == nil {
-			return apis.NewForbiddenError("需要登录", nil)
-		}
-
-		groupId := e.Record.GetString("group")
-
-		// Check if user is a member of the group
-		isMember, err := isGroupMember(app, groupId, authRecord.Id)
-		if err != nil || !isMember {
-			return apis.NewForbiddenError("只有群组成员可以创建团队会话", nil)
-		}
-
-		return nil
-	})
-
-	// Invitations API Rules
-	app.OnRecordBeforeCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
-		authRecord, _ := e.HttpContext.AuthRecord()
-		if authRecord == nil {
-			return apis.NewForbiddenError("需要登录", nil)
-		}
-
-		groupId := e.Record.GetString("group")
-
-		// Only group owner can create invitations
-		isOwner, err := isGroupOwner(app, groupId, authRecord.Id)
-		if err != nil || !isOwner {
-			return apis.NewForbiddenError("只有群组所有者可以创建邀请", nil)
-		}
-
-		// Set status to pending
-		e.Record.Set("status", "pending")
-
-		return nil
-	})
-
-	app.OnRecordAfterCreateRequest("invitations").Add(func(e *core.RecordCreateEvent) error {
-		// Send real-time notification to the invited user
-		message := map[string]interface{}{
-			"action": "invitation",
-			"data": map[string]interface{}{
-				"id":         e.Record.Id,
-				"group":      e.Record.GetString("group"),
-				"invited_by": e.Record.GetString("invited_by"),
-				"status":     e.Record.GetString("status"),
-				"created":    e.Record.Created.Time(),
-			},
-		}
-
-		// Broadcast to the invited user's channel
-		if err := app.Subscriptions().Broadcast("invitations", message); err != nil {
-			log.Printf("Error broadcasting invitation: %v", err)
-		}
-
-		return nil
-	})
-
-	// Real-time subscription rules
-	app.OnRecordAfterAuthWithTokenRequest().Add(func(e *core.RecordAuthEvent) error {
-		// Subscribe to invitations channel and user's groups channel
-		app.Subscriptions().Subscribe(e.HttpContext.Response(), []string{
-			"invitations",
-			"groups:" + e.Record.Id,
-			"team_sessions",
-		})
-
-		return nil
-	})
-
-	if err := app.Start(); err != nil {
-		log.Fatal(err)
-	}
-}

frontend/src/api/invitations.ts

@@ -1,8 +1,6 @@
 // src/api/invitations.ts
 import pb from './pocketbase'
-import type { Invitation, InviteStatus } from '@/types'
+import type { Invitation } from '@/types'
-import { joinTeamSession } from './sessions'
-import { updateUserStatus } from './users'
 
 // 发送邀请
 export async function sendInvitation(data: {
@@ -71,35 +69,16 @@ export async function respondInvitation(
   response: 'accepted' | 'rejected',
   rejectReason?: string
 ) {
-  const user = pb.authStore.model
+  const updateData: Record<string, unknown> = {
-  if (!user) throw new Error('未登录')
+    status: response
-
-  const invitation = await pb.collection('invitations').getOne(invitationId)
-
-  if (invitation.to !== user.id) {
-    throw new Error('无权操作此邀请')
-  }
-
-  const updateData: Partial<Invitation> = {
-    status: response as InviteStatus,
-    respondedAt: new Date().toISOString()
   }
 
   if (response === 'rejected' && rejectReason) {
     updateData.rejectReason = rejectReason
   }
 
-  // 更新邀请状态
+  // 后端 hook 会自动处理：加入 team members + 更新用户状态
   await pb.collection('invitations').update(invitationId, updateData)
-
-  // 如果接受，加入临时小组
-  if (response === 'accepted') {
-    await joinTeamSession(invitation.teamSession)
-    // 更新用户状态
-    await updateUserStatus('in_team')
-  }
-
-  return updateData
 }
 
 // 订阅邀请变更

frontend/src/api/sessions.ts

@@ -51,17 +51,6 @@ export async function updateTeamStatus(sessionId: string, status: TeamStatus): P
 
 // 结束游戏（解散临时小组）
 export async function endGame(sessionId: string) {
-  const session = await pb.collection('teamSessions').getOne(sessionId)
-
-  // 将所有成员状态恢复为 idle
-  const members = session.members as string[]
-  const updatePromises = members.map(userId =>
-    pb.collection('users').update(userId, { status: 'idle' })
-  )
-
-  await Promise.all(updatePromises)
-
-  // 解散临时小组
   return updateTeamStatus(sessionId, 'dissolved')
 }
 

frontend/src/assets/design.css

@@ -0,0 +1,348 @@
+:root {
+  /* 主色调 */
+  --gg-primary: #6366f1;
+  --gg-primary-light: #818cf8;
+  --gg-primary-dark: #4f46e5;
+  --gg-accent: #a855f7;
+  --gg-accent-light: #c084fc;
+
+  /* 背景色 */
+  --gg-bg: #0f172a;
+  --gg-bg-card: #1e293b;
+  --gg-bg-elevated: #334155;
+  --gg-bg-hover: #334155;
+
+  /* 文字色 */
+  --gg-text: #f1f5f9;
+  --gg-text-secondary: #94a3b8;
+  --gg-text-muted: #64748b;
+
+  /* 边框 */
+  --gg-border: #334155;
+  --gg-border-light: #475569;
+
+  /* 状态色 */
+  --gg-success: #22c55e;
+  --gg-danger: #ef4444;
+  --gg-warning: #f59e0b;
+  --gg-info: #3b82f6;
+
+  /* 圆角 */
+  --gg-radius-sm: 8px;
+  --gg-radius-md: 12px;
+  --gg-radius-lg: 16px;
+  --gg-radius-xl: 20px;
+
+  /* 阴影 */
+  --gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  --gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
+
+  /* 渐变 */
+  --gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+  --gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  --gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+  /* ── Element Plus 覆盖 ── */
+  --el-color-primary: #6366f1;
+  --el-color-primary-light-3: #818cf8;
+  --el-color-primary-light-5: #a5b4fc;
+  --el-color-primary-light-7: #c7d2fe;
+  --el-color-primary-light-9: #312e81;
+  --el-color-primary-dark-2: #4f46e5;
+
+  --el-color-success: #22c55e;
+  --el-color-warning: #f59e0b;
+  --el-color-danger: #ef4444;
+  --el-color-info: #64748b;
+
+  --el-bg-color: #1e293b;
+  --el-bg-color-page: #0f172a;
+  --el-bg-color-overlay: #1e293b;
+
+  --el-text-color-primary: #f1f5f9;
+  --el-text-color-regular: #e2e8f0;
+  --el-text-color-secondary: #94a3b8;
+  --el-text-color-placeholder: #64748b;
+
+  --el-border-color: #334155;
+  --el-border-color-light: #475569;
+  --el-border-color-lighter: #334155;
+  --el-border-color-extra-light: #1e293b;
+
+  --el-fill-color: #334155;
+  --el-fill-color-light: #1e293b;
+  --el-fill-color-lighter: #0f172a;
+  --el-fill-color-extra-light: #1e293b;
+  --el-fill-color-blank: #1e293b;
+  --el-fill-color-dark: #475569;
+
+  --el-mask-color: rgba(0, 0, 0, 0.6);
+  --el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* ── 全局基础 ── */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--gg-bg);
+  color: var(--gg-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--gg-primary-light);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--gg-accent);
+}
+
+/* ── Element Plus 组件覆盖 ── */
+
+/* Card */
+.el-card {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-md) !important;
+}
+.el-card__header {
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+}
+
+/* Dialog */
+.el-dialog {
+  background: var(--gg-bg-card) !important;
+  border: 1px solid var(--gg-border) !important;
+  border-radius: var(--gg-radius-lg) !important;
+}
+.el-dialog__header {
+  color: var(--gg-text) !important;
+}
+.el-dialog__title {
+  color: var(--gg-text) !important;
+}
+
+/* Input */
+.el-input__wrapper {
+  background: var(--gg-bg) !important;
+  box-shadow: 0 0 0 1px var(--gg-border) inset !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--gg-border-light) inset !important;
+}
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px var(--gg-primary) inset !important;
+}
+.el-input__inner {
+  color: var(--gg-text) !important;
+}
+.el-input__inner::placeholder {
+  color: var(--gg-text-muted) !important;
+}
+.el-textarea__inner {
+  background: var(--gg-bg) !important;
+  color: var(--gg-text) !important;
+  border-color: var(--gg-border) !important;
+}
+
+/* Dropdown */
+.el-dropdown-menu {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  border-radius: var(--gg-radius-md) !important;
+  padding: 6px !important;
+}
+.el-dropdown-menu__item {
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-sm) !important;
+  padding: 8px 14px !important;
+}
+.el-dropdown-menu__item:hover {
+  background: var(--gg-bg-hover) !important;
+  color: var(--gg-primary-light) !important;
+}
+.el-dropdown-menu__item--divided::before {
+  background: var(--gg-border) !important;
+}
+
+/* Drawer */
+.el-drawer {
+  background: var(--gg-bg-card) !important;
+}
+.el-drawer__header {
+  color: var(--gg-text) !important;
+  border-bottom: 1px solid var(--gg-border);
+  margin-bottom: 0 !important;
+  padding: 16px 20px !important;
+}
+.el-drawer__body {
+  padding: 20px !important;
+}
+
+/* Button */
+.el-button--primary {
+  background: var(--gg-gradient) !important;
+  border: none !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-button--primary:hover {
+  opacity: 0.9;
+}
+.el-button--default {
+  background: var(--gg-bg-elevated) !important;
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-button--default:hover {
+  border-color: var(--gg-primary) !important;
+  color: var(--gg-primary-light) !important;
+}
+
+/* Badge */
+.el-badge__content {
+  background-color: var(--gg-danger) !important;
+  border: none !important;
+}
+
+/* Tag */
+.el-tag {
+  border-radius: 6px !important;
+}
+
+/* Message */
+.el-message {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  border-radius: var(--gg-radius-md) !important;
+}
+.el-message__content {
+  color: var(--gg-text) !important;
+}
+
+/* Pagination */
+.el-pagination {
+  --el-pagination-button-bg-color: var(--gg-bg-elevated);
+  --el-pagination-hover-color: var(--gg-primary-light);
+}
+.el-pager li {
+  background: var(--gg-bg-elevated) !important;
+  color: var(--gg-text-secondary) !important;
+}
+.el-pager li.is-active {
+  background: var(--gg-gradient) !important;
+  color: white !important;
+}
+
+/* Select */
+.el-select-dropdown {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+.el-select-dropdown__item {
+  color: var(--gg-text) !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: var(--gg-bg-hover) !important;
+}
+.el-select-dropdown__item.selected {
+  color: var(--gg-primary-light) !important;
+}
+
+/* Checkbox */
+.el-checkbox {
+  color: var(--gg-text) !important;
+}
+.el-checkbox__label {
+  color: var(--gg-text) !important;
+}
+
+/* Time Picker */
+.el-time-panel {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+
+/* MessageBox */
+.el-message-box {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+.el-message-box__title {
+  color: var(--gg-text) !important;
+}
+.el-message-box__message {
+  color: var(--gg-text-secondary) !important;
+}
+
+/* Loading */
+.el-loading-mask {
+  background: rgba(15, 23, 42, 0.8) !important;
+}
+
+/* ── 工具类 ── */
+.gg-gradient {
+  background: var(--gg-gradient);
+}
+
+.gg-glow {
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+}
+
+.gg-card {
+  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;
+}
+
+.gg-card:hover {
+  border-color: var(--gg-primary);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+.gg-text-gradient {
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gg-status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.gg-status-dot--idle { background: var(--gg-success); box-shadow: 0 0 6px var(--gg-success); }
+.gg-status-dot--working { background: var(--gg-danger); box-shadow: 0 0 6px var(--gg-danger); }
+.gg-status-dot--in_team { background: var(--gg-info); box-shadow: 0 0 6px var(--gg-info); }
+.gg-status-dot--away { background: var(--gg-text-muted); }
+
+/* 滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--gg-border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gg-border-light);
+}

frontend/src/components/common/NotificationPanel.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useNotificationStore } from '@/stores/notification'
+import InvitationCard from '@/components/team/InvitationCard.vue'
+
+const store = useNotificationStore()
+
+onMounted(() => {
+  store.loadPendingInvitations()
+})
+
+function onInvitationResponded(id: string, _accepted: boolean) {
+  store.removeInvitation(id)
+}
+</script>
+
+<template>
+  <el-drawer
+    v-model="store.showPanel"
+    title="通知"
+    direction="rtl"
+    size="380px"
+  >
+    <div class="notification-panel">
+      <div v-if="store.pendingInvitations.length === 0" class="empty">
+        暂无新通知
+      </div>
+      <div v-else class="invitation-list">
+        <InvitationCard
+          v-for="invitation in store.pendingInvitations"
+          :key="invitation.id"
+          :invitation="invitation"
+          @responded="onInvitationResponded"
+        />
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+.notification-panel {
+  padding: 0 4px;
+}
+
+.empty {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding: 48px 0;
+}
+
+.invitation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

frontend/src/components/group/CreateGroupDialog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { createGroup } from '@/api/groups'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const router = useRouter()
+const groupStore = useGroupStore()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const form = ref({
+  name: '',
+  description: '',
+  maxMembers: 20
+})
+const loading = ref(false)
+
+async function handleSubmit() {
+  if (!form.value.name.trim()) {
+    ElMessage.warning('请输入群组名称')
+    return
+  }
+  loading.value = true
+  try {
+    const group = await createGroup({
+      name: form.value.name.trim(),
+      description: form.value.description.trim(),
+      maxMembers: form.value.maxMembers
+    })
+    await groupStore.loadGroups()
+    visible.value = false
+    form.value = { name: '', description: '', maxMembers: 20 }
+    ElMessage.success('群组创建成功')
+    if (group?.id) {
+      router.push({ name: 'GroupView', params: { id: group.id } })
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || '创建群组失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="创建群组" width="440px">
+    <div class="create-form">
+      <div class="form-field">
+        <label>群组名称 <span class="required">*</span></label>
+        <el-input v-model="form.name" placeholder="给群组起个名字" maxlength="50" show-word-limit />
+      </div>
+      <div class="form-field">
+        <label>群组描述</label>
+        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="简单介绍这个群组" maxlength="500" show-word-limit />
+      </div>
+      <div class="form-field">
+        <label>最大成员数</label>
+        <el-input-number v-model="form.maxMembers" :min="2" :max="100" />
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">创建</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.create-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gg-text);
+}
+
+.required {
+  color: var(--gg-danger);
+}
+</style>

frontend/src/components/group/GroupMembersPanel.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { useUserStore } from '@/stores/user'
+
+const groupStore = useGroupStore()
+const userStore = useUserStore()
+
+const group = computed(() => groupStore.currentGroup)
+const members = computed(() => groupStore.currentMembers)
+const isOwner = computed(() => group.value?.owner === userStore.userId)
+
+function copyGroupId() {
+  if (group.value?.id) {
+    navigator.clipboard.writeText(group.value.id)
+    ElMessage.success('群组 ID 已复制，分享给好友即可加入')
+  }
+}
+
+async function removeMember(userId: string, username: string) {
+  if (!isOwner.value) return
+  try {
+    await ElMessageBox.confirm(`确定要将 ${username} 移出群组吗？`, '确认', { type: 'warning' })
+    const group = groupStore.currentGroup
+    if (!group) return
+    // 直接更新群组的 members 列表
+    const { pb } = await import('@/api/pocketbase')
+    const newMembers = group.members.filter(id => id !== userId)
+    await pb.collection('groups').update(group.id, { members: newMembers })
+    await groupStore.setCurrentGroup(group.id)
+    ElMessage.success('已移除成员')
+  } catch {
+    // 用户取消
+  }
+}
+</script>
+
+<template>
+  <div v-if="group" class="members-panel">
+    <div class="panel-header">
+      <h3>群组信息</h3>
+    </div>
+
+    <!-- 分享群组 ID -->
+    <div class="share-section">
+      <label>群组 ID（分享给好友）</label>
+      <div class="share-row">
+        <code class="group-id">{{ group.id }}</code>
+        <button class="copy-btn" @click="copyGroupId">复制</button>
+      </div>
+    </div>
+
+    <div class="info-row">
+      <span class="info-label">成员</span>
+      <span class="info-value">{{ members.length }} / {{ group.maxMembers }}</span>
+    </div>
+
+    <div class="members-list">
+      <div v-for="member in members" :key="member.id" class="member-row">
+        <img :src="member.avatar || '/default-avatar.png'" class="member-avatar" alt="" />
+        <div class="member-info">
+          <span class="member-name">{{ member.username }}</span>
+          <span v-if="member.id === group.owner" class="owner-badge">群主</span>
+        </div>
+        <button
+          v-if="isOwner && member.id !== group.owner && member.id !== userStore.userId"
+          class="remove-btn"
+          @click="removeMember(member.id, member.username)"
+        >
+          移除
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.members-panel {
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+  padding: 20px;
+}
+
+.panel-header {
+  margin-bottom: 16px;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.share-section {
+  margin-bottom: 16px;
+}
+
+.share-section label {
+  display: block;
+  font-size: 12px;
+  color: var(--gg-text-secondary);
+  margin-bottom: 6px;
+}
+
+.share-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.group-id {
+  flex: 1;
+  padding: 6px 10px;
+  background: var(--gg-bg);
+  border: 1px solid var(--gg-border);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--gg-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy-btn {
+  padding: 6px 14px;
+  background: var(--gg-gradient);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.copy-btn:hover {
+  opacity: 0.9;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--gg-border);
+  margin-bottom: 12px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: var(--gg-text-secondary);
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.members-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.member-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.member-row:hover {
+  background: var(--gg-bg-hover);
+}
+
+.member-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.member-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.member-name {
+  font-size: 14px;
+}
+
+.owner-badge {
+  font-size: 11px;
+  padding: 1px 8px;
+  background: var(--gg-gradient);
+  color: white;
+  border-radius: 10px;
+}
+
+.remove-btn {
+  padding: 4px 10px;
+  background: none;
+  border: 1px solid var(--gg-danger);
+  border-radius: 4px;
+  color: var(--gg-danger);
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.remove-btn:hover {
+  opacity: 1;
+}
+</style>

frontend/src/components/group/JoinGroupDialog.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { getGroup, joinGroup } from '@/api/groups'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const groupStore = useGroupStore()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const groupId = ref('')
+const groupInfo = ref<any>(null)
+const loading = ref(false)
+const joining = ref(false)
+
+async function searchGroup() {
+  if (!groupId.value.trim()) {
+    ElMessage.warning('请输入群组 ID')
+    return
+  }
+  loading.value = true
+  try {
+    groupInfo.value = await getGroup(groupId.value.trim())
+  } catch (error) {
+    groupInfo.value = null
+    ElMessage.error('未找到该群组')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleJoin() {
+  if (!groupInfo.value) return
+  joining.value = true
+  try {
+    await joinGroup(groupInfo.value.id)
+    await groupStore.loadGroups()
+    visible.value = false
+    groupId.value = ''
+    groupInfo.value = null
+    ElMessage.success('已申请加入群组，等待群主审核')
+  } catch (error: any) {
+    ElMessage.error(error.message || '加入群组失败')
+  } finally {
+    joining.value = false
+  }
+}
+
+function reset() {
+  groupId.value = ''
+  groupInfo.value = null
+}
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="加入群组" width="440px" @close="reset">
+    <div class="join-form">
+      <div class="form-field">
+        <label>群组 ID</label>
+        <div class="search-row">
+          <el-input v-model="groupId" placeholder="输入群主分享的群组 ID" />
+          <el-button type="primary" :loading="loading" @click="searchGroup">查找</el-button>
+        </div>
+      </div>
+
+      <div v-if="groupInfo" class="group-preview">
+        <div class="preview-header">
+          <h3 class="preview-name">{{ groupInfo.name }}</h3>
+          <span class="preview-members">{{ groupInfo.members?.length || 0 }} / {{ groupInfo.maxMembers }} 人</span>
+        </div>
+        <p v-if="groupInfo.description" class="preview-desc">{{ groupInfo.description }}</p>
+        <el-button type="primary" :loading="joining" @click="handleJoin" style="width:100%; margin-top: 12px;">
+          申请加入
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.join-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.search-row {
+  display: flex;
+  gap: 8px;
+}
+
+.search-row .el-input {
+  flex: 1;
+}
+
+.group-preview {
+  padding: 16px;
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.preview-members {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+}
+
+.preview-desc {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--gg-text-secondary);
+}
+</style>

frontend/src/components/team/GameSelectDialog.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { searchGames } from '@/api/games'
+import type { Game } from '@/types'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'select': [gameName: string]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const searchQuery = ref('')
+const loading = ref(false)
+const games = ref<Game[]>([])
+const customGameName = ref('')
+
+watch(() => props.modelValue, (show) => {
+  if (show) {
+    searchQuery.value = ''
+    customGameName.value = ''
+    games.value = []
+  }
+})
+
+async function handleSearch() {
+  if (!searchQuery.value.trim()) {
+    games.value = []
+    return
+  }
+  loading.value = true
+  try {
+    games.value = await searchGames(searchQuery.value)
+  } catch (error) {
+    console.error('搜索游戏失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectGame(game: Game) {
+  emit('select', game.name)
+  visible.value = false
+}
+
+function confirmCustomGame() {
+  if (customGameName.value.trim()) {
+    emit('select', customGameName.value.trim())
+    visible.value = false
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="选择游戏"
+    width="480px"
+  >
+    <div class="game-select">
+      <el-input
+        v-model="searchQuery"
+        placeholder="搜索游戏..."
+        clearable
+        @input="handleSearch"
+      />
+
+      <div v-if="loading" class="loading">搜索中...</div>
+
+      <div v-else-if="games.length > 0" class="game-list">
+        <div
+          v-for="game in games"
+          :key="game.id"
+          class="game-item"
+          @click="selectGame(game)"
+        >
+          <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>
+
+      <div v-else-if="searchQuery" class="no-results">
+        未找到匹配的游戏，手动输入：
+      </div>
+
+      <div class="custom-input">
+        <el-input
+          v-model="customGameName"
+          placeholder="手动输入游戏名称"
+          @keyup.enter="confirmCustomGame"
+        />
+        <el-button
+          type="primary"
+          :disabled="!customGameName.trim()"
+          @click="confirmCustomGame"
+        >
+          确认
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.game-select {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.loading, .no-results {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding: 24px;
+}
+
+.game-list {
+  max-height: 320px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.game-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.game-item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.game-cover {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.game-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.game-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.game-platform {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.custom-input {
+  display: flex;
+  gap: 8px;
+}
+</style>

frontend/src/components/team/IdleMembersList.vue

@@ -21,12 +21,18 @@ const idleMembers = computed(() =>
 )
 
 async function inviteMember(userId: string, username: string) {
+  const { getActiveTeamSession } = await import('@/api/sessions')
+  const session = await getActiveTeamSession()
+
+  if (!session) {
+    ElMessage.warning('请先创建临时小组')
+    return
+  }
+
   try {
-    // 这里需要先创建临时小组，或者检查是否有活跃的临时小组
-    // 简化版本：发送邀请
     await sendInvitation({
       to: userId,
-      teamSession: '' // 实际使用时需要先创建临时小组
+      teamSession: session.id
     })
     ElMessage.success(`已邀请 ${username}`)
   } catch (error: any) {
@@ -75,35 +81,38 @@ async function inviteMember(userId: string, username: string) {
 
 <style scoped>
 .idle-members-list {
-  background: var(--el-bg-color);
+  background: var(--gg-bg-card);
-  border-radius: 12px;
+  border: 1px solid var(--gg-border);
-  padding: 16px;
+  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);
+  color: var(--gg-text-muted);
-  padding: 32px;
+  padding: 40px 32px;
+  font-size: 14px;
 }
 
 .member-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .member-item {
@@ -111,13 +120,15 @@ async function inviteMember(userId: string, username: string) {
   align-items: center;
   gap: 12px;
   padding: 12px;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  background: var(--el-bg-color-page);
+  background: var(--gg-bg);
-  transition: background-color 0.2s;
+  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 {
@@ -125,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 {
@@ -136,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;
+  border-radius: var(--gg-radius-sm);
-  background: var(--el-color-primary);
+  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

@@ -85,17 +85,23 @@ async function rejectInvitation() {
 
 <style scoped>
 .invitation-card {
-  background: var(--el-bg-color);
+  background: var(--gg-bg-card);
-  border-radius: 12px;
+  border: 1px solid var(--gg-border);
-  padding: 16px;
+  border-radius: var(--gg-radius-md);
-  border: 1px solid var(--el-border-color);
+  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;
+  padding: 12px 14px;
-  background: var(--el-bg-color-page);
+  background: var(--gg-bg);
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  margin-bottom: 12px;
+  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);
+  background: var(--gg-bg-elevated);
-  color: var(--el-text-color-primary);
+  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;
+  padding: 10px 12px;
-  border: 1px solid var(--el-border-color);
+  border: 1px solid var(--gg-border);
-  border-radius: 6px;
+  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/InviteButton.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { sendInvitation } from '@/api/invitations'
+import { createTeamSession } from '@/api/sessions'
+import { useTeamStore } from '@/stores/team'
+import { useGroupStore } from '@/stores/group'
+import { useUserStore } from '@/stores/user'
+import GameSelectDialog from './GameSelectDialog.vue'
+
+const props = defineProps<{
+  userId: string
+}>()
+
+const teamStore = useTeamStore()
+const groupStore = useGroupStore()
+const userStore = useUserStore()
+
+const loading = ref(false)
+const showGameSelect = ref(false)
+
+async function handleInvite() {
+  if (teamStore.currentSession) {
+    await sendInvite(teamStore.currentSession.id)
+  } else {
+    showGameSelect.value = true
+  }
+}
+
+async function handleGameSelect(gameName: string) {
+  loading.value = true
+  try {
+    const session = await createTeamSession({
+      sourceGroup: groupStore.currentGroupId,
+      name: `${userStore.user?.username || ''}的车队`,
+      gameName,
+      members: [userStore.userId]
+    })
+    teamStore.currentSession = session
+    await sendInvite(session.id)
+  } catch (error: any) {
+    ElMessage.error(error.message || '创建临时小组失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function sendInvite(teamSessionId: string) {
+  loading.value = true
+  try {
+    await sendInvitation({
+      to: props.userId,
+      teamSession: teamSessionId
+    })
+    ElMessage.success('邀请已发送')
+  } catch (error: any) {
+    ElMessage.error(error.message || '邀请发送失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-button
+    type="primary"
+    size="small"
+    :loading="loading"
+    @click="handleInvite"
+  >
+    邀请
+  </el-button>
+
+  <GameSelectDialog
+    v-model="showGameSelect"
+    @select="handleGameSelect"
+  />
+</template>

frontend/src/components/team/StatusToggle.vue

@@ -3,12 +3,20 @@
 import { computed } from 'vue'
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
 import { useUserStore } from '@/stores/user'
-import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
+import { UserStatusMap, type UserStatus } from '@/types'
 
 const userStore = useUserStore()
 
 const currentStatus = computed(() => userStore.userStatus)
-const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
+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 statusText = computed(() => UserStatusMap[currentStatus.value])
 
 async function setStatus(status: UserStatus) {
@@ -19,22 +27,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 +55,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);
+  background: var(--gg-bg-hover);
-}
+  border-color: var(--gg-primary);
-
-.status-icon {
-  font-size: 16px;
 }
 
 .status-text {
   font-size: 14px;
+  color: var(--gg-text);
+  font-weight: 500;
 }
 
 .menu-item {

frontend/src/components/team/TeamSessionPanel.vue

@@ -79,10 +79,11 @@ async function endGame() {
 
 <style scoped>
 .team-session-panel {
-  background: var(--el-bg-color);
+  background: var(--gg-bg-card);
-  border-radius: 12px;
+  border: 1px solid var(--gg-primary);
-  padding: 16px;
+  box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
-  border: 1px solid var(--el-color-primary);
+  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);
+  background: var(--gg-primary-light);
-  color: var(--el-color-primary);
+  color: var(--gg-bg);
   font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
 
 .session-game {
   display: flex;
   gap: 8px;
-  padding: 12px;
+  padding: 12px 14px;
-  background: var(--el-bg-color-page);
+  background: var(--gg-bg);
-  border-radius: 8px;
+  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;
+  padding: 10px 12px;
-  background: var(--el-bg-color-page);
+  background: var(--gg-bg);
-  border-radius: 6px;
+  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;
+  border-radius: var(--gg-radius-sm);
-  background: var(--el-color-danger);
+  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);
+  background: var(--gg-bg-card);
-  border-radius: 12px;
+  border: 1px solid var(--gg-border);
-  padding: 32px;
+  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

@@ -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;
+  font-weight: 600;
-  color: var(--el-text-color-primary);
+  color: var(--gg-text);
 }
 
 .form-hint {
-  padding: 12px;
+  padding: 12px 14px;
-  background: var(--el-color-info-light-9);
+  background: var(--gg-bg);
-  border-radius: 6px;
+  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>

frontend/src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import './assets/design.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'

frontend/src/stores/notification.ts

@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { Invitation } from '@/types'
+import { getPendingInvitations } from '@/api/invitations'
+
+export const useNotificationStore = defineStore('notification', () => {
+  const pendingInvitations = ref<Invitation[]>([])
+  const loading = ref(false)
+  const showPanel = ref(false)
+
+  const unreadCount = computed(() => pendingInvitations.value.length)
+
+  async function loadPendingInvitations() {
+    try {
+      loading.value = true
+      pendingInvitations.value = await getPendingInvitations()
+    } catch (error) {
+      console.error('加载待处理邀请失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function removeInvitation(invitationId: string) {
+    pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitationId)
+  }
+
+  function togglePanel() {
+    showPanel.value = !showPanel.value
+  }
+
+  return {
+    pendingInvitations,
+    loading,
+    showPanel,
+    unreadCount,
+    loadPendingInvitations,
+    removeInvitation,
+    togglePanel
+  }
+})

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;
+  padding: 80px 32px;
-  color: var(--el-text-color-secondary);
+  color: var(--gg-text-muted);
+  font-size: 16px;
 }
 
 .empty {
   text-align: center;
-  padding: 60px;
+  padding: 80px 32px;
-  color: var(--el-text-color-secondary);
+  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;
+  padding: 3px 10px;
-  background: var(--el-fill-color-light);
+  background: var(--gg-bg-elevated);
-  border-radius: 4px;
+  border-radius: 6px;
   font-size: 11px;
-  color: var(--el-text-color-secondary);
+  color: var(--gg-primary-light);
+  font-weight: 500;
 }
 </style>

frontend/src/views/GroupView.vue

@@ -1,17 +1,56 @@
 <!-- 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 TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
 import IdleMembersList from '@/components/team/IdleMembersList.vue'
-import { ElCard, ElButton } from 'element-plus'
+import GroupMembersPanel from '@/components/group/GroupMembersPanel.vue'
 
 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 +62,81 @@ async function refreshMembers() {
 
 <template>
   <div class="group-view">
-    <div class="page-header">
+    <!-- 顶部群组信息条 -->
-      <h1>{{ groupStore.currentGroup?.name }}</h1>
+    <section class="group-header">
-      <p class="description">{{ groupStore.currentGroup?.description }}</p>
+      <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="page-content">
+      <div class="header-meta">
-      <!-- 左侧边栏 -->
+        <span class="meta-item">
-      <aside class="sidebar-left">
+          <span class="meta-label">群主:</span>
-        <team-session-panel />
+          <span class="meta-value">{{ ownerName }}</span>
-
+        </span>
-        <el-card class="card mt-16">
+        <span class="meta-divider">|</span>
-          <template #header>
+        <span class="meta-item">
-            <div class="card-header">
+          <span class="meta-label">容量:</span>
-              <h3>群组信息</h3>
+          <span class="meta-value">{{ members.length }} / {{ group?.maxMembers || '-' }}</span>
-            </div>
-          </template>
-
-          <div class="group-info">
-            <div class="info-item">
-              <span class="label">成员数</span>
-              <span class="value">{{ groupStore.currentMembers.length }} / {{ groupStore.currentGroup?.maxMembers }}</span>
-            </div>
-            <div class="info-item">
-              <span class="label">群主</span>
-              <span class="value">
-                {{ groupStore.currentMembers.find(m => m.id === groupStore.currentGroup?.owner)?.username }}
         </span>
       </div>
+    </section>
+
+    <!-- 主体双栏 -->
+    <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>
-        </el-card>
+        </section>
-      </aside>
 
-      <!-- 主内容区 -->
+        <!-- 空闲成员 -->
-      <main class="main-content">
+        <section class="panel-block">
-        <idle-membersList status="idle" />
+          <h2 class="block-title">
-      </main>
+            <span class="title-icon">&#x1F7E2;</span> 空闲成员
-
+          </h2>
-      <!-- 右侧边栏 -->
+          <div class="panel-card">
-      <aside class="sidebar-right">
+            <IdleMembersList status="idle" />
-        <el-card class="card">
-          <template #header>
-            <div class="card-header">
-              <h3>所有成员</h3>
-              <el-button size="small" @click="refreshMembers">刷新</el-button>
           </div>
-          </template>
+        </section>
 
-          <idle-membersList />
+        <!-- 所有成员 (按状态分组) -->
-        </el-card>
+        <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>
+        </section>
+      </div>
+
+      <!-- 右列: 群组成员管理面板 -->
+      <aside class="right-col">
+        <GroupMembersPanel />
       </aside>
     </div>
   </div>
@@ -80,80 +145,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 {
+.group-header::before {
-  font-size: 28px;
+  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 {
+.member-count-badge {
-  display: grid;
+  font-size: 13px;
-  grid-template-columns: 320px 1fr 280px;
+  padding: 4px 14px;
-  gap: 16px;
+  border-radius: 20px;
-}
+  background: rgba(99, 102, 241, 0.15);
-
+  color: var(--gg-primary-light);
-.sidebar-left,
-.sidebar-right {
-  display: flex;
-  flex-direction: column;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.card {
-  border-radius: 12px;
-}
-
-.mt-16 {
-  margin-top: 16px;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.group-info {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.info-item .label {
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-}
-
-.info-item .value {
-  font-size: 14px;
   font-weight: 500;
 }
+
+.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>

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">
+    <!-- 欢迎区 -->
-      <!-- 左侧边栏 -->
+    <section class="welcome-section">
-      <aside class="sidebar">
+      <h1 class="welcome-title">
-        <el-card class="card">
+        欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.username || '玩家' }}</span>!
-          <template #header>
+      </h1>
-            <div class="card-header">
+      <div class="status-line">
-              <h3>我的群组</h3>
+        <span :class="statusDotClass" />
-              <el-button size="small" type="primary">+ 创建</el-button>
+        <span class="status-text">{{ statusText }}</span>
+        <span v-if="userStore.user?.statusNote" class="status-note">{{ userStore.user.statusNote }}</span>
       </div>
-          </template>
+    </section>
 
-          <div v-if="groupStore.groups.length === 0" class="empty">
+    <!-- 主内容双栏 -->
-            <el-empty description="暂无群组" :image-size="80" />
+    <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-list">
+        <div v-else class="group-grid">
           <div
             v-for="group in groupStore.groups"
             :key="group.id"
-              class="group-item"
+            class="group-card"
             @click="selectGroup(group.id)"
           >
-              <div class="group-info">
+            <div class="group-card-header">
               <span class="group-name">{{ group.name }}</span>
-                <span class="group-members">{{ group.members.length }} 成员</span>
+              <span class="member-badge">{{ group.members.length }} 人</span>
+            </div>
+            <p class="group-desc">{{ group.description || '暂无简介' }}</p>
           </div>
         </div>
-          </div>
+      </section>
-        </el-card>
-      </aside>
 
-      <!-- 主内容区 -->
+      <!-- 右列: 当前临时小组 -->
-      <main class="main-content">
+      <section class="section session-section">
-        <!-- 当前临时小组 -->
+        <h2 class="section-title">
-        <team-session-panel />
+          <span class="section-icon">&#x2694;</span> 当前临时小组
+        </h2>
+        <div class="session-card">
+          <TeamSessionPanel />
+        </div>
+
+        <div class="idle-section">
+          <IdleMembersList status="idle" />
+        </div>
+      </section>
+    </div>
 
     <!-- 热门游戏 -->
-        <el-card class="card mt-16">
+    <section class="section games-section">
-          <template #header>
+      <h2 class="section-title">
-            <h3>热门游戏</h3>
+        <span class="section-icon">&#x1F525;</span> 热门游戏
-          </template>
+      </h2>
 
-          <div v-if="loading" class="loading">加载中...</div>
+      <div v-if="loading" class="loading-state">
+        <div class="loading-spinner" />
+        <span>加载中...</span>
+      </div>
 
-          <div v-else class="games-grid">
+      <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 class="game-platform">{{ game.platform }}</span>
+            <span v-if="game.platform" class="game-platform-tag">{{ game.platform }}</span>
           </div>
         </div>
       </div>
-        </el-card>
+    </section>
-      </main>
-
-      <!-- 右侧边栏 -->
-      <aside class="sidebar">
-        <el-card class="card">
-          <template #header>
-            <h3>空闲成员</h3>
-          </template>
-
-          <idle-membersList />
-        </el-card>
-      </aside>
-    </div>
   </div>
 </template>
 
 <style scoped>
 .home-page {
   width: 100%;
-}
-
-.page-content {
-  display: grid;
-  grid-template-columns: 280px 1fr 280px;
-  gap: 16px;
-}
-
-.sidebar {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 28px;
 }
 
-.main-content {
+/* ── 欢迎区 ── */
-  display: flex;
+.welcome-section {
-  flex-direction: column;
+  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 {
+.welcome-section::before {
-  border-radius: 12px;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gg-gradient);
 }
 
-.mt-16 {
+.welcome-title {
-  margin-top: 16px;
+  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 {
+.status-text {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.empty {
-  padding: 20px;
-}
-
-.group-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.group-item {
-  padding: 12px;
-  border-radius: 8px;
-  background: var(--el-fill-color-light);
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.group-item:hover {
-  background: var(--el-fill-color);
-}
-
-.group-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.group-name {
   font-size: 14px;
+  color: var(--gg-text-secondary);
   font-weight: 500;
 }
 
-.group-members {
+.status-note {
-  font-size: 12px;
+  font-size: 13px;
-  color: var(--el-text-color-secondary);
+  color: var(--gg-text-muted);
 }
 
-.loading {
+/* ── 通用 section ── */
-  text-align: center;
+.section {
-  padding: 40px;
+  display: flex;
-  color: var(--el-text-color-secondary);
+  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);
+  grid-template-columns: 1fr 340px;
-  gap: 12px;
+  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;
+  display: block;
-  background: var(--el-fill-color-light);
 }
 
 .game-info {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
-  margin-top: 8px;
+  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>

frontend/src/views/Layout.vue

@@ -1,197 +1,454 @@
-<!-- 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'
+import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
+import JoinGroupDialog from '@/components/group/JoinGroupDialog.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)
+const showCreateGroup = ref(false)
+const showJoinGroup = ref(false)
 
 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 class="section-actions">
+            <button class="section-btn" @click="showCreateGroup = true" title="创建群组">+</button>
+            <button class="section-btn" @click="showJoinGroup = true" title="加入群组">&#x1F517;</button>
+          </div>
+        </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 />
+    <CreateGroupDialog v-model="showCreateGroup" />
+    <JoinGroupDialog v-model="showJoinGroup" />
   </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;
+}
+
+.section-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.section-btn {
+  background: none;
+  border: 1px solid var(--gg-border);
+  border-radius: 6px;
+  color: var(--gg-text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 8px;
+  transition: all 0.2s;
+}
+
+.section-btn:hover {
+  border-color: var(--gg-primary);
+  color: var(--gg-primary);
+}
+
+.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>

frontend/src/views/Login.vue

@@ -40,8 +40,17 @@ function goToRegister() {
 
 <template>
   <div class="login-page">
+    <!-- CSS 星星背景 -->
+    <div class="stars" aria-hidden="true"></div>
+    <div class="stars stars--sm" aria-hidden="true"></div>
+
     <div class="login-card">
-      <h1 class="title">登录 Game Group</h1>
+      <div class="card-header">
+        <h1 class="brand">
+          <span class="brand-text">Game Group</span>
+        </h1>
+        <p class="subtitle">登录你的账号</p>
+      </div>
 
       <form class="login-form" @submit.prevent="handleLogin">
         <div class="form-group">
@@ -66,6 +75,7 @@ function goToRegister() {
         </div>
 
         <button type="submit" class="submit-btn" :disabled="loading">
+          <span v-if="loading" class="btn-loader"></span>
           {{ loading ? '登录中...' : '登录' }}
         </button>
       </form>
@@ -79,36 +89,104 @@ function goToRegister() {
 </template>
 
 <style scoped>
+/* ── 深空背景 ── */
 .login-page {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  padding: 20px;
+  padding: 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+  overflow: hidden;
 }
 
+/* ── CSS 星星 ── */
+.stars {
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
+    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
+    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
+  animation: twinkle 4s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+
+.stars--sm {
+  background-image:
+    radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
+  animation: twinkle 6s ease-in-out 1s infinite alternate;
+}
+
+@keyframes twinkle {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+/* ── 毛玻璃卡片 ── */
 .login-card {
+  position: relative;
+  z-index: 1;
   width: 100%;
-  max-width: 400px;
+  max-width: 420px;
-  padding: 40px;
+  padding: 48px 40px 40px;
-  background: white;
+  background: rgba(30, 41, 59, 0.55);
-  border-radius: 16px;
+  backdrop-filter: blur(16px);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: var(--gg-radius-xl);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
-.title {
+/* ── 头部品牌 ── */
-  font-size: 28px;
+.card-header {
-  font-weight: 700;
   text-align: center;
-  margin: 0 0 32px;
+  margin-bottom: 36px;
-  color: #333;
 }
 
+.brand {
+  margin: 0 0 8px;
+}
+
+.brand-text {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 15px;
+  color: var(--gg-text-secondary);
+  font-weight: 400;
+}
+
+/* ── 表单 ── */
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 22px;
 }
 
 .form-group {
@@ -118,59 +196,94 @@ function goToRegister() {
 }
 
 .form-group label {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
-  color: #555;
+  color: var(--gg-text-secondary);
+  letter-spacing: 0.02em;
 }
 
 .form-group input {
   padding: 12px 16px;
-  border: 1px solid #ddd;
+  background: var(--gg-bg);
-  border-radius: 8px;
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-sm);
+  color: var(--gg-text);
   font-size: 14px;
-  transition: border-color 0.2s;
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+.form-group input::placeholder {
+  color: var(--gg-text-muted);
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--gg-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
 }
 
+/* ── 提交按钮 ── */
 .submit-btn {
+  position: relative;
   padding: 14px;
+  margin-top: 4px;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--gg-gradient);
-  color: white;
+  color: #fff;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: box-shadow 0.3s, transform 0.15s;
 }
 
 .submit-btn:hover:not(:disabled) {
-  opacity: 0.9;
+  box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
+  transform: translateY(-1px);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
 }
 
 .submit-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.55;
   cursor: not-allowed;
 }
 
+.btn-loader {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 底部链接 ── */
 .footer-links {
-  margin-top: 24px;
+  margin-top: 28px;
   text-align: center;
   font-size: 14px;
-  color: #666;
+  color: var(--gg-text-muted);
 }
 
 .footer-links a {
-  color: #667eea;
+  color: var(--gg-primary-light);
   cursor: pointer;
   font-weight: 500;
+  margin-left: 4px;
+  transition: color 0.2s;
 }
 
 .footer-links a:hover {
-  text-decoration: underline;
+  color: var(--gg-accent-light);
 }
 </style>

frontend/src/views/NotFound.vue

@@ -11,56 +11,130 @@ function goHome() {
 
 <template>
   <div class="not-found">
+    <!-- CSS 星星背景 -->
+    <div class="stars" aria-hidden="true"></div>
+
     <div class="content">
-      <h1>404</h1>
+      <div class="error-code">404</div>
-      <p>抱歉，您访问的页面不存在</p>
+      <h1 class="error-title">迷失在星域之中</h1>
+      <p class="error-desc">你访问的页面已消失在浩瀚宇宙中，或许它从未存在过。</p>
       <button class="home-btn" @click="goHome">
-        返回首页
+        <span class="btn-icon">&#10148;</span>
+        返回基地
       </button>
     </div>
   </div>
 </template>
 
 <style scoped>
+/* ── 深空背景 ── */
 .not-found {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 60vh;
+  min-height: 100vh;
+  padding: 24px;
+  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+  overflow: hidden;
 }
 
+/* ── CSS 星星 ── */
+.stars {
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
+    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
+    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
+  animation: twinkle 4s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+
+@keyframes twinkle {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+/* ── 内容区 ── */
 .content {
+  position: relative;
+  z-index: 1;
   text-align: center;
+  max-width: 480px;
 }
 
-.content h1 {
+/* ── 404 数字 ── */
-  font-size: 72px;
+.error-code {
-  font-weight: 700;
+  font-size: 140px;
-  margin: 0 0 16px;
+  font-weight: 900;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  line-height: 1;
+  margin-bottom: 16px;
+  background: var(--gg-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: none;
+  filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.35));
+  animation: pulse-glow 3s ease-in-out infinite alternate;
+  user-select: none;
 }
 
-.content p {
+@keyframes pulse-glow {
-  font-size: 16px;
+  0%   { filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.25)); }
-  color: var(--el-text-color-secondary);
+  100% { filter: drop-shadow(0 0 50px rgba(168, 85, 247, 0.4)); }
-  margin: 0 0 24px;
 }
 
+/* ── 标题 ── */
+.error-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--gg-text);
+  margin: 0 0 12px;
+}
+
+/* ── 描述文字 ── */
+.error-desc {
+  font-size: 15px;
+  color: var(--gg-text-secondary);
+  margin: 0 0 36px;
+  line-height: 1.6;
+}
+
+/* ── 返回按钮 ── */
 .home-btn {
-  padding: 12px 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 36px;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--gg-gradient);
-  color: white;
+  color: #fff;
-  font-size: 14px;
+  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: box-shadow 0.3s, transform 0.15s;
 }
 
 .home-btn:hover {
-  opacity: 0.9;
+  box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
+  transform: translateY(-1px);
+}
+
+.home-btn:active {
+  transform: translateY(0);
+}
+
+.btn-icon {
+  font-size: 16px;
+  display: inline-flex;
 }
 </style>

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);
+  background: var(--gg-bg);
-  border-radius: 6px;
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-sm);
+  color: var(--gg-text);
 }
 
 .form-actions {

frontend/src/views/Register.vue

@@ -56,8 +56,17 @@ function goToLogin() {
 
 <template>
   <div class="register-page">
+    <!-- CSS 星星背景 -->
+    <div class="stars" aria-hidden="true"></div>
+    <div class="stars stars--sm" aria-hidden="true"></div>
+
     <div class="register-card">
-      <h1 class="title">注册 Game Group</h1>
+      <div class="card-header">
+        <h1 class="brand">
+          <span class="brand-text">Game Group</span>
+        </h1>
+        <p class="subtitle">创建你的账号</p>
+      </div>
 
       <form class="register-form" @submit.prevent="handleRegister">
         <div class="form-group">
@@ -103,6 +112,7 @@ function goToLogin() {
         </div>
 
         <button type="submit" class="submit-btn" :disabled="loading">
+          <span v-if="loading" class="btn-loader"></span>
           {{ loading ? '注册中...' : '注册' }}
         </button>
       </form>
@@ -116,36 +126,104 @@ function goToLogin() {
 </template>
 
 <style scoped>
+/* ── 深空背景 ── */
 .register-page {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  padding: 20px;
+  padding: 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+  overflow: hidden;
 }
 
+/* ── CSS 星星 ── */
+.stars {
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
+    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
+    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
+    radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
+    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
+  animation: twinkle 4s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+
+.stars--sm {
+  background-image:
+    radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
+    radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
+  animation: twinkle 6s ease-in-out 1s infinite alternate;
+}
+
+@keyframes twinkle {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+/* ── 毛玻璃卡片 ── */
 .register-card {
+  position: relative;
+  z-index: 1;
   width: 100%;
-  max-width: 400px;
+  max-width: 420px;
-  padding: 40px;
+  padding: 44px 40px 40px;
-  background: white;
+  background: rgba(30, 41, 59, 0.55);
-  border-radius: 16px;
+  backdrop-filter: blur(16px);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: var(--gg-radius-xl);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
-.title {
+/* ── 头部品牌 ── */
-  font-size: 28px;
+.card-header {
-  font-weight: 700;
   text-align: center;
-  margin: 0 0 32px;
+  margin-bottom: 32px;
-  color: #333;
 }
 
+.brand {
+  margin: 0 0 8px;
+}
+
+.brand-text {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 15px;
+  color: var(--gg-text-secondary);
+  font-weight: 400;
+}
+
+/* ── 表单 ── */
 .register-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 18px;
 }
 
 .form-group {
@@ -155,59 +233,94 @@ function goToLogin() {
 }
 
 .form-group label {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
-  color: #555;
+  color: var(--gg-text-secondary);
+  letter-spacing: 0.02em;
 }
 
 .form-group input {
   padding: 12px 16px;
-  border: 1px solid #ddd;
+  background: var(--gg-bg);
-  border-radius: 8px;
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-sm);
+  color: var(--gg-text);
   font-size: 14px;
-  transition: border-color 0.2s;
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+.form-group input::placeholder {
+  color: var(--gg-text-muted);
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--gg-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
 }
 
+/* ── 提交按钮 ── */
 .submit-btn {
+  position: relative;
   padding: 14px;
+  margin-top: 4px;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--gg-gradient);
-  color: white;
+  color: #fff;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: box-shadow 0.3s, transform 0.15s;
 }
 
 .submit-btn:hover:not(:disabled) {
-  opacity: 0.9;
+  box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
+  transform: translateY(-1px);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
 }
 
 .submit-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.55;
   cursor: not-allowed;
 }
 
+.btn-loader {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 底部链接 ── */
 .footer-links {
   margin-top: 24px;
   text-align: center;
   font-size: 14px;
-  color: #666;
+  color: var(--gg-text-muted);
 }
 
 .footer-links a {
-  color: #667eea;
+  color: var(--gg-primary-light);
   cursor: pointer;
   font-weight: 500;
+  margin-left: 4px;
+  transition: color 0.2s;
 }
 
 .footer-links a:hover {
-  text-decoration: underline;
+  color: var(--gg-accent-light);
 }
 </style>

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);
+  background: var(--gg-bg-card);
-  border-radius: 12px;
+  border: 1px solid var(--gg-border);
-  border: 1px solid var(--el-border-color);
+  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: none;
-  border-radius: 8px;
+  border-radius: var(--gg-radius-sm);
-  background: var(--el-fill-color-light);
+  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);
+  opacity: 0.9;
-  border-color: var(--el-border-color-darker);
+  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>