feat: 调整谷歌风格页签暗黑模式样式和容器padding-top

pure-admin · May 30, 2024 · 9a66a90 · 9a66a90
1 parent c3a2959
commit 9a66a90
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/layout/components/lay-content/index.vue b/src/layout/components/lay-content/index.vue
@@ -6,6 +6,7 @@ import { useGlobal, isNumber } from "@pureadmin/utils";
 import BackTopIcon from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import { useTags } from "@/layout/hooks/useTag";
 
 const props = defineProps({
   fixedHeader: Boolean
@@ -14,6 +15,8 @@ const props = defineProps({
 const { t } = useI18n();
 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
 
+const { showModel } = useTags();
+
 const isKeepAlive = computed(() => {
   return $config?.KeepAlive;
 });
@@ -51,9 +54,17 @@ const getMainWidth = computed(() => {
 const getSectionStyle = computed(() => {
   return [
     hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 81px;" : "",
+    !hideTabs.value && layout
+      ? showModel.value == "chrome"
+        ? "padding-top: 87px;"
+        : "padding-top: 81px;"
+      : "",
     hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
+    !hideTabs.value && !layout.value
+      ? showModel.value == "chrome"
+        ? "padding-top: 87px;"
+        : "padding-top: 81px;"
+      : "",
     props.fixedHeader
       ? ""
       : `padding-top: 0;${

diff --git a/src/layout/components/lay-tag/index.scss b/src/layout/components/lay-tag/index.scss
@@ -190,6 +190,10 @@
   color: #fff;
   box-shadow: 0 0 0.7px #888;
 
+  .chrome-tab {
+    z-index: 10;
+  }
+
   .chrome-tab__bg {
     color: var(--el-color-primary-light-9) !important;
   }
@@ -205,6 +209,10 @@
       background-color: var(--el-color-primary);
     }
   }
+
+  .chrome-tab-divider {
+    opacity: 0;
+  }
 }
 
 .arrow-left,
@@ -307,14 +315,28 @@
     padding: 0;
   }
 
+  .chrome-tab-divider {
+    position: absolute;
+    right: 7px;
+    width: 1px;
+    height: 14px;
+    background-color: #2b2d2f;
+  }
+
   &:hover {
+    z-index: 10;
+
     .chrome-tab__bg {
       color: #dee1e6;
     }
 
     .tag-title {
       color: #1f1f1f;
     }
+
+    .chrome-tab-divider {
+      opacity: 0;
+    }
   }
 
   .chrome-tab__bg {
@@ -343,3 +365,20 @@
     }
   }
 }
+
+// 暗黑模式下chrome-tab的样式
+html.dark .chrome-tab {
+  .tag-title {
+    color: #666;
+  }
+
+  &:hover {
+    .chrome-tab__bg {
+      color: #333;
+    }
+
+    .tag-title {
+      color: #adadad;
+    }
+  }
+}
diff --git a/src/layout/components/lay-tag/index.vue b/src/layout/components/lay-tag/index.vue
@@ -624,6 +624,7 @@ onBeforeUnmount(() => {
             >
               <IconifyIconOffline :icon="Close" />
             </span>
+            <span class="chrome-tab-divider" />
           </div>
         </div>
       </div>