a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,287 @@
+# 玩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打包发布。