From 9a66a901a27caea62f5bfd1918fb4296cacc0221 Mon Sep 17 00:00:00 2001
From: way <1904628089@qq.com>
Date: Thu, 30 May 2024 09:07:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=B0=B7=E6=AD=8C?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E9=A1=B5=E7=AD=BE=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=AE=B9=E5=99=A8padding-t?=
 =?UTF-8?q?op?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/lay-content/index.vue | 15 ++++++--
 src/layout/components/lay-tag/index.scss    | 39 +++++++++++++++++++++
 src/layout/components/lay-tag/index.vue     |  1 +
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/lay-content/index.vue b/src/layout/components/lay-content/index.vue
index 56bdd136c4..c1c12c97a6 100644
--- 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
index b47fd480f4..2c82919087 100644
--- 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,7 +315,17 @@
     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;
     }
@@ -315,6 +333,10 @@
     .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
index 44879285cf..63dac712ab 100644
--- 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>