# 鸿蒙应用展示平台

基于华为应用市场数据的鸿蒙应用展示平台，采用前后端分离架构，风格简约美观，参考 Apple 设计。

## 项目特点

- 🎨 简约美观的 Apple 风格设计
- 📱 完美适配移动端和 PC 端
- 🎯 磁贴效果展示，统一 8px 圆角
- 🚀 前后端分离架构
- ⚡ 基于 Vue 3 + TypeScript + FastAPI

## 功能模块

### 首页
- **今日上架**: 展示当天上架的应用
- **热门应用 Top 100**: 按下载量排序的热门应用
- **高分应用 Top 100**: 按评分排序的优质应用

### 应用页面
- **分类标签**: 展示各个分类的 tag 标签
- **分类浏览**: 点击标签查看该分类下的应用
- **搜索功能**: 顶部搜索栏搜索数据库中的所有应用
- **分页展示**: 支持分页浏览应用列表

### 我的页面
- **个人信息**: 展示登录信息（待开发）
- **隐私政策**: 隐私政策链接
- **Cookie 使用条款**: Cookie 相关说明
- **服务条款**: 服务条款链接

## 技术栈

### 后端
- Python 3.10+
- FastAPI - Web 框架
- SQLAlchemy - ORM
- MySQL 8.0+ - 数据库
- aiomysql - 异步 MySQL 驱动

### 前端
- Vue 3 - 渐进式框架
- TypeScript - 类型安全
- Vite - 构建工具
- Vue Router - 路由管理
- Pinia - 状态管理
- Axios - HTTP 客户端

## 快速开始

### 环境要求

- Python 3.10+
- Node.js 18+
- MySQL 8.0+

### 后端设置

```bash
cd backend

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 安装依赖
pip install -r requirements.txt

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，配置数据库连接

# 运行服务
python -m app.main
```

后端服务将在 http://localhost:8000 启动

### 前端设置

```bash
cd frontend

# 安装依赖
npm install

# 配置环境变量
cp .env.example .env

# 启动开发服务器
npm run dev
```

前端服务将在 http://localhost:5173 启动

### 数据库设置

参考 `华为应用市场爬虫系统开发文档.md` 中的数据库设计章节，创建相应的数据表。

## 项目结构

```
.
├── backend/                 # 后端项目
│   ├── app/
│   │   ├── api/            # API 路由
│   │   ├── models/         # 数据模型
│   │   ├── schemas/        # Pydantic 模型
│   │   ├── config.py       # 配置文件
│   │   ├── database.py     # 数据库连接
│   │   └── main.py         # 应用入口
│   ├── requirements.txt    # Python 依赖
│   └── .env.example        # 环境变量示例
│
├── frontend/               # 前端项目
│   ├── src/
│   │   ├── api/           # API 封装
│   │   ├── assets/        # 静态资源
│   │   ├── components/    # 组件
│   │   ├── router/        # 路由配置
│   │   ├── views/         # 页面
│   │   ├── App.vue        # 根组件
│   │   └── main.ts        # 应用入口
│   ├── package.json       # Node 依赖
│   ├── vite.config.ts     # Vite 配置
│   └── .env.example       # 环境变量示例
│
└── README.md              # 项目说明
```

## API 接口

### 应用相关

- `GET /api/apps/search?q={query}` - 搜索应用
- `GET /api/apps/categories` - 获取所有分类
- `GET /api/apps/category/{category}` - 按分类获取应用
- `GET /api/apps/today` - 获取今日上架应用
- `GET /api/apps/top-downloads` - 热门应用 Top 100
- `GET /api/apps/top-ratings` - 高分应用 Top 100
- `GET /api/apps/{app_id}` - 获取应用详情

## 设计规范

- **圆角**: 统一使用 8px 圆角
- **配色**: 参考 Apple 设计，以白色、灰色为主
- **字体**: 使用系统默认字体栈
- **阴影**: 使用柔和的阴影效果
- **过渡**: 使用流畅的过渡动画

## 开发计划

- [x] 基础架构搭建
- [x] 首页模块
- [x] 应用列表页
- [x] 应用详情页
- [x] 搜索功能
- [x] 分类浏览
- [ ] 用户登录
- [ ] 个人中心完善
- [ ] 应用收藏
- [ ] 评论功能

## 许可证

MIT License