style: 调整Icon悬停样式

src/components/Dialog/src/Dialog.vue

@@ -80,11 +80,13 @@ const dialogStyle = computed(() => {
             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)"
+            hover-color="var(--el-color-primary)"
             @click="toggleFull"
           />
           <Icon
             class="cursor-pointer is-hover !h-54px"
             icon="ep:close"
+            hover-color="var(--el-color-primary)"
             color="var(--el-color-info)"
             @click="close"
           />
@@ -127,14 +129,4 @@ const dialogStyle = computed(() => {
     top: 0;
   }
 }
-
-.is-hover {
-  &:hover {
-    span,
-    i,
-    svg {
-      color: var(--el-color-primary) !important;
-    }
-  }
-}
 </style>

src/components/Icon/src/Icon.vue

@@ -15,7 +15,8 @@ const props = defineProps({
   // icon color
   color: propTypes.string,
   // icon size
-  size: propTypes.number.def(16)
+  size: propTypes.number.def(16),
+  hoverColor: propTypes.string
 })
 
 const elRef = ref<ElRef>(null)
@@ -74,3 +75,15 @@ watch(
     <span v-else ref="elRef" class="iconify" :data-icon="symbolId" :style="getIconifyStyle"></span>
   </ElIcon>
 </template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-icon';
+
+.@{prefix-cls} {
+  &:hover {
+    svg {
+      color: v-bind(hoverColor) !important;
+    }
+  }
+}
+</style>

src/components/Icon/src/types/index.ts

@@ -2,4 +2,5 @@ export interface IconTypes {
   size?: number
   color?: string
   icon: string
+  hoverColor?: string
 }

src/components/Table/src/Table.vue

@@ -7,6 +7,7 @@ import type { TableProps, TableColumn, Pagination, TableSetProps } from './types
 import { set } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
+import { Icon } from '@/components/Icon'
 
 export default defineComponent({
   name: 'Table',
@@ -400,25 +401,36 @@ export default defineComponent({
       })
     }
 
-    return () => (
-      <div v-loading={unref(getProps).loading}>
-        <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
-          {{
-            default: () => renderTableColumn(),
-            empty: () => getSlot(slots, 'empty') || unref(getProps).emptyText,
-            append: () => getSlot(slots, 'append')
-          }}
-        </ElTable>
-        {unref(getProps).pagination ? (
-          <ElPagination
-            v-model:pageSize={pageSizeRef.value}
-            v-model:currentPage={currentPageRef.value}
-            class="mt-10px"
-            {...unref(pagination)}
-          ></ElPagination>
-        ) : undefined}
-      </div>
-    )
+    return () => {
+      const tableSlots = {}
+      if (getSlot(slots, 'empty')) {
+        tableSlots['empty'] = (...args: any[]) => getSlot(slots, 'empty', args)
+      }
+      if (getSlot(slots, 'append')) {
+        tableSlots['append'] = (...args: any[]) => getSlot(slots, 'append', args)
+      }
+      return (
+        <div v-loading={unref(getProps).loading}>
+          <div>
+            <Icon icon="ant-design:sync-outlined" class="cursor-pointer" />
+          </div>
+          <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
+            {{
+              default: () => renderTableColumn(),
+              ...tableSlots
+            }}
+          </ElTable>
+          {unref(getProps).pagination ? (
+            <ElPagination
+              v-model:pageSize={pageSizeRef.value}
+              v-model:currentPage={currentPageRef.value}
+              class="mt-10px"
+              {...unref(pagination)}
+            ></ElPagination>
+          ) : undefined}
+        </div>
+      )
+    }
   }
 })
 </script>

src/components/TagsView/src/TagsView.vue

@@ -35,6 +35,8 @@ const appStore = useAppStore()
 
 const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
 
+const isDark = computed(() => appStore.getIsDark)
+
 // 初始化tag
 const initTags = () => {
   affixTagArr.value = filterAffixTags(unref(routers))
@@ -270,7 +272,8 @@ watch(
     >
       <Icon
         icon="ep:d-arrow-left"
-        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
     </span>
     <div class="overflow-hidden flex-1">
@@ -368,6 +371,7 @@ watch(
                   <Icon
                     :class="`${prefixCls}__item--close`"
                     color="#333"
+                    hover-color="var(--el-color-white)"
                     icon="ant-design:close-outlined"
                     :size="12"
                     @click.prevent.stop="closeSelectedTag(item)"
@@ -386,7 +390,8 @@ watch(
     >
       <Icon
         icon="ep:d-arrow-right"
-        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
     </span>
     <span
@@ -396,7 +401,8 @@ watch(
     >
       <Icon
         icon="ant-design:reload-outlined"
-        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
     </span>
     <ContextMenu
@@ -459,7 +465,8 @@ watch(
       >
         <Icon
           icon="ant-design:setting-outlined"
-          :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+          color="var(--el-text-color-placeholder)"
+          :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
         />
       </span>
     </ContextMenu>
@@ -476,7 +483,7 @@ watch(
 
   &__tool {
     position: relative;
-    &:after {
+    &:before {
       position: absolute;
       top: 1px;
       left: 0;
@@ -487,27 +494,17 @@ watch(
     }
 
     &--first {
-      &:after {
-        display: none;
-      }
       &:before {
         position: absolute;
         top: 1px;
         left: 0;
         width: 100%;
         height: calc(~'100% - 1px');
+        border-left: none;
         border-right: 1px solid var(--el-border-color);
         content: '';
       }
     }
-
-    &:hover {
-      :deep(span),
-      :deep(i),
-      :deep(svg) {
-        color: var(--el-color-black) !important;
-      }
-    }
   }
 
   &__item {
@@ -546,7 +543,7 @@ watch(
     background-color: var(--el-color-primary);
     border: 1px solid var(--el-color-primary);
     .@{prefix-cls}__item--close {
-      :deep(span) {
+      :deep(svg) {
         color: var(--el-color-white) !important;
       }
     }
@@ -556,14 +553,6 @@ watch(
 .dark {
   .@{prefix-cls} {
     &__tool {
-      &:hover {
-        :deep(span),
-        :deep(i),
-        :deep(svg) {
-          color: #fff !important;
-        }
-      }
-
       &--first {
         &:after {
           display: none;
@@ -586,7 +575,7 @@ watch(
       background-color: var(--el-color-primary);
       border: 1px solid var(--el-color-primary);
       .@{prefix-cls}__item--close {
-        :deep(span) {
+        :deep(svg) {
           color: var(--el-color-white) !important;
         }
       }