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

frontend/src/components/svg-icon/svg-icon.vue

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

frontend/src/components/system-upgrade/index.vue

@@ -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
+        <el-badge is-dot class="item" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
-            is-dot
-            class="item"
-            v-if="version !== 'Waiting' && globalStore.hasNewVersion"
-            style="margin-top: -6px"
-        >
             <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>

frontend/src/layout/components/AppFooter.vue

@@ -1,11 +1,7 @@
 <template>
-    <div class="footer flx-justify-between">
+    <div class="footer">
-        <div class="footer-left">
+        <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2023 FIT2CLOUD 飞致云</a>
-            <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2023 FIT2CLOUD 飞致云</a>
+        <SystemUpgrade :footer="true" />
-        </div>
-        <div class="footer-right">
-            <SystemUpgrade :footer="true" />
-        </div>
     </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;

frontend/src/layout/components/Sidebar/components/Collapse.vue

@@ -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;
+    display: flex;
-    border-top: 1px solid #e4e7ed;
+    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;

frontend/src/layout/components/Sidebar/components/Logo.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="logo flx-center">
+    <div class="logo">
-        <img :src="getLogoUrl(isCollapse)" alt="" />
+        <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;

frontend/src/layout/components/Sidebar/components/SubItem.vue

@@ -1,22 +1,18 @@
 <template>
     <template v-for="subItem in menuList" :key="subItem.path">
-        <el-sub-menu
+        <el-sub-menu v-if="subItem?.children?.length > 1" :index="subItem.path" popper-class="sidebar-container-popper">
-            v-if="subItem.children && subItem.children.length > 1"
-            :index="subItem.path"
-            popper-class="sidebar-container-popper"
-        >
             <template #title>
-                <el-icon class="sub-icon">
+                <el-icon>
-                    <SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
+                    <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>

frontend/src/layout/components/Sidebar/index.scss

@@ -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;
+            height: 46px;
-            border-radius: 4px !important;
+            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;
     }
 }

frontend/src/layout/components/Sidebar/index.vue

@@ -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 isString(meta.activeMenu) ? meta.activeMenu : path;
-        return meta.activeMenu;
-    }
-    return 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 && screenWidth.value < 1200) menuStore.setCollapse();
-            if (isCollapse.value === true && 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>

frontend/src/layout/index.vue

@@ -123,12 +123,9 @@ onMounted(() => {
 .main-container {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    flex-basis: auto;
     position: relative;
-    min-height: 100%;
+    height: 100vh;
-    height: calc(100vh);
+    transition: margin-left 0.3s;
-    transition: margin-left 0.28s;
     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;