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 () => (
+    return () => {
-      <div v-loading={unref(getProps).loading}>
+      const tableSlots = {}
-        <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
+      if (getSlot(slots, 'empty')) {
-          {{
+        tableSlots['empty'] = (...args: any[]) => getSlot(slots, 'empty', args)
-            default: () => renderTableColumn(),
+      }
-            empty: () => getSlot(slots, 'empty') || unref(getProps).emptyText,
+      if (getSlot(slots, 'append')) {
-            append: () => getSlot(slots, 'append')
+        tableSlots['append'] = (...args: any[]) => getSlot(slots, 'append', args)
-          }}
+      }
-        </ElTable>
+      return (
-        {unref(getProps).pagination ? (
+        <div v-loading={unref(getProps).loading}>
-          <ElPagination
+          <div>
-            v-model:pageSize={pageSizeRef.value}
+            <Icon icon="ant-design:sync-outlined" class="cursor-pointer" />
-            v-model:currentPage={currentPageRef.value}
+          </div>
-            class="mt-10px"
+          <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
-            {...unref(pagination)}
+            {{
-          ></ElPagination>
+              default: () => renderTableColumn(),
-        ) : undefined}
+              ...tableSlots
-      </div>
+            }}
-    )
+          </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;
         }
       }

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,60 +33,62 @@ 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
+      <div class="relative flex mx-auto">
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
-      >
-        <div class="flex items-center relative text-white">
-          <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
-          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
-        </div>
-        <div class="flex justify-center items-center h-[calc(100%-60px)]">
-          <TransitionGroup
-            appear
-            tag="div"
-            enter-active-class="animate__animated animate__bounceInLeft"
-          >
-            <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />
-            <div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div>
-            <div class="mt-5 font-normal text-white text-14px" key="3">
-              {{ t('login.message') }}
-            </div>
-          </TransitionGroup>
-        </div>
-      </div>
-      <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
         <div
-          class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
+          :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
         >
-          <div class="flex items-center at-2xl:hidden at-xl:hidden">
+          <div class="flex items-center relative text-white">
             <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-
+          <div class="flex justify-center items-center h-[calc(100%-60px)]">
-          <div class="flex justify-end items-center space-x-10px">
+            <TransitionGroup
-            <ThemeSwitch />
+              appear
-            <LocaleDropdown class="lt-xl:text-white dark:text-white" />
+              tag="div"
+              enter-active-class="animate__animated animate__bounceInLeft"
+            >
+              <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />
+              <div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div>
+              <div class="mt-5 font-normal text-white text-14px" key="3">
+                {{ t('login.message') }}
+              </div>
+            </TransitionGroup>
           </div>
         </div>
-        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
+        <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
           <div
-            class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
+            class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
           >
-            <LoginForm
+            <div class="flex items-center at-2xl:hidden at-xl:hidden">
-              v-if="isLogin"
+              <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
-              class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
+              <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
-              @to-register="toRegister"
+            </div>
-            />
+
-            <RegisterForm
+            <div class="flex justify-end items-center space-x-10px">
-              v-else
+              <ThemeSwitch />
-              class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
+              <LocaleDropdown class="lt-xl:text-white dark:text-white" />
-              @to-login="toLogin"
+            </div>
-            />
           </div>
-        </Transition>
+          <Transition appear enter-active-class="animate__animated animate__bounceInRight">
+            <div
+              class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
+            >
+              <LoginForm
+                v-if="isLogin"
+                class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
+                @to-register="toRegister"
+              />
+              <RegisterForm
+                v-else
+                class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
+                @to-login="toLogin"
+              />
+            </div>
+          </Transition>
+        </div>
       </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>