feat: 样式调整

lib/saas/view/system/application.vue

@@ -12,13 +12,15 @@
         :menuList="newMenu"
         :initSiderKey="selectedSiderKeys"
         :initSiderOpenKey="selectedSiderOpenKeys" />
-      <a-layout>
+      <a-layout class="ns-application-layout-main">
         <newNsTags v-if="configStore.useHistoryTag" />
         <ns-tags v-else />
-        <!-- <NsBreadcrumb v-else :breadcrumbList="breadcrumbList" /> -->
+        <NsBreadcrumb :breadcrumbList="breadcrumbList" />
         <a-layout-content class="ns-content">
           <!-- <transition name="fade-slide" mode="out-in"> -->
+          <!-- <div> -->
           <ns-content />
+          <!-- </div> -->
           <!-- </transition> -->
         </a-layout-content>
       </a-layout>
@@ -322,21 +324,29 @@
       flex-direction: row;
     }
   }
-
+  .ns-application-layout-main {
+    padding-top: calc(@layout-header-height + @ns-nav-shutters-height * 2);
+    height: 100vh;
+    overflow: auto;
+  }
   .ns-content {
     position: relative;
     flex: 1 1 auto;
-    padding-top: 80px;
-    background-color: #e5ebf0;
+    padding: @ns-gap;
+    // padding-top: calc(@layout-header-height + @ns-nav-shutters-height);
+    background-color: @ns-content-bg;
     > div {
       height: 100%;
-      background-color: #fff;
-      margin: 0 16px 16px 16px;
+      background-color: @white;
+      border-radius: @ns-border-radius;
+      overflow-y: auto;
+      overflow-x: hidden;
+      // margin: 0 16px 16px 16px;
     }
     .ns-content-main {
-      // margin: @ns-content-padding;
+      // margin: @ns-gap;
       min-height: calc(100% - 48px);
-      height: calc(100% - 16px);
+      // height: calc(100% - 16px);
       // background-color: @white;
     }
     .ns-view {

lib/saas/view/system/layout/breadcrumb.vue

@@ -85,14 +85,14 @@
 <style lang="less" scoped>
   .NsBreadcrumb {
     width: 100%;
-    padding: 0 16px;
-    min-height: 42px;
+    padding: 0 @ns-gap;
+    min-height: @ns-nav-shutters-height;
     background: #ffffff;
     display: flex;
     align-items: center;
     position: fixed;
-    top: 48px;
-    z-index: 505;
+    top: calc(@layout-header-height + @ns-nav-shutters-height);
+    z-index: 5;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
 </style>

lib/saas/view/system/layout/header.vue

@@ -9,11 +9,13 @@
         style="width: 192px; height: 48px; object-fit: contain" />
       <ns-icon v-else name="headerLogin" class="headerLogin" style="width: auto; height: 48px" />
     </div>
-    <div>
-      <component v-if="headerSlot" :is="headerSlot.component" v-bind="headerSlot.componentProps" />
-    </div>
+
     <div class="header-menu">
-      <a-menu style="width: 100%" mode="horizontal" :selectedKeys="initHeaderKey">
+      <a-menu
+        v-if="menuList?.length"
+        style="width: 100%"
+        mode="horizontal"
+        :selectedKeys="initHeaderKey">
         <a-menu-item v-for="item in menuList" :key="item.name">
           <div @click="tochildren(item)">
             <ns-icon :name="item.meta.icon" size="16" /><span>{{ item.meta.title }}</span>
@@ -61,17 +63,17 @@
           </template>
         </template>
       </a-menu>
+      <div v-else>
+        <div v-if="configStore.projectName" class="projectTitle">{{ configStore.projectName }}</div>
+      </div>
     </div>
     <div class="nsHeader_action">
-      <div class="projectName action" v-if="showProject">
-        {{ projectName ? projectName : enterpriseName }}
+      <div>
+        <component
+          v-if="headerSlot"
+          :is="headerSlot.component"
+          v-bind="headerSlot.componentProps" />
       </div>
-      <div
-        class="projectName action"
-        v-if="['服务管理平台', '报表中心'].includes(configStore.resourceInfo?.application?.label)"
-        @click="backDoor"
-        >{{ '返回门户' }}</div
-      >
       <div v-if="bellInfo.isShow" class="bells action" @click="backMessage">
         <a-badge :count="messageCount > 99 ? 99 : messageCount">
           <ns-icon name="bells" size="32" />
@@ -80,7 +82,7 @@
       <a-dropdown :trigger="['hover']">
         <div class="userName action">
           <!-- <img src="/asset/image/login/adminIcon.png" /> -->
-          <ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" />
+          <!-- <ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" /> -->
           <span
             style="
               display: block;
@@ -424,11 +426,22 @@
     }
   }
   :deep(.ant-menu-submenu-title) {
-    color: rgba(255, 255, 255, 0.9);
+    // color: rgba(255, 255, 255, 0.9);
+  }
+  .header-menu {
+    flex: 1;
+    .projectTitle {
+      font-size: 28px;
+      font-weight: 900;
+      letter-spacing: 2.33px;
+      line-height: 40px;
+      color: @primary-color;
+      text-align: left;
+    }
   }
   :deep(.header-menu .ant-menu-title-content) {
     div {
-      color: rgba(255, 255, 255, 0.9);
+      // color: rgba(255, 255, 255, 0.9);
       .ns-icon {
         margin-right: 7px;
         transform: translateY(2px);
@@ -436,7 +449,7 @@
     }
   }
   :deep(.ant-menu-submenu-title .ant-menu-title-content) {
-    color: rgba(255, 255, 255, 0.9);
+    // color: rgba(255, 255, 255, 0.9);
     .ns-icon {
       margin-right: 7px;
       transform: translateY(2px);
@@ -447,10 +460,13 @@
     padding: 0;
     position: fixed;
     top: 0;
-    z-index: 5;
+    z-index: 999;
     width: 100%;
-    background-image: url(/asset/image/header.png);
-    background-size: 100% 100%;
+    // background-image: url(/asset/image/header.png);
+    // background-size: 100% 100%;
+    box-shadow: @ns-box-shadow;
+    display: flex;
+    align-items: center;
   }
 
   :deep(.ant-badge-count) {
@@ -504,10 +520,10 @@
   }
 
   .nsHeader_action {
-    color: rgba(255, 255, 255, 0.9);
+    color: @black;
     padding-left: 16px;
     padding-right: 16px;
-    width: 208px;
+    // width: 208px;
     display: flex;
     align-items: center;
     justify-content: right;

lib/saas/view/system/layout/sider.vue

@@ -4,12 +4,13 @@
   <div class="ns-left-menu-space" :class="{ 'ns-left-menu-space-collapsed': collapsed }">
     <a-layout-sider
       class="ns-left-menu"
-      :width="208"
       :collapsedWidth="48"
+      :width="sideWidth"
       :collapsed="collapsed"
       breakpoint="lg"
       :trigger="null"
       v-if="menuList && menuList[0] && menuList[0].children">
+      {{ $refs.getComputedStyle }}
       <a-menu
         mode="inline"
         :inlineIndent="16"
@@ -21,9 +22,9 @@
           v-if="item.children !== undefined && !item.meta.hideChildren && !item.isHide"
           :key="item.name">
           <template #title>
-            <span role="img" class="anticon"
-              ><ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16"
-            /></span>
+            <span role="img" class="anticon">
+              <ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" />
+            </span>
             <span>{{ item.meta.title }}</span>
           </template>
           <!-- 跳转外部链接 -->
@@ -37,27 +38,31 @@
                   target="_blank"
                   rel="noopener noreferrer">
                   {{ newOpen.name }}
-                </a></a-menu-item
-              >
+                </a>
+              </a-menu-item>
             </div>
           </div>
           <div v-else>
             <div v-for="sitem in checkAuthList(item.children)" :key="sitem.name">
               <a-menu-item
                 v-if="(sitem.children === undefined || sitem.meta.hideChildren) && !sitem.isHide"
-                :key="sitem.name"
-                ><router-link style="margin-left: 8px" :to="{ name: sitem.name }">{{
-                  sitem.meta.title
-                }}</router-link></a-menu-item
-              >
+                :key="sitem.name">
+                <router-link style="margin-left: 8px" :to="{ name: sitem.name }">
+                  {{ sitem.meta.title }}
+                </router-link>
+              </a-menu-item>
               <a-sub-menu
                 class="threeSubMenu"
                 v-if="sitem.children !== undefined && !sitem.meta.hideChildren && !sitem.isHide"
                 :key="sitem.name">
                 <template #title>
-                  <span role="img" style="margin-left: 8px" class="anticon" v-show="sitem.meta.icon"
-                    ><ns-icon :name="sitem.meta.icon" size="16"
-                  /></span>
+                  <span
+                    role="img"
+                    style="margin-left: 8px"
+                    class="anticon"
+                    v-show="sitem.meta.icon">
+                    <ns-icon :name="sitem.meta.icon" size="16" />
+                  </span>
                   <span>{{ sitem.meta.title }}</span>
                 </template>
                 <div v-for="ditem in checkAuthList(sitem.children)" :key="ditem.name">
@@ -70,9 +75,9 @@
                         role="img"
                         style="margin-left: 8px"
                         class="anticon"
-                        v-show="ditem.meta.icon"
-                        ><ns-icon :name="ditem.meta.icon" size="16"
-                      /></span>
+                        v-show="ditem.meta.icon">
+                        <ns-icon :name="ditem.meta.icon" size="16" />
+                      </span>
                       <span>{{ ditem.meta.title }}</span>
                     </template>
                     <div
@@ -82,11 +87,11 @@
                         :class="
                           initSiderKey.includes(fiveFloorItem.name) ? 'ant-menu-item-selected' : ''
                         "
-                        v-if="fiveFloorItem.meta?.type !== 'op'"
-                        ><router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }">{{
-                          fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : ''
-                        }}</router-link></a-menu-item
-                      >
+                        v-if="fiveFloorItem.meta?.type !== 'op'">
+                        <router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }">
+                          {{ fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' }}
+                        </router-link>
+                      </a-menu-item>
                     </div>
                   </a-sub-menu>
 
@@ -113,7 +118,6 @@
               <ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" />
             </span>
             <span style="margin-left: 8px">{{ item.meta.title }}</span>
-            <!-- </span> -->
           </router-link>
         </a-menu-item>
       </a-menu>
@@ -128,7 +132,7 @@
 
 <script lang="ts">
   import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-  import { defineComponent, inject, ref, watchEffect } from 'vue';
+  import { computed, defineComponent, inject, onMounted, ref, watchEffect } from 'vue';
   import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
   import { authorizationService } from '/nerv-base/store/modules/authorization-service';
   import { Emitter } from 'mitt';
@@ -148,6 +152,10 @@
     setup: (props) => {
       const mittEmit = inject('mittEmit') as Emitter<emitEvents>;
       const router = useRouter();
+      const sideWidth = computed(() => {
+        return getComputedStyle(document.querySelector('.ns-left-menu-trigger')!).width;
+      });
+
       const dealRouter = (menuList, routerInfo) => {
         menuList?.forEach((item) => {
           if (item.name === routerInfo.name) {
@@ -204,45 +212,49 @@
         checkOpAuth,
         checkAuthList,
         checkAuth,
+        sideWidth,
       };
     },
   });
 </script>
 
 <style lang="less" scoped>
+  // :deep(.ant-layout-sider) {
+  //   width: @layout-sider-width !important;
+  //   max-width: @layout-sider-width !important;
+  // }
   .ns-left-menu {
     position: fixed;
     top: 0;
     left: 0;
     height: calc(100% - 40px);
-    // background-color: @white;
-    background-image: url(/asset/image/side.png);
+    background-color: @white;
+    // background-image: url(/asset/image/side.png);
     background-size: cover;
-    padding-top: 48px;
+    padding-top: calc(@layout-header-height + 12px);
     :deep(.ant-layout-sider-children) {
-      background-color: transparent;
+      // background-color: transparent;
       .ant-menu-root {
-        background-color: transparent;
+        // background-color: transparent;
       }
       .ant-menu-submenu-title {
-        // color: rgba(255, 255, 255, 0.9);
+        // color: @black;
         .ant-menu-submenu-arrow {
-          // color:inherit
-          // color: rgba(255, 255, 255, 0.9);
+          // color: @black;
         }
       }
       .ant-menu {
-        color: rgba(255, 255, 255, 0.9);
+        color: @black;
       }
       .ant-menu-item a {
-        color: rgba(255, 255, 255, 0.9);
+        // color: rgba(255, 255, 255, 0.9);
       }
       .ant-menu-submenu-expand-icon,
       .ant-menu-submenu-arrow {
-        color: rgba(255, 255, 255, 0.9);
+        // color: rgba(255, 255, 255, 0.9);
       }
       .ant-menu-sub.ant-menu-inline {
-        background-color: #001027;
+        // background-color: #001027;
       }
     }
   }
@@ -254,12 +266,14 @@
     margin-left: 8px !important;
   }
   .ns-left-menu-space {
-    width: 208px;
-    height: 100%;
-    background-color: #fff;
+    width: 100%;
+    height: auto;
+    z-index: 9;
+    box-shadow: @ns-box-shadow;
+    // background-color: #fff;
     overflow: hidden;
     transition: all 0.2s;
-    flex: 0 0 208px;
+    flex: 0 0 @layout-sider-width;
     &.ns-left-menu-space-collapsed {
       width: 48px;
       flex: 0 0 48px;
@@ -279,14 +293,14 @@
   }
 
   .ns-left-menu-trigger {
-    width: 208px;
+    width: @layout-sider-width;
     height: 40px;
     transition: all 0.2s;
     border-top: 1px solid rgba(0, 0, 0, 0.06);
     position: absolute;
     z-index: 999;
     cursor: pointer;
-    background: #163361;
+    // background: #163361;
     bottom: 0px;
     display: flex;
     align-items: center;
@@ -329,7 +343,7 @@
     position: absolute;
     width: 2px;
     height: 14px;
-    background: #fff;
+    // background: #fff;
     border: unset;
     top: 14px;
     left: 20px;
@@ -341,7 +355,7 @@
     position: absolute;
     width: 2px;
     height: 14px;
-    background: #fff;
+    // background: #fff;
     border: unset;
     top: 14px;
     left: 40px;
@@ -361,6 +375,6 @@
     border-radius: 4px;
   }
   :deep(.ns-left-menu .ant-layout-sider-children .ant-menu-submenu-arrow) {
-    color: rgba(255, 255, 255, 0.5);
+    // color: rgba(255, 255, 255, 0.5);
   }
 </style>

lib/saas/view/system/layout/tag/index.vue

@@ -266,7 +266,7 @@
     display: flex;
     align-items: center;
     position: fixed;
-    top: 48px;
+    top: @layout-header-height;
     z-index: 505;
   }
   #iframeApplication .ns-tabs {
@@ -281,7 +281,7 @@
     display: flex;
     align-items: center;
     position: fixed;
-    top: 48px;
+    top: @layout-header-height;
     z-index: 505;
   }
   :deep(.ant-tabs-nav) {

lib/saas/view/system/layout/tags.vue

@@ -1,7 +1,9 @@
 <!-- @format -->
 
 <template>
-  <div :class="leftMenuTrigger ? 'nav-shutters-collapsed' : 'nav-shutters'">
+  <div
+    class="nav-shutters-container"
+    :class="leftMenuTrigger ? 'nav-shutters-collapsed' : 'nav-shutters'">
     <div class="shutters-left">
       <ns-icon
         @click.stop="moveTags('right')"
@@ -17,11 +19,11 @@
             :id="selectTags.path === item.path ? 'ischoice' : ''">
             <span>{{ isdisabledl || isdisabledr ? item.title.substring(0, 4) : item.title }}</span>
             <ns-icon
-              style="min-width: 12px; min-height: 12px; color: rgba(0, 0, 0, 0.45)"
               v-if="item.path !== baseHeader.redirect"
               name="close"
-              @click="delTags($event, item)" /> </li
-        ></div>
+              @click="delTags($event, item)" />
+          </li>
+        </div>
       </ul>
     </div>
     <div class="shutters-right">
@@ -173,8 +175,8 @@
           if (str !== '') {
             offset = str.match(/\d+/)[0];
           }
-          this.left = offsetLeft + menuMinWidth * (i - 1) - 50 - offset;
-          this.top = offsetTop;
+          this.left = offsetLeft + menuMinWidth * (i - 1) - 30 - offset;
+          this.top = offsetTop - 20;
           this.visible = true;
         }
       },
@@ -276,29 +278,33 @@
 
 <style lang="less" scoped>
   .nav-shutters {
-    width: calc(100% - 208px);
+    width: calc(100% - @layout-sider-width);
     // padding: 0 12px;
-    min-height: 32px;
-    height: 32px;
+    min-height: @ns-nav-shutters-height;
+    height: @ns-nav-shutters-height;
     background: #ffffff;
     display: flex;
     align-items: center;
     position: fixed;
-    top: 48px;
+    top: @layout-header-height;
     z-index: 2;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .nav-shutters-collapsed {
     width: calc(100% - 40px);
     // padding: 0 12px;
-    min-height: 32px;
-    height: 32px;
+    min-height: @ns-nav-shutters-height;
+    height: @ns-nav-shutters-height;
     background: #ffffff;
     display: flex;
     align-items: center;
     position: fixed;
-    top: 48px;
-    z-index: 505;
+    top: @layout-header-height;
+    z-index: 10;
+  }
+  .nav-shutters-container {
+    display: flex;
+    align-items: center;
   }
   .shutters-left {
     height: @ns-nav-shutters-height;
@@ -312,8 +318,8 @@
     .icon_kj {
       mix-blend-mode: normal;
       cursor: pointer;
-      width: 12px !important;
-      height: 12px !important;
+      // width: 12px !important;
+      // height: 12px !important;
     }
   }
   .shutters-right {
@@ -327,8 +333,8 @@
     justify-content: center;
     .icon_kt {
       cursor: pointer;
-      width: 12px !important;
-      height: 12px !important;
+      // width: 12px !important;
+      // height: 12px !important;
       transform: rotateY(180deg);
     }
   }
@@ -339,8 +345,9 @@
   }
 
   .fatherTags {
-    width: calc(100% - 64px);
-    height: 31px;
+    flex: 1;
+    // width: calc(100% - 64px);
+    height: @ns-nav-shutters-height;
     min-width: 400px;
     overflow: hidden;
   }
@@ -395,10 +402,21 @@
     }
   }
   #ischoice {
-    background-color: #f5f9fb;
+    // background-color: #f5f9fb;
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      width: 30%;
+      height: 3px;
+      background-color: @primary-color;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
   #ischoice span {
-    color: @text-color !important;
+    color: @primary-color !important;
   }
   .checkBox {
     height: 200px;
@@ -419,7 +437,7 @@
     position: absolute;
     list-style-type: none;
     padding: 5px 0;
-    border-radius: 2px;
+    border-radius: @border-radius-base;
     font-size: 12px;
     font-weight: 400;
     color: #333;