From f86a43977ed9be2f47a1cc44781af8455cda295c Mon Sep 17 00:00:00 2001
From: chenxi <2465950588@qq.com>
Date: Sat, 26 Oct 2024 02:17:39 -0700
Subject: [PATCH] =?UTF-8?q?fix(docs):=20=E4=BF=AE=E5=A4=8D=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3loading=E5=B1=82=E7=BA=A7=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/src/style.css                   |  2 ++
 .../sites/src/views/components/components.vue  | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css
index 09d30b8b78..d2702b80f9 100644
--- a/examples/sites/src/style.css
+++ b/examples/sites/src/style.css
@@ -13,7 +13,9 @@ b, strong {
   --docs-tabs-header-zindex: 100;
   --docs-float-settings-zindex: 999;
   --docs-header-zindex: 200;
+  --docs-header-zindex-highlight: 2002;
   --docs-layout-sider-zindex: 201;
+  --docs-layout-sider-zindex-highlight: 2001;
 }
 
 .tinyui-design-header {
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 9dc8354445..537fe650cf 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 一个组件的文档:  描述md + demos + apis -->
-  <header class="flex-horizontal docs-header">
+  <header :class="['flex-horizontal', 'docs-header', cmpId === 'loading' && 'docs-header-highlight']">
     <div class="docs-title-wrap">
       <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
       <version-tip
@@ -95,7 +95,13 @@
               </div>
             </div>
           </div>
-          <tiny-tabs v-else v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+          <tiny-tabs
+            v-else
+            v-model="activeTab"
+            ref="demoTabs"
+            :class="['docs-content-tabs', cmpId === 'loading' && 'docs-content-tabs-highlight']"
+            @click="onTabsClick"
+          >
             <tiny-tab-item :title="i18nByKey('demos')" name="demos">
               <!-- demos列表 -->
               <template v-if="currJson?.demos?.length">
@@ -769,6 +775,10 @@ export default defineComponent({
   background-color: #fff;
   box-shadow: 12px 0 20px 6px rgba(0, 0, 0, 0.06);
 
+  &.docs-header-highlight {
+    z-index: var(--docs-header-zindex-highlight);
+  }
+
   .docs-title-wrap {
     flex: 1;
     min-width: var(--layout-content-main-min-width);
@@ -817,6 +827,10 @@ export default defineComponent({
     --tv-Tabs-header-font-active-text-color: #2f5bea;
     --tv-Tabs-item-active-border-color: #2f5bea;
 
+    &.docs-content-tabs-highlight :deep(.tiny-tabs__header) {
+      z-index: var(--docs-layout-sider-zindex-highlight);
+    }
+
     flex: 1;
     transition: all ease-in-out 0.3s;
     min-width: var(--layout-content-main-min-width);