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,13 +401,23 @@ export default defineComponent({
       })
     }
 
-    return () => (
+    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(),
-            empty: () => getSlot(slots, 'empty') || unref(getProps).emptyText,
+              ...tableSlots
-            append: () => getSlot(slots, 'append')
             }}
           </ElTable>
           {unref(getProps).pagination ? (
@@ -420,5 +431,6 @@ export default defineComponent({
         </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;
         }
       }

src/views/Login/Login.vue

@@ -7,6 +7,7 @@ import { underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ref } from 'vue'
+import { ElScrollbar } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
 
@@ -32,7 +33,8 @@ const toLogin = () => {
     :class="prefixCls"
     class="h-[100%] relative lt-xl:bg-[var(--login-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
   >
-    <div class="relative h-full flex mx-auto">
+    <ElScrollbar class="h-full">
+      <div class="relative flex mx-auto">
         <div
           :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
         >
@@ -86,6 +88,7 @@ const toLogin = () => {
           </Transition>
         </div>
       </div>
+    </ElScrollbar>
   </div>
 </template>
 

src/views/Login/components/LoginForm.vue

@@ -146,23 +146,27 @@ const schema = reactive<FormSchema[]>([
                   size={iconSize}
                   class="cursor-pointer ant-icon"
                   color={iconColor}
+                  hoverColor={hoverColor}
                 />
                 <Icon
                   icon="ant-design:wechat-filled"
                   size={iconSize}
                   class="cursor-pointer ant-icon"
                   color={iconColor}
+                  hoverColor={hoverColor}
                 />
                 <Icon
                   icon="ant-design:alipay-circle-filled"
                   size={iconSize}
                   color={iconColor}
+                  hoverColor={hoverColor}
                   class="cursor-pointer ant-icon"
                 />
                 <Icon
                   icon="ant-design:weibo-circle-filled"
                   size={iconSize}
                   color={iconColor}
+                  hoverColor={hoverColor}
                   class="cursor-pointer ant-icon"
                 />
               </div>
@@ -185,6 +189,8 @@ const loading = ref(false)
 
 const iconColor = '#999'
 
+const hoverColor = 'var(--el-color-primary)'
+
 const redirect = ref<string>('')
 
 watch(
@@ -280,11 +286,3 @@ const toRegister = () => {
     @register="formRegister"
   />
 </template>
-
-<style lang="less" scoped>
-:deep(.ant-icon) {
-  & > svg:hover {
-    color: var(--el-color-primary) !important;
-  }
-}
-</style>