fix: qs

package-lock.json

 {
   "name": "nav",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9955,10 +9955,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
     },
     "query-string": {
       "version": "4.3.4",
@@ -10299,6 +10298,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        }
       }
     },
     "require-directory": {

package.json

 {
   "name": "nav",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "author": "xiejiahe",
   "bugs": {
     "url": "https://github.com/xjh22222228/nav/issues"
@@ -20,9 +20,6 @@
   },
   "private": true,
   "dependencies": {
-    "iscroll": "^5.2.0",
-    "jquery": "^3.5.1",
-    "rough-notation": "^0.3.3",
     "@angular/animations": "~9.1.9",
     "@angular/common": "~9.1.9",
     "@angular/compiler": "~9.1.9",
@@ -31,6 +28,10 @@
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
+    "iscroll": "^5.2.0",
+    "jquery": "^3.5.1",
+    "qs": "^6.9.4",
+    "rough-notation": "^0.3.3",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/utils/index.ts

-import nav from '../../data';
-import { BACKGROUND_LINEAR } from '../../config';
+import nav from '../../data'
+import qs from 'qs'
+import { BACKGROUND_LINEAR } from '../../config'
 
 export function debounce(func, wait, immediate) {
   let timeout
@@ -106,3 +107,30 @@ export function randomBgImg() {
 export function onImgError(e: any) {
   e.target.src = 'assets/img/transparent.gif'
 }
+
+export function queryString() {
+  const { href } = window.location
+  const search = href.slice(href.indexOf('?') + 1)
+  const parseQs = qs.parse(search)
+  let id = parseInt(parseQs.id) || 0
+  let page = parseInt(parseQs.page) || 0
+
+  if (page > nav.length - 1) {
+    page = nav.length - 1;
+    id = 0;
+  } else {
+    page = page;
+    if (id <= nav[page].nav.length - 1) {
+      id = id;
+    } else {
+      id = nav[page].nav.length - 1;
+    }
+  }
+
+  return {
+    ...parseQs,
+    q: parseQs.q || '',
+    id,
+    page
+  }
+}

src/view/app/default/app.component.html

@@ -44,6 +44,7 @@
                   [src]="el.icon || item.icon"
                   alt=""
                   class="icon"
+                  (error)="onImgError($event)"
                 >
                 <ng-template #icon>
                   <span class="icon"></span>
@@ -71,4 +72,4 @@
       </li>
     </ul>
   </div>
-</section>
\ No newline at end of file
+</section>

src/view/app/default/app.component.scss

 $bg-color: #fbfbfb;
 
 .app-page {
-  z-index: 6;
-  height: 100vh;
   padding: 45px 0;
   background: #f6f6f6;
-  overflow-y: auto;
 
   .header {
     z-index: 9999;;
@@ -222,4 +219,4 @@ $bg-color: #fbfbfb;
       }
     }
   }
-}
\ No newline at end of file
+}

src/view/app/default/app.component.ts

@@ -2,6 +2,7 @@ import nav from '../../../../data';
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { webpLanguage } from '../../../../config';
+import { onImgError, queryString } from '../../../utils';
 
 @Component({
   selector: 'app-home',
@@ -18,25 +19,15 @@ export default class WebpComponent {
   language: string[] = webpLanguage;
 
   ngOnInit () {
-    this.activatedRoute.queryParams.subscribe(query => {
-      const id = +query.id || 0;
-      const page = +query.page || 0;
-      if (page > this.nav.length - 1) {
-        this.page = this.nav.length - 1;
-        this.id = 0;
-      } else {
-        this.page = page;
-        if (id <= this.nav[this.page].nav.length - 1) {
-          this.id = id;
-        } else {
-          this.id = this.nav[this.page].nav.length - 1;
-        }
-      }
+    this.activatedRoute.queryParams.subscribe(() => {
+      const { page, id } = queryString()
+      this.page = page
+      this.id = id
     });
   }
 
   handleSidebarNav (index) {
-    const page = +this.activatedRoute.snapshot.queryParams.page || 0;
+    const { page } = queryString()
     this.router.navigate(['/app'], { 
       queryParams: {
         page,
@@ -76,4 +67,6 @@ export default class WebpComponent {
     }
     $this.siblings('.bottom-slide').toggleClass('active')
   }
+
+  onImgError = onImgError
 }

src/view/index/default/index.component.html

@@ -6,7 +6,7 @@
       placeholder="聚焦搜索" 
       maxlength="50"
       (input)="searchLoading = true; handleSearch()"
-      [(ngModel)]="search"
+      [(ngModel)]="searchKeyword"
       *ngIf="showInput"
       (blur)="showInput = false"
     />

src/view/index/default/index.component.ts

-import nav from '../../../../data';
-import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { debounce, fuzzySearch, randomBgImg, onImgError } from '../../../utils';
-import { appLanguage, GIT_REPO_URL } from '../../../../config';
-import { annotate } from 'rough-notation';
+import nav from '../../../../data'
+import { Component } from '@angular/core'
+import { Router, ActivatedRoute } from '@angular/router'
+import { debounce, fuzzySearch, randomBgImg, onImgError, queryString } from '../../../utils'
+import { appLanguage, GIT_REPO_URL } from '../../../../config'
+import { annotate } from 'rough-notation'
 
-let equeue = [];
+let equeue = []
 
 @Component({
   selector: 'app-home',
@@ -16,79 +16,65 @@ export default class HomeComponent {
 
   constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
 
-  nav: any[] = nav;
-  id: number = 0;
-  page: number = 0;
-  list: any[] = [];
-  search: string = '';
-  showInput = false;
-  searchLoading = false;
-  language: string[] = appLanguage;
-  GIT_REPO_URL: string = GIT_REPO_URL;
+  nav: any[] = nav
+  id: number = 0
+  page: number = 0
+  list: any[] = []
+  searchKeyword: string = ''
+  showInput = false
+  searchLoading = false
+  language: string[] = appLanguage
+  GIT_REPO_URL: string = GIT_REPO_URL
 
   ngOnInit () {
-    randomBgImg();
+    randomBgImg()
 
     const initList = () => {
-      this.list = this.nav[this.page].nav[this.id].nav;
-    };
-
-    this.activatedRoute.queryParams.subscribe(query => {
-      const tempPage = this.page;
-      const id = +query.id || 0;
-      const page = +query.page || 0;
-      this.search = query.q || '';
-
-      if (page > this.nav.length - 1) {
-        this.page = this.nav.length - 1;
-        this.id = 0;
+      this.list = this.nav[this.page].nav[this.id].nav
+    }
+
+    this.activatedRoute.queryParams.subscribe(() => {
+      const tempPage = this.page
+      const { id, page, q } = queryString()
+      this.searchKeyword = q
+      this.page = page
+      this.id = id
+
+      if (q) {
+        this.list = fuzzySearch(this.nav, q)
+        this.searchLoading = false
       } else {
-        this.page = page;
-        if (id <= this.nav[this.page].nav.length - 1) {
-          this.id = id;
-        } else {
-          this.id = this.nav[this.page].nav.length - 1;
-        }
-      }
-      
-      if (this.search) {
-        this.list = fuzzySearch(this.nav, this.search);
-        this.searchLoading = false;
-      } else {
-        initList();
+        initList()
       }
 
       if (tempPage !== page) {
-        this.setAnnotate();
+        this.setAnnotate()
       }
-    });
+    })
 
     this.handleSearch = debounce(() => {
-      if (!this.search) {
-        initList();
-        this.searchLoading = false;
-        return;
+      if (!this.searchKeyword) {
+        initList()
+        this.searchLoading = false
+        return
       }
 
-      const hash = window.location.hash;
-      const params = new URLSearchParams(hash.slice(hash.indexOf('?')));
+      const params = queryString()
       this.router.navigate(['/index'], {
         queryParams: {
           ...params,
-          q: this.search
+          q: this.searchKeyword
         }
-      });
+      })
 
-      this.searchLoading = true;
-    }, 1000, false);
+      this.searchLoading = true
+    }, 1000, false)
   }
 
-  handleSearch = null
-
   handleScroll(e) {
-    const target = e.target;
+    const target = e.target
     const top = target.scrollTop;
-    (<any>window).sessionStorage.top = top;
+    (<any>window).sessionStorage.top = top
   }
 
   handleCilckNav(index) {
@@ -97,27 +83,27 @@ export default class HomeComponent {
         page: index,
         _: Date.now()
       }
-    });
+    })
   }
 
   handleOnClickSearch() {
-    this.showInput = true;
+    this.showInput = true
     setTimeout(() => {
       try {
-        (<any>document).querySelector('.search').focus();
+        (<any>document).querySelector('.search').focus()
       } catch (err) {}
-    }, 0);
+    }, 0)
   }
 
   handleSidebarNav (index) {
-    const page = +this.activatedRoute.snapshot.queryParams.page || 0;
+    const { page } = queryString()
     this.router.navigate(['/index'], { 
       queryParams: {
         page,
         id: index,
         _: Date.now()
       }
-    });
+    })
   }
 
   ngAfterViewInit () {
@@ -127,28 +113,29 @@ export default class HomeComponent {
       multi: true,
       debug: false,
       opacity: .2,
-    });
+    })
     try {
-      document.getElementById('main').scrollTop = +(<any>window).sessionStorage.top || 0;
+      document.getElementById('main').scrollTop = +(<any>window).sessionStorage.top || 0
     } catch (e) {}
   }
 
   setAnnotate() {
-    const elList = document.querySelectorAll('.top-nav .ripple-btn') || [];
-    if (elList.length === 0) return;
+    const elList = document.querySelectorAll('.top-nav .ripple-btn') || []
+    if (elList.length === 0) return
 
-    equeue.forEach(item => item.hide());
-    equeue = [];
+    equeue.forEach(item => item.hide())
+    equeue = []
 
     const annotation = annotate(elList[this.page], {
       type: 'underline',
       color: 'red',
       padding: 3,
       strokeWidth: 3
-    });
-    equeue.push(annotation);
-    annotation.show();
+    })
+    equeue.push(annotation)
+    annotation.show()
   }
 
+  handleSearch = null
   onImgError = onImgError
 }