upd: doc site modify

src/config.ts

@@ -53,13 +53,13 @@ export const nav = [
         author: 'richard1015'
       },
       {
-        name: 'price',
-        sort: 1,
+        name: 'Price',
+        sort: 4,
         cName: '价格组件',
         type: 'component',
         show: true,
-        desc: ''
-        // author: 'hahaha'
+        desc: '价格组件',
+        author: 'ailululu'
       }
     ]
   },

src/sites/assets/styles/md-style.scss

@@ -2,10 +2,8 @@
 
 .doc-content-document {
   position: relative;
-  margin: 10px;
   width: 800px;
   background: #fff;
-  border-left: 1px solid #eee;
   padding-left: 58px;
   .card {
     margin-bottom: 24px;

src/sites/assets/util/ref.ts

@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+export const currentRoute = ref('/');

src/sites/doc/App.vue

@@ -20,5 +20,6 @@ export default defineComponent({
   width: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: $doc-header-height;
 }
 </style>

src/sites/doc/components/Header.vue

@@ -13,6 +13,11 @@ export default defineComponent({
 <style lang="scss">
 .doc {
   &-header {
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    right: 0;
     background: $doc-header-bg;
     background-size: cover;
     background-position: center;

src/sites/doc/components/Nav.vue

@@ -12,8 +12,8 @@
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>
-        <li class="active" v-for="_package in _nav.packages" :key="_package">
-          <router-link :to="_package.name.toLocaleLowerCase()">
+        <li :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
+          <router-link :to="_package.name.toLowerCase()">
             {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
           </router-link>
         </li>
@@ -22,14 +22,22 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, computed } from 'vue';
+import { currentRoute } from '@/sites/assets/util/ref';
 import { nav } from '@/config';
 export default defineComponent({
   name: 'doc-nav',
   setup() {
-    return reactive({
-      nav
+    const isActive = computed(() => {
+      return function(name: string) {
+        return currentRoute.value == name.toLowerCase();
+      };
     });
+    return {
+      isActive,
+      nav: reactive(nav),
+      currentRoute
+    };
   }
 });
 </script>
@@ -37,11 +45,16 @@ export default defineComponent({
 <style lang="scss">
 .doc {
   &-nav {
+    position: fixed;
+    top: $doc-header-height + 50;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
     background: $white;
-    width: 291px;
-    flex-shrink: 0;
-    height: 100%;
-    padding: 50px 0 50px 35px;
+    width: 290px;
+    border-right: 1px solid #eee;
+    overflow: auto;
+    padding-left: 35px;
     ol {
       &.introduce {
         padding-left: 5px;
@@ -66,12 +79,12 @@ export default defineComponent({
             content: '';
             left: 0;
             top: 50%;
-            margin-top: -14px;
-            bottom: 0;
-            width: 6px;
-            height: 28px;
-            background: $doc-default-primary-bg;
-            border-radius: 3px;
+            width: 22px;
+            margin-top: -5px;
+            height: 10px;
+            transform: rotate(90deg);
+            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png) no-repeat;
+            background-size: 100% 100%;
           }
         }
       }

src/sites/doc/router.ts

@@ -6,9 +6,11 @@ const pagesRouter: Array<RouteRecordRaw> = [];
 const files = require.context('@/packages', true, /doc\.md$/);
 files.keys().forEach(component => {
   const componentEntity = files(component).default;
+  const name = `${component.split('/')[1]}`;
   pagesRouter.push({
-    path: `/${component.split('/')[1]}`,
-    component: componentEntity
+    path: name,
+    component: componentEntity,
+    name
   });
 });
 const routes: Array<RouteRecordRaw> = [

src/sites/doc/views/Index.vue

@@ -1,13 +1,13 @@
 <template>
   <doc-header></doc-header>
+  <doc-nav></doc-nav>
   <div class="doc-content">
-    <doc-nav></doc-nav>
-    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
     <div class="doc-content-document">
       <router-view />
     </div>
+    <doc-footer></doc-footer>
+    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
   </div>
-  <doc-footer></doc-footer>
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
@@ -16,6 +16,7 @@ import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
+import { currentRoute } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -31,6 +32,7 @@ export default defineComponent({
 
     onBeforeRouteUpdate(to => {
       const { origin, pathname } = window.location;
+      currentRoute.value = to.name as string;
       data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${to.path}`;
     });
 
@@ -42,7 +44,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 .doc {
   &-content {
+    margin-left: 290px;
     display: flex;
+    flex-direction: column;
+
+    &-document {
+      min-height: 800px;
+    }
   }
 }
 </style>

src/sites/mobile/components/Index.vue

@@ -12,7 +12,7 @@
         <li>{{ _nav.name }}</li>
         <ul>
           <li v-for="_package in _nav.packages" :key="_package">
-            <router-link :to="_package.name.toLocaleLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }} </router-link>
+            <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }} </router-link>
           </li>
         </ul>
       </ol>