1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-09-20 15:45:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 解决页面像素不对齐的问题 (#2165)

Browse source
This commit is contained in:
ali-pay 2023-09-04 12:53:09 +08:00 committed by GitHub
parent 78999f97db
commit 1a6d237d0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 54 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/svg-icon/svg-icon.vue
View file

@ -16,7 +16,7 @@ const props = defineProps({
},
color: {
type: String,
default: '#409eff',
default: '#005eeb',
},
});
// 图标在 iconfont 中的名字

14
frontend/src/components/system-upgrade/index.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div class="flx-center">
<span v-if="props.footer">
<el-button type="primary" link @click="toForum">
<span>{{ $t('setting.forum') }}</span>
@ -11,24 +11,18 @@
<el-divider direction="vertical" />
</span>
<span class="version">{{ $t('setting.currentVersion') + version }}</span>
<el-badge
is-dot
class="item"
v-if="version !== 'Waiting' && globalStore.hasNewVersion"
style="margin-top: -6px"
>
<el-badge is-dot class="item" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
<el-button type="primary" link @click="onLoadUpgradeInfo">
<span style="font-size: 14px">（{{ $t('setting.hasNewVersion') }}）</span>
<span>（{{ $t('setting.hasNewVersion') }}）</span>
</el-button>
</el-badge>
<el-button
v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
style="margin-top: -2px"
type="primary"
link
@click="onLoadUpgradeInfo"
>
（{{ $t('setting.upgradeCheck') }}）
<span>（{{ $t('setting.upgradeCheck') }}）</span>
</el-button>
<el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
</div>

14
frontend/src/layout/components/AppFooter.vue
View file

@ -1,11 +1,7 @@
<template>
<div class="footer flx-justify-between">
<div class="footer-left">
<a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2023 FIT2CLOUD 飞致云</a>
</div>
<div class="footer-right">
<SystemUpgrade :footer="true" />
</div>
<div class="footer">
<a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2023 FIT2CLOUD 飞致云</a>
<SystemUpgrade :footer="true" />
</div>
</template>
@ -15,6 +11,10 @@ import SystemUpgrade from '@/components/system-upgrade/index.vue';
<style scoped lang="scss">
.footer {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
background: #ffffff;
border-top: 1px solid #e4e7ed;
box-sizing: border-box;

11
frontend/src/layout/components/Sidebar/components/Collapse.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="menu-collapse">
<el-icon class="collapse-icon" :size="25" @click="menuStore.setCollapse()">
<component :is="isCollapse ? 'expand' : 'fold'"></component>
<component :is="isCollapse ? 'expand' : 'fold'" />
</el-icon>
</div>
</template>
@ -10,18 +10,19 @@
import { computed } from 'vue';
import { MenuStore } from '@/store/modules/menu';
const menuStore = MenuStore();
const isCollapse = computed((): boolean => menuStore.isCollapse);
const isCollapse = computed(() => menuStore.isCollapse);
</script>
<style scoped lang="scss">
.menu-collapse {
height: 48px;
border-top: 1px solid #e4e7ed;
display: flex;
align-items: center;
box-sizing: border-box;
border-top: 1px solid #e4e7ed;
height: 48px;
}
.collapse-icon {
margin-top: 10px;
margin-left: 25px;
&:hover {
color: $primary-color;

10
frontend/src/layout/components/Sidebar/components/Logo.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="logo flx-center">
<img :src="getLogoUrl(isCollapse)" alt="" />
<div class="logo">
<img :src="getLogoUrl(isCollapse)" alt="logo" />
</div>
</template>
@ -22,10 +22,10 @@ const getLogoUrl = (isCollapse: boolean) => {
<style scoped lang="scss">
.logo {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
margin: 5px 0;
padding: 0 15px;
img {
object-fit: contain;
height: 40px;

18
frontend/src/layout/components/Sidebar/components/SubItem.vue
View file

@ -1,22 +1,18 @@
<template>
<template v-for="subItem in menuList" :key="subItem.path">
<el-sub-menu
v-if="subItem.children && subItem.children.length > 1"
:index="subItem.path"
popper-class="sidebar-container-popper"
>
<el-sub-menu v-if="subItem?.children?.length > 1" :index="subItem.path" popper-class="sidebar-container-popper">
<template #title>
<el-icon class="sub-icon">
<SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
<el-icon>
<SvgIcon :iconName="(subItem.meta?.icon as string)" />
</el-icon>
<span class="sub-span">{{ $t(subItem.meta?.title as string) }}</span>
<span>{{ $t(subItem.meta?.title as string) }}</span>
</template>
<SubItem :menuList="subItem.children" />
</el-sub-menu>
<el-menu-item v-else-if="subItem.children && subItem.children.length === 1" :index="subItem.children[0].path">
<el-menu-item v-else-if="subItem?.children?.length === 1" :index="subItem.children[0].path">
<el-icon>
<SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
<SvgIcon :iconName="(subItem.meta?.icon as string)" />
</el-icon>
<template #title>
<span>{{ $t(subItem.meta?.title as string) }}</span>
@ -25,7 +21,7 @@
<el-menu-item v-else :index="subItem.path">
<el-icon v-if="subItem.meta?.icon">
<SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
<SvgIcon :iconName="(subItem.meta?.icon as string)" />
</el-icon>
<template #title>
<span v-if="subItem.meta?.icon">{{ $t(subItem.meta?.title as string) }}</span>

19
frontend/src/layout/components/Sidebar/index.scss
View file

@ -1,16 +1,15 @@
.el-menu {
background: none !important;
user-select: none;
background: none;
width: 100%;
padding: 0 7px;
.el-menu-item {
border-radius: 4px !important;
border-radius: 4px;
background-color: var(--el-menu-item-bg-color);
margin: 6px 0;
height: 46px !important;
height: 46px;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
box-sizing: border-box;
min-width: auto;
padding-left: 22px;
&:hover {
.el-icon {
@ -28,8 +27,6 @@
&::before {
position: absolute;
border-radius: 4px;
top: 14px;
bottom: 15px;
left: 12px;
width: 4px;
height: 14px;
@ -53,8 +50,8 @@
.el-sub-menu__title {
background-color: var(--el-menu-item-bg-color);
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
height: 44px;
border-radius: 4px !important;
height: 46px;
border-radius: 4px;
&:hover {
.el-icon {
color: $primary-color;
@ -69,7 +66,7 @@
padding: 0;
.el-menu-item {
box-shadow: none;
padding-left: 35px !important;
padding-left: 35px;
}
}
}
@ -77,7 +74,7 @@
.sidebar-container-popper {
.el-menu {
background-color: var(--el-menu-bg-color) !important;
background-color: var(--el-menu-bg-color);
padding: 4px 8px;
}
}

33
frontend/src/layout/components/Sidebar/index.vue
View file

@ -6,7 +6,7 @@
element-loading-svg-view-box="-10, -10, 50, 50"
element-loading-background="rgba(122, 122, 122, 0.01)"
>
<Logo :isCollapse="isCollapse"></Logo>
<Logo :isCollapse="isCollapse" />
<el-scrollbar>
<el-menu
:default-active="activeMenu"
@ -14,12 +14,11 @@
:collapse="isCollapse"
:collapse-transition="false"
:unique-opened="true"
popper-class="sidebar-container-popper"
>
<SubItem :menuList="routerMenus"></SubItem>
<SubItem :menuList="routerMenus" />
<el-menu-item :index="''">
<el-icon @click="logout">
<SvgIcon :iconName="'p-logout'" :className="'svg-icon'"></SvgIcon>
<SvgIcon :iconName="'p-logout'" />
</el-icon>
<template #title>
<span @click="logout">{{ $t('commons.login.logout') }}</span>
@ -45,27 +44,25 @@ import i18n from '@/lang';
import { ElMessageBox } from 'element-plus';
import { GlobalStore } from '@/store';
import { MsgSuccess } from '@/utils/message';
import { isString } from '@vueuse/core';
const route = useRoute();
const menuStore = MenuStore();
const globalStore = GlobalStore();
const activeMenu = computed((): string => {
const activeMenu = computed(() => {
const { meta, path } = route;
if (typeof meta.activeMenu === 'string') {
return meta.activeMenu;
}
return path;
return isString(meta.activeMenu) ? meta.activeMenu : path;
});
const isCollapse = computed((): boolean => menuStore.isCollapse);
const routerMenus = computed((): RouteRecordRaw[] => menuStore.menuList);
const screenWidth = ref<number>(0);
const screenWidth = ref(0);
const listeningWindow = () => {
window.onresize = () => {
return (() => {
screenWidth.value = document.body.clientWidth;
if (isCollapse.value === false && screenWidth.value < 1200) menuStore.setCollapse();
if (isCollapse.value === true && screenWidth.value > 1200) menuStore.setCollapse();
if (!isCollapse.value && screenWidth.value < 1200) menuStore.setCollapse();
if (isCollapse.value && screenWidth.value > 1200) menuStore.setCollapse();
})();
};
};
@ -89,34 +86,28 @@ const logout = () => {
const systemLogOut = async () => {
await logOutApi();
};
onMounted(async () => {
onMounted(() => {
menuStore.setMenuList(menuList);
});
</script>
<style lang="scss">
@import './index.scss';
.sidebar-container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: url(@/assets/images/menu-bg.png) var(--el-menu-bg-color) no-repeat top;
transition: all 0.3s ease;
.el-scrollbar {
height: calc(100% - 55px);
flex: 1;
.el-menu {
flex: 1;
overflow: auto;
overflow-x: hidden;
border-right: none;
}
}
.sidebar-container-footer {
height: 30px;
background-color: #c0c0c0;
text-align: center;
}
}
</style>

13
frontend/src/layout/index.vue
View file

@ -123,12 +123,9 @@ onMounted(() => {
.main-container {
display: flex;
flex-direction: column;
flex: 1;
flex-basis: auto;
position: relative;
min-height: 100%;
height: calc(100vh);
transition: margin-left 0.28s;
height: 100vh;
transition: margin-left 0.3s;
margin-left: var(--panel-menu-width);
background-color: #f4f4f4;
overflow-x: hidden;
@ -136,13 +133,11 @@ onMounted(() => {
.app-main {
padding: 20px;
flex: 1;
flex-basis: auto;
overflow: auto;
}
.app-sidebar {
transition: width 0.28s;
transition: width 0.3s;
width: var(--panel-menu-width) !important;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
@ -174,7 +169,7 @@ onMounted(() => {
margin-left: 0px;
}
.app-sidebar {
transition: transform 0.28s;
transition: transform 0.3s;
width: var(--panel-menu-width) !important;
background: #ffffff;
z-index: 9999;