From ca1b6220dc05047666df2f389bddac6605648a19 Mon Sep 17 00:00:00 2001
From: claw_bot <claw@jb18cm.plus>
Date: Fri, 13 Mar 2026 10:44:37 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20UI=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=B8=85=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- strategies/strategies.vue: 清理未使用的btn-secondary样式，优化按钮样式
- strategies/edit/edit.vue: 已替换u-input为原生input
- 添加OPTIMIZATION.md优化计划文档
- 保留index.vue的骨架屏自定义样式（小程序兼容性更好）
---
 OPTIMIZATION.md                 | 100 ++++++++++++++++++++++++++++++++
 pages/strategies/edit/edit.vue  |  75 ++++++++++++++----------
 pages/strategies/strategies.vue |  17 ++++--
 3 files changed, 156 insertions(+), 36 deletions(-)
 create mode 100644 OPTIMIZATION.md

diff --git a/OPTIMIZATION.md b/OPTIMIZATION.md
new file mode 100644
index 0000000..76b8968
--- /dev/null
+++ b/OPTIMIZATION.md
@@ -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
diff --git a/pages/strategies/edit/edit.vue b/pages/strategies/edit/edit.vue
index 13d66a3..f29ed58 100755
--- a/pages/strategies/edit/edit.vue
+++ b/pages/strategies/edit/edit.vue
@@ -38,21 +38,19 @@
         
         <view class="form-item">
           <text class="label">策略名称</text>
-          <u-input 
+          <input 
             v-model="formData.name" 
+            class="form-input"
             placeholder="例如: 双均线趋势策略"
-            :border="false"
-            :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
           />
         </view>
 
         <view class="form-item">
           <text class="label">策略描述</text>
-          <u-input 
+          <input 
             v-model="formData.description" 
+            class="form-input"
             placeholder="描述策略的用途和特点"
-            :border="false"
-            :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
           />
         </view>
 
@@ -68,11 +66,10 @@
 
         <view class="form-item">
           <text class="label">标签</text>
-          <u-input 
+          <input 
             v-model="formData.tags" 
+            class="form-input"
             placeholder="用逗号分隔，如：趋势,均线"
-            :border="false"
-            :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
           />
         </view>
 
@@ -80,22 +77,20 @@
           <view class="flex-row gap-3">
             <view class="form-item flex-1">
               <text class="label">短期周期</text>
-              <u-input 
+              <input 
                 v-model="formData.shortPeriod" 
                 type="number"
+                class="form-input"
                 placeholder="20"
-                :border="false"
-                :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
               />
             </view>
             <view class="form-item flex-1">
               <text class="label">长期周期</text>
-              <u-input 
+              <input 
                 v-model="formData.longPeriod" 
                 type="number"
+                class="form-input"
                 placeholder="60"
-                :border="false"
-                :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
               />
             </view>
           </view>
@@ -116,22 +111,20 @@
         <template v-if="currentType === 'risk_parity'">
           <view class="form-item">
             <text class="label">回看周期</text>
-            <u-input 
+            <input 
               v-model="formData.lookbackPeriod" 
               type="number"
+              class="form-input"
               placeholder="60"
-              :border="false"
-              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
             />
           </view>
           <view class="form-item">
             <text class="label">再平衡阈值</text>
-            <u-input 
+            <input 
               v-model="formData.rebalanceThreshold" 
               type="digit"
+              class="form-input"
               placeholder="0.05"
-              :border="false"
-              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
             />
           </view>
           
@@ -170,12 +163,11 @@
                   </view>
                   <view class="asset-input">
                     <text class="asset-label">目标权重</text>
-                    <u-input 
+                    <input 
                       v-model="asset.targetWeight" 
                       type="digit"
+                      class="form-input-sm"
                       placeholder="0.6"
-                      :border="false"
-                      :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
                     />
                   </view>
                 </view>
@@ -195,22 +187,20 @@
         <template v-if="currentType === 'chandelier_exit'">
           <view class="form-item">
             <text class="label">ATR 周期</text>
-            <u-input 
+            <input 
               v-model="formData.period" 
               type="number"
+              class="form-input"
               placeholder="22"
-              :border="false"
-              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
             />
           </view>
           <view class="form-item">
             <text class="label">ATR 倍数</text>
-            <u-input 
+            <input 
               v-model="formData.multiplier" 
               type="digit"
+              class="form-input"
               placeholder="3.0"
-              :border="false"
-              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
             />
           </view>
           <view class="form-item">
@@ -865,6 +855,31 @@ onMounted(() => {
   width: 100%;
   height: 72rpx;
   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;
   padding: 0 20rpx;
   font-size: 26rpx;
diff --git a/pages/strategies/strategies.vue b/pages/strategies/strategies.vue
index 6bc633e..091f765 100755
--- a/pages/strategies/strategies.vue
+++ b/pages/strategies/strategies.vue
@@ -211,13 +211,18 @@ const handleAction = (item) => {
 
 /* 按钮样式 */
 .btn-primary {
-  background-color: #064e3b; color: #fff; font-size: 24rpx; font-weight: 600;
-  padding: 0 32rpx; height: 64rpx; line-height: 64rpx; border-radius: 999rpx; margin: 0;
-}
-.btn-secondary {
-  background-color: #F3F4F6; color: #4B5563; font-size: 24rpx; font-weight: 600;
-  padding: 0 32rpx; height: 64rpx; line-height: 64rpx; border-radius: 999rpx; margin: 0;
+  background-color: #064e3b;
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: 600;
+  padding: 0 32rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  border-radius: 999rpx;
+  margin: 0;
+  border: none;
 }
+.btn-primary::after { border: none; }
 
 /* 工具类 */
 .flex-row { display: flex; flex-direction: row; }