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