From 8e5b1209e1d73907b2089ac895d8da6d5d7445c5 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Fri, 15 Nov 2024 16:12:20 +0800
Subject: [PATCH] feat: adapt input date-picker to the old theme style

---
 packages/theme-saas/src/picker/index.less | 10 ++++++---
 packages/theme/src/picker/index.less      | 26 +++++++++++++++--------
 packages/vue/src/picker/src/pc.vue        | 13 +++++-------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/theme-saas/src/picker/index.less b/packages/theme-saas/src/picker/index.less
index 2daeb7f356..37181ef06c 100644
--- a/packages/theme-saas/src/picker/index.less
+++ b/packages/theme-saas/src/picker/index.less
@@ -22,6 +22,7 @@
       @apply fill-color-icon-primary;
     }
   }
+
   .@{input-prefix-cls}__icon-container {
     align-items: center;
     display: flex;
@@ -58,6 +59,11 @@
   .@{input-prefix-cls}__icon {
     @apply cursor-pointer;
 
+    .baseClearicon {
+      @apply mr-2;
+      @apply !transform-none;
+    }
+
     &:not(.@{range-prefix-cls}__icon) {
       @apply flex;
     }
@@ -106,15 +112,13 @@
     @apply absolute;
     @apply ~'right-1.5';
     @apply text-base;
-    @apply w-4;
+    width: 25px;
     float: right;
     @apply leading-8;
     @apply mr-5;
     @apply flex;
     @apply justify-center;
     @apply items-center;
-    @apply h-5;
-    @apply mr-6;
   }
 }
 
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
index c077386c7f..77d6f8fd6d 100644
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@@ -111,19 +111,27 @@
     }
 
     .@{range-prefix-cls}__close-icon {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      fill: var(--tv-Picker-icon-color);
+      position: absolute;
+      right: 12px;
+      display: flex;
+      align-items: center;
+      height: 100%;
 
-      & + .@{range-prefix-cls}__icon {
-        display: none;
-      }
+      svg {
+        width: var(--tv-Picker-icon-size);
+        height: var(--tv-Picker-icon-size);
+        cursor: pointer;
+        fill: var(--tv-Picker-icon-color);
 
-      &:hover {
-        fill: var(--tv-Picker-icon-color-hover);
+        &:hover {
+          fill: var(--tv-Picker-icon-color-hover);
+        }
       }
     }
+
+    .@{range-prefix-cls}__close-icon:has(> svg) + .@{range-prefix-cls}__icon {
+      display: none;
+    }
   }
 }
 
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
index 274dc64ff1..03250733c7 100644
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@@ -118,16 +118,13 @@
         @focus="handleFocus"
         class="tiny-range-input"
       />
-      <i class="tiny-input__icon tiny-input__suffix">
+      <i @click="handleClickIcon" v-if="state.haveTrigger" class="tiny-input__icon tiny-range__close-icon">
         <transition name="tiny-transition-icon-scale-in">
-          <component
-            v-if="state.haveTrigger"
-            :is="state.showClose ? clearIcon : null"
-            @click="handleClickIcon"
-            class="tiny-range__close-icon"
-          />
+          <component :is="state.showClose ? clearIcon : null" />
         </transition>
-        <component v-if="!state.isDisplayOnly" :is="state.triggerClass" class="tiny-range__icon" />
+      </i>
+      <i v-if="!state.isDisplayOnly" class="tiny-input__icon tiny-range__icon tiny-input__suffix">
+        <component :is="state.triggerClass" />
       </i>
       <tiny-tooltip
         class="tiny-range-editor-display-only"