'menu颜色调整、tag样式跳转'

src/layout/components/AppMain.vue

@@ -20,26 +20,28 @@ const cachedViews = computed(() => tagsView.cachedViews);
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
+$fixed-header-offset: $navbarHeight + $tagsBarHeight;
+
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - #{$navbarHeight});
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: $navbarHeight;
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - #{$fixed-header-offset});
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: $fixed-header-offset;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -132,6 +132,8 @@ function logout() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
 ul {
   list-style: none;
   margin: 0;
@@ -141,8 +143,9 @@ ul {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  background: $headerBarBg;
+  border-bottom: 1px solid #c5ced9;
+  box-shadow: none;
 
   .hamburger-container {
     line-height: 46px;
@@ -153,7 +156,7 @@ ul {
     -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.025);
+      background: rgba(64, 158, 255, 0.08);
     }
   }
 
@@ -183,7 +186,7 @@ ul {
         transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+          background: rgba(64, 158, 255, 0.08);
         }
       }
     }

src/layout/components/Sidebar/Logo.vue

@@ -51,7 +51,7 @@ const { logo } = toRefs(state);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #ebf1f6;
   text-align: center;
   overflow: hidden;
 
@@ -68,7 +68,7 @@ const { logo } = toRefs(state);
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: #303133;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;

src/layout/components/TagsView/ScrollPane.vue

@@ -116,13 +116,22 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
 .scroll-container {
+  height: 100%;
+
   .el-scrollbar__bar {
     bottom: 0px;
   }
 
   .el-scrollbar__wrap {
-    height: 49px;
+    height: $tagsBarHeight;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+    white-space: nowrap;
+    box-sizing: border-box;
   }
 }
 

src/layout/components/TagsView/index.vue

@@ -299,34 +299,52 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
+$tag-border: #c5ced9;
+$tag-inactive-bg: #dfe5ec;
+$tag-item-height: 40px;
+
 .tags-view__container {
-  height: 34px;
+  height: $tagsBarHeight;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  background: $headerBarBg;
+  border-bottom: 1px solid $tag-border;
+  box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
+  box-sizing: border-box;
 
   .tags-view__wrapper {
+    height: 100%;
+
+    :deep(.scroll-container) {
+      height: 100%;
+    }
+
     .tags-view__item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       position: relative;
+      z-index: 0;
       cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
+      min-height: $tag-item-height;
+      height: $tag-item-height;
+      line-height: 1.25;
+      border: 1px solid $tag-border;
+      color: #606266;
+      background: $tag-inactive-bg;
+      padding: 0 18px;
+      font-size: 14px;
+      margin-left: -1px;
+      text-decoration: none;
+      vertical-align: bottom;
+      box-sizing: border-box;
 
       &:first-of-type {
-        margin-left: 15px;
+        margin-left: 16px;
       }
 
       &:last-of-type {
-        margin-right: 15px;
+        margin-right: 16px;
       }
 
       &:hover {
@@ -334,30 +352,52 @@ onMounted(() => {
       }
 
       &.active {
-        background-color: var(--el-color-primary);
-        color: var(--el-color-primary-light-9);
-        border-color: var(--el-color-primary);
+        z-index: 1;
+        background: #fff;
+        color: var(--el-color-primary);
+        border-color: $tag-border;
+        border-bottom-color: #fff;
+        margin-bottom: -1px;
+        padding-bottom: 1px;
+        font-weight: 600;
+        box-shadow: 0 -1px 0 rgba(64, 158, 255, 0.2);
+
         &::before {
           content: '';
-          background: #fff;
-          display: inline-block;
+          flex-shrink: 0;
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          position: relative;
-          margin-right: 5px;
+          background: var(--el-color-primary);
+          margin-right: 8px;
         }
       }
 
       .icon-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
-        text-align: center;
+        color: inherit;
+        font-size: 12px;
+
+        :deep(.svg-icon) {
+          vertical-align: middle;
+        }
 
         &:hover {
-          background-color: #ccc;
-          color: #fff;
+          background-color: rgba(0, 0, 0, 0.08);
+          color: var(--el-color-primary);
         }
       }
+
+      &.active .icon-close:hover {
+        background-color: rgba(64, 158, 255, 0.15);
+        color: var(--el-color-primary);
+      }
     }
   }