From 64c7e48bd18ba83e605daccbc4c2f4cc6b58695d Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Tue, 11 Jul 2023 10:05:59 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4Icon=E6=82=AC?= =?UTF-8?q?=E5=81=9C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/src/Dialog.vue | 12 +--- src/components/Icon/src/Icon.vue | 15 +++- src/components/Icon/src/types/index.ts | 1 + src/components/Table/src/Table.vue | 50 ++++++++----- src/components/TagsView/src/TagsView.vue | 41 ++++------- src/views/Login/Login.vue | 89 ++++++++++++------------ src/views/Login/components/LoginForm.vue | 14 ++-- 7 files changed, 115 insertions(+), 107 deletions(-) diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue index 732f958..dafad22 100644 --- a/src/components/Dialog/src/Dialog.vue +++ b/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" /> @@ -127,14 +129,4 @@ const dialogStyle = computed(() => { top: 0; } } - -.is-hover { - &:hover { - span, - i, - svg { - color: var(--el-color-primary) !important; - } - } -} diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue index 29e2fab..058ae93 100644 --- a/src/components/Icon/src/Icon.vue +++ b/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(null) @@ -74,3 +75,15 @@ watch( + + diff --git a/src/components/Icon/src/types/index.ts b/src/components/Icon/src/types/index.ts index d1ffcdb..632e4e8 100644 --- a/src/components/Icon/src/types/index.ts +++ b/src/components/Icon/src/types/index.ts @@ -2,4 +2,5 @@ export interface IconTypes { size?: number color?: string icon: string + hoverColor?: string } diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue index cb5f09f..1bed535 100644 --- a/src/components/Table/src/Table.vue +++ b/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 () => ( -
- - {{ - default: () => renderTableColumn(), - empty: () => getSlot(slots, 'empty') || unref(getProps).emptyText, - append: () => getSlot(slots, 'append') - }} - - {unref(getProps).pagination ? ( - - ) : undefined} -
- ) + 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 ( +
+
+ +
+ + {{ + default: () => renderTableColumn(), + ...tableSlots + }} + + {unref(getProps).pagination ? ( + + ) : undefined} +
+ ) + } } }) diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue index cd22082..80a196c 100644 --- a/src/components/TagsView/src/TagsView.vue +++ b/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( >
@@ -368,6 +371,7 @@ watch( @@ -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; } } diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 01306ea..0cf5ad4 100644 --- a/src/views/Login/Login.vue +++ b/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" > -
-
-
- - {{ underlineToHump(appStore.getTitle) }} -
-
- - -
{{ t('login.welcome') }}
-
- {{ t('login.message') }} -
- -
-
- @@ -185,6 +189,8 @@ const loading = ref(false) const iconColor = '#999' +const hoverColor = 'var(--el-color-primary)' + const redirect = ref('') watch( @@ -280,11 +286,3 @@ const toRegister = () => { @register="formRegister" /> - -