Skip to content

Commit 7e9c4a6

Browse files
kailong321200875kailong321200875
committed
perf: 优化使用离线图标后运行慢问题
1 parent 4b43c87 commit 7e9c4a6

File tree

39 files changed

+2466
-2412
lines changed

39 files changed

+2466
-2412
lines changed

‎.env.base

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
1717
VITE_USE_MOCK=true
1818

1919
# 是否使用在线图标
20-
VITE_USE_ONLINE_ICON=true
20+
VITE_USE_ONLINE_ICON=true

‎.env.dev

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ VITE_USE_MOCK=true
3535
VITE_USE_CSS_SPLIT=true
3636

3737
# 是否使用在线图标
38-
VITE_USE_ONLINE_ICON=true
38+
VITE_USE_ONLINE_ICON=true

‎.env.gitee

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ VITE_USE_MOCK=true
3535
VITE_USE_CSS_SPLIT=true
3636

3737
# 是否使用在线图标
38-
VITE_USE_ONLINE_ICON=true
38+
VITE_USE_ONLINE_ICON=true

‎.env.pro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ VITE_USE_MOCK=true
3535
VITE_USE_CSS_SPLIT=true
3636

3737
# 是否使用在线图标
38-
VITE_USE_ONLINE_ICON=false
38+
VITE_USE_ONLINE_ICON=false

‎.env.test

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ VITE_USE_MOCK=true
3535
VITE_USE_CSS_SPLIT=false
3636

3737
# 是否使用在线图标
38-
VITE_USE_ONLINE_ICON=true
38+
VITE_USE_ONLINE_ICON=true

‎mock/menu/index.mock.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default [
2626
title: '首页',
2727
meta: {
2828
title: '首页',
29-
icon: 'ant-design:dashboard-filled',
29+
icon: 'vi-ant-design:dashboard-filled',
3030
alwaysShow: true
3131
},
3232
children: [
@@ -90,7 +90,7 @@ export default [
9090
component: '#',
9191
meta: {
9292
title: '文档',
93-
icon: 'clarity:document-solid'
93+
icon: 'vi-clarity:document-solid'
9494
},
9595
name: 'ExternalLink',
9696
status: Mock.Random.integer(0, 1),
@@ -125,7 +125,7 @@ export default [
125125
title: '菜单',
126126
meta: {
127127
title: '菜单',
128-
icon: 'carbon:skill-level-advanced'
128+
icon: 'vi-carbon:skill-level-advanced'
129129
},
130130
children: [
131131
{
@@ -214,7 +214,7 @@ export default [
214214
title: '综合示例',
215215
meta: {
216216
title: '综合示例',
217-
icon: 'ep:management',
217+
icon: 'vi-ep:management',
218218
alwaysShow: true
219219
},
220220
children: [

‎mock/role/index.mock.ts

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const adminList = [
1212
name: 'Dashboard',
1313
meta: {
1414
title: 'router.dashboard',
15-
icon: 'ant-design:dashboard-filled',
15+
icon: 'vi-ant-design:dashboard-filled',
1616
alwaysShow: true
1717
},
1818
children: [
@@ -49,7 +49,7 @@ const adminList = [
4949
name: 'DocumentLink',
5050
meta: {
5151
title: 'router.document',
52-
icon: 'clarity:document-solid'
52+
icon: 'vi-clarity:document-solid'
5353
}
5454
}
5555
]
@@ -66,7 +66,7 @@ const adminList = [
6666
name: 'GuideDemo',
6767
meta: {
6868
title: 'router.guide',
69-
icon: 'cib:telegram-plane'
69+
icon: 'vi-cib:telegram-plane'
7070
}
7171
}
7272
]
@@ -78,7 +78,7 @@ const adminList = [
7878
name: 'ComponentsDemo',
7979
meta: {
8080
title: 'router.component',
81-
icon: 'bx:bxs-component',
81+
icon: 'vi-bx:bxs-component',
8282
alwaysShow: true
8383
},
8484
children: [
@@ -358,7 +358,7 @@ const adminList = [
358358
name: 'Function',
359359
meta: {
360360
title: 'router.function',
361-
icon: 'ri:function-fill',
361+
icon: 'vi-ri:function-fill',
362362
alwaysShow: true
363363
},
364364
children: [
@@ -406,7 +406,7 @@ const adminList = [
406406
name: 'Hooks',
407407
meta: {
408408
title: 'hooks',
409-
icon: 'ic:outline-webhook',
409+
icon: 'vi-ic:outline-webhook',
410410
alwaysShow: true
411411
},
412412
children: [
@@ -467,7 +467,7 @@ const adminList = [
467467
name: 'Level',
468468
meta: {
469469
title: 'router.level',
470-
icon: 'carbon:skill-level-advanced'
470+
icon: 'vi-carbon:skill-level-advanced'
471471
},
472472
children: [
473473
{
@@ -526,7 +526,7 @@ const adminList = [
526526
name: 'Example',
527527
meta: {
528528
title: 'router.example',
529-
icon: 'ep:management',
529+
icon: 'vi-ep:management',
530530
alwaysShow: true
531531
},
532532
children: [
@@ -594,7 +594,7 @@ const adminList = [
594594
name: 'Error',
595595
meta: {
596596
title: 'router.errorPage',
597-
icon: 'ci:error',
597+
icon: 'vi-ci:error',
598598
alwaysShow: true
599599
},
600600
children: [
@@ -631,7 +631,7 @@ const adminList = [
631631
name: 'Authorization',
632632
meta: {
633633
title: 'router.authorization',
634-
icon: 'eos-icons:role-binding',
634+
icon: 'vi-eos-icons:role-binding',
635635
alwaysShow: true
636636
},
637637
children: [
@@ -762,7 +762,7 @@ const menus = [
762762
id: 1,
763763
meta: {
764764
title: '首页',
765-
icon: 'ant-design:dashboard-filled',
765+
icon: 'vi-ant-design:dashboard-filled',
766766
alwaysShow: true
767767
},
768768
children: [
@@ -795,7 +795,7 @@ const menus = [
795795
component: '#',
796796
meta: {
797797
title: '文档',
798-
icon: 'clarity:document-solid'
798+
icon: 'vi-clarity:document-solid'
799799
},
800800
name: 'ExternalLink',
801801
status: Mock.Random.integer(0, 1),
@@ -821,7 +821,7 @@ const menus = [
821821
id: 6,
822822
meta: {
823823
title: '菜单',
824-
icon: 'carbon:skill-level-advanced'
824+
icon: 'vi-carbon:skill-level-advanced'
825825
},
826826
children: [
827827
{
@@ -898,7 +898,7 @@ const menus = [
898898
id: 12,
899899
meta: {
900900
title: '综合示例',
901-
icon: 'ep:management',
901+
icon: 'vi-ep:management',
902902
alwaysShow: true
903903
},
904904
children: [
@@ -990,7 +990,7 @@ const menus = [
990990
id: 1,
991991
meta: {
992992
title: '首页',
993-
icon: 'ant-design:dashboard-filled',
993+
icon: 'vi-ant-design:dashboard-filled',
994994
alwaysShow: true
995995
},
996996
children: [
@@ -1025,7 +1025,7 @@ const menus = [
10251025
component: '#',
10261026
meta: {
10271027
title: '文档',
1028-
icon: 'clarity:document-solid'
1028+
icon: 'vi-clarity:document-solid'
10291029
},
10301030
name: 'ExternalLink',
10311031
status: Mock.Random.integer(0, 1),
@@ -1051,7 +1051,7 @@ const menus = [
10511051
id: 6,
10521052
meta: {
10531053
title: '菜单',
1054-
icon: 'carbon:skill-level-advanced'
1054+
icon: 'vi-carbon:skill-level-advanced'
10551055
},
10561056
children: [
10571057
{
@@ -1130,7 +1130,7 @@ const menus = [
11301130
id: 12,
11311131
meta: {
11321132
title: '综合示例',
1133-
icon: 'ep:management',
1133+
icon: 'vi-ep:management',
11341134
alwaysShow: true
11351135
},
11361136
children: [

‎scripts/icon.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import fs from 'fs-extra'
33
import inquirer from 'inquirer'
44
import chalk from 'chalk'
55
import pkg from '../package.json'
6+
import { ICON_PREFIX } from '../src/constants'
67

78
interface Icon {
89
name: string
@@ -52,11 +53,12 @@ async function generateIcon() {
5253
const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`))
5354
if (data) {
5455
const { prefix } = data
55-
const icons = Object.keys(data.icons).map((item) => `${prefix}:${item}`)
56+
const prefixName = `${ICON_PREFIX}${prefix}`
57+
const icons = Object.keys(data.icons).map((item) => `${prefixName}:${item}`)
5658

5759
await fs.writeFileSync(
5860
path.join('src/components/IconPicker/src/data', `icons.${prefix}.ts`),
59-
`export default ${JSON.stringify({ name: info.name, prefix, icons })}`
61+
`export default ${JSON.stringify({ name: info.name, prefix: prefixName, icons })}`
6062
)
6163
// ↓分类处理完成，push类型名称
6264
prefixSet.push(prefix)

‎src/components/Collapse/src/Collapse.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const toggleCollapse = () => {
2626
<div :class="prefixCls" @click="toggleCollapse">
2727
<Icon
2828
:size="18"
29-
:icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
29+
:icon="collapse ? 'vi-ant-design:menu-unfold-outlined' : 'vi-ant-design:menu-fold-outlined'"
3030
:color="color"
3131
class="cursor-pointer"
3232
/>

‎src/components/ContentWrap/src/ContentWrap.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ defineProps({
2222
<template #content>
2323
<div class="max-w-200px">{{ message }}</div>
2424
</template>
25-
<Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
25+
<Icon class="ml-5px" icon="vi-bi:question-circle-fill" :size="14" />
2626
</ElTooltip>
2727
<div class="flex pl-20px flex-grow">
2828
<slot name="header"></slot>

‎src/components/Descriptions/src/Descriptions.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,14 @@ export default defineComponent({
9797
{props.title}
9898
{props.message ? (
9999
<ElTooltip content={props.message} placement="right">
100-
<Icon icon="bi:question-circle-fill" class="ml-5px" size={14} />
100+
<Icon icon="vi-bi:question-circle-fill" class="ml-5px" size={14} />
101101
</ElTooltip>
102102
) : null}
103103
</div>
104104
</div>
105-
{props.collapse ? <Icon icon={show.value ? 'ep:arrow-down' : 'ep:arrow-up'} /> : null}
105+
{props.collapse ? (
106+
<Icon icon={show.value ? 'vi-ep:arrow-down' : 'vi-ep:arrow-up'} />
107+
) : null}
106108
</div>
107109
) : null}
108110

‎src/components/Dialog/src/Dialog.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,16 @@ const dialogStyle = computed(() => {
7878
<Icon
7979
v-if="fullscreen"
8080
class="cursor-pointer is-hover !h-54px mr-10px"
81-
:icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
81+
:icon="
82+
isFullscreen ? 'vi-radix-icons:exit-full-screen' : 'vi-radix-icons:enter-full-screen'
83+
"
8284
color="var(--el-color-info)"
8385
hover-color="var(--el-color-primary)"
8486
@click="toggleFull"
8587
/>
8688
<Icon
8789
class="cursor-pointer is-hover !h-54px"
88-
icon="ep:close"
90+
icon="vi-ep:close"
8991
hover-color="var(--el-color-primary)"
9092
color="var(--el-color-info)"
9193
@click="close"

‎src/components/Icon/src/Icon.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ElIcon } from 'element-plus'
44
import { propTypes } from '@/utils/propTypes'
55
import { useDesign } from '@/hooks/web/useDesign'
66
import { Icon } from '@iconify/vue'
7+
import { ICON_PREFIX } from '@/constants'
78
89
const { getPrefixCls } = useDesign()
910
@@ -37,6 +38,10 @@ const getIconifyStyle = computed(() => {
3738
color
3839
}
3940
})
41+
42+
const getIconName = computed(() => {
43+
return props.icon.startsWith(ICON_PREFIX) ? props.icon.replace(ICON_PREFIX, '') : props.icon
44+
})
4045
</script>
4146

4247
<template>
@@ -46,7 +51,7 @@ const getIconifyStyle = computed(() => {
4651
</svg>
4752

4853
<template v-else>
49-
<Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
54+
<Icon v-if="isUseOnline" :icon="getIconName" :style="getIconifyStyle" />
5055
<div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
5156
</template>
5257
</ElIcon>

0 commit comments

Comments
 (0)