release: update 3.9.2

src/layout/components/panel/index.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
 import Close from "@iconify-icons/ep/close";
 
-const show = ref<Boolean>(false);
 const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "mr-[20px]",
+    "outline-none",
+    "width-[20px]",
+    "height-[20px]",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
 onClickOutside(target, (event: any) => {
   if (event.clientX > target.value.offsetLeft) return;
   show.value = false;
@@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
       <div class="right-panel-items">
         <div class="project-configuration">
           <h4 class="dark:text-white">项目配置</h4>
-          <span title="关闭配置">
+          <span title="关闭配置" :class="iconClass">
             <IconifyIconOffline
               class="dark:text-white"
+              width="20px"
+              height="20px"
               :icon="Close"
               @click="show = !show"
             />
@@ -69,7 +87,6 @@ emitter.on("openPanel", () => {
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  // background: #fff;
   z-index: 40000;
 }
 
@@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
   align-items: center;
   top: 15px;
   margin-left: 10px;
-
-  svg {
-    font-size: 20px;
-    margin-right: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: var(--el-color-primary);
-    }
-  }
 }
 
 :deep(.el-divider--horizontal) {

src/layout/components/sidebar/leftCollapse.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
 interface Props {
   isActive: boolean;
@@ -15,6 +14,22 @@ const props = withDefaults(defineProps<Props>(), {
 const visible = ref(false);
 const { tooltipEffect } = useNav();
 
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "text-primary",
+    "cursor-pointer",
+    "duration-[360ms]",
+    "hover:text-primary",
+    "dark:hover:!text-white"
+  ];
+});
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -33,8 +48,9 @@ const toggleClick = () => {
       :content="props.isActive ? '点击折叠' : '点击展开'"
     >
       <IconifyIconOffline
-        :icon="props.isActive ? MenuFold : MenuUnfold"
-        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
+        :icon="MenuFold"
+        :class="iconClass"
+        :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
         @mouseenter="visible = true"
         @mouseleave="visible = false"

src/style/dark.scss

@@ -156,6 +156,19 @@ html.dark {
     background: transparent;
   }
 
+  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+  .el-icon {
+    &.el-dialog__close,
+    &.el-drawer__close,
+    &.el-message-box__close,
+    &.el-notification__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85) !important;
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
+
   /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
   .pure-message {
     background-image: initial !important;

src/style/element-plus.scss

@@ -69,6 +69,33 @@
   }
 }
 
+/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+.el-dialog__headerbtn,
+.el-message-box__headerbtn {
+  &:hover {
+    .el-dialog__close {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+.el-icon {
+  &.el-dialog__close,
+  &.el-drawer__close,
+  &.el-message-box__close,
+  &.el-notification__closeBtn {
+    width: 24px;
+    height: 24px;
+    outline: none;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88) !important;
+      background-color: rgba(0, 0, 0, 0.06);
+      text-decoration: none;
+    }
+  }
+}
+
 /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
 .pure-message {
   border-width: 0 !important;