fix(#198): shortcut search

charon26 · Mar 12, 2022 · a398675 · a398675
1 parent 4f7f5bf
commit a398675
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 12 deletions.
diff --git a/README_zh-CN.md b/README_zh-CN.md
@@ -176,7 +176,7 @@ Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), me
 感谢您的认可：
 | 姓名    | 支持金额              |
 | --------------------------------------- |----------- |
-| [aiyou9](https://github.com/aiyou9)     | ￥50.00     |
+| [aiyou9](https://github.com/aiyou9)     | ￥50.00、￥50.00     |
 | [lastares](https://github.com/lastares)       | ￥25.00     |
 | [MrJxySteven](https://github.com/MrJxySteven) | ￥20.00     |
 | 路人甲     | ￥50.00     |

diff --git a/src/components/web-list/index.component.html b/src/components/web-list/index.component.html
@@ -7,21 +7,25 @@
 >
   <div
     class="wrapper"
-    [nzTooltipTitle]="item.name"
+    [nzTooltipTitle]="titleTemplate"
     nzTooltipPlacement="bottom"
     nz-button
     nz-tooltip
     *ngFor="let item of dataList"
     cdkDrag
     (click)="goUrl(item.url)"
   >
+    <ng-template #titleTemplate let-thing>
+      <p>{{ item.__name__ || item.name }}</p>
+      {{ item.__desc__ || item.desc }}
+    </ng-template>
     <div class="logo">
-      <app-logo [src]="item.icon" [name]="item.name" [size]="35"></app-logo>
+      <app-logo [src]="item.icon" [name]="item.__name__ || item.name" [size]="35"></app-logo>
     </div>
     <div
       class="name dark-white"
+      [innerHTML]="item.__name__ || item.name"
     >
-      {{ item.name }}
     </div>
   </div>
 </div>
diff --git a/src/components/web-list/index.component.scss b/src/components/web-list/index.component.scss
@@ -3,11 +3,13 @@
   margin-bottom: 15px;
   display: flex;
   padding: 0 30px;
+  max-width: 960px;
+  flex-wrap: wrap;
 
   .wrapper {
     display: flex;
     margin-right: 15px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     text-align: center;
     cursor: pointer;
     align-items: center;

diff --git a/src/components/web-list/index.component.ts b/src/components/web-list/index.component.ts
@@ -3,27 +3,48 @@
 
 import { Component, OnInit, Input } from '@angular/core'
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
-import { websiteList } from '../../store'
-import { INavFourProp } from 'src/types'
-import { setWebsiteList } from '../../utils'
-import { isLogin } from '../../utils/user'
+import { websiteList } from 'src/store'
+import { INavFourProp, INavProps } from 'src/types'
+import { setWebsiteList, queryString, fuzzySearch } from 'src/utils'
+import { isLogin } from 'src/utils/user'
+import { ActivatedRoute } from '@angular/router'
+
+let DEFAULT_WEBSITE = []
 
 @Component({
   selector: 'app-web-list',
   templateUrl: './index.component.html',
   styleUrls: ['./index.component.scss']
 })
 export class WebListComponent implements OnInit {
-  @Input() max: number = 99999
+  @Input() max: number = 110
 
+  websiteList: INavProps[] = websiteList
   dataList: INavFourProp[] = []
 
-  constructor() {}
+  constructor(private activatedRoute: ActivatedRoute) {}
 
   ngOnInit() {
     this.getTopWeb()
+
+    this.activatedRoute.queryParams.subscribe(() => {
+      const { q } = queryString()
+      const result = fuzzySearch(this.websiteList, q)
+
+      if (q.trim()) {
+        if (result.length === 0) {
+          this.dataList = [];
+        } else {
+          this.dataList = result[0].nav.slice(0, this.max);
+        }
+      } else {
+        this.dataList = DEFAULT_WEBSITE
+      }
+      setWebsiteList(this.websiteList)
+    })
   }
 
+  // 获取置顶WEB
   getTopWeb() {
     const dataList: INavFourProp[] = []
     const max = this.max
@@ -49,6 +70,7 @@ export class WebListComponent implements OnInit {
     r(websiteList)
 
     this.dataList = dataList.sort((a, b) => a.index - b.index)
+    DEFAULT_WEBSITE = this.dataList
   }
 
   handleDrop(event: CdkDragDrop<string[]>): void {

diff --git a/src/styles.scss b/src/styles.scss
@@ -80,7 +80,8 @@ em {
 .nowrap {
   white-space: nowrap;
 }
-.text-align-center {
+.text-align-center,
+.center {
   text-align: center;
 }
 .text-align-left {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -23,6 +23,10 @@ export function randomInt(max: number) {
 }
 
 export function fuzzySearch(navList: INavProps[], keyword: string): INavThreeProp[] {
+  if (!keyword.trim()) {
+    return []
+  }
+
   const { type, page, id } = queryString()
   const sType = Number(type) || SearchType.Title
   const navData = []
@@ -51,6 +55,7 @@ export function fuzzySearch(navList: INavProps[], keyword: string): INavThreePro
           if (name.includes(search)) {
             let result = { ...item }
             const regex = new RegExp(`(${keyword})`, 'i')
+            result.__name__ = result.name
             result.name = result.name.replace(regex, `$1`.bold())
 
             if (!urlRecordMap[result.url]) {
@@ -85,6 +90,7 @@ export function fuzzySearch(navList: INavProps[], keyword: string): INavThreePro
           if (desc.includes(search)) {
             let result = { ...item }
             const regex = new RegExp(`(${keyword})`, 'i')
+            result.__desc__ = result.desc
             result.desc = result.desc.replace(regex, `$1`.bold())
 
             if (!urlRecordMap[result.url]) {