feat: 完成移动端适配和项目文档
This commit is contained in:
UGREEN USER
171
README.md
Normal file
171
README.md
Normal file
@@ -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
|
||||||
111
src/components/layout/MobileLayout.vue
Normal file
111
src/components/layout/MobileLayout.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user