diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a01a963
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,38 @@
+# Dependencies
+node_modules/
+package-lock.json
+
+# Build outputs
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# PocketBase
+backend/pb_data/
+backend/pb_migrations.bak/
+
+# Temporary files
+*.tmp
+.cache/
\ No newline at end of file
diff --git a/DEPLOY.md b/DEPLOY.md
new file mode 100644
index 0000000..62fc77d
--- /dev/null
+++ b/DEPLOY.md
@@ -0,0 +1,60 @@
+# Game Group V2 部署指南
+
+## 端口分配
+
+| 服务 | 端口 |
+|------|------|
+| PocketBase | 8711 |
+| Dev 前端 | 7033 |
+| UAT 前端 | 7034 |
+
+## 部署脚本
+
+```bash
+# 部署 PocketBase 后端
+./deploy-backend.sh
+
+# 部署 Dev 前端
+./deploy-dev.sh
+
+# 部署 UAT 前端
+./deploy-uat.sh
+
+# 停止所有服务
+./stop-all.sh
+```
+
+## 访问地址
+
+| 服务 | 地址 |
+|------|------|
+| PocketBase API | http://192.168.1.14:8711/api/ |
+| PocketBase 管理面板 | http://192.168.1.14:8711/_/ |
+| Dev 环境 | http://192.168.1.14:7033 |
+| UAT 环境 | http://192.168.1.14:7034 |
+
+## 手动操作
+
+```bash
+# 只启动后端
+docker compose -f docker-compose.backend.yml up -d
+
+# 只启动 Dev
+docker compose -f docker-compose.dev.yml up -d --build
+
+# 只启动 UAT
+docker compose -f docker-compose.uat.yml up -d --build
+```
+
+## 查看日志
+
+```bash
+# 后端日志
+docker logs -f gamegroup-pb
+
+# Dev 日志
+docker logs -f gamegroup-frontend-dev
+
+# UAT 日志
+docker logs -f gamegroup-frontend-uat
+```
diff --git a/backend/.env b/backend/.env
index 7af3b7f..dcb6aa6 100644
--- a/backend/.env
+++ b/backend/.env
@@ -1,3 +1,5 @@
 PB_PORT=8090
 PB_DATA=./pb_data
 PB_MIGRATIONS=./pb_migrations
+PB_UID=1000
+PB_GID=1000
diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml
index b2dfe80..de01039 100644
--- a/backend/docker-compose.yml
+++ b/backend/docker-compose.yml
@@ -2,10 +2,11 @@ version: '3.8'
 
 services:
   pocketbase:
-    image: ghcr.io/muchobien/pocketbase:v0.22.4
+    image: ghcr.io/muchobien/pocketbase:0.22.4
     container_name: gamegroup-pb
+    user: "${PB_UID:-1000}:${PB_GID:-1000}"
     ports:
-      - "${PB_PORT:-8090}:8090"
+      - "${PB_PORT:-8711}:8090"
     volumes:
       - ./pb_data:/pb_data
       - ./pb_migrations:/pb_migrations
diff --git a/backend/pb_migrations/1738717600_init.pb.js b/backend/pb_migrations/1738717600_init.pb.js
deleted file mode 100644
index 441e6bb..0000000
--- a/backend/pb_migrations/1738717600_init.pb.js
+++ /dev/null
@@ -1,781 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-
-migrate((app) => {
-  // Users collection
-  app.deleteCollection("users");
-  app.createCollection("users", {
-    id: "users",
-    name: "users",
-    type: "auth",
-    fields: [
-      {
-        id: "new_aQr3td8dJl",
-        name: "username",
-        type: "text",
-        system: false,
-        required: true,
-        unique: true,
-        options: {
-          min: 3,
-          max: 20,
-          pattern: "^[a-zA-Z0-9_]+$",
-        }
-      },
-      {
-        id: "new_Jx4zWq9kLm",
-        name: "displayName",
-        type: "text",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          min: null,
-          max: 50,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Xp7vR2sT4u",
-        name: "avatar",
-        type: "url",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          exceptDomains: null,
-          onlyDomains: null,
-        }
-      },
-      {
-        id: "new_Nh8gD3fF6g",
-        name: "bio",
-        type: "text",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: null,
-          max: 500,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Vc5bH8kJ7o",
-        name: "region",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "cn",
-            "us",
-            "eu",
-            "asia",
-            "other"
-          ],
-        }
-      },
-      {
-        id: "new_Tf6rK9mP8q",
-        name: "preferences",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 10000,
-        }
-      },
-      {
-        id: "new_Dg7hL0nR9s",
-        name: "stats",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 10000,
-        }
-      },
-      {
-        id: "new_Wm8jO1pS0t",
-        name: "isActive",
-        type: "bool",
-        system: false,
-        required: false,
-        unique: false,
-        options: {}
-      },
-      {
-        id: "new_Yn9kQ2qT1u",
-        name: "lastSeen",
-        type: "date",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: "",
-          max: "",
-        }
-      },
-    ],
-    indexes: [
-      "create index users_username_idx on users (username)",
-      "create index users_region_idx on users (region)",
-      "create index users_isActive_idx on users (isActive)",
-    ],
-    listRule: "id = @request.auth.id",
-    viewRule: "id = @request.auth.id",
-    createRule: null,
-    updateRule: "id = @request.auth.id",
-    deleteRule: "id = @request.auth.id",
-    options: {
-      allowEmailAuth: true,
-      allowOAuth2Auth: false,
-      allowUsernameAuth: false,
-      exceptEmailDomains: null,
-      manageRule: null,
-      minPasswordLength: 8,
-      onlyEmailDomains: null,
-      requireEmail: false,
-    }
-  });
-
-  // Games collection
-  app.deleteCollection("games");
-  app.createCollection("games", {
-    id: "games",
-    name: "games",
-    type: "base",
-    fields: [
-      {
-        id: "new_Zp3wT8sV5x",
-        name: "name",
-        type: "text",
-        system: false,
-        required: true,
-        unique: true,
-        options: {
-          min: 1,
-          max: 100,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Bq4xU9tW6y",
-        name: "nameEn",
-        type: "text",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: null,
-          max: 100,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Cr5yV0uX7z",
-        name: "cover",
-        type: "url",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          exceptDomains: null,
-          onlyDomains: null,
-        }
-      },
-      {
-        id: "new_Ds6zW1vY8a",
-        name: "description",
-        type: "editor",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          convertUrls: false,
-        }
-      },
-      {
-        id: "new_Et7aX2wZ9b",
-        name: "type",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "fps",
-            "moba",
-            "rpg",
-            "strategy",
-            "racing",
-            "sports",
-            "casual",
-            "other"
-          ],
-        }
-      },
-      {
-        id: "new_Fu8bY3xA0c",
-        name: "platform",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "pc",
-            "mobile",
-            "console",
-            "crossplay"
-          ],
-        }
-      },
-      {
-        id: "new_Gv9cZ4yB1d",
-        name: "maxTeamSize",
-        type: "number",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          min: 2,
-          max: 100,
-          noDecimal: true,
-        }
-      },
-      {
-        id: "new_Hw0dA5zC2e",
-        name: "tags",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 5000,
-        }
-      },
-      {
-        id: "new_Ix1eB6aD3f",
-        name: "isActive",
-        type: "bool",
-        system: false,
-        required: false,
-        unique: false,
-        options: {}
-      },
-    ],
-    indexes: [
-      "create index games_name_idx on games (name)",
-      "create index games_type_idx on games (type)",
-      "create index games_platform_idx on games (platform)",
-      "create index games_isActive_idx on games (isActive)",
-    ],
-    listRule: "",
-    viewRule: "",
-    createRule: null,
-    updateRule: null,
-    deleteRule: null,
-    options: {
-      allowEmailAuth: false,
-      allowOAuth2Auth: false,
-      allowUsernameAuth: false,
-      exceptEmailDomains: null,
-      manageRule: null,
-      onlyEmailDomains: null,
-      requireEmail: false,
-    }
-  });
-
-  // Groups collection
-  app.deleteCollection("groups");
-  app.createCollection("groups", {
-    id: "groups",
-    name: "groups",
-    type: "base",
-    fields: [
-      {
-        id: "new_Jy2fC7bE4g",
-        name: "name",
-        type: "text",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          min: 3,
-          max: 50,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Kz3gD8cF5h",
-        name: "description",
-        type: "text",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: null,
-          max: 500,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_La4hE9dG6i",
-        name: "avatar",
-        type: "url",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          exceptDomains: null,
-          onlyDomains: null,
-        }
-      },
-      {
-        id: "new_Mb5iF0eH7j",
-        name: "owner",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: true,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Nc6jG1fI8k",
-        name: "game",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "games",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "name"
-          ],
-        }
-      },
-      {
-        id: "new_Od7kH2gJ9l",
-        name: "members",
-        type: "relation",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: null,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Pe8lI3hK0m",
-        name: "maxMembers",
-        type: "number",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          min: 2,
-          max: 100,
-          noDecimal: true,
-        }
-      },
-      {
-        id: "new_Qf9mJ4iL1n",
-        name: "status",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "recruiting",
-            "full",
-            "inactive"
-          ],
-        }
-      },
-      {
-        id: "new_Rg0nK5jM2o",
-        name: "tags",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 5000,
-        }
-      },
-      {
-        id: "new_Sh1oL6kN3p",
-        name: "requirements",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 10000,
-        }
-      },
-      {
-        id: "new_Ti2pM7lO4q",
-        name: "stats",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 10000,
-        }
-      },
-    ],
-    indexes: [
-      "create index groups_name_idx on groups (name)",
-      "create index groups_owner_idx on groups (owner)",
-      "create index groups_game_idx on groups (game)",
-      "create index groups_status_idx on groups (status)",
-    ],
-    listRule: "",
-    viewRule: "",
-    createRule: "@request.auth.id != \"\"",
-    updateRule: "owner = @request.auth.id",
-    deleteRule: "owner = @request.auth.id",
-    options: {
-      allowEmailAuth: false,
-      allowOAuth2Auth: false,
-      allowUsernameAuth: false,
-      exceptEmailDomains: null,
-      manageRule: null,
-      onlyEmailDomains: null,
-      requireEmail: false,
-    }
-  });
-
-  // Team Sessions collection
-  app.deleteCollection("teamSessions");
-  app.createCollection("teamSessions", {
-    id: "teamSessions",
-    name: "teamSessions",
-    type: "base",
-    fields: [
-      {
-        id: "new_Uj3qN8mP5r",
-        name: "group",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "groups",
-          cascadeDelete: true,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "name"
-          ],
-        }
-      },
-      {
-        id: "new_Vk4rO9nQ6s",
-        name: "host",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Wl5sP0oR7t",
-        name: "participants",
-        type: "relation",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: null,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Xm6tQ1pS8u",
-        name: "status",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "waiting",
-            "playing",
-            "completed",
-            "cancelled"
-          ],
-        }
-      },
-      {
-        id: "new_Yn7uR2qT9v",
-        name: "voiceChat",
-        type: "bool",
-        system: false,
-        required: false,
-        unique: false,
-        options: {}
-      },
-      {
-        id: "new_Zo8vS3rU0w",
-        name: "roomInfo",
-        type: "json",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          maxSize: 10000,
-        }
-      },
-      {
-        id: "new_Ap9wT4sV1x",
-        name: "notes",
-        type: "text",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: null,
-          max: 1000,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Bq0xU5tW2y",
-        name: "scheduledAt",
-        type: "date",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: "",
-          max: "",
-        }
-      },
-      {
-        id: "new_Cr1yV6uX3z",
-        name: "startedAt",
-        type: "date",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: "",
-          max: "",
-        }
-      },
-      {
-        id: "new_Ds2zW7vY4a",
-        name: "endedAt",
-        type: "date",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: "",
-          max: "",
-        }
-      },
-    ],
-    indexes: [
-      "create index teamSessions_group_idx on teamSessions (group)",
-      "create index teamSessions_host_idx on teamSessions (host)",
-      "create index teamSessions_status_idx on teamSessions (status)",
-      "create index teamSessions_scheduledAt_idx on teamSessions (scheduledAt)",
-    ],
-    listRule: "group.owner = @request.auth.id || group.members.id = @request.auth.id",
-    viewRule: "group.owner = @request.auth.id || group.members.id = @request.auth.id",
-    createRule: "@request.auth.id != \"\"",
-    updateRule: "group.owner = @request.auth.id",
-    deleteRule: "group.owner = @request.auth.id",
-    options: {
-      allowEmailAuth: false,
-      allowOAuth2Auth: false,
-      allowUsernameAuth: false,
-      exceptEmailDomains: null,
-      manageRule: null,
-      onlyEmailDomains: null,
-      requireEmail: false,
-    }
-  });
-
-  // Invitations collection
-  app.deleteCollection("invitations");
-  app.createCollection("invitations", {
-    id: "invitations",
-    name: "invitations",
-    type: "base",
-    fields: [
-      {
-        id: "new_Et3yZ8wB5c",
-        name: "group",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "groups",
-          cascadeDelete: true,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "name"
-          ],
-        }
-      },
-      {
-        id: "new_Fu4zA9xC6d",
-        name: "sender",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Gv5aB0yD7e",
-        name: "recipient",
-        type: "relation",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          collectionId: "users",
-          cascadeDelete: false,
-          minSelect: null,
-          maxSelect: 1,
-          displayFields: [
-            "username",
-            "displayName"
-          ],
-        }
-      },
-      {
-        id: "new_Hw6bC1zE8f",
-        name: "status",
-        type: "select",
-        system: false,
-        required: true,
-        unique: false,
-        options: {
-          maxSelect: 1,
-          values: [
-            "pending",
-            "accepted",
-            "rejected",
-            "cancelled"
-          ],
-        }
-      },
-      {
-        id: "new_Ix7cD2aF9g",
-        name: "message",
-        type: "text",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: null,
-          max: 500,
-          pattern: "",
-        }
-      },
-      {
-        id: "new_Jy8dE3bG0h",
-        name: "respondedAt",
-        type: "date",
-        system: false,
-        required: false,
-        unique: false,
-        options: {
-          min: "",
-          max: "",
-        }
-      },
-    ],
-    indexes: [
-      "create index invitations_group_idx on invitations (group)",
-      "create index invitations_sender_idx on invitations (sender)",
-      "create index invitations_recipient_idx on invitations (recipient)",
-      "create index invitations_status_idx on invitations (status)",
-      "create unique index invitations_unique_pending on invitations (group, recipient) where status = 'pending'",
-    ],
-    listRule: "sender = @request.auth.id || recipient = @request.auth.id || group.owner = @request.auth.id",
-    viewRule: "sender = @request.auth.id || recipient = @request.auth.id || group.owner = @request.auth.id",
-    createRule: "group.owner = @request.auth.id",
-    updateRule: "recipient = @request.auth.id",
-    deleteRule: "sender = @request.auth.id || group.owner = @request.auth.id",
-    options: {
-      allowEmailAuth: false,
-      allowOAuth2Auth: false,
-      allowUsernameAuth: false,
-      exceptEmailDomains: null,
-      manageRule: null,
-      onlyEmailDomains: null,
-      requireEmail: false,
-    }
-  });
-
-}, (app) => {
-  // Rollback
-  app.deleteCollection("invitations");
-  app.deleteCollection("teamSessions");
-  app.deleteCollection("groups");
-  app.deleteCollection("games");
-  app.deleteCollection("users");
-});
diff --git a/deploy-backend.sh b/deploy-backend.sh
new file mode 100644
index 0000000..6c18e47
--- /dev/null
+++ b/deploy-backend.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+# 部署 PocketBase 后端
+
+echo "🚀 部署 PocketBase 后端..."
+
+docker compose -f docker-compose.backend.yml up -d --force-recreate
+
+echo "✅ PocketBase 已启动"
+echo "📡 API 地址: http://192.168.1.14:8711/api/"
+echo "🔧 管理面板: http://192.168.1.14:8711/_/"
diff --git a/deploy-dev.sh b/deploy-dev.sh
new file mode 100644
index 0000000..c630f82
--- /dev/null
+++ b/deploy-dev.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+# 部署 Dev 前端
+
+echo "🚀 部署 Dev 前端..."
+
+# 确保网络存在
+docker network create gamegroup-net 2>/dev/null || true
+
+docker compose -f docker-compose.dev.yml up -d --build --force-recreate
+
+echo "✅ Dev 环境已启动"
+echo "🌐 访问地址: http://192.168.1.14:7033"
diff --git a/deploy-uat.sh b/deploy-uat.sh
new file mode 100644
index 0000000..516eeee
--- /dev/null
+++ b/deploy-uat.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+# 部署 UAT 前端
+
+echo "🚀 部署 UAT 前端..."
+
+# 确保网络存在
+docker network create gamegroup-net 2>/dev/null || true
+
+docker compose -f docker-compose.uat.yml up -d --build --force-recreate
+
+echo "✅ UAT 环境已启动"
+echo "🌐 访问地址: http://192.168.1.14:7034"
diff --git a/docker-compose.backend.yml b/docker-compose.backend.yml
new file mode 100644
index 0000000..049f47d
--- /dev/null
+++ b/docker-compose.backend.yml
@@ -0,0 +1,24 @@
+services:
+  pocketbase:
+    image: ghcr.io/muchobien/pocketbase:0.22.4
+    container_name: gamegroup-pb
+    ports:
+      - "8711:8090"
+    volumes:
+      - ./backend/pb_data:/pb_data
+      - ./backend/pb_migrations:/pb_migrations
+    environment:
+      - GO_ENV=production
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8090/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+    networks:
+      - gamegroup-net
+
+networks:
+  gamegroup-net:
+    driver: bridge
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
new file mode 100644
index 0000000..70b7c15
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,18 @@
+services:
+  frontend-dev:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: gamegroup-frontend-dev
+    ports:
+      - "7033:80"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
+    networks:
+      - gamegroup-net
+
+networks:
+  gamegroup-net:
+    driver: bridge
+    external: true
diff --git a/docker-compose.uat.yml b/docker-compose.uat.yml
new file mode 100644
index 0000000..b53e2c0
--- /dev/null
+++ b/docker-compose.uat.yml
@@ -0,0 +1,18 @@
+services:
+  frontend-uat:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: gamegroup-frontend-uat
+    ports:
+      - "7034:80"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
+    networks:
+      - gamegroup-net
+
+networks:
+  gamegroup-net:
+    driver: bridge
+    external: true
diff --git a/frontend/.env.dev b/frontend/.env.dev
new file mode 100644
index 0000000..69fec0f
--- /dev/null
+++ b/frontend/.env.dev
@@ -0,0 +1,3 @@
+# Dev Environment
+VITE_PB_URL=http://192.168.1.14:8711
+VITE_PORT=7033
diff --git a/frontend/.env.uat b/frontend/.env.uat
new file mode 100644
index 0000000..603558c
--- /dev/null
+++ b/frontend/.env.uat
@@ -0,0 +1,3 @@
+# UAT Environment
+VITE_PB_URL=http://192.168.1.14:8711
+VITE_PORT=7034
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..c3f4824
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,30 @@
+# 构建阶段
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# 复制 package 文件
+COPY package*.json ./
+RUN npm ci
+
+# 复制源码
+COPY . .
+
+# 设置构建参数并构建（默认使用相对路径，由 nginx 代理）
+ARG VITE_PB_URL=/api
+ENV VITE_PB_URL=$VITE_PB_URL
+
+RUN npm run build
+
+# 生产阶段
+FROM nginx:alpine
+
+# 复制构建产物
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# 复制 nginx 配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..ca8701b
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Game Group V2</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000..d92ef32
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,33 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # 开启 gzip 压缩
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API 代理到局域网 PocketBase
+    location /api/ {
+        proxy_pass http://192.168.1.14:8711/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..251b097
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gamegroup-v2-frontend",
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:dev": "bash scripts/start-dev.sh",
+    "dev:uat": "bash scripts/start-uat.sh",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "pinia": "^2.1.7",
+    "element-plus": "^2.6.3",
+    "@element-plus/icons-vue": "^2.3.1",
+    "pocketbase": "^0.21.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.4.5",
+    "vue-tsc": "^2.0.11",
+    "vite": "^5.2.8",
+    "tailwindcss": "^3.4.3",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/scripts/start-dev.sh b/frontend/scripts/start-dev.sh
new file mode 100644
index 0000000..dc4be5e
--- /dev/null
+++ b/frontend/scripts/start-dev.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+# 启动 Dev 环境
+
+cd "$(dirname "$0")/../"
+
+export $(cat .env.dev | xargs)
+
+echo "🚀 启动 Dev 环境"
+echo "📡 PocketBase: $VITE_PB_URL"
+echo "🌐 Frontend Port: $VITE_PORT"
+
+npm run dev
diff --git a/frontend/scripts/start-uat.sh b/frontend/scripts/start-uat.sh
new file mode 100644
index 0000000..42be38d
--- /dev/null
+++ b/frontend/scripts/start-uat.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+# 启动 UAT 环境
+
+cd "$(dirname "$0")/../"
+
+export $(cat .env.uat | xargs)
+
+echo "🚀 启动 UAT 环境"
+echo "📡 PocketBase: $VITE_PB_URL"
+echo "🌐 Frontend Port: $VITE_PORT"
+
+npm run dev
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000..14c6b67
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,27 @@
+<!-- src/App.vue -->
+<script setup lang="ts">
+// App 根组件
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+}
+</style>
diff --git a/frontend/src/api/games.ts b/frontend/src/api/games.ts
new file mode 100644
index 0000000..e71dc9a
--- /dev/null
+++ b/frontend/src/api/games.ts
@@ -0,0 +1,98 @@
+// src/api/games.ts
+import pb from './pocketbase'
+import type { Game, GamePlatform } from '@/types'
+
+// 获取游戏列表
+export async function getGames(options?: {
+  page?: number
+  limit?: number
+  platform?: GamePlatform
+  search?: string
+}): Promise<{ items: Game[], total: number }> {
+  const { page = 1, limit = 20, platform, search } = options || {}
+
+  let filter = ''
+  if (platform) {
+    filter = `platform="${platform}"`
+  }
+  if (search) {
+    const searchFilter = `name ~ "${search}"`
+    filter = filter ? `${filter} && ${searchFilter}` : searchFilter
+  }
+
+  const result = await pb.collection('games').getList(page, limit, {
+    filter,
+    sort: '-popularCount'
+  })
+
+  return {
+    items: result.items as unknown as Game[],
+    total: result.totalItems
+  }
+}
+
+// 获取热门游戏
+export async function getPopularGames(limit = 10): Promise<Game[]> {
+  const result = await pb.collection('games').getList(1, limit, {
+    sort: '-popularCount'
+  })
+
+  return result.items as unknown as Game[]
+}
+
+// 搜索游戏
+export async function searchGames(query: string, limit = 20): Promise<Game[]> {
+  if (!query.trim()) return []
+
+  const result = await pb.collection('games').getList(1, limit, {
+    filter: `name ~ "${query}"`,
+    sort: '-popularCount'
+  })
+
+  return result.items as unknown as Game[]
+}
+
+// 添加游戏（需要管理员权限）
+export async function addGame(data: {
+  name: string
+  platform: GamePlatform
+  tags?: string[]
+  cover?: string
+}) {
+  return pb.collection('games').create(data)
+}
+
+// 更新游戏热度
+export async function incrementGamePopularity(gameId: string) {
+  const game = await pb.collection('games').getOne(gameId)
+  return pb.collection('games').update(gameId, {
+    popularCount: (game.popularCount || 0) + 1
+  })
+}
+
+// 获取游戏详情
+export async function getGame(gameId: string): Promise<Game> {
+  return pb.collection('games').getOne(gameId) as unknown as Game
+}
+
+// 按平台获取游戏
+export async function getGamesByPlatform(platform: GamePlatform): Promise<Game[]> {
+  const result = await pb.collection('games').getList(1, 50, {
+    filter: `platform="${platform}"`,
+    sort: '-popularCount'
+  })
+
+  return result.items as unknown as Game[]
+}
+
+// 获取所有平台
+export function getAllPlatforms(): GamePlatform[] {
+  return ['PC', 'PS5', 'Xbox', 'Switch', 'Mobile']
+}
+
+// 订阅游戏变更
+export function subscribeGames(callback: (game: Game) => void) {
+  return pb.collection('games').subscribe('*', (payload) => {
+    callback(payload.record as unknown as Game)
+  })
+}
diff --git a/frontend/src/api/groups.ts b/frontend/src/api/groups.ts
new file mode 100644
index 0000000..8dc16d1
--- /dev/null
+++ b/frontend/src/api/groups.ts
@@ -0,0 +1,111 @@
+// src/api/groups.ts
+import pb from './pocketbase'
+import type { Group } from '@/types'
+
+// 创建群组
+export async function createGroup(data: {
+  name: string
+  description: string
+  maxMembers: number
+}) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  return pb.collection('groups').create({
+    ...data,
+    owner: user.id,
+    members: [user.id]
+  })
+}
+
+// 获取用户的群组列表
+export async function getUserGroups(): Promise<Group[]> {
+  const user = pb.authStore.model
+  if (!user) return []
+
+  // 通过 members 字段过滤
+  return pb.collection('groups').getList(1, 50, {
+    filter: `members ~ "${user.id}"`
+  }).then(res => res.items as unknown as Group[])
+}
+
+// 获取群组详情
+export async function getGroup(groupId: string): Promise<Group> {
+  return pb.collection('groups').getOne(groupId, {
+    expand: 'members'
+  }) as unknown as Group
+}
+
+// 加入群组
+export async function joinGroup(groupId: string) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  const group = await pb.collection('groups').getOne(groupId)
+  const members = group.members as string[]
+
+  if (members.length >= group.maxMembers) {
+    throw new Error('群组已满')
+  }
+
+  if (members.includes(user.id)) {
+    throw new Error('已是群组成员')
+  }
+
+  return pb.collection('groups').update(groupId, {
+    members: [...members, user.id]
+  })
+}
+
+// 退出群组
+export async function leaveGroup(groupId: string) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  const group = await pb.collection('groups').getOne(groupId)
+
+  if (group.owner === user.id) {
+    throw new Error('群主不能退出群组，请先转让群主或解散群组')
+  }
+
+  const members = group.members as string[]
+  return pb.collection('groups').update(groupId, {
+    members: members.filter(id => id !== user.id)
+  })
+}
+
+// 解散群组
+export async function dissolveGroup(groupId: string) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  const group = await pb.collection('groups').getOne(groupId)
+
+  if (group.owner !== user.id) {
+    throw new Error('只有群主可以解散群组')
+  }
+
+  return pb.collection('groups').delete(groupId)
+}
+
+// 订阅群组变更
+export function subscribeGroup(groupId: string, callback: (group: Group) => void) {
+  return pb.collection('groups').subscribe('*', (payload) => {
+    if (payload.record.id === groupId) {
+      callback(payload.record as unknown as Group)
+    }
+  })
+}
+
+// 获取群组成员
+export async function getGroupMembers(groupId: string) {
+  const group = await getGroup(groupId)
+  const members = group.members as string[]
+
+  // 批量获取用户信息
+  const users = await pb.collection('users').getList(1, 50, {
+    filter: members.map(id => `id="${id}"`).join(' || ')
+  })
+
+  return users.items
+}
diff --git a/frontend/src/api/invitations.ts b/frontend/src/api/invitations.ts
new file mode 100644
index 0000000..caa6b64
--- /dev/null
+++ b/frontend/src/api/invitations.ts
@@ -0,0 +1,116 @@
+// src/api/invitations.ts
+import pb from './pocketbase'
+import type { Invitation, InviteStatus } from '@/types'
+import { joinTeamSession } from './sessions'
+import { updateUserStatus } from './users'
+
+// 发送邀请
+export async function sendInvitation(data: {
+  to: string
+  teamSession: string
+}) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  // 检查是否已有待处理邀请
+  const existing = await pb.collection('invitations').getList(1, 1, {
+    filter: `from="${user.id}" && to="${data.to}" && teamSession="${data.teamSession}" && status="pending"`
+  })
+
+  if (existing.items.length > 0) {
+    throw new Error('已有待处理的邀请')
+  }
+
+  return pb.collection('invitations').create({
+    ...data,
+    from: user.id,
+    status: 'pending'
+  })
+}
+
+// 批量发送邀请
+export async function sendBulkInvitations(recipients: string[], teamSessionId: string) {
+  const promises = recipients.map(to =>
+    sendInvitation({ to, teamSession: teamSessionId })
+  )
+
+  return Promise.allSettled(promises)
+}
+
+// 获取用户的待处理邀请
+export async function getPendingInvitations(): Promise<Invitation[]> {
+  const user = pb.authStore.model
+  if (!user) return []
+
+  const result = await pb.collection('invitations').getList(1, 50, {
+    filter: `to="${user.id}" && status="pending"`,
+    sort: '-created',
+    expand: 'from,teamSession'
+  })
+
+  return result.items as unknown as Invitation[]
+}
+
+// 获取我发送的邀请
+export async function getMySentInvitations(): Promise<Invitation[]> {
+  const user = pb.authStore.model
+  if (!user) return []
+
+  const result = await pb.collection('invitations').getList(1, 50, {
+    filter: `from="${user.id}"`,
+    sort: '-created',
+    expand: 'to,teamSession'
+  })
+
+  return result.items as unknown as Invitation[]
+}
+
+// 响应邀请
+export async function respondInvitation(
+  invitationId: string,
+  response: 'accepted' | 'rejected',
+  rejectReason?: string
+) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  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
+  }
+
+  // 更新邀请状态
+  await pb.collection('invitations').update(invitationId, updateData)
+
+  // 如果接受，加入临时小组
+  if (response === 'accepted') {
+    await joinTeamSession(invitation.teamSession)
+    // 更新用户状态
+    await updateUserStatus('in_team')
+  }
+
+  return updateData
+}
+
+// 订阅邀请变更
+export function subscribeInvitations(callback: (invitation: Invitation) => void) {
+  const user = pb.authStore.model
+  if (!user) return () => {}
+
+  return pb.collection('invitations').subscribe('*', (payload) => {
+    const invite = payload.record as unknown as Invitation
+    if (invite.to === user.id || invite.from === user.id) {
+      callback(invite)
+    }
+  })
+}
diff --git a/frontend/src/api/pocketbase.ts b/frontend/src/api/pocketbase.ts
new file mode 100644
index 0000000..3e44728
--- /dev/null
+++ b/frontend/src/api/pocketbase.ts
@@ -0,0 +1,32 @@
+// src/api/pocketbase.ts
+import PocketBase from 'pocketbase'
+
+const pbUrl = import.meta.env.VITE_PB_URL || '/api'
+
+export const pb = new PocketBase(pbUrl)
+
+// 认证状态持久化
+pb.authStore.loadFromCookie(document.cookie)
+
+// 保存认证状态到 cookie
+pb.authStore.onChange(() => {
+  document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
+})
+
+// 获取当前用户
+export function getCurrentUser() {
+  return pb.authStore.model
+}
+
+// 检查是否已登录
+export function isAuthenticated(): boolean {
+  return pb.authStore.isValid
+}
+
+// 登出
+export function logout() {
+  pb.authStore.clear()
+  window.location.href = '/login'
+}
+
+export default pb
diff --git a/frontend/src/api/sessions.ts b/frontend/src/api/sessions.ts
new file mode 100644
index 0000000..b952713
--- /dev/null
+++ b/frontend/src/api/sessions.ts
@@ -0,0 +1,92 @@
+// src/api/sessions.ts
+import pb from './pocketbase'
+import type { TeamSession, TeamStatus } from '@/types'
+
+// 创建临时小组
+export async function createTeamSession(data: {
+  sourceGroup: string
+  name: string
+  gameName: string
+  members: string[]
+}): Promise<TeamSession> {
+  return pb.collection('teamSessions').create({
+    ...data,
+    status: 'recruiting'
+  }) as unknown as TeamSession
+}
+
+// 获取用户的活跃临时小组
+export async function getActiveTeamSession(): Promise<TeamSession | null> {
+  const user = pb.authStore.model
+  if (!user) return null
+
+  const result = await pb.collection('teamSessions').getList(1, 1, {
+    filter: `members ~ "${user.id}" && status != "dissolved" && status != "finished"`,
+    sort: '-created'
+  })
+
+  return (result.items[0] as unknown as TeamSession) || null
+}
+
+// 获取群组的临时小组列表
+export async function getGroupTeamSessions(groupId: string): Promise<TeamSession[]> {
+  const result = await pb.collection('teamSessions').getList(1, 20, {
+    filter: `sourceGroup="${groupId}"`,
+    sort: '-created'
+  })
+
+  return result.items as unknown as TeamSession[]
+}
+
+// 更新临时小组状态
+export async function updateTeamStatus(sessionId: string, status: TeamStatus): Promise<TeamSession> {
+  const updateData: Partial<TeamSession> = { status }
+
+  if (status === 'dissolved') {
+    updateData.dissolvedAt = new Date().toISOString()
+  }
+
+  return pb.collection('teamSessions').update(sessionId, updateData) as unknown as TeamSession
+}
+
+// 结束游戏（解散临时小组）
+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')
+}
+
+// 加入临时小组
+export async function joinTeamSession(sessionId: string) {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  const session = await pb.collection('teamSessions').getOne(sessionId) as { members: string[] }
+  const members = session.members as string[]
+
+  if (members.includes(user.id)) {
+    throw new Error('已在小组中')
+  }
+
+  return pb.collection('teamSessions').update(sessionId, {
+    members: [...members, user.id]
+  })
+}
+
+// 订阅临时小组变更
+export function subscribeTeamSession(sessionId: string, callback: (session: TeamSession) => void) {
+  return pb.collection('teamSessions').subscribe('*', (payload) => {
+    if (payload.record.id === sessionId) {
+      callback(payload.record as unknown as TeamSession)
+    }
+  })
+}
diff --git a/frontend/src/api/users.ts b/frontend/src/api/users.ts
new file mode 100644
index 0000000..92f3091
--- /dev/null
+++ b/frontend/src/api/users.ts
@@ -0,0 +1,79 @@
+// src/api/users.ts
+import pb, { getCurrentUser } from './pocketbase'
+import type { User, UserStatus, WorkSchedule } from '@/types'
+
+// 更新用户状态
+export async function updateUserStatus(status: UserStatus, note?: string) {
+  const user = getCurrentUser()
+  if (!user) throw new Error('未登录')
+
+  return pb.collection('users').update(user.id, {
+    status,
+    statusNote: note || ''
+  })
+}
+
+// 更新工作时间设置
+export async function updateWorkSchedule(schedule: WorkSchedule) {
+  const user = getCurrentUser()
+  if (!user) throw new Error('未登录')
+
+  // 计算下次工作时间
+  const nextWorkTime = calculateNextWorkTime(schedule.workdays, schedule.workStartTime)
+
+  return pb.collection('users').update(user.id, {
+    workdays: schedule.workdays,
+    workStartTime: schedule.workStartTime,
+    nextWorkTime
+  })
+}
+
+// 计算下次工作时间戳
+function calculateNextWorkTime(workdays: number[], startTime: string): number {
+  const now = new Date()
+  const [hours, minutes] = startTime.split(':').map(Number)
+
+  for (let i = 0; i < 7; i++) {
+    const checkDate = new Date(now)
+    checkDate.setDate(now.getDate() + i)
+    checkDate.setHours(hours, minutes, 0, 0)
+
+    const dayOfWeek = checkDate.getDay() || 7 // 转换为 1-7 (周一到周日)
+
+    if (workdays.includes(dayOfWeek)) {
+      // 如果是今天，检查时间是否已过
+      if (i === 0 && checkDate <= now) {
+        continue
+      }
+      return Math.floor(checkDate.getTime() / 1000)
+    }
+  }
+
+  // 默认返回下周
+  const nextWeek = new Date(now)
+  nextWeek.setDate(now.getDate() + 7)
+  nextWeek.setHours(hours, minutes, 0, 0)
+  return Math.floor(nextWeek.getTime() / 1000)
+}
+
+// 获取用户信息
+export async function getUser(userId: string): Promise<User> {
+  return pb.collection('users').getOne(userId)
+}
+
+// 更新用户资料
+export async function updateProfile(data: Partial<Pick<User, 'username' | 'avatar'>>) {
+  const user = getCurrentUser()
+  if (!user) throw new Error('未登录')
+
+  return pb.collection('users').update(user.id, data)
+}
+
+// 订阅用户状态变更
+export function subscribeUserStatus(userId: string, callback: (user: User) => void) {
+  return pb.collection('users').subscribe('*', (payload) => {
+    if (payload.record.id === userId) {
+      callback(payload.record as unknown as User)
+    }
+  })
+}
diff --git a/frontend/src/components/common/PasswordInput.vue b/frontend/src/components/common/PasswordInput.vue
new file mode 100644
index 0000000..ac9a262
--- /dev/null
+++ b/frontend/src/components/common/PasswordInput.vue
@@ -0,0 +1,92 @@
+<!-- src/components/common/PasswordInput.vue -->
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+  id?: string
+  required?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const visible = ref(false)
+
+const inputType = computed(() => visible.value ? 'text' : 'password')
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+function toggleVisibility() {
+  visible.value = !visible.value
+}
+</script>
+
+<template>
+  <div class="password-input">
+    <input
+      :id="id"
+      :type="inputType"
+      :value="inputValue"
+      :placeholder="placeholder"
+      :required="required"
+      @input="(e: any) => inputValue = e.target.value"
+    />
+    <button type="button" class="toggle-btn" @click="toggleVisibility">
+      <svg v-if="!visible" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+        <circle cx="12" cy="12" r="3"/>
+      </svg>
+      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+        <line x1="1" y1="1" x2="23" y2="23"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.password-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-input input {
+  width: 100%;
+  padding: 12px 40px 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.password-input input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.toggle-btn {
+  position: absolute;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.toggle-btn:hover {
+  color: #667eea;
+}
+</style>
diff --git a/frontend/src/components/team/IdleMembersList.vue b/frontend/src/components/team/IdleMembersList.vue
new file mode 100644
index 0000000..56432d2
--- /dev/null
+++ b/frontend/src/components/team/IdleMembersList.vue
@@ -0,0 +1,161 @@
+<!-- src/components/team/IdleMembersList.vue -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useGroupStore } from '@/stores/group'
+import type { UserStatus } from '@/types'
+import { sendInvitation } from '@/api/invitations'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  status?: UserStatus
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'idle'
+})
+
+const groupStore = useGroupStore()
+
+const idleMembers = computed(() =>
+  groupStore.currentMembers.filter(m => m.status === props.status)
+)
+
+async function inviteMember(userId: string, username: string) {
+  try {
+    // 这里需要先创建临时小组，或者检查是否有活跃的临时小组
+    // 简化版本：发送邀请
+    await sendInvitation({
+      to: userId,
+      teamSession: '' // 实际使用时需要先创建临时小组
+    })
+    ElMessage.success(`已邀请 ${username}`)
+  } catch (error: any) {
+    ElMessage.error(error.message || '邀请失败')
+  }
+}
+</script>
+
+<template>
+  <div class="idle-members-list">
+    <h3 class="list-title">
+      {{ status === 'idle' ? '空闲成员' : '成员列表' }}
+      <span class="count">({{ idleMembers.length }})</span>
+    </h3>
+
+    <div v-if="idleMembers.length === 0" class="empty">
+      {{ status === 'idle' ? '暂无空闲成员' : '暂无成员' }}
+    </div>
+
+    <div v-else class="member-list">
+      <div
+        v-for="member in idleMembers"
+        :key="member.id"
+        class="member-item"
+      >
+        <img
+          :src="member.avatar || '/default-avatar.png'"
+          :alt="member.username"
+          class="avatar"
+        />
+        <div class="member-info">
+          <span class="username">{{ member.username }}</span>
+          <span v-if="member.statusNote" class="status-note">{{ member.statusNote }}</span>
+        </div>
+        <button
+          v-if="status === 'idle'"
+          class="invite-btn"
+          @click="inviteMember(member.id, member.username)"
+        >
+          邀请
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.idle-members-list {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.count {
+  color: var(--el-text-color-secondary);
+  font-weight: 400;
+}
+
+.empty {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding: 32px;
+}
+
+.member-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.member-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background: var(--el-bg-color-page);
+  transition: background-color 0.2s;
+}
+
+.member-item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.member-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.username {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-note {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.invite-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  background: var(--el-color-primary);
+  color: white;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.invite-btn:hover {
+  background: var(--el-color-primary-light-3);
+}
+</style>
diff --git a/frontend/src/components/team/InvitationCard.vue b/frontend/src/components/team/InvitationCard.vue
new file mode 100644
index 0000000..72680bf
--- /dev/null
+++ b/frontend/src/components/team/InvitationCard.vue
@@ -0,0 +1,195 @@
+<!-- src/components/team/InvitationCard.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Invitation } from '@/types'
+import { respondInvitation } from '@/api/invitations'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  invitation: Invitation
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  responded: [id: string, accepted: boolean]
+}>()
+
+const rejectReason = ref('')
+const showRejectInput = ref(false)
+
+async function acceptInvitation() {
+  try {
+    await respondInvitation(props.invitation.id, 'accepted')
+    ElMessage.success('已接受邀请')
+    emit('responded', props.invitation.id, true)
+  } catch (error: any) {
+    ElMessage.error(error.message || '接受邀请失败')
+  }
+}
+
+async function rejectInvitation() {
+  if (!showRejectInput.value) {
+    showRejectInput.value = true
+    return
+  }
+
+  try {
+    await respondInvitation(props.invitation.id, 'rejected', rejectReason.value)
+    ElMessage.success('已拒绝邀请')
+    emit('responded', props.invitation.id, false)
+    showRejectInput.value = false
+    rejectReason.value = ''
+  } catch (error: any) {
+    ElMessage.error(error.message || '拒绝邀请失败')
+  }
+}
+</script>
+
+<template>
+  <div class="invitation-card">
+    <div class="invitation-header">
+      <img
+        :src="invitation.expand?.from?.avatar || '/default-avatar.png'"
+        :alt="invitation.expand?.from?.username"
+        class="avatar"
+      />
+      <div class="invitation-info">
+        <span class="inviter-name">{{ invitation.expand?.from?.username }}</span>
+        <span class="invitation-text">邀请你加入</span>
+      </div>
+    </div>
+
+    <div v-if="invitation.expand?.teamSession" class="session-info">
+      <span class="game-name">{{ invitation.expand.teamSession.gameName }}</span>
+      <span class="session-name">{{ invitation.expand.teamSession.name }}</span>
+    </div>
+
+    <div class="invitation-actions">
+      <button class="action-btn accept" @click="acceptInvitation">
+        接受
+      </button>
+      <button class="action-btn reject" @click="rejectInvitation">
+        {{ showRejectInput ? '确认拒绝' : '拒绝' }}
+      </button>
+    </div>
+
+    <div v-if="showRejectInput" class="reject-input">
+      <textarea
+        v-model="rejectReason"
+        placeholder="填写拒绝原因（可选）"
+        rows="2"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.invitation-card {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid var(--el-border-color);
+}
+
+.invitation-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.invitation-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.inviter-name {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.invitation-text {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+
+.session-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  background: var(--el-bg-color-page);
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+
+.game-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.session-name {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.invitation-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.accept {
+  background: var(--el-color-primary);
+  color: white;
+}
+
+.accept:hover {
+  background: var(--el-color-primary-light-3);
+}
+
+.reject {
+  background: var(--el-fill-color);
+  color: var(--el-text-color-primary);
+}
+
+.reject:hover {
+  background: var(--el-fill-color-dark);
+}
+
+.reject-input {
+  margin-top: 12px;
+}
+
+.reject-input textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  font-size: 13px;
+  resize: none;
+}
+
+.reject-input textarea:focus {
+  outline: none;
+  border-color: var(--el-color-primary);
+}
+</style>
diff --git a/frontend/src/components/team/StatusToggle.vue b/frontend/src/components/team/StatusToggle.vue
new file mode 100644
index 0000000..71f8497
--- /dev/null
+++ b/frontend/src/components/team/StatusToggle.vue
@@ -0,0 +1,72 @@
+<!-- src/components/team/StatusToggle.vue -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
+
+const userStore = useUserStore()
+
+const currentStatus = computed(() => userStore.userStatus)
+const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
+const statusText = computed(() => UserStatusMap[currentStatus.value])
+
+async function setStatus(status: UserStatus) {
+  await userStore.setStatus(status)
+}
+</script>
+
+<template>
+  <el-dropdown trigger="click" @command="setStatus">
+    <span class="status-toggle">
+      <span class="status-icon">{{ statusIcon }}</span>
+      <span class="status-text">{{ statusText }}</span>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="idle">
+          <span class="menu-item">🟢 空闲</span>
+        </el-dropdown-item>
+        <el-dropdown-item command="working">
+          <span class="menu-item">🔴 工作中</span>
+        </el-dropdown-item>
+        <el-dropdown-item command="in_team" :disabled="currentStatus !== 'in_team'">
+          <span class="menu-item">🔵 组队中</span>
+        </el-dropdown-item>
+        <el-dropdown-item command="away">
+          <span class="menu-item">⚫ 离开</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style scoped>
+.status-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.status-toggle:hover {
+  background-color: var(--el-bg-color-page);
+}
+
+.status-icon {
+  font-size: 16px;
+}
+
+.status-text {
+  font-size: 14px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>
diff --git a/frontend/src/components/team/TeamSessionPanel.vue b/frontend/src/components/team/TeamSessionPanel.vue
new file mode 100644
index 0000000..9df1ffb
--- /dev/null
+++ b/frontend/src/components/team/TeamSessionPanel.vue
@@ -0,0 +1,188 @@
+<!-- src/components/team/TeamSessionPanel.vue -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTeamStore } from '@/stores/team'
+import { useGroupStore } from '@/stores/group'
+import { TeamStatusMap } from '@/types'
+import { ElMessageBox } from 'element-plus'
+
+const teamStore = useTeamStore()
+const groupStore = useGroupStore()
+
+const session = computed(() => teamStore.currentSession)
+const statusText = computed(() => session.value ? TeamStatusMap[session.value.status] : '')
+
+const memberDetails = computed(() => {
+  if (!session.value) return []
+  return session.value.members
+    .map(id => groupStore.currentMembers.find(m => m.id === id))
+    .filter((m): m is NonNullable<typeof m> => Boolean(m))
+})
+
+async function endGame() {
+  try {
+    await ElMessageBox.confirm(
+      '确定要结束当前游戏吗？临时小组将被解散。',
+      '确认',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    await teamStore.finishGame()
+  } catch {
+    // 用户取消
+  }
+}
+</script>
+
+<template>
+  <div v-if="session" class="team-session-panel">
+    <div class="panel-header">
+      <h3 class="session-name">{{ session.name }}</h3>
+      <span class="session-status">{{ statusText }}</span>
+    </div>
+
+    <div class="session-game">
+      <span class="game-label">游戏:</span>
+      <span class="game-name">{{ session.gameName }}</span>
+    </div>
+
+    <div class="members-section">
+      <h4 class="members-title">成员 ({{ memberDetails.length }})</h4>
+      <div class="members-list">
+        <div
+          v-for="member in memberDetails"
+          :key="member.id"
+          class="member-item"
+        >
+          <img
+            :src="member.avatar || '/default-avatar.png'"
+            :alt="member.username"
+            class="avatar"
+          />
+          <span class="username">{{ member.username }}</span>
+        </div>
+      </div>
+    </div>
+
+    <button class="end-game-btn" @click="endGame">
+      游戏结束
+    </button>
+  </div>
+
+  <div v-else class="no-session">
+    <p>暂未加入任何临时小组</p>
+  </div>
+</template>
+
+<style scoped>
+.team-session-panel {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid var(--el-color-primary);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.session-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.session-status {
+  padding: 4px 12px;
+  border-radius: 12px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-size: 12px;
+}
+
+.session-game {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  background: var(--el-bg-color-page);
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.game-label {
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+}
+
+.game-name {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.members-section {
+  margin-bottom: 16px;
+}
+
+.members-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 12px;
+}
+
+.members-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.member-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  background: var(--el-bg-color-page);
+  border-radius: 6px;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.username {
+  font-size: 14px;
+}
+
+.end-game-btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--el-color-danger);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.end-game-btn:hover {
+  background: var(--el-color-danger-light-3);
+}
+
+.no-session {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 32px;
+  text-align: center;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/frontend/src/components/team/WorkScheduleModal.vue b/frontend/src/components/team/WorkScheduleModal.vue
new file mode 100644
index 0000000..736635e
--- /dev/null
+++ b/frontend/src/components/team/WorkScheduleModal.vue
@@ -0,0 +1,127 @@
+<!-- src/components/team/WorkScheduleModal.vue -->
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElDialog, ElCheckbox, ElTimeSelect, ElButton } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+
+interface Props {
+  modelValue: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const userStore = useUserStore()
+
+const workdays = ref<number[]>(userStore.user?.workdays || [])
+const workStartTime = ref<string>(userStore.user?.workStartTime || '09:00')
+
+const dayOptions = [
+  { label: '周一', value: 1 },
+  { label: '周二', value: 2 },
+  { label: '周三', value: 3 },
+  { label: '周四', value: 4 },
+  { label: '周五', value: 5 },
+  { label: '周六', value: 6 },
+  { label: '周日', value: 7 }
+]
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+async function saveSchedule() {
+  try {
+    await userStore.setWorkSchedule({
+      workdays: workdays.value,
+      workStartTime: workStartTime.value
+    })
+    visible.value = false
+  } catch (error: any) {
+    console.error('保存工作时间失败:', error)
+  }
+}
+
+function handleOpen() {
+  workdays.value = userStore.user?.workdays || []
+  workStartTime.value = userStore.user?.workStartTime || '09:00'
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="设置工作时间"
+    width="400px"
+    @open="handleOpen"
+  >
+    <div class="schedule-form">
+      <div class="form-group">
+        <label class="form-label">工作日</label>
+        <el-checkbox-group v-model="workdays">
+          <el-checkbox
+            v-for="day in dayOptions"
+            :key="day.value"
+            :label="day.value"
+          >
+            {{ day.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">工作开始时间</label>
+        <el-time-select
+          v-model="workStartTime"
+          start="00:00"
+          end="23:30"
+          step="00:30"
+        />
+      </div>
+
+      <div class="form-hint">
+        <p>在工作日的设定时间，你的状态会自动变为"工作中"</p>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="saveSchedule">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.schedule-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.form-hint {
+  padding: 12px;
+  background: var(--el-color-info-light-9);
+  border-radius: 6px;
+}
+
+.form-hint p {
+  margin: 0;
+  font-size: 12px;
+  color: var(--el-color-info);
+}
+</style>
diff --git a/frontend/src/composables/useRealtime.ts b/frontend/src/composables/useRealtime.ts
new file mode 100644
index 0000000..d19ca41
--- /dev/null
+++ b/frontend/src/composables/useRealtime.ts
@@ -0,0 +1,102 @@
+// src/composables/useRealtime.ts
+import { onUnmounted } from 'vue'
+import { pb } from '@/api/pocketbase'
+import { useUserStore } from '@/stores/user'
+import { useGroupStore } from '@/stores/group'
+import { useTeamStore } from '@/stores/team'
+
+type UnsubscribeFunc = () => Promise<void>
+
+export function useRealtime() {
+  const userStore = useUserStore()
+  const groupStore = useGroupStore()
+  const teamStore = useTeamStore()
+
+  const subscriptions: UnsubscribeFunc[] = []
+
+  // 订阅用户状态变更（群组成员）
+  async function subscribeGroupMembers() {
+    if (!groupStore.currentGroup) return
+
+    const unsub = await pb.collection('users').subscribe('*', (payload) => {
+      const userId = payload.record.id
+      const isMember = groupStore.currentGroup?.members.includes(userId)
+
+      if (isMember) {
+        // 更新成员状态 - 重新加载成员列表
+        groupStore.setCurrentGroup(groupStore.currentGroupId)
+      }
+    })
+
+    subscriptions.push(unsub)
+  }
+
+  // 订阅邀请变更
+  async function subscribeInvitations() {
+    const userId = userStore.userId
+    if (!userId) return
+
+    const unsub = await pb.collection('invitations').subscribe('*', async () => {
+      // 更新邀请数量
+      await teamStore.getPendingCount()
+      // TODO: 更新 UI 显示邀请数量
+    })
+
+    subscriptions.push(unsub)
+  }
+
+  // 订阅临时小组变更
+  async function subscribeTeamSession() {
+    const session = teamStore.currentSession
+    if (!session) return
+
+    const unsub = await pb.collection('teamSessions').subscribe('*', (payload) => {
+      if (payload.record.id === session.id) {
+        // 更新临时小组状态
+        teamStore.loadActiveSession()
+      }
+    })
+
+    subscriptions.push(unsub)
+  }
+
+  // 订阅群组变更
+  async function subscribeGroup(groupId: string) {
+    const unsub = await pb.collection('groups').subscribe('*', (payload) => {
+      if (payload.record.id === groupId) {
+        // 更新群组信息
+        groupStore.loadGroups()
+        if (groupStore.currentGroupId === groupId) {
+          groupStore.setCurrentGroup(groupId)
+        }
+      }
+    })
+
+    subscriptions.push(unsub)
+  }
+
+  // 清理所有订阅
+  async function unsubscribeAll() {
+    for (const sub of subscriptions) {
+      try {
+        await sub()
+      } catch (error) {
+        console.error('取消订阅失败:', error)
+      }
+    }
+    subscriptions.length = 0
+  }
+
+  // 组件卸载时自动清理
+  onUnmounted(() => {
+    unsubscribeAll()
+  })
+
+  return {
+    subscribeGroupMembers,
+    subscribeInvitations,
+    subscribeTeamSession,
+    subscribeGroup,
+    unsubscribeAll
+  }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..cd7b801
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,22 @@
+// src/main.ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+// 注册所有 Element Plus 图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 0000000..fe96587
--- /dev/null
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,85 @@
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { isAuthenticated } from '@/api/pocketbase'
+
+// 路由配置
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/Login.vue'),
+    meta: { requiresGuest: true }
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/views/Register.vue'),
+    meta: { requiresGuest: true }
+  },
+  {
+    path: '/',
+    component: () => import('@/views/Layout.vue'),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: () => import('@/views/Home.vue')
+      },
+      {
+        path: 'group/:id',
+        name: 'GroupView',
+        component: () => import('@/views/GroupView.vue'),
+        props: true
+      },
+      {
+        path: 'games',
+        name: 'GamesLibrary',
+        component: () => import('@/views/GamesLibrary.vue')
+      },
+      {
+        path: 'profile',
+        name: 'Profile',
+        component: () => import('@/views/Profile.vue')
+      },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: () => import('@/views/Settings.vue')
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/NotFound.vue')
+  }
+]
+
+// 创建路由实例
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, _from, next) => {
+  const authenticated = isAuthenticated()
+
+  // 需要登录的页面
+  if (to.meta.requiresAuth && !authenticated) {
+    next({ name: 'Login', query: { redirect: to.fullPath } })
+    return
+  }
+
+  // 已登录用户访问登录/注册页
+  if (to.meta.requiresGuest && authenticated) {
+    next({ name: 'Home' })
+    return
+  }
+
+  next()
+})
+
+export default router
diff --git a/frontend/src/stores/group.ts b/frontend/src/stores/group.ts
new file mode 100644
index 0000000..6b94a27
--- /dev/null
+++ b/frontend/src/stores/group.ts
@@ -0,0 +1,88 @@
+// src/stores/group.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { Group, User } from '@/types'
+import { getUserGroups, getGroup, getGroupMembers } from '@/api/groups'
+
+export const useGroupStore = defineStore('group', () => {
+  // 状态
+  const groups = ref<Group[]>([])
+  const currentGroup = ref<Group | null>(null)
+  const currentMembers = ref<User[]>([])
+  const loading = ref(false)
+
+  // 计算属性
+  const currentGroupId = computed(() => currentGroup.value?.id || '')
+  const isGroupOwner = computed(() => {
+    const userId = localStorage.getItem('userId')
+    return currentGroup.value?.owner === userId
+  })
+
+  // 加载用户的群组列表
+  async function loadGroups() {
+    try {
+      loading.value = true
+      groups.value = await getUserGroups()
+    } catch (error) {
+      console.error('加载群组列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 设置当前群组
+  async function setCurrentGroup(groupId: string) {
+    try {
+      loading.value = true
+      currentGroup.value = await getGroup(groupId)
+      currentMembers.value = await getGroupMembers(groupId) as unknown as User[]
+    } catch (error) {
+      console.error('加载群组详情失败:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 清除当前群组
+  function clearCurrentGroup() {
+    currentGroup.value = null
+    currentMembers.value = []
+  }
+
+  // 更新群组成员列表
+  function updateMembers(members: User[]) {
+    currentMembers.value = members
+  }
+
+  // 添加群组到列表
+  function addGroup(group: Group) {
+    groups.value.push(group)
+  }
+
+  // 从列表中移除群组
+  function removeGroup(groupId: string) {
+    const index = groups.value.findIndex(g => g.id === groupId)
+    if (index !== -1) {
+      groups.value.splice(index, 1)
+    }
+    if (currentGroup.value?.id === groupId) {
+      clearCurrentGroup()
+    }
+  }
+
+  return {
+    groups,
+    currentGroup,
+    currentMembers,
+    loading,
+    currentGroupId,
+    isGroupOwner,
+    loadGroups,
+    setCurrentGroup,
+    clearCurrentGroup,
+    updateMembers,
+    addGroup,
+    removeGroup
+  }
+})
diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts
new file mode 100644
index 0000000..b598d04
--- /dev/null
+++ b/frontend/src/stores/index.ts
@@ -0,0 +1,4 @@
+// src/stores/index.ts
+export { useUserStore } from './user'
+export { useGroupStore } from './group'
+export { useTeamStore } from './team'
diff --git a/frontend/src/stores/team.ts b/frontend/src/stores/team.ts
new file mode 100644
index 0000000..ea8c4fb
--- /dev/null
+++ b/frontend/src/stores/team.ts
@@ -0,0 +1,117 @@
+// src/stores/team.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { TeamSession, TeamStatus } from '@/types'
+import { getActiveTeamSession, createTeamSession, updateTeamStatus, endGame } from '@/api/sessions'
+import { getPendingInvitations, sendBulkInvitations } from '@/api/invitations'
+
+export const useTeamStore = defineStore('team', () => {
+  // 状态
+  const currentSession = ref<TeamSession | null>(null)
+  const loading = ref(false)
+
+  // 计算属性
+  const isInTeam = computed(() => currentSession.value !== null)
+  const teamStatus = computed(() => currentSession.value?.status || 'dissolved')
+  const teamMembers = computed(() => currentSession.value?.members || [])
+
+  // 加载活跃的临时小组
+  async function loadActiveSession() {
+    try {
+      loading.value = true
+      const session = await getActiveTeamSession()
+      currentSession.value = session
+      return session
+    } catch (error) {
+      console.error('加载临时小组失败:', error)
+      currentSession.value = null
+      return null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 创建临时小组
+  async function createSession(data: {
+    sourceGroup: string
+    name: string
+    gameName: string
+    members: string[]
+  }) {
+    try {
+      loading.value = true
+      const session = await createTeamSession(data)
+      currentSession.value = session
+
+      // 发送邀请
+      await sendBulkInvitations(data.members, session.id)
+
+      return session
+    } catch (error: any) {
+      console.error('创建临时小组失败:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 更新小组状态
+  async function updateStatus(status: TeamStatus) {
+    if (!currentSession.value) return
+
+    try {
+      const updated = await updateTeamStatus(currentSession.value.id, status)
+      currentSession.value = updated
+      return updated
+    } catch (error: any) {
+      console.error('更新小组状态失败:', error)
+      throw error
+    }
+  }
+
+  // 结束游戏
+  async function finishGame() {
+    if (!currentSession.value) return
+
+    try {
+      loading.value = true
+      await endGame(currentSession.value.id)
+      currentSession.value = null
+    } catch (error: any) {
+      console.error('结束游戏失败:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 清除当前小组
+  function clearSession() {
+    currentSession.value = null
+  }
+
+  // 获取待处理邀请数量
+  async function getPendingCount() {
+    try {
+      const invitations = await getPendingInvitations()
+      return invitations.length
+    } catch (error) {
+      console.error('获取邀请数量失败:', error)
+      return 0
+    }
+  }
+
+  return {
+    currentSession,
+    loading,
+    isInTeam,
+    teamStatus,
+    teamMembers,
+    loadActiveSession,
+    createSession,
+    updateStatus,
+    finishGame,
+    clearSession,
+    getPendingCount
+  }
+})
diff --git a/frontend/src/stores/user.ts b/frontend/src/stores/user.ts
new file mode 100644
index 0000000..f7c0050
--- /dev/null
+++ b/frontend/src/stores/user.ts
@@ -0,0 +1,123 @@
+// src/stores/user.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { User, UserStatus, WorkSchedule } from '@/types'
+import { pb, getCurrentUser, isAuthenticated, logout as pbLogout } from '@/api/pocketbase'
+import { getUser, updateUserStatus, updateWorkSchedule } from '@/api/users'
+
+export const useUserStore = defineStore('user', () => {
+  // 状态
+  const user = ref<User | null>(null)
+  const loading = ref(false)
+
+  // 计算属性
+  const isLoggedIn = computed(() => isAuthenticated() && user.value !== null)
+  const userStatus = computed(() => user.value?.status || 'away')
+  const userId = computed(() => user.value?.id || '')
+
+  // 初始化用户信息
+  async function initUser() {
+    if (!isAuthenticated()) {
+      user.value = null
+      return
+    }
+
+    try {
+      loading.value = true
+      const authUser = getCurrentUser() as User
+      // 获取完整用户信息
+      user.value = await getUser(authUser.id)
+    } catch (error) {
+      console.error('初始化用户信息失败:', error)
+      user.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 登录
+  async function login(email: string, password: string) {
+    try {
+      loading.value = true
+      await pb.collection('users').authWithPassword(email, password)
+      await initUser()
+    } catch (error: any) {
+      throw new Error(error.message || '登录失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 注册
+  async function register(data: { email: string; password: string; passwordConfirm: string; username: string }) {
+    try {
+      loading.value = true
+      await pb.collection('users').create(data)
+      await login(data.email, data.password)
+    } catch (error: any) {
+      throw new Error(error.message || '注册失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 登出
+  function logout() {
+    pbLogout()
+    user.value = null
+  }
+
+  // 更新状态
+  async function setStatus(status: UserStatus, note?: string) {
+    try {
+      const updated = await updateUserStatus(status, note)
+      if (user.value) {
+        user.value.status = status
+        user.value.statusNote = note
+      }
+      return updated
+    } catch (error: any) {
+      throw new Error(error.message || '更新状态失败')
+    }
+  }
+
+  // 更新工作时间
+  async function setWorkSchedule(schedule: WorkSchedule) {
+    try {
+      const updated = await updateWorkSchedule(schedule)
+      if (user.value) {
+        user.value.workdays = schedule.workdays
+        user.value.workStartTime = schedule.workStartTime
+        user.value.nextWorkTime = updated.nextWorkTime
+      }
+      return updated
+    } catch (error: any) {
+      throw new Error(error.message || '更新工作时间失败')
+    }
+  }
+
+  // 检查并自动更新工作时间状态
+  function checkWorkSchedule() {
+    if (!user.value || !user.value.nextWorkTime) return
+
+    const now = Math.floor(Date.now() / 1000)
+    if (now >= user.value.nextWorkTime && user.value.status === 'idle') {
+      setStatus('working')
+    }
+  }
+
+  return {
+    user,
+    loading,
+    isLoggedIn,
+    userStatus,
+    userId,
+    initUser,
+    login,
+    register,
+    logout,
+    setStatus,
+    setWorkSchedule,
+    checkWorkSchedule
+  }
+})
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..803d2f2
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,128 @@
+// src/types/index.ts
+
+// 用户状态
+export type UserStatus = 'idle' | 'working' | 'in_team' | 'away'
+
+// 用户状态中文映射
+export const UserStatusMap: Record<UserStatus, string> = {
+  idle: '空闲',
+  working: '工作中',
+  in_team: '组队中',
+  away: '离开'
+}
+
+// 用户状态图标
+export const UserStatusIcon: Record<UserStatus, string> = {
+  idle: '🟢',
+  working: '🔴',
+  in_team: '🔵',
+  away: '⚫'
+}
+
+// 临时小组状态
+export type TeamStatus = 'recruiting' | 'playing' | 'finished' | 'dissolved'
+
+export const TeamStatusMap: Record<TeamStatus, string> = {
+  recruiting: '招募中',
+  playing: '游戏中',
+  finished: '已结束',
+  dissolved: '已解散'
+}
+
+// 邀请状态
+export type InviteStatus = 'pending' | 'accepted' | 'rejected'
+
+export const InviteStatusMap: Record<InviteStatus, string> = {
+  pending: '等待响应',
+  accepted: '已接受',
+  rejected: '已拒绝'
+}
+
+// 游戏平台
+export type GamePlatform = 'PC' | 'PS5' | 'Xbox' | 'Switch' | 'Mobile'
+
+// 用户
+export interface User {
+  id: string
+  username: string
+  email: string
+  avatar?: string
+  status: UserStatus
+  statusNote?: string
+  maxGroups: number
+  workdays: number[]
+  workStartTime: string
+  nextWorkTime?: number
+  points: number
+  created: string
+  updated: string
+}
+
+// 群组
+export interface Group {
+  id: string
+  name: string
+  description?: string
+  owner: string
+  members: string[]
+  maxMembers: number
+  created: string
+  updated: string
+  expand?: {
+    owner?: User
+    members?: User[]
+  }
+}
+
+// 临时小组
+export interface TeamSession {
+  id: string
+  name: string
+  sourceGroup: string
+  gameName: string
+  members: string[]
+  status: TeamStatus
+  dissolvedAt?: string
+  created: string
+  updated: string
+  expand?: {
+    members?: User[]
+    sourceGroup?: Group
+  }
+}
+
+// 邀请
+export interface Invitation {
+  id: string
+  from: string
+  to: string
+  teamSession: string
+  status: InviteStatus
+  rejectReason?: string
+  respondedAt?: string
+  created: string
+  updated: string
+  expand?: {
+    from?: User
+    to?: User
+    teamSession?: TeamSession
+  }
+}
+
+// 游戏
+export interface Game {
+  id: string
+  name: string
+  platform?: GamePlatform
+  tags?: string[]
+  cover?: string
+  popularCount: number
+  created: string
+  updated: string
+}
+
+// 工作时间设定
+export interface WorkSchedule {
+  workdays: number[]
+  workStartTime: string
+}
diff --git a/frontend/src/views/GamesLibrary.vue b/frontend/src/views/GamesLibrary.vue
new file mode 100644
index 0000000..1db9b3b
--- /dev/null
+++ b/frontend/src/views/GamesLibrary.vue
@@ -0,0 +1,178 @@
+<!-- src/views/GamesLibrary.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getGames, getAllPlatforms } from '@/api/games'
+import type { Game, GamePlatform } from '@/types'
+import { ElCard, ElInput, ElSelect, ElOption } from 'element-plus'
+
+const games = ref<Game[]>([])
+const loading = ref(false)
+const searchQuery = ref('')
+const selectedPlatform = ref<GamePlatform | ''>('')
+const platforms = getAllPlatforms()
+
+onMounted(async () => {
+  await loadGames()
+})
+
+async function loadGames() {
+  try {
+    loading.value = true
+    const result = await getGames({
+      limit: 50,
+      search: searchQuery.value || undefined,
+      platform: selectedPlatform.value || undefined
+    })
+    games.value = result.items
+  } catch (error) {
+    console.error('加载游戏失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  loadGames()
+}
+</script>
+
+<template>
+  <div class="games-library">
+    <div class="page-header">
+      <h1>游戏库</h1>
+      <div class="filters">
+        <el-input
+          v-model="searchQuery"
+          placeholder="搜索游戏..."
+          clearable
+          @input="handleSearch"
+        />
+        <el-select v-model="selectedPlatform" placeholder="选择平台" clearable @change="loadGames">
+          <el-option
+            v-for="platform in platforms"
+            :key="platform"
+            :label="platform"
+            :value="platform"
+          />
+        </el-select>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">加载中...</div>
+
+    <div v-else-if="games.length === 0" class="empty">
+      <p>暂无游戏</p>
+    </div>
+
+    <div v-else class="games-grid">
+      <el-card v-for="game in games" :key="game.id" class="game-card">
+        <img
+          :src="game.cover || '/game-placeholder.png'"
+          :alt="game.name"
+          class="game-cover"
+        />
+        <div class="game-info">
+          <h3 class="game-name">{{ game.name }}</h3>
+          <p class="game-platform">{{ game.platform }}</p>
+          <div class="game-tags">
+            <span v-for="tag in game.tags" :key="tag" class="tag">{{ tag }}</span>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.games-library {
+  width: 100%;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 16px;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+}
+
+.filters .el-input {
+  width: 300px;
+}
+
+.loading {
+  text-align: center;
+  padding: 60px;
+  color: var(--el-text-color-secondary);
+}
+
+.empty {
+  text-align: center;
+  padding: 60px;
+  color: var(--el-text-color-secondary);
+}
+
+.games-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.game-card {
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.game-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.game-cover {
+  width: 100%;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+}
+
+.game-info {
+  padding: 12px;
+}
+
+.game-name {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.game-platform {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  margin: 0 0 8px;
+}
+
+.game-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag {
+  padding: 2px 8px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/frontend/src/views/GroupView.vue b/frontend/src/views/GroupView.vue
new file mode 100644
index 0000000..46063e2
--- /dev/null
+++ b/frontend/src/views/GroupView.vue
@@ -0,0 +1,159 @@
+<!-- src/views/GroupView.vue -->
+<script setup lang="ts">
+import { onMounted } 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'
+
+const route = useRoute()
+const groupStore = useGroupStore()
+
+const groupId = route.params.id as string
+
+onMounted(async () => {
+  await groupStore.setCurrentGroup(groupId)
+})
+
+async function refreshMembers() {
+  await groupStore.setCurrentGroup(groupId)
+}
+</script>
+
+<template>
+  <div class="group-view">
+    <div class="page-header">
+      <h1>{{ groupStore.currentGroup?.name }}</h1>
+      <p class="description">{{ groupStore.currentGroup?.description }}</p>
+    </div>
+
+    <div class="page-content">
+      <!-- 左侧边栏 -->
+      <aside class="sidebar-left">
+        <team-session-panel />
+
+        <el-card class="card mt-16">
+          <template #header>
+            <div class="card-header">
+              <h3>群组信息</h3>
+            </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>
+          </div>
+        </el-card>
+      </aside>
+
+      <!-- 主内容区 -->
+      <main class="main-content">
+        <idle-membersList status="idle" />
+      </main>
+
+      <!-- 右侧边栏 -->
+      <aside class="sidebar-right">
+        <el-card class="card">
+          <template #header>
+            <div class="card-header">
+              <h3>所有成员</h3>
+              <el-button size="small" @click="refreshMembers">刷新</el-button>
+            </div>
+          </template>
+
+          <idle-membersList />
+        </el-card>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.group-view {
+  width: 100%;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 8px;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  margin: 0;
+}
+
+.page-content {
+  display: grid;
+  grid-template-columns: 320px 1fr 280px;
+  gap: 16px;
+}
+
+.sidebar-left,
+.sidebar-right {
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  border-radius: 12px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.group-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-item .label {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+
+.info-item .value {
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
new file mode 100644
index 0000000..2b04d75
--- /dev/null
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,248 @@
+<!-- src/views/Home.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGroupStore } from '@/stores/group'
+import { getPopularGames } from '@/api/games'
+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 popularGames = ref<Game[]>([])
+const loading = ref(false)
+
+onMounted(async () => {
+  await loadPopularGames()
+})
+
+async function loadPopularGames() {
+  try {
+    loading.value = true
+    popularGames.value = await getPopularGames(8)
+  } catch (error) {
+    console.error('加载热门游戏失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectGroup(groupId: string) {
+  groupStore.setCurrentGroup(groupId)
+  router.push({ name: 'GroupView', params: { id: groupId } })
+}
+</script>
+
+<template>
+  <div class="home-page">
+    <div class="page-content">
+      <!-- 左侧边栏 -->
+      <aside class="sidebar">
+        <el-card class="card">
+          <template #header>
+            <div class="card-header">
+              <h3>我的群组</h3>
+              <el-button size="small" type="primary">+ 创建</el-button>
+            </div>
+          </template>
+
+          <div v-if="groupStore.groups.length === 0" class="empty">
+            <el-empty description="暂无群组" :image-size="80" />
+          </div>
+
+          <div v-else class="group-list">
+            <div
+              v-for="group in groupStore.groups"
+              :key="group.id"
+              class="group-item"
+              @click="selectGroup(group.id)"
+            >
+              <div class="group-info">
+                <span class="group-name">{{ group.name }}</span>
+                <span class="group-members">{{ group.members.length }} 成员</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </aside>
+
+      <!-- 主内容区 -->
+      <main class="main-content">
+        <!-- 当前临时小组 -->
+        <team-session-panel />
+
+        <!-- 热门游戏 -->
+        <el-card class="card mt-16">
+          <template #header>
+            <h3>热门游戏</h3>
+          </template>
+
+          <div v-if="loading" class="loading">加载中...</div>
+
+          <div v-else class="games-grid">
+            <div
+              v-for="game in popularGames"
+              :key="game.id"
+              class="game-card"
+              @click="router.push({ name: 'GamesLibrary' })"
+            >
+              <img
+                :src="game.cover || '/game-placeholder.png'"
+                :alt="game.name"
+                class="game-cover"
+              />
+              <div class="game-info">
+                <span class="game-name">{{ game.name }}</span>
+                <span class="game-platform">{{ game.platform }}</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </main>
+
+      <!-- 右侧边栏 -->
+      <aside class="sidebar">
+        <el-card class="card">
+          <template #header>
+            <h3>空闲成员</h3>
+          </template>
+
+          <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;
+}
+
+.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;
+}
+
+.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;
+  font-weight: 500;
+}
+
+.group-members {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--el-text-color-secondary);
+}
+
+.games-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.game-card {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.game-card:hover {
+  transform: translateY(-4px);
+}
+
+.game-cover {
+  width: 100%;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--el-fill-color-light);
+}
+
+.game-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.game-name {
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.game-platform {
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
new file mode 100644
index 0000000..0e945f4
--- /dev/null
+++ b/frontend/src/views/Layout.vue
@@ -0,0 +1,197 @@
+<!-- src/views/Layout.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { useGroupStore } from '@/stores/group'
+import { useTeamStore } from '@/stores/team'
+import StatusToggle from '@/components/team/StatusToggle.vue'
+import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
+import { ElBadge, ElButton, ElIcon } from 'element-plus'
+
+const router = useRouter()
+const userStore = useUserStore()
+const groupStore = useGroupStore()
+const teamStore = useTeamStore()
+
+const showScheduleModal = ref(false)
+const pendingCount = ref(0)
+
+onMounted(async () => {
+  await userStore.initUser()
+  await groupStore.loadGroups()
+  await teamStore.loadActiveSession()
+  pendingCount.value = await teamStore.getPendingCount()
+})
+
+async function handleLogout() {
+  userStore.logout()
+  router.push({ name: 'Login' })
+}
+
+function showInviteModal() {
+  // TODO: 实现邀请模态框
+}
+</script>
+
+<template>
+  <div class="layout">
+    <!-- 顶部导航 -->
+    <header class="header">
+      <div class="header-left">
+        <h1 class="logo">Game Group</h1>
+      </div>
+
+      <div class="header-center">
+        <nav class="nav">
+          <router-link to="/" class="nav-link" active-class="active">
+            首页
+          </router-link>
+          <router-link to="/games" class="nav-link" active-class="active">
+            游戏库
+          </router-link>
+        </nav>
+      </div>
+
+      <div class="header-right">
+        <el-badge :value="pendingCount" :hidden="pendingCount === 0">
+          <el-button circle @click="showInviteModal">
+            <el-icon>🔔</el-icon>
+          </el-button>
+        </el-badge>
+
+        <status-toggle />
+
+        <el-dropdown trigger="click">
+          <span class="user-dropdown">
+            <img
+              :src="userStore.user?.avatar || '/default-avatar.png'"
+              class="user-avatar"
+            />
+            <span class="user-name">{{ userStore.user?.username }}</span>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <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">
+      <router-view />
+    </main>
+
+    <!-- 工作时间设置弹窗 -->
+    <work-schedule-modal v-model="showScheduleModal" />
+  </div>
+</template>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+  background: var(--el-bg-color-page);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 60px;
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 0;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.nav {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-link {
+  padding: 8px 16px;
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.nav-link:hover {
+  background: var(--el-fill-color-light);
+}
+
+.nav-link.active {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-dropdown {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.user-dropdown:hover {
+  background: var(--el-fill-color-light);
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.user-name {
+  font-size: 14px;
+}
+
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+</style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
new file mode 100644
index 0000000..e3be83d
--- /dev/null
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,176 @@
+<!-- src/views/Login.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import PasswordInput from '@/components/common/PasswordInput.vue'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const email = ref('')
+const password = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  if (!email.value || !password.value) {
+    ElMessage.warning('请输入邮箱和密码')
+    return
+  }
+
+  try {
+    loading.value = true
+    await userStore.login(email.value, password.value)
+
+    const redirect = route.query.redirect as string || '/'
+    router.push(redirect)
+  } catch (error: any) {
+    ElMessage.error(error.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToRegister() {
+  router.push({ name: 'Register', query: route.query })
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <div class="login-card">
+      <h1 class="title">登录 Game Group</h1>
+
+      <form class="login-form" @submit.prevent="handleLogin">
+        <div class="form-group">
+          <label for="email">邮箱</label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            placeholder="请输入邮箱"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">密码</label>
+          <PasswordInput
+            id="password"
+            v-model="password"
+            placeholder="请输入密码"
+            required
+          />
+        </div>
+
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? '登录中...' : '登录' }}
+        </button>
+      </form>
+
+      <div class="footer-links">
+        <span>还没有账号？</span>
+        <a @click="goToRegister">立即注册</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  padding: 40px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  text-align: center;
+  margin: 0 0 32px;
+  color: #333;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #555;
+}
+
+.form-group input {
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.submit-btn {
+  padding: 14px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.submit-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.footer-links {
+  margin-top: 24px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.footer-links a {
+  color: #667eea;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend/src/views/NotFound.vue b/frontend/src/views/NotFound.vue
new file mode 100644
index 0000000..bc3b66c
--- /dev/null
+++ b/frontend/src/views/NotFound.vue
@@ -0,0 +1,66 @@
+<!-- src/views/NotFound.vue -->
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goHome() {
+  router.push({ name: 'Home' })
+}
+</script>
+
+<template>
+  <div class="not-found">
+    <div class="content">
+      <h1>404</h1>
+      <p>抱歉，您访问的页面不存在</p>
+      <button class="home-btn" @click="goHome">
+        返回首页
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.not-found {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+}
+
+.content {
+  text-align: center;
+}
+
+.content h1 {
+  font-size: 72px;
+  font-weight: 700;
+  margin: 0 0 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.content p {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
+  margin: 0 0 24px;
+}
+
+.home-btn {
+  padding: 12px 32px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.home-btn:hover {
+  opacity: 0.9;
+}
+</style>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
new file mode 100644
index 0000000..97e43aa
--- /dev/null
+++ b/frontend/src/views/Profile.vue
@@ -0,0 +1,127 @@
+<!-- src/views/Profile.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useUserStore } from '@/stores/user'
+import { ElCard, ElInput, ElButton, ElMessage } from 'element-plus'
+
+const userStore = useUserStore()
+
+const username = ref(userStore.user?.username || '')
+const email = ref(userStore.user?.email || '')
+const avatar = ref(userStore.user?.avatar || '')
+const loading = ref(false)
+
+async function saveProfile() {
+  try {
+    loading.value = true
+    // await updateProfile({ username: username.value, avatar: avatar.value })
+    ElMessage.success('保存成功')
+  } catch (error: any) {
+    ElMessage.error(error.message || '保存失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleAvatarUpload() {
+  // TODO: 实现头像上传
+  ElMessage.info('头像上传功能待实现')
+}
+</script>
+
+<template>
+  <div class="profile-page">
+    <h1>个人中心</h1>
+
+    <el-card class="profile-card">
+      <div class="profile-form">
+        <div class="avatar-section">
+          <img :src="avatar || '/default-avatar.png'" class="avatar" />
+          <el-button @click="handleAvatarUpload">更换头像</el-button>
+        </div>
+
+        <div class="form-group">
+          <label>用户名</label>
+          <el-input v-model="username" placeholder="请输入用户名" />
+        </div>
+
+        <div class="form-group">
+          <label>邮箱</label>
+          <el-input v-model="email" disabled />
+        </div>
+
+        <div class="form-group">
+          <label>状态</label>
+          <div class="status-display">
+            <span>{{ userStore.userStatus }}</span>
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <el-button type="primary" :loading="loading" @click="saveProfile">
+            保存
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.profile-page {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.profile-page h1 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 24px;
+}
+
+.profile-card {
+  border-radius: 12px;
+}
+
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-display {
+  padding: 8px 16px;
+  background: var(--el-fill-color-light);
+  border-radius: 6px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+}
+</style>
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
new file mode 100644
index 0000000..d40cdad
--- /dev/null
+++ b/frontend/src/views/Register.vue
@@ -0,0 +1,213 @@
+<!-- src/views/Register.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import PasswordInput from '@/components/common/PasswordInput.vue'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const passwordConfirm = ref('')
+const loading = ref(false)
+
+async function handleRegister() {
+  if (!username.value || !email.value || !password.value) {
+    ElMessage.warning('请填写所有必填项')
+    return
+  }
+
+  if (password.value !== passwordConfirm.value) {
+    ElMessage.warning('两次输入的密码不一致')
+    return
+  }
+
+  if (password.value.length < 6) {
+    ElMessage.warning('密码长度至少为 6 位')
+    return
+  }
+
+  try {
+    loading.value = true
+    await userStore.register({
+      username: username.value,
+      email: email.value,
+      password: password.value,
+      passwordConfirm: passwordConfirm.value
+    })
+
+    ElMessage.success('注册成功')
+    router.push({ name: 'Home' })
+  } catch (error: any) {
+    ElMessage.error(error.message || '注册失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToLogin() {
+  router.push({ name: 'Login' })
+}
+</script>
+
+<template>
+  <div class="register-page">
+    <div class="register-card">
+      <h1 class="title">注册 Game Group</h1>
+
+      <form class="register-form" @submit.prevent="handleRegister">
+        <div class="form-group">
+          <label for="username">用户名</label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            placeholder="请输入用户名"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="email">邮箱</label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            placeholder="请输入邮箱"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">密码</label>
+          <PasswordInput
+            id="password"
+            v-model="password"
+            placeholder="请输入密码（至少6位）"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="passwordConfirm">确认密码</label>
+          <PasswordInput
+            id="passwordConfirm"
+            v-model="passwordConfirm"
+            placeholder="请再次输入密码"
+            required
+          />
+        </div>
+
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? '注册中...' : '注册' }}
+        </button>
+      </form>
+
+      <div class="footer-links">
+        <span>已有账号？</span>
+        <a @click="goToLogin">立即登录</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.register-card {
+  width: 100%;
+  max-width: 400px;
+  padding: 40px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  text-align: center;
+  margin: 0 0 32px;
+  color: #333;
+}
+
+.register-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #555;
+}
+
+.form-group input {
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.submit-btn {
+  padding: 14px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.submit-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.footer-links {
+  margin-top: 24px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.footer-links a {
+  color: #667eea;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
new file mode 100644
index 0000000..fff7a4c
--- /dev/null
+++ b/frontend/src/views/Settings.vue
@@ -0,0 +1,112 @@
+<!-- src/views/Settings.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
+
+const showScheduleModal = ref(false)
+</script>
+
+<template>
+  <div class="settings-page">
+    <h1>设置</h1>
+
+    <div class="settings-list">
+      <div class="setting-item">
+        <div class="setting-info">
+          <h3>工作时间</h3>
+          <p>设置工作日和工作开始时间，系统会自动将你的状态设置为"工作中"</p>
+        </div>
+        <button class="setting-btn" @click="showScheduleModal = true">
+          配置
+        </button>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <h3>通知设置</h3>
+          <p>配置邀请通知的显示方式</p>
+        </div>
+        <button class="setting-btn" disabled>
+          即将推出
+        </button>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <h3>隐私设置</h3>
+          <p>控制谁可以看到你的在线状态</p>
+        </div>
+        <button class="setting-btn" disabled>
+          即将推出
+        </button>
+      </div>
+    </div>
+
+    <work-schedule-modal v-model="showScheduleModal" />
+  </div>
+</template>
+
+<style scoped>
+.settings-page {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.settings-page h1 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 24px;
+}
+
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  border: 1px solid var(--el-border-color);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-info h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.setting-info p {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  margin: 0;
+}
+
+.setting-btn {
+  padding: 8px 20px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-light);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.setting-btn:hover:not(:disabled) {
+  background: var(--el-fill-color);
+  border-color: var(--el-border-color-darker);
+}
+
+.setting-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..80da540
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_PB_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..e160696
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        }
+      }
+    },
+  },
+  plugins: [],
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..4e5ea1b
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..14d868d
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'node:path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: Number(process.env.VITE_PORT) || 5173,
+    proxy: {
+      '/api': {
+        target: process.env.VITE_PB_URL || 'http://192.168.1.14:8711',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})
diff --git a/stop-all.sh b/stop-all.sh
new file mode 100644
index 0000000..57e938c
--- /dev/null
+++ b/stop-all.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+# 停止所有服务
+
+echo "🛑 停止所有服务..."
+
+docker compose -f docker-compose.backend.yml down
+docker compose -f docker-compose.dev.yml down
+docker compose -f docker-compose.uat.yml down
+
+echo "✅ 所有服务已停止"