fix: 修复交易弹窗表单组件样式和功能

- 股票代码输入框：添加模糊搜索功能，买入时搜索API，卖出时显示持仓列表
- 数量输入框：添加边框样式
- 价格输入框：添加边框样式
- 交易时间：修复u-datetime-picker用法，添加完整边框
- 备注输入框：添加边框样式
- 添加handleStockInputClick方法处理卖出时持仓选择
- 添加搜索下拉列表样式

pages/detail/detail.vue

@@ -207,46 +207,45 @@
         <view class="form-content">
           <view class="form-item">
             <text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text>
-            <u-search
+            <view class="relative">
-              v-model="transactionForm.stockCode"
+              <u-input 
-              :placeholder="transactionType === 'sell' ? '请选择要卖出的持仓' : '请输入股票代码'"
+                v-model="transactionForm.stockCode"
-              :disabled="transactionType === 'sell'"
+                :placeholder="transactionType === 'sell' ? '点击选择要卖出的持仓' : '请输入股票代码搜索'"
-              :show-action="false"
+                :disabled="transactionType === 'sell'"
-              :border="false"
+                :border="false"
-              @input="transactionType === 'buy' ? searchStock($event) : () => {}"
+                :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
-              @click="transactionType === 'sell' ? (searchResults = (positions.value || []).map(pos => ({
+                @input="transactionType === 'buy' ? searchStock($event) : () => {}"
-                ticker: pos.stockCode,
+                @click="handleStockInputClick"
-                stockName: pos.stockName,
+              />
-                assetType: pos.assetType || 'Stock',
-                currency: pos.currency,
-                amount: pos.amount,
-                exchange: ''
-              }))) : () => {}"
-            >
               <!-- 搜索下拉列表 -->
-              <view class="search-dropdown" v-if="searchResults.length > 0" slot="suffix">
+              <view class="search-dropdown" v-if="searchResults.length > 0">
-                <u-dropdown>
+                <view 
-                  <u-dropdown-item
+                  class="dropdown-item" 
-                    v-for="(result, idx) in searchResults"
+                  v-for="(result, idx) in searchResults" 
-                    :key="idx"
+                  :key="idx"
-                    :title="`${result.ticker || result.stockCode} ${result.name || result.stockName}`"
+                  @click="selectStock(result)"
-                    @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>
+                  </view>
+                  <view class="item-right">
                     <text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
                     <text class="item-exchange">{{ result.exchange || '' }}</text>
-                  </u-dropdown-item>
+                  </view>
-                </u-dropdown>
+                </view>
               </view>
-            </u-search>
+            </view>
           </view>
           
           <view class="form-item">
-            <text class="form-label">数量{{ transactionType === 'sell' && maxSellAmount > 0 ? `(最多可卖 ${maxSellAmount} 份)` : '' }}</text>
+            <text class="form-label">数量{{ transactionType === 'sell' && maxSellAmount > 0 ? ` (最多可卖 ${maxSellAmount} 份)` : '' }}</text>
             <u-input 
               v-model="transactionForm.amount" 
               type="number" 
               :placeholder="transactionType === 'sell' && maxSellAmount > 0 ? `请输入数量，不超过 ${maxSellAmount}` : '请输入数量'"
               :border="false"
+              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
             />
           </view>
           
@@ -254,25 +253,22 @@
             <text class="form-label">价格</text>
             <u-input 
               v-model="transactionForm.price" 
-              type="number" 
+              type="digit" 
-              step="0.01"
               placeholder="请输入价格"
               :border="false"
+              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
             />
           </view>
           
-
-          
           <view class="form-item">
             <text class="form-label">交易时间</text>
             <u-datetime-picker
-              v-model="showDatePicker"
+              v-model="transactionForm.dateTimestamp"
               mode="date"
-              :value="transactionForm.transactionDate"
               @confirm="onDateChange"
             >
               <view class="form-select">
-                <text>{{ transactionForm.transactionDate }}</text>
+                <text>{{ transactionForm.transactionDate || '请选择日期' }}</text>
                 <u-icon name="arrow-down" size="14" color="#9CA3AF"></u-icon>
               </view>
             </u-datetime-picker>
@@ -282,8 +278,9 @@
             <text class="form-label">备注</text>
             <u-input 
               v-model="transactionForm.remark" 
-              placeholder="请输入备注"
+              placeholder="请输入备注（可选）"
               :border="false"
+              :customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
             />
           </view>
         </view>
@@ -363,12 +360,11 @@ const transactionForm = ref({
   price: '',
   currency: '', // 默认使用组合币种
   transactionDate: getCurrentDate(),
+  dateTimestamp: Date.now(),
   remark: ''
 });
 // 当前选中持仓的最大可卖数量
 const maxSellAmount = ref(0);
-// 日期选择器显示状态
-const showDatePicker = ref(false);
 
 // 货币选择相关
 const currencyList = ref([
@@ -384,14 +380,36 @@ const onCurrencyChange = (e) => {
 };
 
 const onDateChange = (e) => {
-  // u-datetime-picker返回格式为YYYY-MM-DD
+  // u-datetime-picker返回时间戳
-  transactionForm.value.transactionDate = e.value;
+  const date = new Date(e.value);
-  showDatePicker.value = false;
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  transactionForm.value.transactionDate = `${year}-${month}-${day}`;
+  transactionForm.value.dateTimestamp = e.value;
 };
 
 // 股票搜索相关
 const searchResults = ref([]);
 const searchTimer = ref(null);
+
+// 点击股票代码输入框（卖出时显示持仓列表）
+const handleStockInputClick = () => {
+  if (transactionType.value === 'sell') {
+    // 卖出时显示当前持仓列表
+    searchResults.value = positions.value.map(pos => ({
+      ticker: pos.stockCode,
+      stockCode: pos.stockCode,
+      stockName: pos.stockName,
+      name: pos.stockName,
+      assetType: pos.assetType || 'Stock',
+      currency: pos.currency,
+      amount: pos.amount,
+      exchange: ''
+    }));
+  }
+};
+
 const searchStock = async (keyword) => {
   // 防抖
   if (searchTimer.value) clearTimeout(searchTimer.value);
@@ -886,16 +904,16 @@ const deletePortfolio = async () => {
 
 .form-select {
   width: 100%;
-  max-width: 200rpx; /* 限制货币选择框最大宽度 */
+  height: 80rpx;
-  height: 72rpx;
+  background-color: #F9FAFB;
-  border: 1rpx solid #E5E7EB;
+  border: 2rpx solid #E5E7EB;
-  border-radius: 12rpx;
+  border-radius: 16rpx;
   padding: 0 20rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 24rpx;
+  font-size: 26rpx;
-  color: #111827;
+  color: #1F2937;
 }
 
 .modal-footer {
@@ -927,4 +945,77 @@ const deletePortfolio = async () => {
   background-color: #064E3B;
   color: #fff;
 }
+
+/* 搜索下拉列表 */
+.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: column;
+  gap: 4rpx;
+}
+
+.item-ticker {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.item-name {
+  font-size: 22rpx;
+  color: #6B7280;
+}
+
+.item-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.item-type {
+  font-size: 18rpx;
+  color: #064E3B;
+  background-color: #D1FAE5;
+  padding: 2rpx 8rpx;
+  border-radius: 4rpx;
+}
+
+.item-exchange {
+  font-size: 22rpx;
+  color: #9CA3AF;
+}
 </style>