docs: improve site page (#6826)

Author: kovsu

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" />

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 & {

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;

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 {

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,
     };
   },
 });