twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 将本地图标全部按需引入，首屏加载减少 61 个图标资源，首屏加载再次变快 (#389)

Browse Source 
* perf: 优化图标，将本地图标按需引入，首屏加载减少 `61` 个图标资源，首屏加载再次变快
This commit is contained in:
RealityBoy
2022-11-30 12:39:12 +08:00
committed by GitHub
parent d2b1bd5b44
commit c7ab236e10
63 changed files with 4761 additions and 2259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/layout/components/navbar.vue
View File

@@ -7,6 +7,9 @@ import Breadcrumb from "./sidebar/breadCrumb.vue";
import topCollapse from "./sidebar/topCollapse.vue";
import { useTranslationLang } from "../hooks/useTranslationLang";
import globalization from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
const {
layout,
@@ -62,7 +65,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<IconifyIconOffline
class="check-zh"
v-show="locale === 'zh'"
icon="check"
:icon="Check"
/>
简体中文
</el-dropdown-item>
@@ -72,7 +75,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
@@ -92,7 +95,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<IconifyIconOffline
icon="logout-circle-r-line"
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
@@ -105,7 +108,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
:title="t('buttons.hssystemSet')"
@click="onPanel"
>
<IconifyIconOffline icon="setting" />
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>

3
src/layout/components/notice/index.vue
View File

@@ -2,6 +2,7 @@
import { ref } from "vue";
import { noticesData } from "./data";
import NoticeList from "./noticeList.vue";
import Bell from "@iconify-icons/ep/bell";
const noticesNum = ref(0);
const notices = ref(noticesData);
@@ -15,7 +16,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
<span class="dropdown-badge navbar-bg-hover select-none">
<el-badge :value="noticesNum" :max="99">
<span class="header-notice-icon">
<IconifyIconOffline icon="bell" />
<IconifyIconOffline :icon="Bell" />
</span>
</el-badge>
</span>

3
src/layout/components/panel/index.vue
View File

@@ -2,6 +2,7 @@
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import { emitter } from "@/utils/mitt";
import Close from "@iconify-icons/ep/close";
const show = ref<Boolean>(false);
const target = ref(null);
@@ -25,7 +26,7 @@ emitter.on("openPanel", () => {
<span title="关闭配置">
<IconifyIconOffline
class="dark:text-white"
icon="close"
:icon="Close"
@click="show = !show"
/>
</span>

6
src/layout/components/search/components/SearchFooter.vue
View File

@@ -5,8 +5,8 @@
确认
</span>
<span class="search-footer-item">
<IconifyIconOffline icon="arrow-up-line" class="icon" />
<IconifyIconOffline icon="arrow-down-line" class="icon" />
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
切换
</span>
<span class="search-footer-item">
@@ -17,6 +17,8 @@
</template>
<script setup lang="ts">
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
</script>

3
src/layout/components/search/components/SearchModal.vue
View File

@@ -9,6 +9,7 @@ import { transformI18n } from "@/plugins/i18n";
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
import { ref, watch, computed, nextTick, shallowRef } from "vue";
import { usePermissionStoreHook } from "@/store/modules/permission";
import Search from "@iconify-icons/ep/search";
interface Props {
/** 弹窗显隐 */
@@ -148,7 +149,7 @@ onKeyStroke("ArrowDown", handleDown);
>
<template #prefix>
<span class="el-input__icon">
<IconifyIconOffline icon="search" />
<IconifyIconOffline :icon="Search" />
</span>
</template>
</el-input>

3
src/layout/components/search/components/SearchResult.vue
View File

@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
const { t } = useI18n();
@@ -67,7 +68,7 @@ function handleTo() {
@click="handleTo"
@mouseenter="handleMouse(item)"
>
<component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
<component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
<span class="result-item-title">{{ t(item.meta?.title) }}</span>
<enterOutlined />
</div>

4
src/layout/components/search/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import { SearchModal } from "./components";
import { useBoolean } from "../../hooks/useBoolean";
import Search from "@iconify-icons/ep/search";
const { bool: show, toggle } = useBoolean();
function handleSearch() {
toggle();
@@ -12,7 +14,7 @@ function handleSearch() {
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
@click="handleSearch"
>
<IconifyIconOffline icon="search" />
<IconifyIconOffline :icon="Search" />
</div>
<SearchModal v-model:value="show" />
</template>

6
src/layout/components/setting/index.vue
View File

@@ -30,6 +30,8 @@ import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Check from "@iconify-icons/ep/check";
import Logout from "@iconify-icons/ri/logout-circle-r-line";
const router = useRouter();
const { device } = useNav();
@@ -299,7 +301,7 @@ nextTick(() => {
:size="17"
:color="getThemeColor(item.themeColor)"
>
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</el-icon>
</li>
</ul>
@@ -380,7 +382,7 @@ nextTick(() => {
@click="onReset"
>
<IconifyIconOffline
icon="fa-sign-out"
:icon="Logout"
width="15"
height="15"
style="margin-right: 4px"

11
src/layout/components/sidebar/horizontal.vue
View File

@@ -7,6 +7,9 @@ import { useNav } from "@/layout/hooks/useNav";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission";
import globalization from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
const menuRef = ref();
@@ -76,7 +79,7 @@ watch(
@click="translationCh"
>
<span class="check-zh" v-show="locale === 'zh'">
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</span>
简体中文
</el-dropdown-item>
@@ -86,7 +89,7 @@ watch(
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
@@ -106,7 +109,7 @@ watch(
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<IconifyIconOffline
icon="logout-circle-r-line"
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
@@ -119,7 +122,7 @@ watch(
:title="t('buttons.hssystemSet')"
@click="onPanel"
>
<IconifyIconOffline icon="setting" />
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>

4
src/layout/components/sidebar/leftCollapse.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import { useDark } from "@pureadmin/utils";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
interface Props {
isActive: boolean;
@@ -27,7 +29,7 @@ const toggleClick = () => {
:content="props.isActive ? '点击折叠' : '点击展开'"
>
<IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
:icon="props.isActive ? MenuFold : MenuUnfold"
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
@click="toggleClick"
/>

11
src/layout/components/sidebar/mixNav.vue
View File

@@ -9,6 +9,9 @@ import { getParentPaths, findRouteByPath } from "@/router/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission";
import globalization from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
const menuRef = ref();
const defaultActive = ref(null);
@@ -108,7 +111,7 @@ watch(
@click="translationCh"
>
<span class="check-zh" v-show="locale === 'zh'">
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</span>
简体中文
</el-dropdown-item>
@@ -118,7 +121,7 @@ watch(
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
@@ -138,7 +141,7 @@ watch(
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<IconifyIconOffline
icon="logout-circle-r-line"
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
@@ -151,7 +154,7 @@ watch(
:title="t('buttons.hssystemSet')"
@click="onPanel"
>
<IconifyIconOffline icon="setting" />
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>

18
src/layout/components/sidebar/sidebarItem.vue
View File

@@ -7,6 +7,11 @@ import { transformI18n } from "@/plugins/i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
import ArrowUp from "@iconify-icons/ep/arrow-up";
import EpArrowDown from "@iconify-icons/ep/arrow-down";
import ArrowLeft from "@iconify-icons/ep/arrow-left";
import ArrowRight from "@iconify-icons/ep/arrow-right";
const { layout, isCollapse } = useNav();
const props = defineProps({
@@ -78,7 +83,13 @@ const getSpanStyle = computed(() => {
});
const expandCloseIcon = computed(() => {
return getConfig()?.MenuArrowIconNoTransition ? "expand-close-icon" : "";
if (!getConfig()?.MenuArrowIconNoTransition) return "";
return {
"expand-close-icon": useRenderIcon(EpArrowDown),
"expand-open-icon": useRenderIcon(ArrowUp),
"collapse-close-icon": useRenderIcon(ArrowRight),
"collapse-open-icon": useRenderIcon(ArrowLeft)
};
});
const onlyOneChild: childrenType = ref(null);
@@ -220,11 +231,8 @@ function resolvePath(routePath) {
<el-sub-menu
v-else
ref="subMenu"
v-bind="expandCloseIcon"
:index="resolvePath(props.item.path)"
v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
:expand-open-icon="useRenderIcon('ep-arrow-up')"
:collapse-close-icon="useRenderIcon('ep-arrow-right')"
:collapse-open-icon="useRenderIcon('ep-arrow-left')"
>
<template #title>
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">

5
src/layout/components/sidebar/topCollapse.vue
View File

@@ -1,4 +1,7 @@
<script setup lang="ts">
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
interface Props {
isActive: boolean;
}
@@ -23,7 +26,7 @@ const toggleClick = () => {
@click="toggleClick"
>
<IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
:icon="props.isActive ? MenuFold : MenuUnfold"
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
/>
</div>

26
src/layout/components/tag/index.vue
View File

@@ -11,6 +11,13 @@ import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
import CloseBold from "@iconify-icons/ep/close-bold";
const {
route,
router,
@@ -284,10 +291,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
toggle();
setTimeout(() => {
if (isFullscreen.value) {
tagsViews[6].icon = "exit-fullscreen";
tagsViews[6].icon = ExitFullscreen;
tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
} else {
tagsViews[6].icon = "fullscreen";
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = $t("buttons.hswholeFullScreen");
}
}, 100);
@@ -297,10 +304,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
onContentFullScreen();
setTimeout(() => {
if (pureSetting.hiddenSideBar) {
tagsViews[7].icon = "exit-fullscreen";
tagsViews[7].icon = ExitFullscreen;
tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
} else {
tagsViews[7].icon = "fullscreen";
tagsViews[7].icon = Fullscreen;
tagsViews[7].text = $t("buttons.hscontentFullScreen");
}
}, 100);
@@ -496,7 +503,7 @@ onMounted(() => {
<template>
<div ref="containerDom" class="tags-view" v-if="!showTags">
<span v-show="isShowArrow" class="arrow-left">
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
<IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
</span>
<div ref="scrollbarDom" class="scroll-container">
<div class="tab select-none" ref="tabDom" :style="getTabStyle">
@@ -530,7 +537,7 @@ onMounted(() => {
class="el-icon-close"
@click.stop="deleteMenu(item)"
>
<IconifyIconOffline icon="close-bold" />
<IconifyIconOffline :icon="CloseBold" />
</span>
<div
:ref="'schedule' + index"
@@ -541,10 +548,7 @@ onMounted(() => {
</div>
</div>
<span v-show="isShowArrow" class="arrow-right">
<IconifyIconOffline
icon="arrow-right-s-line"
@click="handleScroll(-200)"
/>
<IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
</span>
<!-- 右键菜单按钮 -->
<transition name="el-zoom-in-top">
@@ -573,7 +577,7 @@ onMounted(() => {
@command="handleCommand"
>
<span class="arrow-down">
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
<IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
</span>
<template #dropdown>
<el-dropdown-menu>