# 玩Android Material Design 客户端

基于Uniapp框架开发的Material Design风格玩Android客户端应用。

## 🎨 设计理念

### Material Design 3 规范
- **颜色系统**: 使用Material Design 3颜色系统
  - 主色: `#6200EE` (紫色)
  - 次要色: `#03DAC6` (青色)
  - 表面色: `#FFFFFF` (白色)
  - 背景色: `#F5F5F5` (浅灰)
- **排版**: Roboto字体，规范的文字层级
- **阴影**: 使用Elevation阴影系统
- **动效**: 流畅的过渡动画和交互反馈

### Android应用标准
- 遵循Android应用设计规范
- 支持深色模式
- 响应式布局
- 触摸反馈和手势支持

## 📱 功能特性

### ✅ 已完成功能
1. **Material Design风格首页**
   - 状态栏和导航栏（紫色主题）
   - 搜索栏（Material Design样式）
   - Banner轮播（自动轮播+阴影效果）
   - 搜索热词（芯片式设计）
   - 文章列表（卡片式布局）
   - 置顶文章（特殊标识）
   - 下拉刷新（Material Design样式）
   - 上拉加载更多
   - 回到顶部按钮
   - 浮动操作按钮(FAB)

2. **完整的底部导航**
   - Material Design图标（轮廓/填充）
   - 5个Tab：首页、项目、公众号、体系、我的
   - 平滑的切换动画

3. **网络请求封装**
   - 统一的请求工具
   - 错误处理和加载状态
   - 拦截器支持

### ⏳ 待开发页面（Material Design风格占位）
1. **项目页面** - 开源项目浏览
2. **公众号页面** - 技术公众号订阅
3. **体系页面** - 技术知识体系
4. **我的页面** - 用户中心

## 🏗️ 项目结构

```
uniapp_android/
├── pages/                    # 页面文件
│   ├── index/               # 首页（Material Design完整实现）
│   │   └── index.vue        # 11.8KB，完整功能
│   ├── project/             # 项目页（Material Design占位）
│   ├── wxarticle/           # 公众号页（Material Design占位）
│   ├── tree/                # 体系页（Material Design占位）
│   └── mine/                # 我的页（Material Design占位）
├── components/              # 组件目录
├── utils/                   # 工具函数
│   └── request.js           # 网络请求封装
├── static/images/icons/     # Material Design图标
├── manifest.json           # 应用配置（Android优化）
├── pages.json              # 页面配置（Material Design风格）
├── App.vue                 # 应用入口（全局样式）
├── create_material_icons.py # 图标生成脚本
├── create_placeholder_pages.py # 占位页面生成脚本
└── README.md               # 本文件
```

## 🎯 技术实现

### 核心特性
1. **响应式设计**: 使用rpx单位，适配不同屏幕
2. **深色模式**: 支持系统深色模式切换
3. **性能优化**: 图片懒加载、请求节流
4. **错误处理**: 统一的错误提示和重试机制
5. **交互反馈**: 触摸反馈、加载状态、动画效果

### Material Design组件实现
- **卡片**: 阴影、圆角、悬停效果
- **按钮**: 填充按钮、轮廓按钮、浮动按钮
- **芯片**: 搜索热词芯片
- **进度条**: 线性进度指示器
- **底部导航**: 图标切换动画

## 🚀 快速开始

### 1. 使用HBuilder X
```bash
# 1. 下载HBuilder X
# 2. 导入本项目文件夹
# 3. 运行到浏览器或Android模拟器
# 4. 打包为Android APK
```

### 2. 运行测试
```bash
# 在HBuilder X中：
# 1. 右键项目 → 运行 → 运行到浏览器
# 2. 选择Chrome浏览器
# 3. 按F12切换到移动端模拟
```

### 3. 打包APK
```bash
# 在HBuilder X中：
# 1. 发行 → 原生App-云打包
# 2. 选择Android平台
# 3. 使用公共测试证书
# 4. 开始打包
```

## 🎨 设计细节

### 颜色系统
```css
/* Material Design 3 颜色 */
--md-primary: #6200EE;
--md-primary-variant: #3700B3;
--md-secondary: #03DAC6;
--md-surface: #FFFFFF;
--md-background: #F5F5F5;
--md-on-primary: #FFFFFF;
--md-on-surface: #000000;
```

### 文字层级
```css
/* 标题文字 */
.text-title { font-size: 20px; font-weight: 500; }

/* 副标题 */
.text-subtitle { font-size: 16px; font-weight: 400; }

/* 正文 */
.text-body { font-size: 14px; font-weight: 400; }

/* 说明文字 */
.text-caption { font-size: 12px; font-weight: 400; }
```

### 阴影等级
```css
/* Elevation 1 */
.elevation-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* Elevation 2 */
.elevation-2 { box-shadow: 0 4px 8px rgba(0,0,0,0.12); }

/* Elevation 3 */
.elevation-3 { box-shadow: 0 8px 16px rgba(0,0,0,0.14); }
```

## 📊 API集成

### 已集成API
1. `GET /banner/json` - 首页Banner
2. `GET /hotkey/json` - 搜索热词
3. `GET /article/list/{page}/json` - 文章列表

### 网络请求示例
```javascript
import { api } from '@/utils/request.js'

// 获取Banner
const banners = await api.getBanners()

// 获取文章列表
const articles = await api.getArticles(0, 20)
```

## 🔧 开发指南

### 添加新页面
1. 在 `pages.json` 中添加页面配置
2. 创建Vue页面文件
3. 遵循Material Design设计规范
4. 使用提供的工具类和组件

### 样式规范
1. 使用提供的CSS类（如 `.card`, `.elevation-1`）
2. 遵循颜色系统
3. 使用响应式单位（rpx）
4. 添加深色模式支持

### 组件开发
1. 保持组件单一职责
2. 提供适当的Props和Events
3. 添加文档注释
4. 测试不同状态

## 📱 页面预览

### 首页
- 紫色状态栏和导航栏
- 搜索栏（点击跳转搜索）
- Banner轮播（自动+手动）
- 搜索热词芯片
- 文章卡片（置顶/普通）
- 浮动操作按钮
- 回到顶部按钮

### 其他页面
- Material Design风格的占位设计
- 功能预览卡片
- 开发进度指示
- 操作按钮

## 🧪 测试验证

### 已测试功能
1. ✅ 底部导航切换
2. ✅ Banner轮播和点击
3. ✅ 搜索热词展示和点击
4. ✅ 文章列表加载和分页
5. ✅ 下拉刷新和上拉加载
6. ✅ 浮动操作按钮
7. ✅ 回到顶部功能
8. ✅ 网络请求和错误处理

### 测试方法
1. HBuilder X浏览器运行
2. Chrome移动端模拟
3. 网络请求调试
4. 交互功能测试

## 📦 打包发布

### Android配置
```json
{
  "minSdkVersion": 21,
  "targetSdkVersion": 33,
  "permissions": [
    "INTERNET",
    "ACCESS_NETWORK_STATE",
    "ACCESS_WIFI_STATE"
  ]
}
```

### 打包步骤
1. 配置 `manifest.json`
2. 选择Android平台
3. 配置证书（测试/正式）
4. 云打包生成APK

## 🔄 更新计划

### 近期计划
1. 实现搜索功能页面
2. 实现WebView文章详情
3. 实现登录和用户系统
4. 实现收藏功能

### 长期计划
1. 完善其他页面功能
2. 添加离线缓存
3. 实现推送通知
4. 添加分享功能

## 📄 许可证

本项目基于Uniapp框架开发，遵循MIT许可证。

## 📞 支持

如有问题或建议，请：
1. 查看项目文档
2. 检查常见问题
3. 提交Issue

---

**项目状态**: ✅ 第一阶段完成  
**设计风格**: 🎨 Material Design 3  
**平台支持**: 📱 Android (Uniapp多端)  
**打包就绪**: 🚀 可立即打包APK  

**提示**: 本项目已完全按照Android Material Design风格实现，可直接导入HBuilder X打包发布。