mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-26 16:46:19 +08:00
perf: reorganize the icons and reduce the volume
This commit is contained in:
@@ -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
|
||||
"
|
||||
|
@@ -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
|
||||
"
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user