From 262f946a4e80eece660bc2437f299a49175192d0 Mon Sep 17 00:00:00 2001
From: congsh <congsh@jiulu-gameplay.com.cn>
Date: Sat, 18 Apr 2026 12:30:49 +0800
Subject: [PATCH] feat: add changelog page with v0.0.1 and v0.0.2 entries

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/router/index.ts     |   5 +
 frontend/src/views/Changelog.vue | 187 +++++++++++++++++++++++++++++++
 frontend/src/views/Layout.vue    |   7 +-
 3 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/Changelog.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index fe96587..7bfea80 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -47,6 +47,11 @@ const routes: RouteRecordRaw[] = [
         path: 'settings',
         name: 'Settings',
         component: () => import('@/views/Settings.vue')
+      },
+      {
+        path: 'changelog',
+        name: 'Changelog',
+        component: () => import('@/views/Changelog.vue')
       }
     ]
   },
diff --git a/frontend/src/views/Changelog.vue b/frontend/src/views/Changelog.vue
new file mode 100644
index 0000000..7992b5a
--- /dev/null
+++ b/frontend/src/views/Changelog.vue
@@ -0,0 +1,187 @@
+<!-- src/views/Changelog.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface LogEntry {
+  version: string
+  date: string
+  title: string
+  items: { type: 'feat' | 'fix' | 'refactor' | 'style'; text: string }[]
+}
+
+const logs = ref<LogEntry[]>([
+  {
+    version: 'v0.0.2',
+    date: '2026-04-18',
+    title: '优化页面元素和游戏库筛选',
+    items: [
+      { type: 'style', text: '统一色彩体系，将混用的蓝/紫色调全部替换为绿色主题' },
+      { type: 'feat', text: '侧边栏「创建群组」「加入群组」按钮添加文字标签，提升可发现性' },
+      { type: 'feat', text: '顶部 Header 增加快捷操作入口（创建群组、加入群组、通知）' },
+      { type: 'feat', text: '移动端适配：添加汉堡菜单，侧边栏滑动展开' },
+      { type: 'feat', text: '首页欢迎条增加 CTA 按钮，无群组时显示引导卡片' },
+      { type: 'feat', text: '加入群组弹窗新增按名称搜索模式，保留 ID 查找作为备选' },
+      { type: 'feat', text: '游戏库页面内置群组下拉选择，不再依赖外部选择' },
+      { type: 'fix', text: '热门游戏空状态优化提示文案' },
+      { type: 'refactor', text: '首页无临时小组时自动折叠空闲成员区域' },
+    ]
+  },
+  {
+    version: 'v0.0.1',
+    date: '2026-04-17',
+    title: '项目初始化',
+    items: [
+      { type: 'feat', text: '搭建项目基础架构：Vue 3 + TypeScript + Pinia + Element Plus + Tailwind CSS' },
+      { type: 'feat', text: '集成 PocketBase 后端服务，完成用户认证（注册/登录/Cookie 持久化）' },
+      { type: 'feat', text: '实现群组管理：创建群组、加入群组（ID 查找）、解散群组' },
+      { type: 'feat', text: '实现入群审批流程：审核开关、提交申请、群主审批' },
+      { type: 'feat', text: '实现临时小组：创建小队、邀请成员、开始游戏、结束解散' },
+      { type: 'feat', text: '实现组队邀请：发送邀请、接受/拒绝、实时通知' },
+      { type: 'feat', text: '实现游戏库：添加游戏、导入导出、评论收藏、热门排行' },
+      { type: 'feat', text: '用户状态管理：空闲/工作中/组队中/离开，工作时间自动切换' },
+      { type: 'feat', text: '实时数据同步：PocketBase Realtime 订阅群组、成员、邀请变更' },
+      { type: 'feat', text: 'Docker 部署方案：Dev/UAT 环境分离，独立 PocketBase 实例' },
+    ]
+  }
+])
+
+const typeMap: Record<string, { label: string; color: string }> = {
+  feat: { label: '新功能', color: 'var(--gg-primary)' },
+  fix: { label: '修复', color: 'var(--gg-warning)' },
+  refactor: { label: '优化', color: 'var(--gg-info)' },
+  style: { label: '样式', color: 'var(--gg-accent)' },
+}
+</script>
+
+<template>
+  <div class="changelog-page">
+    <h1 class="page-title">更新日志</h1>
+
+    <div class="timeline">
+      <section v-for="log in logs" :key="log.version" class="version-block">
+        <div class="version-header">
+          <span class="version-tag">{{ log.version }}</span>
+          <span class="version-date">{{ log.date }}</span>
+        </div>
+        <h2 class="version-title">{{ log.title }}</h2>
+        <ul class="change-list">
+          <li v-for="(item, i) in log.items" :key="i" class="change-item">
+            <span class="change-type" :style="{ background: typeMap[item.type].color + '18', color: typeMap[item.type].color }">
+              {{ typeMap[item.type].label }}
+            </span>
+            <span class="change-text">{{ item.text }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.changelog-page {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 28px;
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  padding-left: 20px;
+  border-left: 3px solid var(--gg-border);
+}
+
+.version-block {
+  position: relative;
+  padding: 20px 24px;
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-lg);
+  transition: border-color 0.2s;
+}
+
+.version-block:hover {
+  border-color: var(--gg-primary);
+}
+
+.version-block::before {
+  content: '';
+  position: absolute;
+  left: -29px;
+  top: 28px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--gg-primary);
+  border: 3px solid var(--gg-bg);
+}
+
+.version-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.version-tag {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 20px;
+  background: var(--gg-gradient-green);
+  color: white;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.version-date {
+  font-size: 13px;
+  color: var(--gg-text-muted);
+}
+
+.version-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 16px;
+  color: var(--gg-text);
+}
+
+.change-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.change-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.change-type {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.change-text {
+  color: var(--gg-text-secondary);
+}
+</style>
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index 1d97c9d..ab244ce 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -10,7 +10,7 @@ import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
 import NotificationPanel from '@/components/common/NotificationPanel.vue'
 import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
 import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
-import { Monitor, HomeFilled, Grid, Plus, Search, Bell, AlarmClock, SwitchButton } from '@element-plus/icons-vue'
+import { Monitor, HomeFilled, Grid, Plus, Search, Bell, AlarmClock, SwitchButton, Document } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -68,6 +68,7 @@ const pageTitle = computed(() => {
   if (route.name === 'GamesLibrary') return '游戏库'
   if (route.name === 'Profile') return '个人中心'
   if (route.name === 'Settings') return '设置'
+  if (route.name === 'Changelog') return '更新日志'
   return '首页'
 })
 </script>
@@ -95,6 +96,10 @@ const pageTitle = computed(() => {
           <el-icon class="nav-icon"><Grid /></el-icon>
           <span>游戏库</span>
         </router-link>
+        <router-link to="/changelog" class="nav-item" active-class="nav-item--active">
+          <el-icon class="nav-icon"><Document /></el-icon>
+          <span>更新日志</span>
+        </router-link>
       </nav>
 
       <div class="sidebar-divider" />