From 05cdb2335dfe9dafba2e874c07ad5e8d376a8d5d Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Wed, 9 Aug 2023 15:26:49 +0800
Subject: [PATCH] docs: improve site page

---
 site/src/layouts/index.vue            |  2 +-
 site/src/theme/static/common.less     |  9 ++-----
 site/src/theme/static/toc.less        |  2 +-
 site/src/views/ComponentOverview.less | 12 +++++++++
 site/src/views/ComponentOverview.vue  | 38 +++++++++++++++++++--------
 5 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/site/src/layouts/index.vue b/site/src/layouts/index.vue
index fa7f8b71cd..e0ad2a81c0 100644
--- a/site/src/layouts/index.vue
+++ b/site/src/layouts/index.vue
@@ -1,6 +1,6 @@
 <template>
   <Header />
-  <div v-if="headers.length" class="toc-affix" :style="y > 60 ? 'position:fixed; top: 16px;' : ''">
+  <div v-if="headers.length" class="toc-affix" :style="y > 102 ? 'position:fixed; top: 16px;' : ''">
     <a-anchor style="width: 160px" :items="headers">
       <template #customTitle="item">
         <LinkOutlined v-if="item.target" />
diff --git a/site/src/theme/static/common.less b/site/src/theme/static/common.less
index 8bdd553cf7..a40355a170 100644
--- a/site/src/theme/static/common.less
+++ b/site/src/theme/static/common.less
@@ -19,14 +19,14 @@ a {
 
 .main-wrapper {
   position: relative;
-  padding: 40px 0 0;
+  padding: 0;
   background: var(--component-background);
 }
 
 .main-container {
   position: relative;
   min-height: 500px;
-  padding: 0 170px 32px 64px;
+  padding: 40px 170px 32px 64px;
   background: var(--component-background);
 
   .ant-row-rtl & {
@@ -46,11 +46,6 @@ a {
   &:hover &-inner {
     overflow-y: auto;
   }
-
-  > div,
-  > div > div {
-    height: 100%;
-  }
 }
 
 .aside-container {
diff --git a/site/src/theme/static/toc.less b/site/src/theme/static/toc.less
index 85aae8878a..9082916447 100644
--- a/site/src/theme/static/toc.less
+++ b/site/src/theme/static/toc.less
@@ -69,7 +69,7 @@ ul.toc > li {
 
 .toc-affix {
   position: absolute;
-  top: 80px;
+  top: 118px;
   right: 0px;
   width: 160px;
   padding: 8px 8px 8px 4px;
diff --git a/site/src/views/ComponentOverview.less b/site/src/views/ComponentOverview.less
index 68f7d665dc..1fd575ba9b 100644
--- a/site/src/views/ComponentOverview.less
+++ b/site/src/views/ComponentOverview.less
@@ -23,6 +23,18 @@
       box-shadow: var(--shadow-2);
     }
   }
+
+  &-affix {
+    transition: all 0.25s;
+  }
+
+  &-affixed {
+    padding: 12px;
+    margin: -8px;
+    border-radius: 6px;
+    border: 1px solid var(--border-color-base);
+    background-color: var(--body-background);
+  }
 }
 
 .components-overview-search {
diff --git a/site/src/views/ComponentOverview.vue b/site/src/views/ComponentOverview.vue
index 8fa4862a72..5158ff5e38 100644
--- a/site/src/views/ComponentOverview.vue
+++ b/site/src/views/ComponentOverview.vue
@@ -12,17 +12,25 @@
       </p>
     </section>
     <a-divider></a-divider>
-    <a-input
-      ref="inputRef"
-      v-model:value="search"
-      :placeholder="$t('app.components.overview.search')"
-      class="components-overview-search"
-      auto-focus
-    >
-      <template #suffix>
-        <SearchOutlined />
-      </template>
-    </a-input>
+    <a-affix :offset-top="32" @change="handleAffixChange">
+      <div
+        class="components-overview-affix"
+        :class="{ 'components-overview-affixed': searchBarAffixed }"
+      >
+        <a-input
+          ref="inputRef"
+          v-model:value="search"
+          :placeholder="$t('app.components.overview.search')"
+          class="components-overview-search"
+          auto-focus
+          :style="{ fontSize: searchBarAffixed ? '18px' : '' }"
+        >
+          <template #suffix>
+            <SearchOutlined />
+          </template>
+        </a-input>
+      </div>
+    </a-affix>
     <a-divider></a-divider>
     <template v-for="group in menuItems" :key="group.title">
       <div class="components-overview">
@@ -84,6 +92,12 @@ export default defineComponent({
     const search = ref('');
     const inputRef = ref();
     const { dataSource } = useMenus();
+
+    const searchBarAffixed = ref(false);
+    function handleAffixChange(affixed?: boolean) {
+      searchBarAffixed.value = affixed;
+    }
+
     const menuItems = computed(() => {
       return [
         {
@@ -144,6 +158,8 @@ export default defineComponent({
       inputRef,
       isZhCN: globalConfig?.isZhCN,
       isDark,
+      searchBarAffixed,
+      handleAffixChange,
     };
   },
 });