perf: all icons used in the core are offline (#4173)
* perf: all icons used in the core are offline * chore: update default icon * chore: update shadowpull/48/MERGE
parent
66808582ff
commit
3c17f4e9f8
|
@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/vben/about/index.vue'),
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
title: $t('page.vben.about'),
|
||||
|
|
|
@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/vben/about/index.vue'),
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
title: $t('page.vben.about'),
|
||||
|
|
|
@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/vben/about/index.vue'),
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
title: $t('page.vben.about'),
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
"devDependencies": {
|
||||
"@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
|
||||
"@vite-pwa/vitepress": "^0.5.0",
|
||||
"vitepress": "^1.3.2",
|
||||
"vitepress": "^1.3.3",
|
||||
"vue": "^3.4.37"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/vben/about/index.vue'),
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
badgeType: 'dot',
|
||||
badgeVariants: 'destructive',
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
"tailwindcss": "^3.4.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/json": "^2.2.237",
|
||||
"@iconify/json": "^2.2.238",
|
||||
"@iconify/tailwind": "^1.1.2",
|
||||
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
"@changesets/cli": "^2.27.7",
|
||||
"@ls-lint/ls-lint": "^2.2.3",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/node": "^22.3.0",
|
||||
"@types/node": "^22.4.0",
|
||||
"@vben/commitlint-config": "workspace:*",
|
||||
"@vben/eslint-config": "workspace:*",
|
||||
"@vben/prettier-config": "workspace:*",
|
||||
|
@ -75,7 +75,7 @@
|
|||
"@vue/test-utils": "^2.4.6",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^8.13.3",
|
||||
"cspell": "^8.14.1",
|
||||
"husky": "^9.1.4",
|
||||
"is-ci": "^3.0.1",
|
||||
"jsdom": "^24.1.1",
|
||||
|
|
|
@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue';
|
|||
|
||||
function createIconifyIcon(icon: string) {
|
||||
return defineComponent({
|
||||
name: `SvgIcon-${icon}`,
|
||||
name: `Icon-${icon}`,
|
||||
setup(props, { attrs }) {
|
||||
return () => h(Icon, { icon, ...props, ...attrs });
|
||||
},
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
export * from './create-icon';
|
||||
export * from './lucide';
|
||||
|
||||
export * from './mdi';
|
||||
export * from '@iconify/vue';
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
export {
|
||||
ArrowDown,
|
||||
ArrowLeft,
|
||||
ArrowLeftFromLine as MdiMenuOpen,
|
||||
ArrowLeftToLine,
|
||||
ArrowRightFromLine as MdiMenuClose,
|
||||
ArrowRightLeft,
|
||||
ArrowRightToLine,
|
||||
ArrowUp,
|
||||
|
@ -11,10 +13,12 @@ export {
|
|||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
CircleHelp,
|
||||
Copy,
|
||||
CornerDownLeft,
|
||||
Disc3 as IconDefault,
|
||||
Disc as IconDefault,
|
||||
Ellipsis,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
|
@ -36,6 +40,8 @@ export {
|
|||
Palette,
|
||||
PanelLeft,
|
||||
PanelRight,
|
||||
Pin,
|
||||
PinOff,
|
||||
RotateCw,
|
||||
Search,
|
||||
SearchX,
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import { createIconifyIcon } from './create-icon';
|
||||
|
||||
export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
|
||||
|
||||
export const MdiWechat = createIconifyIcon('mdi:wechat');
|
||||
|
||||
export const MdiGithub = createIconifyIcon('mdi:github');
|
||||
|
||||
export const MdiGoogle = createIconifyIcon('mdi:google');
|
||||
|
||||
export const MdiQqchat = createIconifyIcon('mdi:qqchat');
|
||||
|
||||
export const MdiPin = createIconifyIcon('mdi:pin');
|
||||
|
||||
export const MdiPinOff = createIconifyIcon('mdi:pin-off');
|
||||
|
||||
export const MdiMenuClose = createIconifyIcon('mdi:menu-close');
|
||||
|
||||
export const MdiMenuOpen = createIconifyIcon('mdi:menu-open');
|
|
@ -54,7 +54,6 @@ const style = computed((): CSSProperties => {
|
|||
|
||||
<template>
|
||||
<main ref="contentElement" :style="style" class="bg-background-deep relative">
|
||||
<!-- <BlurShadow :style="shadowStyle" /> -->
|
||||
<slot :overlay-style="overlayStyle" name="overlay"></slot>
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
|
||||
import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';
|
||||
|
||||
const collapsed = defineModel<boolean>('collapsed');
|
||||
|
||||
|
@ -10,10 +10,10 @@ function handleCollapsed() {
|
|||
|
||||
<template>
|
||||
<div
|
||||
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"
|
||||
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"
|
||||
@click.stop="handleCollapsed"
|
||||
>
|
||||
<MdiMenuClose v-if="collapsed" class="size-4" />
|
||||
<MdiMenuOpen v-else class="size-4" />
|
||||
<ChevronsRight v-if="collapsed" class="size-4" />
|
||||
<ChevronsLeft v-else class="size-4" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { MdiPin, MdiPinOff } from '@vben-core/icons';
|
||||
import { Pin, PinOff } from '@vben-core/icons';
|
||||
|
||||
const expandOnHover = defineModel<boolean>('expandOnHover');
|
||||
|
||||
|
@ -10,10 +10,10 @@ function toggleFixed() {
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
|
||||
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
|
||||
@click="toggleFixed"
|
||||
>
|
||||
<MdiPinOff v-if="!expandOnHover" />
|
||||
<MdiPin v-else />
|
||||
<PinOff v-if="!expandOnHover" class="size-3.5" />
|
||||
<Pin v-else class="size-3.5" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -474,7 +474,7 @@ function handleOpenMenu() {
|
|||
>
|
||||
<div
|
||||
:style="headerWrapperStyle"
|
||||
class="overflow-hidden transition-all duration-200"
|
||||
class="overflow-hidden shadow-[0_16px_24px_hsl(var(--background))] transition-all duration-200"
|
||||
>
|
||||
<LayoutHeader
|
||||
v-if="headerVisible"
|
||||
|
|
|
@ -42,15 +42,17 @@ const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
|
|||
const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
|
||||
const showShadowRight = computed(() => props.shadow && props.shadowRight);
|
||||
|
||||
const computedShadowClasses = computed(() => ({
|
||||
'shadow-both':
|
||||
!isAtLeft.value &&
|
||||
!isAtRight.value &&
|
||||
showShadowLeft.value &&
|
||||
showShadowRight.value,
|
||||
'shadow-left': !isAtLeft.value && showShadowLeft.value,
|
||||
'shadow-right': !isAtRight.value && showShadowRight.value,
|
||||
}));
|
||||
const computedShadowClasses = computed(() => {
|
||||
return {
|
||||
'both-shadow':
|
||||
!isAtLeft.value &&
|
||||
!isAtRight.value &&
|
||||
showShadowLeft.value &&
|
||||
showShadowRight.value,
|
||||
'left-shadow': !isAtLeft.value && showShadowLeft.value,
|
||||
'right-shadow': !isAtRight.value && showShadowRight.value,
|
||||
};
|
||||
});
|
||||
|
||||
function handleScroll(event: Event) {
|
||||
const target = event.target as HTMLElement;
|
||||
|
@ -107,11 +109,11 @@ function handleScroll(event: Event) {
|
|||
|
||||
<style scoped>
|
||||
.vben-scrollbar {
|
||||
&:not(.shadow-both).shadow-left {
|
||||
&:not(.both-shadow).left-shadow {
|
||||
mask-image: linear-gradient(90deg, transparent, #000 16px);
|
||||
}
|
||||
|
||||
&:not(.shadow-both).shadow-right {
|
||||
&:not(.both-shadow).right-shadow {
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
#000 0%,
|
||||
|
@ -120,7 +122,7 @@ function handleScroll(event: Event) {
|
|||
);
|
||||
}
|
||||
|
||||
&.shadow-both {
|
||||
&.both-shadow {
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
|
|
|
@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
|
|||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { MdiPin, X } from '@vben-core/icons';
|
||||
import { Pin, X } from '@vben-core/icons';
|
||||
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props extends TabsProps {}
|
||||
|
@ -62,7 +62,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
:style="style"
|
||||
class="tabs-chrome !flex h-full w-max pr-6"
|
||||
>
|
||||
<TransitionGroup name="slide-left">
|
||||
<TransitionGroup name="slide-right">
|
||||
<div
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
|
@ -70,7 +70,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
:class="[{ 'is-active': tab.key === active, dragable: !tab.affixTab }]"
|
||||
:data-active-tab="active"
|
||||
:data-index="i"
|
||||
class="tabs-chrome__item draggable group relative -mr-3 flex h-full select-none items-center"
|
||||
class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
|
||||
data-tab-item="true"
|
||||
@click="active = tab.key"
|
||||
>
|
||||
|
@ -119,7 +119,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
|
||||
@click.stop="() => emit('close', tab.key)"
|
||||
/>
|
||||
<MdiPin
|
||||
<Pin
|
||||
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
|
||||
class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
|
||||
@click.stop="() => emit('unpin', tab)"
|
||||
|
|
|
@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
|
|||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { MdiPin, X } from '@vben-core/icons';
|
||||
import { Pin, X } from '@vben-core/icons';
|
||||
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props extends TabsProps {}
|
||||
|
@ -65,7 +65,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
:class="contentClass"
|
||||
class="relative !flex h-full w-max items-center pr-6"
|
||||
>
|
||||
<TransitionGroup name="slide-left">
|
||||
<TransitionGroup name="slide-right">
|
||||
<div
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
|
@ -77,7 +77,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
typeWithClass.content,
|
||||
]"
|
||||
:data-index="i"
|
||||
class="tab-item [&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none"
|
||||
class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
|
||||
data-tab-item="true"
|
||||
@click="active = tab.key"
|
||||
>
|
||||
|
@ -98,7 +98,7 @@ const tabsView = computed((): TabConfig[] => {
|
|||
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
|
||||
@click.stop="() => emit('close', tab.key)"
|
||||
/>
|
||||
<MdiPin
|
||||
<Pin
|
||||
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
|
||||
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
|
||||
@click.stop="() => emit('unpin', tab)"
|
||||
|
|
|
@ -60,9 +60,11 @@ useTabsDrag(props, emit);
|
|||
>
|
||||
<VbenScrollbar
|
||||
ref="scrollbarRef"
|
||||
:shadow-bottom="false"
|
||||
:shadow-top="false"
|
||||
class="h-full"
|
||||
horizontal
|
||||
scroll-bar-class="z-10 hidden"
|
||||
scroll-bar-class="z-10 hidden "
|
||||
shadow
|
||||
shadow-left
|
||||
shadow-right
|
||||
|
|
|
@ -31,7 +31,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
|
|||
|
||||
const resetElState = async () => {
|
||||
el.style.cursor = 'default';
|
||||
el.classList.remove('dragging');
|
||||
// el.classList.remove('dragging');
|
||||
el.querySelector('.draggable')?.classList.remove('dragging');
|
||||
};
|
||||
|
||||
|
|
|
@ -13,9 +13,9 @@ import {
|
|||
ExternalLink,
|
||||
FoldHorizontal,
|
||||
Fullscreen,
|
||||
MdiPin,
|
||||
MdiPinOff,
|
||||
Minimize2,
|
||||
Pin,
|
||||
PinOff,
|
||||
RotateCw,
|
||||
X,
|
||||
} from '@vben/icons';
|
||||
|
@ -135,7 +135,7 @@ export function useTabbar() {
|
|||
handler: async () => {
|
||||
await toggleTabPin(tab);
|
||||
},
|
||||
icon: affixTab ? MdiPinOff : MdiPin,
|
||||
icon: affixTab ? PinOff : Pin,
|
||||
key: 'affix',
|
||||
text: affixTab
|
||||
? $t('preferences.tabbar.contextMenu.unpin')
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
// import { createIconifyIcon } from '@vben-core/icons';
|
||||
import { createIconifyIcon } from '@vben-core/icons';
|
||||
|
||||
export * from '@vben-core/icons';
|
||||
|
||||
// export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
|
||||
export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
|
||||
|
||||
export const MdiWechat = createIconifyIcon('mdi:wechat');
|
||||
|
||||
export const MdiGithub = createIconifyIcon('mdi:github');
|
||||
|
||||
export const MdiGoogle = createIconifyIcon('mdi:google');
|
||||
|
||||
export const MdiQqchat = createIconifyIcon('mdi:qqchat');
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "^9.13.1",
|
||||
"@intlify/core-base": "^9.14.0",
|
||||
"vue": "^3.4.37",
|
||||
"vue-i18n": "^9.13.1"
|
||||
"vue-i18n": "^9.14.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
|
|||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/vben/about/index.vue'),
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
title: $t('page.vben.about'),
|
||||
|
|
|
@ -16,7 +16,7 @@ const text = ref(longText);
|
|||
title="文本省略示例"
|
||||
>
|
||||
<Card class="mb-4" title="基本使用">
|
||||
<EllipsisText :max-width="240">{{ text }}</EllipsisText>
|
||||
<EllipsisText :max-width="500">{{ text }}</EllipsisText>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="多行省略">
|
||||
|
|
528
pnpm-lock.yaml
528
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue