From 772ff2c3ad208d9fd0361458846b81823be533b3 Mon Sep 17 00:00:00 2001
From: claw_bot <claw@jb18cm.plus>
Date: Thu, 12 Mar 2026 12:34:52 +0000
Subject: [PATCH] =?UTF-8?q?feat(P2):=20=E6=9B=BF=E6=8D=A2=E8=82=A1?=
 =?UTF-8?q?=E7=A5=A8=E6=90=9C=E7=B4=A2=E4=B8=8B=E6=8B=89=E4=B8=BAu-search+?=
 =?UTF-8?q?u-dropdown=EF=BC=8C=E7=A7=BB=E9=99=A4=E6=89=8B=E5=86=99?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/detail/detail.vue | 100 ++++++++--------------------------------
 1 file changed, 20 insertions(+), 80 deletions(-)

diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
index c77fafd..49daac1 100644
--- a/pages/detail/detail.vue
+++ b/pages/detail/detail.vue
@@ -175,14 +175,15 @@
         </view>
         
         <view class="form-content">
-          <view class="form-item relative">
+          <view class="form-item">
             <text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text>
-            <u-input 
-              v-model="transactionForm.stockCode" 
+            <u-search
+              v-model="transactionForm.stockCode"
               :placeholder="transactionType === 'sell' ? '请选择要卖出的持仓' : '请输入股票代码'"
               :disabled="transactionType === 'sell'"
+              :show-action="false"
               :border="false"
-              @input="transactionType === 'buy' ? searchStock($event.detail.value) : () => {}"
+              @input="transactionType === 'buy' ? searchStock($event) : () => {}"
               @click="transactionType === 'sell' ? (searchResults = (positions.value || []).map(pos => ({
                 ticker: pos.stockCode,
                 stockName: pos.stockName,
@@ -191,23 +192,22 @@
                 amount: pos.amount,
                 exchange: ''
               }))) : () => {}"
-            />
-            <!-- 搜索下拉列表/持仓列表 -->
-            <view class="search-dropdown" v-if="searchResults.length > 0">
-              <view 
-                class="dropdown-item" 
-                v-for="(result, idx) in searchResults" 
-                :key="idx"
-                @click="selectStock(result)"
-              >
-                <view class="item-left">
-                  <text class="item-ticker">{{ result.ticker || result.stockCode }}</text>
-                  <text class="item-name">{{ result.name || result.stockName }}</text>
-                  <text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
-                </view>
-                <text class="item-exchange">{{ result.exchange || '' }}</text>
+            >
+              <!-- 搜索下拉列表 -->
+              <view class="search-dropdown" v-if="searchResults.length > 0" slot="suffix">
+                <u-dropdown>
+                  <u-dropdown-item
+                    v-for="(result, idx) in searchResults"
+                    :key="idx"
+                    :title="`${result.ticker || result.stockCode} ${result.name || result.stockName}`"
+                    @click="selectStock(result)"
+                  >
+                    <text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
+                    <text class="item-exchange">{{ result.exchange || '' }}</text>
+                  </u-dropdown-item>
+                </u-dropdown>
               </view>
-            </view>
+            </u-search>
           </view>
           
           <view class="form-item">
@@ -844,67 +844,7 @@ const deletePortfolio = async () => {
   color: #9CA3AF;
 }
 
-/* 搜索下拉列表 */
-.relative {
-  position: relative;
-}
 
-.search-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: #FFFFFF;
-  border: 1rpx solid #E5E7EB;
-  border-radius: 12rpx;
-  margin-top: 4rpx;
-  max-height: 300rpx;
-  overflow-y: auto;
-  z-index: 100;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
-}
-
-.dropdown-item {
-  padding: 16rpx 20rpx;
-  border-bottom: 1rpx solid #F3F4F6;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.dropdown-item:active {
-  background-color: #F3F4F6;
-}
-
-.item-left {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.item-ticker {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #1F2937;
-}
-
-.item-type {
-  font-size: 18rpx;
-  color: #064E3B;
-  background-color: #D1FAE5;
-  padding: 2rpx 8rpx;
-  border-radius: 4rpx;
-}
-
-.item-exchange {
-  font-size: 22rpx;
-  color: #9CA3AF;
-}
 
 .form-select {
   width: 100%;