bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: reorganize the icons and reduce the volume

Browse Source
This commit is contained in:
vince
2024-07-17 22:25:27 +08:00
parent cb161eab89
commit 910a3553ac
54 changed files with 341 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
View File

@@ -2,7 +2,7 @@
import type { CSSProperties } from 'vue';
import { computed, useSlots } from 'vue';
import { IcRoundMenu } from '@vben-core/icons';
import { Menu } from '@vben-core/icons';
import { VbenIconButton } from '@vben-core/shadcn-ui';
interface Props {
@@ -108,7 +108,7 @@ function handleToggleMenu() {
class="my-0 ml-2 mr-1 rounded"
@click="handleToggleMenu"
>
<IcRoundMenu class="size-5" />
<Menu class="size-4" />
</VbenIconButton>
<slot></slot>
</header>

2
packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
View File

@@ -12,7 +12,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
fixed: true,
height: 30,
height: 38,
});
const style = computed((): CSSProperties => {

4
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -13,7 +13,7 @@ function handleCollapsed() {
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" />
<MdiMenuOpen v-else />
<MdiMenuClose v-if="collapsed" class="size-4" />
<MdiMenuOpen v-else class="size-4" />
</div>
</template>

10
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -19,7 +19,7 @@ import {
} from 'vue';
import { useNamespace } from '@vben-core/hooks';
import { IcRoundMoreHoriz } from '@vben-core/icons';
import { Ellipsis } from '@vben-core/icons';
import { isHttpUrl } from '@vben-core/toolkit';
import { UseResizeObserverReturn, useResizeObserver } from '@vueuse/core';
@@ -338,7 +338,7 @@ function removeMenuItem(item: MenuItemRegistered) {
</template>
<SubMenu is-sub-menu-more path="sub-menu-more">
<template #title>
<IcRoundMoreHoriz />
<Ellipsis class="size-4" />
</template>
<template v-for="item in getSlot.slotMore" :key="item.key">
<component :is="item" />
@@ -852,9 +852,9 @@ $namespace: vben;
cursor: pointer;
background: var(--menu-submenu-hover-background-color) !important;
svg {
fill: var(--menu-submenu-hover-color);
}
// svg {
// fill: var(--menu-submenu-hover-color);
// }
}
}
</style>

10
packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
View File

@@ -4,10 +4,7 @@ import type { MenuItemProps } from '../interface';
import { computed } from 'vue';
import { useNamespace } from '@vben-core/hooks';
import {
IcRoundChevronRight,
IcRoundKeyboardArrowDown,
} from '@vben-core/icons';
import { ChevronDown, ChevronRight } from '@vben-core/icons';
import { VbenIcon } from '@vben-core/shadcn-ui';
import { useMenuContext } from '../hooks';
@@ -67,8 +64,8 @@ const hiddenTitle = computed(() => {
const iconComp = computed(() => {
return (mode.value === 'horizontal' && !isFirstLevel.value) ||
(mode.value === 'vertical' && collapse.value)
? IcRoundChevronRight
: IcRoundKeyboardArrowDown;
? ChevronRight
: ChevronDown;
});
const iconArrowStyle = computed(() => {
@@ -102,6 +99,7 @@ const iconArrowStyle = computed(() => {
v-show="showArrowIcon"
:class="[e('icon-arrow')]"
:style="iconArrowStyle"
class="size-4"
/>
</div>
</template>

4
packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
View File

@@ -3,7 +3,7 @@ import type { BacktopProps } from './backtop';
import { computed } from 'vue';
import { IcRoundArrowUpward } from '@vben-core/icons';
import { ArrowUpToLine } from '@vben-core/icons';
import { VbenButton } from '../button';
import { useBackTop } from './use-backtop';
@@ -37,7 +37,7 @@ const { handleClick, visible } = useBackTop(props);
variant="icon"
@click="handleClick"
>
<IcRoundArrowUpward />
<ArrowUpToLine class="size-4" />
</VbenButton>
</transition>
</template>

4
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { IBreadcrumb } from './interface';
import { IcRoundKeyboardArrowDown } from '@vben-core/icons';
import { ChevronDown } from '@vben-core/icons';
import {
Breadcrumb,
BreadcrumbItem,
@@ -56,7 +56,7 @@ function handleClick(path?: string) {
class="size-5"
/>
{{ item.title }}
<IcRoundKeyboardArrowDown class="size-5" />
<ChevronDown class="size-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<template

6
packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
View File

@@ -2,7 +2,7 @@
import type { HTMLAttributes } from 'vue';
import { computed } from 'vue';
import { MdiLoading } from '@vben-core/icons';
import { LoaderCircle } from '@vben-core/icons';
import {
type ButtonVariants,
buttonVariants,
@@ -40,9 +40,9 @@ const isDisabled = computed(() => {
:class="cn(buttonVariants({ variant, size }), props.class)"
:disabled="isDisabled"
>
<MdiLoading
<LoaderCircle
v-if="loading"
class="text-md mr-2 flex-shrink-0 animate-spin"
class="text-md mr-2 size-4 flex-shrink-0 animate-spin"
/>
<slot></slot>
</Primitive>

2
packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
View File

@@ -81,7 +81,7 @@ function handleClick(menu: IContextMenuItem) {
<component
:is="menu.icon"
v-if="menu.icon"
class="mr-1 w-6 text-lg"
class="mr-2 size-4 text-lg"
/>
{{ menu.text }}

6
packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { IcRoundFullscreen, IcRoundFullscreenExit } from '@vben-core/icons';
import { Maximize, Minimize } from '@vben-core/icons';
import { useFullscreen } from '@vueuse/core';
@@ -22,7 +22,7 @@ isFullscreen.value = !!(
</script>
<template>
<VbenIconButton @click="toggle">
<IcRoundFullscreenExit v-if="isFullscreen" class="size-6" />
<IcRoundFullscreen v-else class="size-6" />
<Minimize v-if="isFullscreen" class="size-4" />
<Maximize v-else class="size-4" />
</VbenIconButton>
</template>

7
packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
View File

@@ -2,12 +2,12 @@
import { type Component, computed } from 'vue';
import { Icon, IconDefault } from '@vben-core/icons';
import { isHttpUrl, isObject, isString } from '@vben-core/toolkit';
import { isFunction, isHttpUrl, isObject, isString } from '@vben-core/toolkit';
const props = defineProps<{
// 没有是否显示默认图标
fallback?: boolean;
icon?: Component | string;
icon?: Component | Function | string;
}>();
const isRemoteIcon = computed(() => {
@@ -15,7 +15,8 @@ const isRemoteIcon = computed(() => {
});
const isComponent = computed(() => {
return !isString(props.icon) && isObject(props.icon);
const { icon } = props;
return !isString(icon) && (isObject(icon) || isFunction(icon));
});
</script>

6
packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, useSlots } from 'vue';
import { IcOutlineVisibility, IcOutlineVisibilityOff } from '@vben-core/icons';
import { Eye, EyeOff } from '@vben-core/icons';
import {
type InputProps,
VbenInput,
@@ -48,8 +48,8 @@ const show = ref(false);
class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 top-3 flex cursor-pointer pr-3 text-lg leading-5"
@click="show = !show"
>
<IcOutlineVisibility v-if="show" />
<IcOutlineVisibilityOff v-else />
<Eye v-if="show" class="size-4" />
<EyeOff v-else class="size-4" />
</div>
</form>
</template>

4
packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
View File

@@ -42,7 +42,7 @@ function handleScroll(event: Event) {
<div
v-if="shadow"
:class="{
'opacity-100': !isAtTop,
'border-border border-t opacity-100': !isAtTop,
}"
class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
></div>
@@ -50,7 +50,7 @@ function handleScroll(event: Event) {
<div
v-if="shadow"
:class="{
'opacity-100': !isAtTop && !isAtBottom,
'border-border border-b opacity-100': !isAtTop && !isAtBottom,
}"
class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
></div>

6
packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
View File

@@ -17,7 +17,7 @@ import {
SheetTrigger,
} from '@vben-core/shadcn-ui/components/ui/sheet';
import { Cross2Icon } from '@radix-icons/vue';
import { X } from 'lucide-vue-next';
interface Props {
cancelText?: string;
@@ -87,12 +87,12 @@ function handlerSubmit() {
class="data-[state=open]:bg-secondary cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
>
<VbenIconButton>
<Cross2Icon class="size-4" />
<X class="size-4" />
</VbenIconButton>
</SheetClose>
</SheetHeader>
<div class="h-full pb-16">
<VbenScrollbar class="h-full">
<VbenScrollbar class="h-full" shadow>
<slot></slot>
</VbenScrollbar>
</div>

4
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
import { computed, ref, watch } from 'vue';
import { IcRoundClose, MdiPin } from '@vben-core/icons';
import { MdiPin, X } from '@vben-core/icons';
import { VbenContextMenu, VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
interface Props extends TabsProps {}
@@ -146,7 +146,7 @@ function scrollIntoView() {
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
> -->
<!-- close-icon -->
<IcRoundClose
<X
v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable
"

4
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -3,7 +3,7 @@ import type { TabConfig, TabsProps } from '../../types';
import { computed, watch } from 'vue';
import { IcRoundClose, MdiPin } from '@vben-core/icons';
import { MdiPin, X } from '@vben-core/icons';
import { VbenContextMenu, VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
import { TabDefinition } from '@vben-core/typings';
@@ -115,7 +115,7 @@ function scrollIntoView() {
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
> -->
<!-- close-icon -->
<IcRoundClose
<X
v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable
"

6
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { DropdownMenuProps } from '@vben-core/shadcn-ui';
import { IcRoundKeyboardArrowDown } from '@vben-core/icons';
import { ChevronDown } from '@vben-core/icons';
import { VbenDropdownMenu } from '@vben-core/shadcn-ui';
defineProps<DropdownMenuProps>();
@@ -10,9 +10,9 @@ defineProps<DropdownMenuProps>();
<template>
<VbenDropdownMenu :menus="menus" :modal="false">
<div
class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
>
<IcRoundKeyboardArrowDown class="size-5" />
<ChevronDown class="size-4" />
</div>
</VbenDropdownMenu>
</template>

6
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { IcRoundFitScreen, IcTwotoneFitScreen } from '@vben-core/icons';
import { Fullscreen, Minimize2 } from '@vben-core/icons';
const screen = defineModel<boolean>('screen');
@@ -13,7 +13,7 @@ function toggleScreen() {
class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
@click="toggleScreen"
>
<IcTwotoneFitScreen v-if="screen" />
<IcRoundFitScreen v-else />
<Minimize2 v-if="screen" class="size-4" />
<Fullscreen v-else class="size-4" />
</div>
</template>