fix: website demo page error

src/config.js

@@ -1,116 +0,0 @@
-export const versions = [
-  { name: '1.x', link: '/1x/' },
-  { name: '2.x', link: '/' },
-  { name: '3.x', link: '/3x/' }
-];
-
-export const docs = {
-  name: '指南',
-  packages: [
-    {
-      name: 'intro',
-      cName: '介绍',
-      show: true
-    },
-    {
-      name: 'start',
-      cName: '快速上手',
-      show: true
-    },
-    {
-      name: 'theme',
-      cName: '主题定制',
-      show: true
-    },
-    {
-      name: 'international',
-      cName: '国际化',
-      show: true
-    },
-    {
-      name: 'https://github.com/jdf2e/nutui/releases',
-      cName: '更新日志',
-      show: true,
-      isLink: true
-    }
-  ]
-};
-
-export const nav = [
-  {
-    name: '布局组件',
-    packages: [
-      {
-        name: 'Button',
-        sort: 1,
-        cName: '按钮组件',
-        type: 'component',
-        show: true,
-        desc: '按钮用于触发一个操作，如提交表单。',
-        author: 'richard1015'
-      }
-    ]
-  },
-  {
-    name: '操作反馈',
-    packages: []
-  },
-  {
-    name: '基础组件',
-    packages: [
-      {
-        name: 'Temp',
-        sort: 1,
-        cName: '模板组件',
-        type: 'component',
-        show: true,
-        desc: '组件模板示例',
-        author: 'richard1015'
-      },
-      {
-        name: 'Cell',
-        sort: 1,
-        cName: '单元格组件',
-        type: 'component',
-        show: true,
-        desc: '展示列表',
-        author: 'richard1015'
-      },
-      {
-        name: 'Uploader',
-        sort: 2,
-        cName: '上传组件',
-        type: 'component',
-        show: true,
-        desc: '上传文件、图片',
-        author: 'richard1015'
-      },
-      {
-        name: 'Icon',
-        sort: 3,
-        cName: '图标组件',
-        type: 'component',
-        show: true,
-        desc: '图标',
-        author: 'richard1015'
-      },
-      {
-        name: 'Price',
-        sort: 4,
-        cName: '价格组件',
-        type: 'component',
-        show: true,
-        desc: '价格组件',
-        author: 'ailululu'
-      }
-    ]
-  },
-  {
-    name: '导航组件',
-    packages: []
-  },
-  {
-    name: '业务组件',
-    packages: []
-  }
-];

src/sites/doc/App.vue

@@ -9,6 +9,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+::selection {
+  background: $doc-default-color;
+  color: #fff;
+}
 #doc {
   font-family: PingFangSC-Regular;
   -webkit-font-smoothing: antialiased;

src/sites/doc/components/Header.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="header-nav">
       <div class="search-box">
-        <input type="text" class="search-input" placeholder="在nut.ui 中搜索" />
+        <input type="text" class="search-input" placeholder="在 NutUI 中搜索" />
       </div>
       <div class="nav-box">
         <ul class="nav-list">
@@ -28,20 +28,10 @@
             <router-link :to="header[3].name">{{ header[3].cName }}</router-link>
           </li>
           <li class="nav-item">
-            <div
-              class="header-select-box"
-              @click.stop="data.isShowSelect = !data.isShowSelect"
-              :class="[data.isShowSelect == true ? 'select-up' : 'select-down']"
-            >
+            <div class="header-select-box" @click.stop="data.isShowSelect = !data.isShowSelect" :class="[data.isShowSelect == true ? 'select-up' : 'select-down']">
               <div class="header-select-hd">{{ data.verson }}<i class=""></i></div>
               <div class="header-select-bd" v-show="data.isShowSelect">
-                <div
-                  class="header-select-item"
-                  v-for="(item, index) in data.versonList"
-                  :key="index"
-                  @click.stop="checkTheme(item, index)"
-                  :class="{ active: data.activeIndex === index }"
-                >
+                <div class="header-select-item" v-for="(item, index) in data.versonList" :key="index" @click.stop="checkTheme(item, index)" :class="{ active: data.activeIndex === index }">
                   {{ item.name }}
                 </div>
               </div>

src/sites/doc/components/Nav.vue

@@ -103,12 +103,17 @@ export default defineComponent({
             }
           }
           a {
+            &.router-link-active {
+              color: $doc-default-color !important;
+            }
+
             &:hover {
               color: $doc-default-color;
               &:visited {
                 color: $doc-default-color;
               }
             }
+            &:link,
             &:visited {
               color: $title-color;
             }

src/sites/doc/views/Index.vue

@@ -10,8 +10,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
-import { onBeforeRouteUpdate } from 'vue-router';
+import { defineComponent, onMounted, reactive } from 'vue';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
@@ -30,10 +30,20 @@ export default defineComponent({
       demoUrl: 'demo.html'
     });
 
-    onBeforeRouteUpdate(to => {
+    const watchDemoUrl = (router: RouteLocationNormalized) => {
       const { origin, pathname } = window.location;
-      currentRoute.value = to.name as string;
-      data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${to.path}`;
+      currentRoute.value = router.name as string;
+      data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${router.path}`;
+    };
+
+    onMounted(() => {
+      const router = useRouter();
+      const route = useRoute();
+      watchDemoUrl(route);
+    });
+
+    onBeforeRouteUpdate(to => {
+      watchDemoUrl(to);
     });
 
     return data;