perf: 移除 @pureadmin/components , 打包大小未启用压缩前减少 0.48 MB , 首屏请求减少 2.3 MB 的资源，请务必升级哦
This commit is contained in:
xiaoxian521
parent
6110be29a1
commit
b5f0ca52ce
@ -30,7 +30,6 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@pureadmin/components": "^1.1.0",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.8.0",
|
||||
"@pureadmin/utils": "^1.6.7",
|
||||
|
||||
44
pnpm-lock.yaml
generated
44
pnpm-lock.yaml
generated
@ -7,7 +7,6 @@ specifiers:
|
||||
"@iconify-icons/ep": ^1.2.7
|
||||
"@iconify-icons/ri": ^1.2.3
|
||||
"@iconify/vue": ^4.0.0
|
||||
"@pureadmin/components": ^1.1.0
|
||||
"@pureadmin/descriptions": ^1.1.0
|
||||
"@pureadmin/table": ^1.8.0
|
||||
"@pureadmin/theme": ^2.4.0
|
||||
@ -94,7 +93,6 @@ specifiers:
|
||||
|
||||
dependencies:
|
||||
"@ctrl/tinycolor": 3.4.1
|
||||
"@pureadmin/components": 1.1.0_vue@3.2.45
|
||||
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.25
|
||||
"@pureadmin/table": 1.8.0_element-plus@2.2.25
|
||||
"@pureadmin/utils": 1.6.7_aotapuqn7htzdjltsyimavekky
|
||||
@ -198,35 +196,6 @@ packages:
|
||||
"@jridgewell/trace-mapping": 0.3.17
|
||||
dev: true
|
||||
|
||||
/@ant-design/colors/6.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
|
||||
}
|
||||
dependencies:
|
||||
"@ctrl/tinycolor": 3.4.1
|
||||
dev: false
|
||||
|
||||
/@ant-design/icons-svg/4.2.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@ant-design/icons-vue/6.1.0_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ">=3.0.3"
|
||||
dependencies:
|
||||
"@ant-design/colors": 6.0.0
|
||||
"@ant-design/icons-svg": 4.2.1
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/@antfu/utils/0.6.3:
|
||||
resolution:
|
||||
{
|
||||
@ -1074,19 +1043,6 @@ packages:
|
||||
fastq: 1.13.0
|
||||
dev: true
|
||||
|
||||
/@pureadmin/components/1.1.0_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Y7FCUVQVkZ2P3K/3vLrfQOfpjbf8g0TDPUWuFUlaq6aIW3BRduiVfqn4k/r3TX6LtasxGvgnJ/TO9tGed5VlTg==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
"@ant-design/icons-svg": 4.2.1
|
||||
"@ant-design/icons-vue": 6.1.0_vue@3.2.45
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/@pureadmin/descriptions/1.1.1_element-plus@2.2.25:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@ -2,25 +2,16 @@
|
||||
import { ref } from "vue";
|
||||
import { noticesData } from "./data";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
const dropdownDom = ref();
|
||||
const activeKey = ref(noticesData[0].key);
|
||||
|
||||
const notices = ref(noticesData);
|
||||
|
||||
const noticesNum = ref(0);
|
||||
notices.value.forEach(notice => {
|
||||
noticesNum.value += notice.list.length;
|
||||
});
|
||||
const notices = ref(noticesData);
|
||||
const activeKey = ref(noticesData[0].key);
|
||||
|
||||
function tabClick() {
|
||||
(dropdownDom as any).value.handleOpen();
|
||||
}
|
||||
notices.value.map(v => (noticesNum.value += v.list.length));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
|
||||
<el-dropdown trigger="click" placement="bottom-end">
|
||||
<span class="dropdown-badge navbar-bg-hover select-none">
|
||||
<el-badge :value="noticesNum" :max="99">
|
||||
<span class="header-notice-icon">
|
||||
@ -30,34 +21,25 @@ function tabClick() {
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<Tabs
|
||||
centered
|
||||
class="dropdown-tabs"
|
||||
:tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
|
||||
v-model:activeKey="activeKey"
|
||||
@tabClick="tabClick"
|
||||
>
|
||||
<el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
|
||||
<template v-for="item in notices" :key="item.key">
|
||||
<TabPane :tab="`${item.name}(${item.list.length})`">
|
||||
<el-tab-pane
|
||||
:label="`${item.name}(${item.list.length})`"
|
||||
:name="`${item.key}`"
|
||||
>
|
||||
<el-scrollbar max-height="330px">
|
||||
<div class="noticeList-container">
|
||||
<NoticeList :list="item.list" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</TabPane>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</Tabs>
|
||||
</el-tabs>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.ant-tabs-dropdown {
|
||||
z-index: 2900 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-badge {
|
||||
display: flex;
|
||||
@ -73,30 +55,28 @@ function tabClick() {
|
||||
}
|
||||
|
||||
.dropdown-tabs {
|
||||
width: 336px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
|
||||
border-radius: 4px;
|
||||
width: 330px;
|
||||
|
||||
.noticeList-container {
|
||||
padding: 15px 24px 0 24px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-scroll) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.noticeList-container) {
|
||||
padding: 15px 24px 0 24px;
|
||||
// 如果上面的 notices 长度大于 3 请注释掉下面代码
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
padding: 0 36px 0 36px;
|
||||
}
|
||||
|
||||
// 如果上面的 notices 长度大于 3 请注释掉下面代码
|
||||
:deep(.el-tabs__active-bar) {
|
||||
margin: 0 36px 0 36px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,9 +18,7 @@ import "./style/reset.scss";
|
||||
// 导入公共样式
|
||||
import "./style/index.scss";
|
||||
import "element-plus/dist/index.css";
|
||||
import "@pureadmin/components/dist/index.css";
|
||||
import "@pureadmin/components/dist/theme.css";
|
||||
import "@pureadmin/components/dist/dark.scss";
|
||||
|
||||
// 导入字体图标
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
|
||||
@ -26,11 +26,6 @@ html.dark {
|
||||
filter: invert(0.9) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
background: var(--el-bg-color);
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.tags-view {
|
||||
.arrow-left,
|
||||
|
||||
33
src/utils/message.ts
Normal file
33
src/utils/message.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { type MessageHandler, ElMessage } from "element-plus";
|
||||
|
||||
// 更多配置请看：https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9
|
||||
|
||||
type messageTypes = "success" | "info" | "warning" | "error";
|
||||
|
||||
/**
|
||||
* `element-plus` 的 `info` 消息类型
|
||||
*/
|
||||
const message = (
|
||||
message: string,
|
||||
type = "info" as messageTypes,
|
||||
showClose = true,
|
||||
duration = 2000,
|
||||
center = false,
|
||||
grouping = false
|
||||
): MessageHandler => {
|
||||
return ElMessage({
|
||||
message,
|
||||
type,
|
||||
showClose,
|
||||
duration,
|
||||
center,
|
||||
grouping
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭 `element-plus` 的所有消息实例
|
||||
*/
|
||||
const closeAllMessage = (): void => ElMessage.closeAll();
|
||||
|
||||
export { message, closeAllMessage };
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import { initRouter } from "@/router/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useLayout } from "@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
@ -46,8 +46,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (res.success) {
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
message.success("登录成功");
|
||||
router.push("/");
|
||||
message("登录成功", "success");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
1
types/shims-vue.d.ts
vendored
1
types/shims-vue.d.ts
vendored
@ -10,5 +10,4 @@ declare module "*.scss" {
|
||||
}
|
||||
|
||||
declare module "@pureadmin/theme";
|
||||
declare module "@pureadmin/components";
|
||||
declare module "@pureadmin/theme/dist/browser-utils";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user