refactor(docs): refactor docs site layout (#1384)

website/app.vue

@@ -1,14 +1,10 @@
-<template>
-  <div id="app" :class="{ 'is-component': isComponent }">
-    <main-header v-if="lang !== 'play'" />
-    <div class="main-cnt">
-      <router-view />
-    </div>
-    <main-footer v-if="lang !== 'play' && !isComponent" />
-  </div>
-</template>
-
 <script>
+import { defineComponent, h, computed, watch, getCurrentInstance, onMounted } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+import { ElScrollbar } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import MainHeader from './components/header'
+import MainFooter from './components/footer'
 import { use } from '@element-plus/locale'
 import zhLocale from '@element-plus/locale/lang/zh-cn'
 import enLocale from '@element-plus/locale/lang/en'
@@ -38,36 +34,17 @@ const localize = lang => {
 }
 localize(lang)
 
-export default {
+export default defineComponent({
   name: 'App',
 
-  computed: {
-    lang() {
-      return this.$route.path.split('/')[1] || Language.CN
-    },
-    isComponent() {
-      return /^component-/.test(this.$route.name || '')
-    },
-  },
+  setup(){
+    const route = useRoute()
 
-  watch: {
-    lang(val) {
-      if (val === Language.CN) {
-        this.suggestJump()
-      }
-      localize(val)
-    },
-  },
+    const lang = computed(() => route.path.split('/')[1] || Language.CN)
 
-  mounted() {
-    localize(this.lang)
-    if (this.lang === Language.CN) {
-      this.suggestJump()
-    }
-  },
+    const isComponent = computed(() => /^component-/.test(route.name || ''))
 
-  methods: {
-    suggestJump() {
+    const suggestJump = () => {
       if (process.env.NODE_ENV !== 'production') return
 
       const href = location.href
@@ -75,8 +52,8 @@ export default {
       const cnHref = href.indexOf('element-plus.gitee.io') > -1
       if (cnHref || preferGithub) return
       setTimeout(() => {
-        if (this.lang !== Language.CN) return
-        this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+        if (lang.value !== Language.CN) return
+        ElMessageBox.confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
           .then(() => {
             location.replace('https://element-plus.gitee.io')
           })
@@ -84,7 +61,50 @@ export default {
             localStorage.setItem('PREFER_GITHUB', 'true')
           })
       }, 1000)
-    },
+    }
+
+    watch(() => lang.value, val => {
+      if (val === Language.CN) suggestJump()
+      localize(val)
+    })
+
+    onMounted(() => {
+      localize(lang.value)
+
+      if (lang.value === Language.CN) suggestJump()
+    })
+
+    return {
+      lang,
+      isComponent,
+    }
   },
-}
+
+  render() {
+    const notPlay = this.lang !== 'play'
+
+    const notComponent = !this.isComponent
+
+    const mainHeader = notPlay ? h(MainHeader, {
+      style: 'position: fixed;top: 0;width: 100%;z-index: 2000',
+    }) : null
+
+    const mainFooter = notPlay && notComponent ? h(MainFooter) : null
+
+    const content = [h('div', {
+      class: 'main-cnt',
+    }, [h(RouterView)]), mainFooter]
+
+    const contentWrapper = notComponent
+      ? h(ElScrollbar, null, { default: () => content })
+      : content
+
+    return h('div', {
+      id: 'app',
+      class: {
+        'is-component': this.isComponent,
+      },
+    }, [mainHeader, contentWrapper])
+  },
+})
 </script>

website/assets/styles/common.scss

@@ -12,6 +12,11 @@ html, body {
   }
 }
 
+body{
+  padding-top: 80px;
+  height: calc(100% - 80px);
+}
+
 #app {
   height: 100%;
 
@@ -33,7 +38,7 @@ html, body {
       z-index: 1500;
 
       .container {
-        padding: 0;
+        padding: 0 40px;
       }
     }
   }
@@ -71,17 +76,15 @@ button, input, select, textarea {
 }
 
 .main-cnt {
-  margin-top: -80px;
-  padding: 80px 0 340px;
+  padding-bottom: 340px;
   box-sizing: border-box;
   min-height: 100%;
 }
 
 .container,
 .page-container {
-  width: 1140px;
-  padding: 0;
-  margin: 0 auto;
+  //width: 1140px;
+  padding: 0 40px;
 }
 
 .page-container {

website/components/header.vue

@@ -400,6 +400,14 @@ export default {
     width: auto;
   }
 
+  @media (max-width: 1000px) {
+    .header {
+      .nav-theme-switch, .nav-algolia-search {
+        display: none;
+      }
+    }
+  }
+
   @media (max-width: 850px) {
     .header {
       .nav-logo {
@@ -420,9 +428,6 @@ export default {
           padding: 0 5px;
         }
       }
-      .nav-theme-switch, .nav-algolia-search {
-        display: none;
-      }
     }
   }
 

website/components/right-nav.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-scrollbar ref="navScroll" wrap-style="max-height: 300px" style="position: fixed;right: 10px;top: 100px;width: 175px;border-left: 1px solid rgb(220, 223, 230);height: auto;max-height: 300px;">
+  <el-scrollbar
+    ref="navScroll"
+    class="right-nav"
+    wrap-style="max-height: 300px"
+    style="position: fixed;right: 10px;top: 100px;width: 150px;border-left: 1px solid rgb(220, 223, 230);height: auto;max-height: 300px;"
+  >
     <div v-for="item in anchors" :key="item" style="margin: 3px 0 3px 10px">
       <el-link
         :id="item"
@@ -16,9 +21,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import ResizeObserver from 'resize-observer-polyfill'
+
 export default defineComponent({
-  setup () {
+  setup() {
     // ordered
     const map = new Map()
     let anchors = ref([])
@@ -38,6 +45,7 @@ export default defineComponent({
       await nextTick()
       scrollContainer = document.querySelector('.el-scrollbar.page-component__scroll>.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default')
       const content = document.querySelector('.content.element-doc.content')
+      if (!content) return
       const h3 = content.querySelectorAll('h3')
       anchors.value = Array.from(h3).map(item => {
         const text = item.childNodes[1].textContent.trim()
@@ -70,7 +78,7 @@ export default defineComponent({
     })
 
     onBeforeUnmount(() => {
-      resizeObserver.disconnect()
+      resizeObserver?.disconnect()
     })
     return {
       navScroll,
@@ -84,12 +92,18 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .link {
-  ::v-deep(span){
+  ::v-deep(span) {
     font-size: 12px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    max-width: 155px;
+    max-width: 135px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .right-nav {
+    display: none;
   }
 }
 </style>

website/entry.js

@@ -20,6 +20,7 @@ dayjs.locale('zh-cn') // todo: locale based on Doc site lang
 import App from './app.vue'
 import ElementPlus from 'element-plus'
 import '../packages/theme-chalk/src/index.scss'
+import '../packages/theme-chalk/src/display.scss'
 
 const app = createApp(App)
 

website/pages/component.vue

@@ -128,8 +128,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .page-component__scroll {
-  height: calc(100% - 80px);
-  margin-top: 80px;
+  height: 100%;
 
   ::v-deep( > .el-scrollbar__wrap) {
     overflow-x: auto;
@@ -141,7 +140,7 @@ export default {
   height: 100%;
 
   &.page-container {
-    padding: 0;
+    padding: 40px;
   }
 
   .page-component__nav {
@@ -163,7 +162,6 @@ export default {
 
   .side-nav {
     height: 100%;
-    padding-top: 50px;
     padding-bottom: 50px;
     padding-right: 0;
 
@@ -175,6 +173,7 @@ export default {
   .page-component__content {
     padding-left: 270px;
     padding-bottom: 100px;
+    margin-right: 150px;
     box-sizing: border-box;
   }
   .content-wrap {
@@ -182,7 +181,6 @@ export default {
   }
 
   .content {
-    padding-top: 50px;
 
     ::v-deep(>) {
       h3 {
@@ -234,6 +232,14 @@ export default {
   }
 }
 
+@media (max-width: 1000px){
+  .page-component{
+    .page-component__content{
+      margin-right: 0;
+    }
+  }
+}
+
 @media (max-width: 768px) {
   .page-component {
     .page-component__nav {

website/pages/index.vue

@@ -110,10 +110,12 @@ export default {
     })
   },
   beforeUnmount() {
-    window.removeEventListener('scroll', this.throttledHandleScroll)
+    const dom = document.querySelector('#app>.el-scrollbar>.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default')
+    dom.removeEventListener('scroll', this.throttledHandleScroll)
   },
   mounted() {
-    window.addEventListener('scroll', this.throttledHandleScroll)
+    const dom = document.querySelector('#app>.el-scrollbar>.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default')
+    dom.addEventListener('scroll', this.throttledHandleScroll)
   },
   methods: {
     handleScroll() {

website/pages/resource.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-container page-resource">
     <h2>{{ langConfig[1] }}</h2>
-    <p>{{ langConfig[placeholder2] }}</p>
+    <p>{{ langConfig.placeholder2 }}</p>
     <div class="cards">
       <ul class="container">
         <li>