Skip to content

Commit 20fb640

Browse files
nineaiyunineaiyu
committed
perf: 优化效果展示
1 parent 399359e commit 20fb640

9 files changed

Lines changed: 115 additions & 60 deletions

File tree

‎src/layout/components/lay-navbar/index.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script lang="ts" setup>
1+
<script setup lang="ts">
22
import { useNav } from "@/layout/hooks/useNav";
33
import LaySearch from "../lay-search/index.vue";
44
import LayNotice from "../lay-notice/index.vue";
@@ -35,8 +35,8 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
3535
<div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
3636
<LaySidebarTopCollapse
3737
v-if="device === 'mobile'"
38-
:is-active="pureApp.sidebar.opened"
3938
class="hamburger-container"
39+
:is-active="pureApp.sidebar.opened"
4040
@toggleClick="toggleSideBar"
4141
/>
4242

@@ -52,26 +52,28 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
5252
<LaySearch id="header-search" />
5353
<!-- 国际化 -->
5454
<el-dropdown id="header-translation" trigger="click">
55-
<GlobalizationIcon
56-
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
57-
/>
55+
<div
56+
class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
57+
>
58+
<IconifyIconOffline :icon="GlobalizationIcon" />
59+
</div>
5860
<template #dropdown>
5961
<el-dropdown-menu class="translation">
6062
<el-dropdown-item
61-
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
6263
:style="getDropdownItemStyle(locale, 'zh')"
64+
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
6365
@click="translationCh"
6466
>
6567
<IconifyIconOffline
6668
v-show="locale === 'zh'"
67-
:icon="Check"
6869
class="check-zh"
70+
:icon="Check"
6971
/>
7072
简体中文
7173
</el-dropdown-item>
7274
<el-dropdown-item
73-
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
7475
:style="getDropdownItemStyle(locale, 'en')"
76+
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
7577
@click="translationEn"
7678
>
7779
<span v-show="locale === 'en'" class="check-en">
@@ -112,8 +114,8 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
112114
</template>
113115
</el-dropdown>
114116
<span
117+
class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
115118
:title="t('buttons.systemSet')"
116-
class="set-icon navbar-bg-hover"
117119
@click="onPanel"
118120
>
119121
<IconifyIconOffline :icon="Setting" />

‎src/layout/components/lay-notice/index.vue‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts" setup>
22
import { computed, onMounted, ref } from "vue";
33
import NoticeList from "./components/noticeList.vue";
4-
import BellIcon from "~icons/ep/bell";
4+
import BellIcon from "~icons/lucide/bell";
55
import { userNoticeReadApi } from "@/api/user/notice";
66
import { TabItem } from "@/layout/components/lay-notice/data";
77
import { useRouter } from "vue-router";
@@ -131,6 +131,34 @@ const getLabel = computed(
131131
</template>
132132

133133
<style lang="scss" scoped>
134+
/* ”铃铛“摇晃衰减动画 */
135+
@keyframes pure-bell-ring {
136+
0%,
137+
100% {
138+
transform-origin: top;
139+
}
140+
141+
15% {
142+
transform: rotateZ(10deg);
143+
}
144+
145+
30% {
146+
transform: rotateZ(-10deg);
147+
}
148+
149+
45% {
150+
transform: rotateZ(5deg);
151+
}
152+
153+
60% {
154+
transform: rotateZ(-5deg);
155+
}
156+
157+
75% {
158+
transform: rotateZ(2deg);
159+
}
160+
}
161+
134162
.dropdown-badge {
135163
display: flex;
136164
align-items: center;
@@ -142,6 +170,12 @@ const getLabel = computed(
142170
.header-notice-icon {
143171
font-size: 18px;
144172
}
173+
174+
&:hover {
175+
.header-notice-icon svg {
176+
animation: pure-bell-ring 1s both;
177+
}
178+
}
145179
}
146180
147181
.dropdown-tabs {

‎src/layout/components/lay-search/index.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<script lang="ts" setup>
2-
import SearchModal from "./components/SearchModal.vue";
1+
<script setup lang="ts">
32
import { useBoolean } from "../../hooks/useBoolean";
3+
import SearchModal from "./components/SearchModal.vue";
44
55
const { bool: show, toggle } = useBoolean();
6-
76
function handleSearch() {
87
toggle();
98
}
@@ -12,7 +11,7 @@ function handleSearch() {
1211
<template>
1312
<div>
1413
<div
15-
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
14+
class="search-container navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
1615
@click="handleSearch"
1716
>
1817
<IconifyIconOffline icon="ri/search-line" />

‎src/layout/components/lay-sidebar/NavHorizontal.vue‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useNav } from "@/layout/hooks/useNav";
44
import LaySearch from "../lay-search/index.vue";
55
import LayNotice from "../lay-notice/index.vue";
66
import { responsiveStorageNameSpace } from "@/config";
7-
import { computed, nextTick, onMounted, ref } from "vue";
8-
import { isAllEmpty, storageLocal } from "@pureadmin/utils";
7+
import { ref, nextTick, computed, onMounted } from "vue";
8+
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
99
import { useTranslationLang } from "../../hooks/useTranslationLang";
1010
import { usePermissionStoreHook } from "@/store/modules/permission";
1111
import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
@@ -82,9 +82,11 @@ onMounted(() => {
8282
<LaySearch id="header-search" />
8383
<!-- 国际化 -->
8484
<el-dropdown id="header-translation" trigger="click">
85-
<GlobalizationIcon
86-
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
87-
/>
85+
<div
86+
class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
87+
>
88+
<IconifyIconOffline :icon="GlobalizationIcon" />
89+
</div>
8890
<template #dropdown>
8991
<el-dropdown-menu class="translation">
9092
<el-dropdown-item
@@ -121,14 +123,14 @@ onMounted(() => {
121123
<p v-if="username" class="dark:text-white">{{ username }}</p>
122124
</span>
123125
<template #dropdown>
126+
<el-dropdown-item @click="toAccountSettings">
127+
<IconifyIconOffline
128+
:icon="AccountSettingsIcon"
129+
style="margin: 5px"
130+
/>
131+
{{ t("menus.accountSettings") }}
132+
</el-dropdown-item>
124133
<el-dropdown-menu class="logout">
125-
<el-dropdown-item @click="toAccountSettings">
126-
<IconifyIconOffline
127-
:icon="AccountSettingsIcon"
128-
style="margin: 5px"
129-
/>
130-
{{ t("menus.accountSettings") }}
131-
</el-dropdown-item>
132134
<el-dropdown-item @click="logout">
133135
<IconifyIconOffline
134136
:icon="LogoutCircleRLine"
@@ -140,7 +142,7 @@ onMounted(() => {
140142
</template>
141143
</el-dropdown>
142144
<span
143-
class="set-icon navbar-bg-hover"
145+
class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
144146
:title="t('buttons.systemSet')"
145147
@click="onPanel"
146148
>

‎src/layout/components/lay-sidebar/NavMix.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<script lang="ts" setup>
1+
<script setup lang="ts">
22
import { isAllEmpty } from "@pureadmin/utils";
33
import { useNav } from "@/layout/hooks/useNav";
44
import { transformI18n } from "@/plugins/i18n";
55
import LaySearch from "../lay-search/index.vue";
66
import LayNotice from "../lay-notice/index.vue";
7-
import { nextTick, onMounted, ref, toRaw, watch } from "vue";
7+
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
88
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
9-
import { findRouteByPath, getParentPaths } from "@/router/utils";
9+
import { getParentPaths, findRouteByPath } from "@/router/utils";
1010
import { useTranslationLang } from "../../hooks/useTranslationLang";
1111
import { usePermissionStoreHook } from "@/store/modules/permission";
1212
import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
@@ -69,11 +69,11 @@ watch(
6969
>
7070
<el-menu
7171
ref="menuRef"
72-
:default-active="defaultActive"
73-
class="horizontal-header-menu"
72+
router
7473
mode="horizontal"
7574
popper-class="pure-scrollbar"
76-
router
75+
class="horizontal-header-menu"
76+
:default-active="defaultActive"
7777
>
7878
<el-menu-item
7979
v-for="route in usePermissionStoreHook().wholeMenus"
@@ -103,14 +103,16 @@ watch(
103103
<LaySearch id="header-search" />
104104
<!-- 国际化 -->
105105
<el-dropdown id="header-translation" trigger="click">
106-
<GlobalizationIcon
107-
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
108-
/>
106+
<div
107+
class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
108+
>
109+
<IconifyIconOffline :icon="GlobalizationIcon" />
110+
</div>
109111
<template #dropdown>
110112
<el-dropdown-menu class="translation">
111113
<el-dropdown-item
112-
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
113114
:style="getDropdownItemStyle(locale, 'zh')"
115+
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
114116
@click="translationCh"
115117
>
116118
<span v-show="locale === 'zh'" class="check-zh">
@@ -119,8 +121,8 @@ watch(
119121
简体中文
120122
</el-dropdown-item>
121123
<el-dropdown-item
122-
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
123124
:style="getDropdownItemStyle(locale, 'en')"
125+
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
124126
@click="translationEn"
125127
>
126128
<span v-show="locale === 'en'" class="check-en">
@@ -142,14 +144,14 @@ watch(
142144
<p v-if="username" class="dark:text-white">{{ username }}</p>
143145
</span>
144146
<template #dropdown>
147+
<el-dropdown-item @click="toAccountSettings">
148+
<IconifyIconOffline
149+
:icon="AccountSettingsIcon"
150+
style="margin: 5px"
151+
/>
152+
{{ t("menus.accountSettings") }}
153+
</el-dropdown-item>
145154
<el-dropdown-menu class="logout">
146-
<el-dropdown-item @click="toAccountSettings">
147-
<IconifyIconOffline
148-
:icon="AccountSettingsIcon"
149-
style="margin: 5px"
150-
/>
151-
{{ t("menus.accountSettings") }}
152-
</el-dropdown-item>
153155
<el-dropdown-item @click="logout">
154156
<IconifyIconOffline
155157
:icon="LogoutCircleRLine"
@@ -161,8 +163,8 @@ watch(
161163
</template>
162164
</el-dropdown>
163165
<span
166+
class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
164167
:title="t('buttons.systemSet')"
165-
class="set-icon navbar-bg-hover"
166168
@click="onPanel"
167169
>
168170
<IconifyIconOffline :icon="Setting" />

‎src/layout/components/lay-sidebar/components/SidebarFullScreen.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script lang="ts" setup>
1+
<script setup lang="ts">
22
import { ref, watch } from "vue";
33
import { useNav } from "@/layout/hooks/useNav";
44
@@ -24,7 +24,10 @@ watch(
2424
</script>
2525

2626
<template>
27-
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
27+
<span
28+
class="fullscreen-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
29+
@click="toggle"
30+
>
2831
<IconifyIconOffline :icon="screenIcon" />
2932
</span>
3033
</template>

‎src/style/index.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,18 @@
3535
.html-weakness {
3636
filter: invert(80%);
3737
}
38+
39+
/* 轻微缩小，再恢复原状的平滑缩放动画 */
40+
@keyframes pure-scale-bounce {
41+
0% {
42+
transform: scale(1);
43+
}
44+
45+
50% {
46+
transform: scale(0.9);
47+
}
48+
49+
100% {
50+
transform: scale(1);
51+
}
52+
}

‎src/style/sidebar.scss‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,15 @@
3434
}
3535

3636
.set-icon,
37-
.fullscreen-icon {
37+
.fullscreen-icon,
38+
.search-container,
39+
.globalization-icon {
3840
display: flex;
3941
align-items: center;
4042
justify-content: center;
4143
width: 40px;
4244
height: 48px;
45+
font-size: 18px;
4346
cursor: pointer;
4447
}
4548

@@ -449,7 +452,7 @@
449452
/* 搜索 */
450453
.search-container,
451454
/* 国际化 */
452-
.globalization,
455+
.globalization-icon,
453456
/* 全屏 */
454457
.fullscreen-icon,
455458
/* 消息通知 */
@@ -468,15 +471,6 @@
468471
color: var(--pure-theme-sub-menu-active-text);
469472
}
470473

471-
.globalization {
472-
width: 40px;
473-
height: 48px;
474-
padding: 11px;
475-
color: var(--pure-theme-sub-menu-active-text);
476-
cursor: pointer;
477-
outline: none;
478-
}
479-
480474
.el-dropdown-link {
481475
display: flex;
482476
align-items: center;
@@ -630,7 +624,7 @@ body[layout="vertical"] {
630624
/* 搜索 */
631625
.search-container,
632626
/* 国际化 */
633-
.globalization,
627+
.globalization-icon,
634628
/* 全屏 */
635629
.fullscreen-icon,
636630
/* 消息通知 */

‎src/style/tailwind.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,7 @@
4444
@utility navbar-bg-hover {
4545
@apply dark:text-white dark:hover:bg-[#242424]!;
4646
}
47+
48+
@utility animate-scale-bounce {
49+
animation: pure-scale-bounce 0.3s ease-in-out;
50+
}

0 commit comments

Comments
 (0)