refactor: UI组件优化清理
- strategies/strategies.vue: 清理未使用的btn-secondary样式,优化按钮样式 - strategies/edit/edit.vue: 已替换u-input为原生input - 添加OPTIMIZATION.md优化计划文档 - 保留index.vue的骨架屏自定义样式(小程序兼容性更好)
This commit is contained in:
parent
838ce7fb1d
commit
ca1b6220dc
100
OPTIMIZATION.md
Normal file
100
OPTIMIZATION.md
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
# 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
|
||||||
@ -38,21 +38,19 @@
|
|||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">策略名称</text>
|
<text class="label">策略名称</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.name"
|
v-model="formData.name"
|
||||||
|
class="form-input"
|
||||||
placeholder="例如: 双均线趋势策略"
|
placeholder="例如: 双均线趋势策略"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">策略描述</text>
|
<text class="label">策略描述</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.description"
|
v-model="formData.description"
|
||||||
|
class="form-input"
|
||||||
placeholder="描述策略的用途和特点"
|
placeholder="描述策略的用途和特点"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -68,11 +66,10 @@
|
|||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">标签</text>
|
<text class="label">标签</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.tags"
|
v-model="formData.tags"
|
||||||
|
class="form-input"
|
||||||
placeholder="用逗号分隔,如:趋势,均线"
|
placeholder="用逗号分隔,如:趋势,均线"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -80,22 +77,20 @@
|
|||||||
<view class="flex-row gap-3">
|
<view class="flex-row gap-3">
|
||||||
<view class="form-item flex-1">
|
<view class="form-item flex-1">
|
||||||
<text class="label">短期周期</text>
|
<text class="label">短期周期</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.shortPeriod"
|
v-model="formData.shortPeriod"
|
||||||
type="number"
|
type="number"
|
||||||
|
class="form-input"
|
||||||
placeholder="20"
|
placeholder="20"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="form-item flex-1">
|
<view class="form-item flex-1">
|
||||||
<text class="label">长期周期</text>
|
<text class="label">长期周期</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.longPeriod"
|
v-model="formData.longPeriod"
|
||||||
type="number"
|
type="number"
|
||||||
|
class="form-input"
|
||||||
placeholder="60"
|
placeholder="60"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -116,22 +111,20 @@
|
|||||||
<template v-if="currentType === 'risk_parity'">
|
<template v-if="currentType === 'risk_parity'">
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">回看周期</text>
|
<text class="label">回看周期</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.lookbackPeriod"
|
v-model="formData.lookbackPeriod"
|
||||||
type="number"
|
type="number"
|
||||||
|
class="form-input"
|
||||||
placeholder="60"
|
placeholder="60"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">再平衡阈值</text>
|
<text class="label">再平衡阈值</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.rebalanceThreshold"
|
v-model="formData.rebalanceThreshold"
|
||||||
type="digit"
|
type="digit"
|
||||||
|
class="form-input"
|
||||||
placeholder="0.05"
|
placeholder="0.05"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -170,12 +163,11 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="asset-input">
|
<view class="asset-input">
|
||||||
<text class="asset-label">目标权重</text>
|
<text class="asset-label">目标权重</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="asset.targetWeight"
|
v-model="asset.targetWeight"
|
||||||
type="digit"
|
type="digit"
|
||||||
|
class="form-input-sm"
|
||||||
placeholder="0.6"
|
placeholder="0.6"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -195,22 +187,20 @@
|
|||||||
<template v-if="currentType === 'chandelier_exit'">
|
<template v-if="currentType === 'chandelier_exit'">
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">ATR 周期</text>
|
<text class="label">ATR 周期</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.period"
|
v-model="formData.period"
|
||||||
type="number"
|
type="number"
|
||||||
|
class="form-input"
|
||||||
placeholder="22"
|
placeholder="22"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">ATR 倍数</text>
|
<text class="label">ATR 倍数</text>
|
||||||
<u-input
|
<input
|
||||||
v-model="formData.multiplier"
|
v-model="formData.multiplier"
|
||||||
type="digit"
|
type="digit"
|
||||||
|
class="form-input"
|
||||||
placeholder="3.0"
|
placeholder="3.0"
|
||||||
:border="false"
|
|
||||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
@ -865,6 +855,31 @@ onMounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
background-color: #F9FAFB;
|
background-color: #F9FAFB;
|
||||||
|
border: 2rpx solid #E5E7EB;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1F2937;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
border: 2rpx solid #E5E7EB;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #1F2937;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input-sm {
|
||||||
|
width: 100%;
|
||||||
|
height: 72rpx;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
border: 2rpx solid #E5E7EB;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
|
|||||||
@ -211,13 +211,18 @@ const handleAction = (item) => {
|
|||||||
|
|
||||||
/* 按钮样式 */
|
/* 按钮样式 */
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-color: #064e3b; color: #fff; font-size: 24rpx; font-weight: 600;
|
background-color: #064e3b;
|
||||||
padding: 0 32rpx; height: 64rpx; line-height: 64rpx; border-radius: 999rpx; margin: 0;
|
color: #fff;
|
||||||
}
|
font-size: 24rpx;
|
||||||
.btn-secondary {
|
font-weight: 600;
|
||||||
background-color: #F3F4F6; color: #4B5563; font-size: 24rpx; font-weight: 600;
|
padding: 0 32rpx;
|
||||||
padding: 0 32rpx; height: 64rpx; line-height: 64rpx; border-radius: 999rpx; margin: 0;
|
height: 64rpx;
|
||||||
|
line-height: 64rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
.btn-primary::after { border: none; }
|
||||||
|
|
||||||
/* 工具类 */
|
/* 工具类 */
|
||||||
.flex-row { display: flex; flex-direction: row; }
|
.flex-row { display: flex; flex-direction: row; }
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user