From 3701a04231af02ec7f7ef73533f3a22e707380fb Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 26 Jun 2023 11:32:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Dialog=E7=BB=84=E4=BB=B6=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/src/Dialog.vue     | 43 ++++++++++++++++++------
 src/components/Icon/src/Icon.vue         |  4 +--
 src/components/TagsView/src/TagsView.vue |  8 +++--
 uno.config.ts                            | 13 +++++++
 4 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 14bfe8c..ceee323 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -50,7 +50,6 @@ watch(
 )
 
 const dialogStyle = computed(() => {
-  console.log(unref(dialogHeight))
   return {
     height: unref(dialogHeight)
   }
@@ -64,20 +63,32 @@ const dialogStyle = computed(() => {
     destroy-on-close
     lock-scroll
     draggable
+    top="0"
     :close-on-click-modal="false"
+    :show-close="false"
   >
-    <template #header>
-      <div class="flex justify-between">
+    <template #header="{ close }">
+      <div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
         <slot name="title">
           {{ title }}
         </slot>
-        <Icon
-          v-if="fullscreen"
-          class="mr-18px cursor-pointer is-hover mt-2px z-10"
-          :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
-          color="var(--el-color-info)"
-          @click="toggleFull"
-        />
+        <div
+          class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
+        >
+          <Icon
+            v-if="fullscreen"
+            class="cursor-pointer is-hover !h-54px mr-10px"
+            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
+            color="var(--el-color-info)"
+            @click="toggleFull"
+          />
+          <Icon
+            class="cursor-pointer is-hover !h-54px"
+            icon="ep:close"
+            color="var(--el-color-info)"
+            @click="close"
+          />
+        </div>
       </div>
     </template>
 
@@ -92,10 +103,19 @@ const dialogStyle = computed(() => {
 </template>
 
 <style lang="less">
+.@{elNamespace}-overlay-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .@{elNamespace}-dialog {
+  margin: 0 !important;
   &__header {
     margin-right: 0 !important;
     border-bottom: 1px solid var(--el-border-color);
+    padding: 0;
+    height: 54px;
   }
   &__body {
     padding: 0 !important;
@@ -103,6 +123,9 @@ const dialogStyle = computed(() => {
   &__footer {
     border-top: 1px solid var(--el-border-color);
   }
+  &__headerbtn {
+    top: 0;
+  }
 }
 
 .is-hover {
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
index 8c5dded..29e2fab 100644
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@@ -71,8 +71,6 @@ watch(
       <use :xlink:href="symbolId" />
     </svg>
 
-    <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
-      <span class="iconify" :data-icon="symbolId"></span>
-    </span>
+    <span v-else ref="elRef" class="iconify" :data-icon="symbolId" :style="getIconifyStyle"></span>
   </ElIcon>
 </template>
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
index b8383a6..cd22082 100644
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@@ -502,7 +502,9 @@ watch(
     }
 
     &:hover {
-      :deep(span) {
+      :deep(span),
+      :deep(i),
+      :deep(svg) {
         color: var(--el-color-black) !important;
       }
     }
@@ -555,7 +557,9 @@ watch(
   .@{prefix-cls} {
     &__tool {
       &:hover {
-        :deep(span) {
+        :deep(span),
+        :deep(i),
+        :deep(svg) {
           color: #fff !important;
         }
       }
diff --git a/uno.config.ts b/uno.config.ts
index 0645fe6..44161d9 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -96,6 +96,19 @@ ${selector}:after {
   background-color: var(--el-border-color);
   z-index: 3;
 }
+`
+      }
+    ],
+    [
+      /^is-hover$/,
+      ([], { rawSelector }) => {
+        const selector = e(rawSelector)
+        return `
+${selector}:hover {
+  ${selector} span,i,svg {
+    color: var(--el-color-primary) !important;
+  }
+}
 `
       }
     ]