From 7f8817cb6bb581244e5393bcb6c58bad4cdc32dd Mon Sep 17 00:00:00 2001
From: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
Date: Sat, 30 Jan 2021 23:06:10 -0600
Subject: [PATCH] refactor(docs): refactor docs site layout (#1384)

---
 website/app.vue                   | 98 +++++++++++++++++++------------
 website/assets/styles/common.scss | 19 +++---
 website/components/header.vue     | 11 +++-
 website/components/right-nav.vue  | 26 ++++++--
 website/entry.js                  |  1 +
 website/pages/component.vue       | 16 +++--
 website/pages/index.vue           |  6 +-
 website/pages/resource.vue        |  2 +-
 8 files changed, 115 insertions(+), 64 deletions(-)

diff --git a/website/app.vue b/website/app.vue
index eeb91a036f..5e50253875 100644
--- a/website/app.vue
+++ b/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>
diff --git a/website/assets/styles/common.scss b/website/assets/styles/common.scss
index 9111a58335..c8fa3e76b2 100644
--- a/website/assets/styles/common.scss
+++ b/website/assets/styles/common.scss
@@ -12,9 +12,14 @@ html, body {
   }
 }
 
+body{
+  padding-top: 80px;
+  height: calc(100% - 80px);
+}
+
 #app {
   height: 100%;
-  
+
   &.is-component {
     overflow-y: hidden;
 
@@ -31,9 +36,9 @@ html, body {
       left: 0;
       top: 0;
       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 {
diff --git a/website/components/header.vue b/website/components/header.vue
index 857e7f27e3..48ec0b0761 100644
--- a/website/components/header.vue
+++ b/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;
-      }
     }
   }
 
diff --git a/website/components/right-nav.vue b/website/components/right-nav.vue
index 67a5101d67..8893b7bd87 100644
--- a/website/components/right-nav.vue
+++ b/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>
diff --git a/website/entry.js b/website/entry.js
index 804b33092d..2c2f1c0fcc 100644
--- a/website/entry.js
+++ b/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)
 
diff --git a/website/pages/component.vue b/website/pages/component.vue
index f1b9751034..1fec70b6f2 100644
--- a/website/pages/component.vue
+++ b/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 {
diff --git a/website/pages/index.vue b/website/pages/index.vue
index e9da0f7dc4..ced3bdf557 100644
--- a/website/pages/index.vue
+++ b/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() {
diff --git a/website/pages/resource.vue b/website/pages/resource.vue
index 50dc1f64fd..0fc62c0e2f 100644
--- a/website/pages/resource.vue
+++ b/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>