# 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