From de2aee711907f9898faa598244fc231bf190d697 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Mon, 22 Sep 2025 16:54:04 -0700
Subject: [PATCH] fix: resolve the issue of token style in the example

---
 examples/sites/src/components/anchor.vue      | 79 +++----------------
 .../sites/src/views/components-doc/common.vue | 73 ++++++++++++++---
 2 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/examples/sites/src/components/anchor.vue b/examples/sites/src/components/anchor.vue
index d972c02e69..c46a1eecc3 100644
--- a/examples/sites/src/components/anchor.vue
+++ b/examples/sites/src/components/anchor.vue
@@ -1,17 +1,16 @@
 <template>
-  <div v-if="links.length" class="cmp-page-anchor catalog">
-    <tiny-anchor
-      id="anchor"
-      :tiny_mode="isSaas ? 'pc' : 'mobile-first'"
-      :offset-top="56"
-      :links="links"
-      :is-affix="props.anchorAffix"
-      :type="isSaas ? 'line' : 'dot'"
-      container-id="#doc-layout-scroller"
-      @link-click="handleAnchorClick"
-    >
-    </tiny-anchor>
-  </div>
+  <tiny-anchor
+    id="anchor"
+    v-if="links.length"
+    :tiny_mode="isSaas ? 'pc' : 'mobile-first'"
+    :offset-top="56"
+    :links="links"
+    :is-affix="props.anchorAffix"
+    :type="isSaas ? 'line' : 'dot'"
+    container-id="#doc-layout-scroller"
+    @link-click="handleAnchorClick"
+  >
+  </tiny-anchor>
 </template>
 
 <script setup lang="ts">
@@ -68,56 +67,4 @@ const handleAnchorClick = (...args) => {
 }
 </script>
 
-<style scoped lang="less">
-.cmp-page-anchor {
-  :deep(.tiny-anchor__affix) {
-    top: unset !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: calc(100vh - 300px);
-  }
-
-  :deep(.tiny-anchor-link) {
-    font-size: 12px;
-
-    a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.catalog {
-  flex: none;
-  width: 200px;
-  height: calc(100vh - 280px);
-  padding-top: 16px;
-  overflow: hidden;
-
-  .tiny-anchor__dot {
-    max-height: calc(100vh - 300px);
-    width: 200px;
-
-    :deep(.tiny-anchor) {
-      --ti-anchor-width: auto;
-      background-color: transparent;
-    }
-  }
-}
-
-.catalog:hover {
-  overflow-y: auto;
-}
-
-.catalog::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5;
-}
-
-.catalog::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #c1c1c1;
-}
-</style>
+<style scoped lang="less"></style>
diff --git a/examples/sites/src/views/components-doc/common.vue b/examples/sites/src/views/components-doc/common.vue
index 96062bcc61..e565fb5f27 100644
--- a/examples/sites/src/views/components-doc/common.vue
+++ b/examples/sites/src/views/components-doc/common.vue
@@ -75,16 +75,18 @@
         </div>
 
         <!-- demo与api目录锚点 -->
-        <aside-anchor
-          v-if="state.activeTab === 'demos' || state.activeTab === 'api'"
-          :active-tab="state.activeTab"
-          :current-json="state.currJson"
-          :anchor-affix="state.anchorAffix"
-          :api-types="state.currApiTypes"
-          :lang-key="state.langKey"
-          :key="anchorRefreshKey"
-          @link-click="handleAnchorClick"
-        ></aside-anchor>
+        <div class="cmp-page-anchor catalog">
+          <aside-anchor
+            v-if="state.activeTab === 'demos' || state.activeTab === 'api'"
+            :active-tab="state.activeTab"
+            :current-json="state.currJson"
+            :anchor-affix="state.anchorAffix"
+            :api-types="state.currApiTypes"
+            :lang-key="state.langKey"
+            :key="anchorRefreshKey"
+            @link-click="handleAnchorClick"
+          ></aside-anchor>
+        </div>
       </div>
 
       <div v-if="state.currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(state.currJson.owner)">
@@ -526,6 +528,57 @@ defineExpose({ loadPage })
       overflow: visible;
     }
   }
+  .cmp-page-anchor {
+    :deep(.tiny-anchor__affix) {
+      top: unset !important;
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: calc(100vh - 300px);
+    }
+
+    :deep(.tiny-anchor-link) {
+      font-size: 12px;
+
+      a {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .catalog {
+    flex: none;
+    width: 200px;
+    height: calc(100vh - 280px);
+    padding-top: 16px;
+    overflow: hidden;
+
+    .tiny-anchor__dot {
+      max-height: calc(100vh - 300px);
+      width: 200px;
+
+      :deep(.tiny-anchor) {
+        --ti-anchor-width: auto;
+        background-color: transparent;
+      }
+    }
+  }
+
+  .catalog:hover {
+    overflow-y: auto;
+  }
+
+  .catalog::-webkit-scrollbar {
+    width: 10px;
+    background-color: #f5f5f5;
+  }
+
+  .catalog::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #c1c1c1;
+  }
 }
 
 .one-demo-col2 {