From 243f28e7e71b5e849382e87d0a99c00722164597 Mon Sep 17 00:00:00 2001
From: UGREEN USER <congsh@debian.dedomain>
Date: Wed, 28 Jan 2026 14:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=E5=92=8C=E9=A1=B9=E7=9B=AE=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              | 171 +++++++++++++++++++++++++
 src/components/layout/MobileLayout.vue | 111 ++++++++++++++++
 2 files changed, 282 insertions(+)
 create mode 100644 README.md
 create mode 100644 src/components/layout/MobileLayout.vue

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..812de73
--- /dev/null
+++ b/README.md
@@ -0,0 +1,171 @@
+# GameGroup 前端项目
+
+游戏社群管理平台前端应用,基于 Vue 3 + TypeScript + Vite + Element Plus 构建。
+
+## 技术栈
+
+- **框架**: Vue 3.4+
+- **语言**: TypeScript 5.3+
+- **构建工具**: Vite 5.0+
+- **UI 框架**: Element Plus 2.5+
+- **状态管理**: Pinia 2.1+
+- **路由**: Vue Router 4.2+
+- **HTTP 客户端**: Axios 1.6+
+- **CSS 框架**: Tailwind CSS 3.4+
+- **CSS 预处理**: Sass 1.69+
+
+## 项目结构
+
+```
+GameGroupFE/
+├── doc/                     # 文档目录
+│   └── 开发步骤文档.md      # 开发步骤文档
+├── public/                  # 静态资源
+├── src/
+│   ├── api/                 # API 接口
+│   │   ├── auth.ts         # 认证接口
+│   │   ├── user.ts         # 用户接口
+│   │   ├── group.ts        # 小组接口
+│   │   ├── game.ts         # 游戏接口
+│   │   └── appointment.ts  # 预约接口
+│   ├── assets/             # 资源文件
+│   │   ├── images/        # 图片
+│   │   ├── icons/         # 图标
+│   │   └── styles/        # 样式
+│   ├── components/         # 组件
+│   │   ├── common/        # 通用组件
+│   │   │   ├── Button/
+│   │   │   ├── Input/
+│   │   │   ├── Modal/
+│   │   │   └── Card/
+│   │   ├── business/      # 业务组件
+│   │   │   ├── UserCard/
+│   │   │   ├── GroupCard/
+│   │   │   ├── GameCard/
+│   │   │   └── AppointmentCard/
+│   │   └── layout/        # 布局组件
+│   │       ├── MainLayout.vue
+│   │       ├── AppHeader.vue
+│   │       ├── AppSidebar.vue
+│   │       └── MobileLayout.vue
+│   ├── composables/       # 组合式函数
+│   ├── constants/         # 常量
+│   │   ├── enums.ts      # 枚举
+│   │   └── config.ts     # 配置
+│   ├── directives/        # 自定义指令
+│   ├── router/           # 路由配置
+│   │   └── index.ts
+│   ├── stores/           # 状态管理
+│   │   ├── auth.ts      # 认证状态
+│   │   └── app.ts       # 应用状态
+│   ├── types/            # 类型定义
+│   │   ├── api.ts
+│   │   ├── user.ts
+│   │   ├── group.ts
+│   │   ├── game.ts
+│   │   └── appointment.ts
+│   ├── utils/            # 工具函数
+│   │   ├── request.ts   # HTTP 请求
+│   │   ├── storage.ts   # 本地存储
+│   │   ├── format.ts    # 格式化
+│   │   └── validate.ts  # 验证
+│   ├── views/           # 页面组件
+│   │   ├── auth/       # 认证页面
+│   │   ├── home/       # 首页
+│   │   ├── user/       # 用户页面
+│   │   ├── group/      # 小组页面
+│   │   ├── game/       # 游戏页面
+│   │   ├── appointment/ # 预约页面
+│   │   ├── points/     # 积分页面
+│   │   └── honor/      # 荣誉页面
+│   ├── App.vue         # 根组件
+│   └── main.ts         # 入口文件
+├── .gitignore
+├── index.html
+├── package.json
+├── postcss.config.js
+├── tailwind.config.js
+├── tsconfig.json
+└── vite.config.ts
+```
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发模式
+
+```bash
+npm run dev
+```
+
+访问 http://localhost:5173
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+### 预览构建结果
+
+```bash
+npm run preview
+```
+
+## 主要功能
+
+- ✅ 用户认证(登录/注册)
+- ✅ 用户个人中心
+- ✅ 小组管理
+- ✅ 游戏库
+- ✅ 预约管理
+- ✅ 积分排行
+- ✅ 荣誉墙
+- ✅ 响应式设计
+- ✅ 移动端适配
+
+## 开发规范
+
+### 命名规范
+
+- 组件文件: PascalCase (UserCard.vue)
+- 普通文件: kebab-case (user-profile.ts)
+- 变量/函数: camelCase (getUserInfo)
+- 常量: UPPER_SNAKE_CASE (API_BASE_URL)
+- 类型/接口: PascalCase (UserProfile)
+
+### Git 提交规范
+
+```bash
+feat: 新功能
+fix: 修复bug
+docs: 文档更新
+style: 代码格式调整
+refactor: 重构
+test: 测试相关
+chore: 构建/工具相关
+```
+
+## 环境变量
+
+创建 `.env.local` 文件配置环境变量:
+
+```bash
+VITE_API_BASE_URL=/api
+```
+
+## 浏览器支持
+
+- Chrome >= 87
+- Firefox >= 78
+- Safari >= 14
+- Edge >= 88
+
+## License
+
+MIT
diff --git a/src/components/layout/MobileLayout.vue b/src/components/layout/MobileLayout.vue
new file mode 100644
index 0000000..24a5e14
--- /dev/null
+++ b/src/components/layout/MobileLayout.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="mobile-layout">
+    <!-- 顶部栏 -->
+    <div class="mobile-header">
+      <el-button icon="Menu" @click="sidebarVisible = true" />
+      <h1 class="logo">GameGroup</h1>
+      <div class="header-actions">
+        <el-badge :value="unreadCount">
+          <el-button circle icon="Bell" />
+        </el-badge>
+        <el-avatar :src="userInfo?.avatar" size="small" />
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="mobile-content">
+      <RouterView />
+    </div>
+
+    <!-- 底部Tab导航 -->
+    <div class="mobile-tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.path"
+        :class="['tab-item', { active: isActive(tab.path) }]"
+        @click="navigate(tab.path)"
+      >
+        <el-icon>
+          <component :is="tab.icon" />
+        </el-icon>
+        <span>{{ tab.label }}</span>
+      </div>
+    </div>
+
+    <!-- 侧边栏抽屉 -->
+    <el-drawer v-model="sidebarVisible" direction="ltr" size="280px">
+      <AppSidebar />
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import AppSidebar from './AppSidebar.vue'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+
+const sidebarVisible = ref(false)
+const unreadCount = ref(0)
+
+const userInfo = computed(() => authStore.userInfo)
+
+const tabs = [
+  { path: '/', icon: 'HomeFilled', label: '首页' },
+  { path: '/groups', icon: 'UserFilled', label: '小组' },
+  { path: '/games', icon: 'Grid', label: '游戏' },
+  { path: '/appointments', icon: 'Calendar', label: '预约' }
+]
+
+const isActive = (path: string) => {
+  return route.path.startsWith(path)
+}
+
+const navigate = (path: string) => {
+  router.push(path)
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-layout {
+  @apply flex flex-col h-screen bg-gray-50;
+}
+
+.mobile-header {
+  @apply flex items-center justify-between px-4 py-3 bg-white shadow-sm sticky top-0 z-50;
+}
+
+.logo {
+  @apply text-lg font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent;
+}
+
+.header-actions {
+  @apply flex items-center gap-3;
+}
+
+.mobile-content {
+  @apply flex-1 overflow-y-auto pb-20;
+}
+
+.mobile-tabs {
+  @apply flex justify-around items-center py-2 bg-white border-t fixed bottom-0 left-0 right-0 z-50;
+}
+
+.tab-item {
+  @apply flex flex-col items-center gap-1 py-2 px-4 text-gray-400 transition-colors;
+
+  &.active {
+    @apply text-primary-500;
+  }
+}
+
+@media (min-width: 768px) {
+  .mobile-layout {
+    @apply hidden;
+  }
+}
+</style>