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