perf: layout显示用户信息优化

This commit is contained in:
xiaoxian521 2022-04-14 09:43:39 +08:00
parent 1a565095e9
commit 56f9dc85e7
7 changed files with 403 additions and 368 deletions

View File

@ -31,9 +31,9 @@
"@logicflow/core": "0.7.1",
"@logicflow/extension": "0.7.1",
"@pureadmin/components": "^1.0.6",
"@vueuse/core": "^8.2.0",
"@vueuse/core": "^8.2.5",
"@vueuse/motion": "^2.0.0-beta.12",
"@vueuse/shared": "^8.2.0",
"@vueuse/shared": "^8.2.5",
"animate.css": "^4.1.1",
"axios": "^0.26.1",
"cropperjs": "^1.5.12",
@ -57,8 +57,8 @@
"responsive-storage": "^1.0.11",
"rgb-hex": "^4.0.0",
"v-contextmenu": "3.0.0",
"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.33",
"vue": "^3.2.32",
"vue-i18n": "^9.2.0-beta.35",
"vue-json-pretty": "^2.0.2",
"vue-router": "^4.0.14",
"vue-types": "^4.1.1",
@ -77,7 +77,7 @@
"@iconify-icons/fluent": "^1.2.5",
"@iconify-icons/ri": "^1.2.1",
"@iconify-icons/uil": "^1.2.1",
"@iconify/vue": "^3.2.0",
"@iconify/vue": "^3.2.1",
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@pureadmin/theme": "^0.0.1",
"@types/element-resize-detector": "1.1.3",
@ -90,9 +90,9 @@
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.10.2",
"@typescript-eslint/parser": "^5.10.2",
"@vitejs/plugin-legacy": "^1.8.0",
"@vitejs/plugin-legacy": "^1.8.1",
"@vitejs/plugin-vue": "^2.3.1",
"@vitejs/plugin-vue-jsx": "^1.3.9",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"autoprefixer": "^10.4.2",
@ -121,12 +121,12 @@
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"typescript": "^4.6.3",
"unplugin-element-plus": "^0.3.1",
"vite": "^2.9.1",
"unplugin-element-plus": "^0.3.4",
"vite": "^2.9.2",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^0.0.7",
"vite-plugin-style-import": "1.4.1",
"vite-plugin-windicss": "^1.8.3",
"vite-plugin-windicss": "^1.8.4",
"vite-svg-loader": "2.2.0",
"vue-eslint-parser": "^8.2.0",
"windicss": "^3.5.1"

729
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -24,6 +24,7 @@ const {
toggleSideBar,
pureApp,
username,
avatarsStyle,
getDropdownItemStyle
} = useNav();
@ -93,8 +94,8 @@ function translationEn() {
<!-- 退出登陆 -->
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<img :src="avatars" />
<p>{{ username }}</p>
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">
@ -169,7 +170,6 @@ function translationEn() {
}
.el-dropdown-link {
width: 100px;
height: 48px;
padding: 10px;
display: flex;

View File

@ -30,6 +30,7 @@ const {
handleResize,
menuSelect,
username,
avatarsStyle,
getDropdownItemStyle
} = useNav();
@ -114,8 +115,8 @@ function translationEn() {
<!-- 退出登陆 -->
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<img :src="avatars" />
<p>{{ username }}</p>
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">

View File

@ -33,6 +33,7 @@ const {
resolvePath,
pureApp,
username,
avatarsStyle,
getDropdownItemStyle
} = useNav();
@ -166,8 +167,8 @@ function translationEn() {
<!-- 退出登陆 -->
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<img :src="avatars" />
<p>{{ username }}</p>
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">

View File

@ -26,6 +26,10 @@ export function useNav() {
};
});
const avatarsStyle = computed(() => {
return username ? { marginRight: "10px" } : "";
});
const isCollapse = computed(() => {
return !pureApp.getSidebarStatus;
});
@ -117,6 +121,7 @@ export function useNav() {
isCollapse,
pureApp,
username,
avatarsStyle,
getDropdownItemStyle
};
}

View File

@ -241,7 +241,6 @@
}
.el-dropdown-link {
width: 100px;
height: 48px;
padding: 10px;
display: flex;