fix: 搜索框

src/sites/doc/components/Header.vue

@@ -10,24 +10,24 @@
       <div class="nav-box">
         <ul class="nav-list">
           <li class="nav-item" :class="{ active: isActive(header[0].name) }">
-            <router-link :to="header[0].name">{{
-              header[0].cName
-            }}</router-link>
+            <router-link :to="header[0].name">
+              {{ header[0].cName }}
+            </router-link>
           </li>
           <li class="nav-item" :class="{ active: isActive(header[1].name) }">
-            <router-link :to="header[1].name">{{
-              header[1].cName
-            }}</router-link>
+            <router-link :to="header[1].name">
+              {{ header[1].cName }}
+            </router-link>
+          </li>
+          <li class="nav-item" :class="{ active: isActive(header[2].name) }">
+            <a href="http://localhost:8080/demo.html#/">
+              {{ header[2].cName }}
+            </a>
           </li>
-          <li class="nav-item" :class="{ active: isActive(header[2].name) }"
-            ><a href="http://localhost:8080/demo.html#/">{{
-              header[2].cName
-            }}</a></li
-          >
           <li class="nav-item" :class="{ active: isActive(header[3].name) }">
-            <router-link :to="header[3].name">{{
-              header[3].cName
-            }}</router-link>
+            <router-link :to="header[3].name">
+              {{ header[3].cName }}
+            </router-link>
           </li>
           <li class="nav-item">
             <div
@@ -35,9 +35,9 @@
               @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-hd">
+                {{ data.verson }}<i class=""></i>
+              </div>
               <div class="header-select-bd" v-show="data.isShowSelect">
                 <div
                   class="header-select-item"
@@ -177,7 +177,7 @@ export default defineComponent({
     .nav-box {
       margin-right: 140px;
       .nav-list {
-        min-width: 400px;
+        min-width: 445px;
         display: flex;
         list-style: none;
         align-items: center;
@@ -219,8 +219,8 @@ export default defineComponent({
         width: 26px;
         height: 26px;
         vertical-align: middle;
-        background: url('../../assets/images/icon-user.png') no-repeat;
-        background-size: 100%;
+        background: url('../../assets/images/icon-user2.png') no-repeat;
+        background-size: 52px;
       }
     }
   }
@@ -307,6 +307,9 @@ export default defineComponent({
           }
           .user-link {
             background-position: 0 0;
+            &:hover {
+              background-position: -26px 0;
+            }
           }
         }
       }
@@ -382,7 +385,10 @@ export default defineComponent({
             }
           }
           .user-link {
-            background-position: 0 -26px;
+            background-position: 0 -25px;
+            &:hover {
+              background-position: -26px -25px;
+            }
           }
         }
       }
@@ -458,7 +464,10 @@ export default defineComponent({
             }
           }
           .user-link {
-            background-position: 0 -52px;
+            background-position: 0 -51px;
+            &:hover {
+              background-position: -26px -51px;
+            }
           }
         }
       }

src/sites/doc/components/Search.vue

@@ -19,7 +19,6 @@
           {{ item.name }}
           <span>{{ item.cName }}</span>
         </router-link>
-        <!-- <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link> -->
       </li>
     </ul>
   </div>
@@ -39,31 +38,25 @@ export default defineComponent({
       searchCName: ''
     });
     onMounted(() => {
-      const files = require.context('@/packages', true, /doc\.md$/);
-      files.keys().forEach(component => {
-        const componentEntity = files(component).default;
-      });
       // console.log('nav', nav);
       nav.forEach(item => {
         item.packages.forEach(value => {
           // console.log('value', value)
           data.navList.push(value);
         });
-        console.log('search', data.navList);
+        // console.log('search', data.navList);
       });
     });
     watch(
       () => data.searchVal,
       sVal => {
-        console.log(sVal, '改变');
         if (sVal) {
           data.searchList = data.navList.filter(item => {
             if (item.show === false) return false;
-            console.log('item', item);
+            // console.log('item', item);
             const rx = new RegExp(sVal, 'gi');
             return rx.test(item.name + ' ' + item.cName + '' + item.desc);
           });
-          console.log('rx2', data.searchList.length, data.searchList);
         } else {
           data.searchCName = '';
           data.searchIndex = 0;
@@ -75,12 +68,43 @@ export default defineComponent({
       e.target.select();
       // console.log('e', e.target.select())
     };
-    const choseList = e => {
+    const checklist = () => {
+      data.searchVal = '';
+      data.searchCurName = '';
       data.searchIndex = 0;
     };
+    const choseList = e => {
+      let searchIndex = data.searchIndex;
+      if (e.keyCode == 40) {
+        searchIndex++;
+      }
+      if (e.keyCode == 38) {
+        searchIndex--;
+      }
+      if (searchIndex < 0) {
+        searchIndex = 0;
+      }
+      const searchList = data.searchList;
+      if (searchList.length > 0) {
+        const cName = searchList[searchIndex] && searchList[searchIndex].name;
+        if (cName) {
+          data.searchCurName = cName;
+          data.searchIndex = searchIndex;
+          if (e.keyCode == 13) {
+            data.$router.push({
+              path: '/' + searchList[searchIndex].name
+            });
+            data.searchCurName = '';
+            data.searchIndex = 0;
+            data.searchVal = '';
+          }
+        }
+      }
+    };
     return {
       data,
       onfocus,
+      checklist,
       choseList
     };
   }

src/sites/doc/views/Resource.vue

@@ -8,7 +8,7 @@
   </div>
   <!-- 设计资源 -->
   <div class="resource-content">
-    <div class="resource-block" v-if="data.articleList.length === 0">
+    <div class="resource-block" v-if="articleList.length === 0">
       <h4 class="sub-title">设计资源</h4>
       <p class="sub-desc"
         >这里提供 NUT UI
@@ -33,18 +33,18 @@
         <div class="tab-hd">
           <div
             class="tab-hd-item"
-            :class="{ active: data.activeIndex === index }"
-            v-for="(item, index) in data.tabData"
+            :class="{ active: activeIndex === index }"
+            v-for="(item, index) in tabData"
             :key="index"
             @click="clickTab(index)"
           >
             {{ item.title }}
           </div>
         </div>
-        <div class="tab-bd" v-show="data.activeIndex === 0">
+        <div class="tab-bd" v-show="activeIndex === 0">
           <div
             class="design-item"
-            v-for="item in data.articleList"
+            v-for="item in articleList"
             :key="item.id"
             @click="toLink(item.id)"
           >
@@ -52,7 +52,7 @@
             <p class="design-title">{{ item.title }}</p>
           </div>
         </div>
-        <div class="tab-bd" v-show="data.activeIndex === 1">
+        <div class="tab-bd" v-show="activeIndex === 1">
           <div class="design-item">
             <img class="img-design" src="../../assets/images/img-article.jpg" />
             <p class="design-title"
@@ -93,7 +93,7 @@
   <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 import {
   onBeforeRouteUpdate,
   RouteLocationNormalized,
@@ -116,12 +116,6 @@ export default defineComponent({
       tabData: [
         {
           title: '全部文章'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验1'
         }
         // {
         //   title: '性能体验'
@@ -158,7 +152,7 @@ export default defineComponent({
       window.open('//jelly.jd.com/article/' + id);
     };
     return {
-      data,
+      ...toRefs(data),
       clickTab,
       toLink
     };