AssetManager.UniApp/OPTIMIZATION.md
claw_bot ca1b6220dc refactor: UI组件优化清理
- strategies/strategies.vue: 清理未使用的btn-secondary样式,优化按钮样式
- strategies/edit/edit.vue: 已替换u-input为原生input
- 添加OPTIMIZATION.md优化计划文档
- 保留index.vue的骨架屏自定义样式(小程序兼容性更好)
2026-03-13 10:44:37 +00:00

2.5 KiB
Raw Permalink Blame History

AssetManager UniApp UI 优化计划

目标

使用 uview-plus 组件替换自定义代码,减少冗余 CSS保证微信小程序兼容性。

页面分析

1. index.vue (654行428行CSS)

当前状态:

  • 骨架屏:完全自定义实现
  • 资产卡片:自定义样式
  • 持仓卡片:自定义样式
  • 未使用任何 uview 组件

优化方案:

  • 骨架屏 → u-skeleton
  • 卡片样式 → 使用 uview 工具类或简化CSS
  • 移除未使用的 CSS 工具类
  • 空状态 → u-empty

2. detail.vue (1039行330行CSS)

当前状态:

  • 3个原生 input交易表单
  • 12个 uview 组件u-toast, u-icon, u-button
  • 大量自定义卡片样式

优化方案:

  • 保留原生 input小程序兼容性
  • 搜索下拉 → 考虑 u-search
  • 清理未使用的 CSS
  • 模态框样式简化

3. config.vue (733行325行CSS)

当前状态:

  • 7个 uview 组件
  • 原生 picker
  • 大量表单样式

优化方案:

  • 保留原生 picker小程序兼容性
  • 表单布局简化
  • 清理冗余 CSS

4. strategies/edit/edit.vue (997行)

当前状态:

  • 多个 u-input 需要替换为原生 input
  • 自定义表单样式

优化方案:

  • 替换 u-input 为原生 input
  • 简化表单样式
  • 清理冗余代码

5. strategies/strategies.vue (230行117行CSS)

当前状态:

  • 1个原生 button
  • 自定义卡片样式

优化方案:

  • button → u-button 或保留原生
  • 卡片样式简化

6. me.vue (180行47行CSS)

当前状态:

  • 最简洁,无需大改

优化方案:

  • 检查是否有优化空间

uview-plus 组件使用策略

推荐使用(小程序兼容性好)

  • u-button按钮
  • u-icon图标
  • u-toast轻提示
  • u-empty空状态
  • u-divider分割线
  • u-loading加载

谨慎使用(小程序有兼容性问题)

  • u-input表单输入改用原生 input
  • u-picker选择器改用原生 picker
  • u-datetime-picker日期选择改用原生 picker

不推荐使用

  • u-skeleton骨架屏在小程序中表现不佳
  • u-card可用 view + 自定义样式替代

执行顺序

  1. detail.vue - 已完成基础优化
  2. config.vue - 已完成基础优化
  3. strategies/edit/edit.vue - 替换 u-input
  4. strategies/strategies.vue - 替换 button
  5. index.vue - 清理 CSS
  6. me.vue - 检查优化

进度跟踪

  • 2026-03-13: 完成条件编译移除修复日期选择器bug