From 910a3553ac4335bf6185d4607969681f82b964c3 Mon Sep 17 00:00:00 2001 From: vince Date: Wed, 17 Jul 2024 22:25:27 +0800 Subject: [PATCH] perf: reorganize the icons and reduce the volume --- apps/web-antd/src/layouts/basic.vue | 6 +- .../src/router/routes/modules/dashboard.ts | 2 + .../src/router/routes/modules/vben.ts | 4 +- package.json | 2 +- .../forward/preferences/src/preferences.ts | 111 +--------------- .../preferences/src/update-css-variables.ts | 118 ++++++++++++++++++ .../preferences/src/use-preferences.ts | 28 +++-- .../design/src/design-tokens/dark/index.css | 2 +- packages/@core/shared/icons/package.json | 1 + packages/@core/shared/icons/src/index.ts | 4 +- packages/@core/shared/icons/src/lucide.ts | 46 +++++++ packages/@core/shared/icons/src/material.ts | 88 ------------- packages/@core/shared/icons/src/mdi.ts | 30 ----- .../src/components/layout-header.vue | 4 +- .../src/components/layout-tabbar.vue | 2 +- .../widgets/sidebar-collapse-button.vue | 4 +- .../ui-kit/menu-ui/src/components/menu.vue | 10 +- .../src/components/sub-menu-content.vue | 10 +- .../src/components/back-top/back-top.vue | 4 +- .../src/components/breadcrumb/breadcrumb.vue | 4 +- .../src/components/button/button.vue | 6 +- .../components/context-menu/context-menu.vue | 2 +- .../components/full-screen/full-screen.vue | 6 +- .../shadcn-ui/src/components/icon/icon.vue | 7 +- .../input-password/input-password.vue | 6 +- .../src/components/scrollbar/scrollbar.vue | 4 +- .../shadcn-ui/src/components/sheet/sheet.vue | 6 +- .../src/components/tabs-chrome/tabs.vue | 4 +- .../tabs-ui/src/components/tabs/tabs.vue | 4 +- .../src/components/widgets/tool-more.vue | 6 +- .../src/components/widgets/tool-screen.vue | 6 +- .../common-ui/src/fallback/fallback.vue | 6 +- packages/effects/layouts/src/basic/layout.vue | 3 +- .../layouts/src/basic/tabbar/use-tabs.ts | 34 ++--- .../layouts/src/widgets/color-toggle.vue | 4 +- .../widgets/global-search/global-search.vue | 26 ++-- .../widgets/global-search/search-panel.vue | 6 +- .../layouts/src/widgets/language-toggle.vue | 4 +- .../layouts/src/widgets/layout-toggle.vue | 14 +-- .../src/widgets/lock-screen/lock-screen.vue | 4 +- .../src/widgets/notification/notification.vue | 9 +- .../widgets/preferences/blocks/input-item.vue | 4 +- .../preferences/blocks/layout/layout.vue | 4 +- .../preferences/blocks/number-field-item.vue | 4 +- .../preferences/blocks/select-item.vue | 4 +- .../preferences/blocks/switch-item.vue | 4 +- .../preferences/blocks/theme/builtin.vue | 4 +- .../preferences/blocks/theme/theme.vue | 12 +- .../widgets/preferences/preferences-sheet.vue | 13 +- .../src/widgets/theme-toggle/theme-button.vue | 8 +- .../src/widgets/theme-toggle/theme-toggle.vue | 12 +- .../widgets/user-dropdown/user-dropdown.vue | 14 +-- packages/icons/README.md | 2 +- pnpm-lock.yaml | 13 +- 54 files changed, 341 insertions(+), 404 deletions(-) create mode 100644 packages/@core/forward/preferences/src/update-css-variables.ts create mode 100644 packages/@core/shared/icons/src/lucide.ts delete mode 100644 packages/@core/shared/icons/src/material.ts diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue index 1d4cccef..2a574b3f 100644 --- a/apps/web-antd/src/layouts/basic.vue +++ b/apps/web-antd/src/layouts/basic.vue @@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'; import { AuthenticationLoginExpiredModal } from '@vben/common-ui'; import { LOGIN_PATH } from '@vben/constants'; -import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons'; +import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons'; import { BasicLayout, LockScreen, @@ -61,7 +61,7 @@ const menus = computed(() => [ target: '_blank', }); }, - icon: MdiDriveDocument, + icon: BookOpenText, text: $t('widgets.document'), }, { @@ -79,7 +79,7 @@ const menus = computed(() => [ target: '_blank', }); }, - icon: IcRoundCreditScore, + icon: CircleHelp, text: $t('widgets.qa'), }, ]); diff --git a/apps/web-antd/src/router/routes/modules/dashboard.ts b/apps/web-antd/src/router/routes/modules/dashboard.ts index ecfcbe0c..4f7585e2 100644 --- a/apps/web-antd/src/router/routes/modules/dashboard.ts +++ b/apps/web-antd/src/router/routes/modules/dashboard.ts @@ -7,6 +7,7 @@ const routes: RouteRecordRaw[] = [ { component: BasicLayout, meta: { + icon: 'lucide:layout-dashboard', order: -1, title: $t('page.dashboard.title'), }, @@ -20,6 +21,7 @@ const routes: RouteRecordRaw[] = [ component: () => import('#/views/dashboard/analytics/index.vue'), meta: { affixTab: true, + icon: 'lucide:area-chart', title: $t('page.dashboard.analytics'), }, }, diff --git a/apps/web-antd/src/router/routes/modules/vben.ts b/apps/web-antd/src/router/routes/modules/vben.ts index 21d0c58e..802824cc 100644 --- a/apps/web-antd/src/router/routes/modules/vben.ts +++ b/apps/web-antd/src/router/routes/modules/vben.ts @@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [ component: () => import('#/views/_core/vben/about/index.vue'), meta: { badgeType: 'dot', - icon: 'mdi:creative-commons', + icon: 'lucide:copyright', title: $t('page.vben.about'), }, }, @@ -33,7 +33,7 @@ const routes: RouteRecordRaw[] = [ path: 'document', component: IFrameView, meta: { - icon: 'mdi:flame-circle', + icon: 'lucide:book-open-text', iframeSrc: 'https://doc.vvbin.cn/', keepAlive: true, title: $t('page.vben.document'), diff --git a/package.json b/package.json index a99019c1..b685ec8a 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@vue/test-utils": "^2.4.6", "cross-env": "^7.0.3", "cspell": "^8.11.0", - "husky": "^9.0.11", + "husky": "^9.1.0", "is-ci": "^3.0.1", "jsdom": "^24.1.0", "rimraf": "^6.0.1", diff --git a/packages/@core/forward/preferences/src/preferences.ts b/packages/@core/forward/preferences/src/preferences.ts index ae8cb118..f2f4d668 100644 --- a/packages/@core/forward/preferences/src/preferences.ts +++ b/packages/@core/forward/preferences/src/preferences.ts @@ -4,12 +4,7 @@ import type { Preferences } from './types'; import { markRaw, reactive, readonly, watch } from 'vue'; -import { - StorageManager, - generatorColorVariables, - merge, - updateCSSVariables, -} from '@vben-core/toolkit'; +import { StorageManager, merge } from '@vben-core/toolkit'; import { breakpointsTailwind, @@ -18,7 +13,7 @@ import { } from '@vueuse/core'; import { defaultPreferences } from './config'; -import { BUILT_IN_THEME_PRESETS } from './constants'; +import { updateCSSVariables } from './update-css-variables'; const STORAGE_KEY = 'preferences'; const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`; @@ -48,11 +43,10 @@ class PreferenceManager { }); constructor() { this.cache = new StorageManager(); - // this.flattenedState = reactive(flattenObject(this.state)); this.savePreferences = useDebounceFn( (preference: Preferences) => this._savePreferences(preference), - 100, + 200, ); } @@ -76,7 +70,7 @@ class PreferenceManager { const themeUpdates = updates.theme || {}; const appUpdates = updates.app || {}; if (themeUpdates && Object.keys(themeUpdates).length > 0) { - this.updateTheme(this.state); + updateCSSVariables(this.state); } if ( @@ -130,7 +124,7 @@ class PreferenceManager { this.updatePreferences({ theme: { mode: isDark ? 'dark' : 'light' }, }); - this.updateTheme(this.state); + updateCSSVariables(this.state); }); } @@ -153,101 +147,6 @@ class PreferenceManager { } } - /** - * 更新 CSS 变量 - * @param preference - 当前偏好设置对象,它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。 - */ - private updateMainColors(preference: Preferences) { - if (!preference.theme) { - return; - } - const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = - preference.theme; - - const colorVariables = generatorColorVariables([ - { color: colorPrimary, name: 'primary' }, - { alias: 'warning', color: colorWarning, name: 'yellow' }, - { alias: 'success', color: colorSuccess, name: 'green' }, - { alias: 'destructive', color: colorDestructive, name: 'red' }, - ]); - - if (colorPrimary) { - document.documentElement.style.setProperty( - '--primary', - colorVariables['--primary-500'], - ); - } - - if (colorVariables['--green-500']) { - colorVariables['--success'] = colorVariables['--green-500']; - } - if (colorVariables['--yellow-500']) { - colorVariables['--warning'] = colorVariables['--yellow-500']; - } - if (colorVariables['--red-500']) { - colorVariables['--destructive'] = colorVariables['--red-500']; - } - updateCSSVariables(colorVariables); - } - - /** - * 更新主题 - * @param preferences - 当前偏好设置对象,它的主题值将被用来设置文档的主题。 - */ - private updateTheme(preferences: Preferences) { - // 当修改到颜色变量时,更新 css 变量 - const root = document.documentElement; - if (!root) { - return; - } - - const theme = preferences?.theme ?? {}; - - const { builtinType, colorPrimary, mode, radius } = theme; - - if (Reflect.has(theme, 'mode')) { - const dark = isDarkTheme(mode); - root.classList.toggle('dark', dark); - } - - if (Reflect.has(theme, 'builtinType')) { - const rootTheme = root.dataset.theme; - if (rootTheme !== builtinType) { - root.dataset.theme = builtinType; - } - } - - const currentBuiltType = BUILT_IN_THEME_PRESETS.find( - (item) => item.type === builtinType, - ); - - let builtinTypeColorPrimary: string | undefined = ''; - - if (currentBuiltType) { - const isDark = isDarkTheme(this.state.theme.mode); - - const color = isDark - ? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor - : currentBuiltType.primaryColor; - builtinTypeColorPrimary = color || currentBuiltType.color; - } - - if ( - builtinTypeColorPrimary || - Reflect.has(theme, 'colorPrimary') || - Reflect.has(theme, 'colorDestructive') || - Reflect.has(theme, 'colorSuccess') || - Reflect.has(theme, 'colorWarning') - ) { - preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary; - this.updateMainColors(preferences); - } - - if (Reflect.has(theme, 'radius')) { - document.documentElement.style.setProperty('--radius', `${radius}rem`); - } - } - clearCache() { [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => { this.cache?.removeItem(key); diff --git a/packages/@core/forward/preferences/src/update-css-variables.ts b/packages/@core/forward/preferences/src/update-css-variables.ts new file mode 100644 index 00000000..9f1823f8 --- /dev/null +++ b/packages/@core/forward/preferences/src/update-css-variables.ts @@ -0,0 +1,118 @@ +import type { Preferences } from './types'; + +import { + updateCSSVariables as executeUpdateCSSVariables, + generatorColorVariables, +} from '@vben-core/toolkit'; + +import { BUILT_IN_THEME_PRESETS } from './constants'; + +/** + * 更新主题的 CSS 变量以及其他 CSS 变量 + * @param preferences - 当前偏好设置对象,它的主题值将被用来设置文档的主题。 + */ +function updateCSSVariables(preferences: Preferences) { + // 当修改到颜色变量时,更新 css 变量 + const root = document.documentElement; + if (!root) { + return; + } + + const theme = preferences?.theme ?? {}; + + const { builtinType, colorPrimary, mode, radius } = theme; + + // html 设置 dark 类 + if (Reflect.has(theme, 'mode')) { + const dark = isDarkTheme(mode); + root.classList.toggle('dark', dark); + } + + // html 设置 data-theme=[builtinType] + if (Reflect.has(theme, 'builtinType')) { + const rootTheme = root.dataset.theme; + if (rootTheme !== builtinType) { + root.dataset.theme = builtinType; + } + } + + // 获取当前的内置主题 + const currentBuiltType = BUILT_IN_THEME_PRESETS.find( + (item) => item.type === builtinType, + ); + + let builtinTypeColorPrimary: string | undefined = ''; + + if (currentBuiltType) { + const isDark = isDarkTheme(preferences.theme.mode); + // 设置不同主题的主要颜色 + const color = isDark + ? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor + : currentBuiltType.primaryColor; + builtinTypeColorPrimary = color || currentBuiltType.color; + } + + // 如果内置主题颜色和自定义颜色都不存在,则不更新主题颜色 + if ( + builtinTypeColorPrimary || + Reflect.has(theme, 'colorPrimary') || + Reflect.has(theme, 'colorDestructive') || + Reflect.has(theme, 'colorSuccess') || + Reflect.has(theme, 'colorWarning') + ) { + preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary; + updateMainColorVariables(preferences); + } + + // 更新圆角 + if (Reflect.has(theme, 'radius')) { + document.documentElement.style.setProperty('--radius', `${radius}rem`); + } +} + +/** + * 更新主要的 CSS 变量 + * @param preference - 当前偏好设置对象,它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。 + */ +function updateMainColorVariables(preference: Preferences) { + if (!preference.theme) { + return; + } + const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = + preference.theme; + + const colorVariables = generatorColorVariables([ + { color: colorPrimary, name: 'primary' }, + { alias: 'warning', color: colorWarning, name: 'yellow' }, + { alias: 'success', color: colorSuccess, name: 'green' }, + { alias: 'destructive', color: colorDestructive, name: 'red' }, + ]); + + if (colorPrimary) { + document.documentElement.style.setProperty( + '--primary', + colorVariables['--primary-500'], + ); + } + + if (colorVariables['--green-500']) { + colorVariables['--success'] = colorVariables['--green-500']; + } + if (colorVariables['--yellow-500']) { + colorVariables['--warning'] = colorVariables['--yellow-500']; + } + if (colorVariables['--red-500']) { + colorVariables['--destructive'] = colorVariables['--red-500']; + } + executeUpdateCSSVariables(colorVariables); +} + +function isDarkTheme(theme: string) { + let dark = theme === 'dark'; + if (theme === 'auto') { + dark = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + return dark; +} + +export { updateCSSVariables }; diff --git a/packages/@core/forward/preferences/src/use-preferences.ts b/packages/@core/forward/preferences/src/use-preferences.ts index e6a20903..e3b6e9cc 100644 --- a/packages/@core/forward/preferences/src/use-preferences.ts +++ b/packages/@core/forward/preferences/src/use-preferences.ts @@ -27,6 +27,10 @@ function usePreferences() { return isDarkTheme(preferences.theme.mode); }); + const isMobile = computed(() => { + return appPreferences.value.isMobile; + }); + const theme = computed(() => { return isDark.value ? 'dark' : 'light'; }); @@ -35,7 +39,7 @@ function usePreferences() { * @zh_CN 布局方式 */ const layout = computed(() => - appPreferences.value.isMobile ? 'sidebar-nav' : appPreferences.value.layout, + isMobile.value ? 'sidebar-nav' : appPreferences.value.layout, ); /** @@ -109,6 +113,16 @@ function usePreferences() { return appPreferences.value.authPageLayout === 'panel-center'; }); + /** + * @zh_CN 内容是否已经最大化 + * 排除 full-content模式 + */ + const contentIsMaximize = computed(() => { + const headerIsHidden = preferences.header.hidden; + const sidebarIsHidden = preferences.sidebar.hidden; + return headerIsHidden && sidebarIsHidden && !isFullContent.value; + }); + /** * @zh_CN 是否启用全局搜索快捷键 */ @@ -138,17 +152,6 @@ function usePreferences() { return enable && globalPreferences; }); - /** - * @zh_CN 内容是否已经最大化 - * 排除 full-content模式 - */ - const contentIsMaximize = computed(() => { - const headerIsHidden = preferences.header.hidden; - const sidebarIsHidden = preferences.sidebar.hidden; - - return headerIsHidden && sidebarIsHidden && !isFullContent.value; - }); - return { authPanelCenter, authPanelLeft, @@ -163,6 +166,7 @@ function usePreferences() { isFullContent, isHeaderNav, isMixedNav, + isMobile, isSideMixedNav, isSideMode, isSideNav, diff --git a/packages/@core/shared/design/src/design-tokens/dark/index.css b/packages/@core/shared/design/src/design-tokens/dark/index.css index 97ff7a98..79f84b4e 100644 --- a/packages/@core/shared/design/src/design-tokens/dark/index.css +++ b/packages/@core/shared/design/src/design-tokens/dark/index.css @@ -15,7 +15,7 @@ --card-foreground: 210 40% 98%; /* Background color for popovers such as , , */ - --popover: 222.82deg 8.43% 16.27%; + --popover: 222.82deg 8.43% 12.27%; --popover-foreground: 210 40% 98%; /* Muted backgrounds such as , and */ diff --git a/packages/@core/shared/icons/package.json b/packages/@core/shared/icons/package.json index fa8c9c56..bca39954 100644 --- a/packages/@core/shared/icons/package.json +++ b/packages/@core/shared/icons/package.json @@ -36,6 +36,7 @@ }, "dependencies": { "@iconify/vue": "^4.1.2", + "lucide-vue-next": "^0.408.0", "vue": "^3.4.32" } } diff --git a/packages/@core/shared/icons/src/index.ts b/packages/@core/shared/icons/src/index.ts index ccfa63b7..b373567d 100644 --- a/packages/@core/shared/icons/src/index.ts +++ b/packages/@core/shared/icons/src/index.ts @@ -1,5 +1,5 @@ export * from './create-icon'; -export * from './material'; -export * from './mdi'; +export * from './lucide'; +export * from './mdi'; export * from '@iconify/vue'; diff --git a/packages/@core/shared/icons/src/lucide.ts b/packages/@core/shared/icons/src/lucide.ts new file mode 100644 index 00000000..de488105 --- /dev/null +++ b/packages/@core/shared/icons/src/lucide.ts @@ -0,0 +1,46 @@ +export { + ArrowDown, + ArrowLeft, + ArrowLeftToLine, + ArrowRightLeft, + ArrowRightToLine, + ArrowUp, + ArrowUpToLine, + Bell, + BookOpenText, + ChevronDown, + ChevronRight, + CircleHelp, + Copy, + CornerDownLeft, + Disc3 as IconDefault, + Ellipsis, + ExternalLink, + Eye, + EyeOff, + FoldHorizontal, + Fullscreen, + Github, + InspectionPanel, + Languages, + LoaderCircle, + LockKeyhole, + LogOut, + MailCheck, + Maximize, + Menu, + Minimize, + Minimize2, + MoonStar, + Palette, + PanelLeft, + PanelRight, + RotateCw, + Search, + SearchX, + Sun, + SunMoon, + SwatchBook, + UserRoundPen, + X, +} from 'lucide-vue-next'; diff --git a/packages/@core/shared/icons/src/material.ts b/packages/@core/shared/icons/src/material.ts deleted file mode 100644 index c1e041e7..00000000 --- a/packages/@core/shared/icons/src/material.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { createIconifyIcon } from './create-icon'; - -export const IconDefault = createIconifyIcon('ic:round-auto-awesome'); - -export const IcRoundKeyboardArrowDown = createIconifyIcon( - 'ic:round-keyboard-arrow-down', -); - -export const IcRoundChevronRight = createIconifyIcon('ic:round-chevron-right'); - -export const IcRoundMenu = createIconifyIcon('ic:round-menu'); - -export const IcRoundMoreHoriz = createIconifyIcon('ic:round-more-horiz'); - -export const IcRoundFitScreen = createIconifyIcon('ic:round-fit-screen'); - -export const IcTwotoneFitScreen = createIconifyIcon('ic:twotone-fit-screen'); - -export const IcRoundColorLens = createIconifyIcon('ic:round-color-lens'); - -export const IcRoundMoreVert = createIconifyIcon('ic:round-more-vert'); - -export const IcRoundFullscreen = createIconifyIcon('ic:round-fullscreen'); - -export const IcRoundFullscreenExit = createIconifyIcon( - 'ic:round-fullscreen-exit', -); - -export const IcRoundClose = createIconifyIcon('ic:round-close'); - -export const IcRoundRestartAlt = createIconifyIcon('ic:round-restart-alt'); - -export const IcRoundLogout = createIconifyIcon('ic:round-logout'); - -export const IcOutlineVisibility = createIconifyIcon('ic:outline-visibility'); - -export const IcOutlineVisibilityOff = createIconifyIcon( - 'ic:outline-visibility-off', -); - -export const IcRoundSearch = createIconifyIcon('ic:round-search'); - -export const IcRoundFolderCopy = createIconifyIcon('ic:round-folder-copy'); - -export const IcRoundSubdirectoryArrowLeft = createIconifyIcon( - 'ic:round-subdirectory-arrow-left', -); -export const IcRoundArrowUpward = createIconifyIcon('ic:round-arrow-upward'); - -export const IcRoundArrowDownward = createIconifyIcon( - 'ic:round-arrow-downward', -); - -export const IcBaselineLanguage = createIconifyIcon('ic:baseline-language'); - -export const IcRoundSearchOff = createIconifyIcon('ic:round-search-off'); - -export const IcRoundNotificationsNone = createIconifyIcon( - 'ic:round-notifications-none', -); - -export const IcRoundMarkEmailRead = createIconifyIcon( - 'ic:round-mark-email-read', -); - -export const IcRoundWbSunny = createIconifyIcon('ic:round-wb-sunny'); - -export const IcRoundMotionPhotosAuto = createIconifyIcon( - 'ic:round-motion-photos-auto', -); - -export const IcRoundSettingsSuggest = createIconifyIcon( - 'ic:round-settings-suggest', -); - -export const IcRoundArrowBackIosNew = createIconifyIcon( - 'ic:round-arrow-back-ios-new', -); - -export const IcRoundMultipleStop = createIconifyIcon('ic:round-multiple-stop'); - -export const IcRoundTableView = createIconifyIcon('ic:round-table-view'); - -export const IcRoundRefresh = createIconifyIcon('ic:round-refresh'); - -export const IcRoundCreditScore = createIconifyIcon('ic:round-credit-score'); - -export const IcRoundLock = createIconifyIcon('ic:round-lock'); diff --git a/packages/@core/shared/icons/src/mdi.ts b/packages/@core/shared/icons/src/mdi.ts index 1d3e2928..9f83455d 100644 --- a/packages/@core/shared/icons/src/mdi.ts +++ b/packages/@core/shared/icons/src/mdi.ts @@ -2,8 +2,6 @@ import { createIconifyIcon } from './create-icon'; export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc'); -export const MdiLoading = createIconifyIcon('mdi:loading'); - export const MdiWechat = createIconifyIcon('mdi:wechat'); export const MdiGithub = createIconifyIcon('mdi:github'); @@ -16,34 +14,6 @@ export const MdiPin = createIconifyIcon('mdi:pin'); export const MdiPinOff = createIconifyIcon('mdi:pin-off'); -export const MdiFormatHorizontalAlignLeft = createIconifyIcon( - 'mdi:format-horizontal-align-left', -); - -export const MdiFormatHorizontalAlignRight = createIconifyIcon( - 'mdi:format-horizontal-align-right', -); - -export const MdiArrowExpandHorizontal = createIconifyIcon( - 'mdi:arrow-expand-horizontal', -); - export const MdiMenuClose = createIconifyIcon('mdi:menu-close'); export const MdiMenuOpen = createIconifyIcon('mdi:menu-open'); - -export const MdiDockLeft = createIconifyIcon('mdi:dock-left'); - -export const MdiDockRight = createIconifyIcon('mdi:dock-right'); - -export const MdiDockBottom = createIconifyIcon('mdi:dock-bottom'); - -export const MdiDriveDocument = createIconifyIcon('mdi:drive-document'); - -export const MdiMoonAndStars = createIconifyIcon('mdi:moon-and-stars'); - -export const MdiEditBoxOutline = createIconifyIcon('mdi:edit-box-outline'); - -export const MdiQuestionMarkCircleOutline = createIconifyIcon( - 'mdi:question-mark-circle-outline', -); diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue index e6816130..35c1b0cd 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue +++ b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue @@ -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" > - + diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue index ca189af2..e70e81d4 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue +++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue @@ -12,7 +12,7 @@ interface Props { const props = withDefaults(defineProps(), { fixed: true, - height: 30, + height: 38, }); const style = computed((): CSSProperties => { diff --git a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue index 8af0c72e..6f5f7e26 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue +++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue @@ -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" > - - + + diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue index 0d82cd98..146ba94e 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -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) { diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue index ddf022cf..01908689 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue @@ -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" > - + diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue index f1b88dc3..0cf1a3e8 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue @@ -1,7 +1,7 @@ diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue b/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue index 578b48f6..9140c470 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue @@ -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)); }); diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue index 8b57cc06..4cbd3e17 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue @@ -1,7 +1,7 @@