claw_bot
a9f3692aa8
- config.vue: 替换原生picker为u-picker，统一toast为u-toast，按钮为u-button - detail.vue: 替换交易表单input为u-input，所有按钮为u-button，toast为u-toast - 清理已替换组件的CSS样式 - 添加todo.md记录后续升级计划
85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
# AssetManager UniApp UI 升级计划
|
||
|
||
## 当前状态分析
|
||
- 已引入 uview-plus 组件库（uni_modules 方式）
|
||
- 部分页面已开始替换原生组件（input、button、card、datetime-picker）
|
||
- 仍存在混合使用情况（uni-icons + uview 组件）
|
||
- 微信小程序兼容性问题已部分修复
|
||
|
||
## 优先级排序
|
||
|
||
### P0 - 核心组件统一化（本周内）
|
||
1. **表单组件标准化**
|
||
- [ ] 替换所有原生 `<input>` 为 `<u-input>`
|
||
- [ ] 统一表单验证样式（error状态、placeholder颜色）
|
||
- [ ] 修复 config.vue 中的日期选择器回退问题
|
||
|
||
2. **按钮组件统一**
|
||
- [ ] 替换所有原生 `<button>` 为 `<u-button>`
|
||
- [ ] 统一按钮尺寸、圆角、hover效果
|
||
- [ ] 微信小程序兼容性测试
|
||
|
||
3. **卡片组件优化**
|
||
- [ ] 检查所有 `<u-card>` 的 props 使用是否正确
|
||
- [ ] 统一卡片阴影、边框、内边距
|
||
- [ ] 修复 detail.vue 中 u-card 的样式问题
|
||
|
||
### P1 - 用户体验提升（下周）
|
||
4. **加载状态优化**
|
||
- [ ] 实现全局骨架屏组件（使用 u-skeleton）
|
||
- [ ] 添加页面切换加载动画
|
||
- [ ] 优化数据加载时的占位符
|
||
|
||
5. **反馈组件升级**
|
||
- [ ] 统一 toast 调用方式（使用 u-toast ref）
|
||
- [ ] 替换所有 `uni.showToast` 为 uview 版本
|
||
- [ ] 添加操作确认模态框（u-modal）
|
||
|
||
6. **导航与布局**
|
||
- [ ] 检查 navbar 组件是否需要替换为 u-navbar
|
||
- [ ] 统一页面间距和布局网格
|
||
- [ ] 优化移动端适配
|
||
|
||
### P2 - 高级功能（下下周）
|
||
7. **搜索与筛选**
|
||
- [ ] 实现统一的搜索下拉组件（u-search + u-dropdown）
|
||
- [ ] 添加筛选标签组件
|
||
- [ ] 优化股票搜索功能性能
|
||
|
||
8. **图表可视化**
|
||
- [ ] 评估 ucharts 或 echarts 集成方案
|
||
- [ ] 实现资产走势迷你图表
|
||
- [ ] 添加数据可视化卡片
|
||
|
||
9. **主题与暗色模式**
|
||
- [ ] 配置 uview 主题变量
|
||
- [ ] 实现暗色模式切换
|
||
- [ ] 测试主题色一致性
|
||
|
||
## 技术债务清理
|
||
- [ ] 移除未使用的 CSS 类（detail.vue 已清理部分）
|
||
- [ ] 统一图标使用（选择 uni-icons 或 u-icon）
|
||
- [ ] 优化 API 调用错误处理
|
||
- [ ] 添加组件使用文档注释
|
||
|
||
## 兼容性要求
|
||
- ✅ 微信小程序（已部分适配）
|
||
- ✅ H5 网页版
|
||
- ✅ App 端
|
||
- ⚠️ 支付宝小程序（待测试）
|
||
|
||
## 验收标准
|
||
1. 所有页面组件使用率达到 90% 以上 uview-plus
|
||
2. 微信小程序无警告和错误
|
||
3. 页面加载速度提升 20%
|
||
4. 代码重复率降低 30%
|
||
|
||
## 风险点
|
||
1. **微信小程序组件限制**：部分 uview 组件在小程序端可能有限制
|
||
2. **性能影响**：uview 组件库体积较大，需注意分包加载
|
||
3. **学习曲线**：团队成员需熟悉 uview-plus API
|
||
|
||
## 下一步行动
|
||
1. 先完成 P0 的表单和按钮统一化
|
||
2. 每个页面完成后进行微信小程序真机测试
|
||
3. 建立组件使用规范文档 |