归档

Web/src/components/Transaction/TransactionDetailSheet.vue

@@ -105,19 +105,26 @@
             <div
               v-if="showSuggestionTip"
               class="suggestion-tip"
-              @click="applySuggestion"
             >
-              <van-icon
-                name="bulb-o"
-                class="suggestion-icon"
-              />
-              <span class="suggestion-text">
-                建议: {{ props.transaction?.unconfirmedClassify }}
-                <span v-if="showSuggestedType">
-                  ({{ getTypeName(props.transaction?.unconfirmedType) }})
+              <div
+                class="suggestion-content"
+                @click="showClassifySelector = !showClassifySelector"
+              >
+                <van-icon
+                  name="bulb-o"
+                  class="suggestion-icon"
+                />
+                <span class="suggestion-text">
+                  建议: {{ props.transaction?.unconfirmedClassify }}
+                  <span v-if="showSuggestedType">
+                    ({{ getTypeName(props.transaction?.unconfirmedType) }})
+                  </span>
                 </span>
-              </span>
-              <div class="suggestion-apply">
+              </div>
+              <div
+                class="suggestion-apply"
+                @click.stop="applySuggestion"
+              >
                 应用
               </div>
             </div>
@@ -648,13 +655,20 @@ const handleDelete = async () => {
 .suggestion-tip {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
   background: var(--van-active-color);
   color: var(--van-primary-color);
   border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--van-primary-color);
+}
+
+.suggestion-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
   cursor: pointer;
   transition: opacity 0.2s;
-  border: 1px solid var(--van-primary-color);
 
   &:active {
     opacity: 0.8;
@@ -667,18 +681,22 @@ const handleDelete = async () => {
 }
 
 .suggestion-text {
-  flex: 1;
   font-size: 14px;
   font-weight: 500;
 }
 
 .suggestion-apply {
-  padding: 2px 10px;
+  padding: 10px 12px;
   background: var(--van-primary-color);
   color: #fff;
-  border-radius: 4px;
   font-size: 12px;
   font-weight: bold;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:active {
+    opacity: 0.8;
+  }
 }
 
 .classify-value {