From ab94d4ab06722f76d9b3c53d0d936eb021bc3173 Mon Sep 17 00:00:00 2001
From: sallerli1 <weskerli@163.com>
Date: Wed, 24 Apr 2024 14:31:07 +0800
Subject: [PATCH] fix(pro:tag-select): modify tag edit panel style 1. add
 divider under delete button 2. selected color item hover color doesn't change
 3. add hover and active bg color to delete button

---
 .../src/content/TagDataEditPanel.tsx          |  3 +++
 packages/pro/tag-select/style/index.less      | 22 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
index 59aa8a78a..7b00fbfeb 100644
--- a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
+++ b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
@@ -111,6 +111,9 @@ export default defineComponent({
             <IxIcon class={`${prefixCls}-delete-icon`} name="delete" />
             <span class={`${prefixCls}-delete-label`}>{locale.remove}</span>
           </div>
+          <div class={`${prefixCls}-divider`}>
+            <div class={`${prefixCls}-divider-line`}></div>
+          </div>
           <div class={`${prefixCls}-colors`}>
             {mergedTagSelectColors.value.map(color => renderColorItem(`${prefixCls}-colors`, color))}
           </div>
diff --git a/packages/pro/tag-select/style/index.less b/packages/pro/tag-select/style/index.less
index ae3879fd5..9497b5626 100644
--- a/packages/pro/tag-select/style/index.less
+++ b/packages/pro/tag-select/style/index.less
@@ -98,6 +98,24 @@
         color: var(--ix-color-icon);
         margin-right: var(--ix-margin-size-sm);
       }
+
+      &:hover {
+        background-color: var(--ix-color-container-bg-hover);
+      }
+      &:active,
+      &:hover:active {
+        background-color: var(--ix-color-container-bg-active);
+      }
+    }
+    &-divider {
+      width: 100%;
+      margin: var(--ix-margin-size-xs) 0;
+      padding: 0 var(--ix-padding-size-sm);
+      &-line {
+        width: calc(100%);
+        height: var(--ix-line-width);
+        background-color: var(--ix-color-separator);
+      }
     }
     &-colors {
       display: flex;
@@ -114,8 +132,8 @@
         padding: 0 var(--ix-padding-size-md);
         display: flex;
         align-items: center;
-        &:hover,
-        &-selected:hover {
+        cursor: pointer;
+        &:not(&-selected):hover {
           background-color: var(--ix-color-container-bg-hover);
         }
         &-selected {