feat: search #128

nav.config.ts

@@ -42,39 +42,6 @@ const c: IConfig = {
   // https://www.cnzz.com/o_index.php
   cnzzStatisticsUrl: '',
 
-  // Light 主题配置
-  lightThemeConfig: {
-    // https://www.nav3.cn/#/light?q=grabient
-    backgroundLinear: [
-      'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
-      'linear-gradient(90deg, #FEE140 0%, #FA709A 100%)',
-      'linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)',
-      'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)',
-      'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)',
-      'linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)',
-      'linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)',
-      'linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)',
-      'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)',
-      'linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%)',
-      'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
-      'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
-      'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-      'linear-gradient(90deg, #FAD961 0%, #F76B1C 100%)',
-      'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-      'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
-      'linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%)',
-      'linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)',
-      'linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)',
-      'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)',
-      'linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)',
-      'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-      'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
-      'linear-gradient(132deg, #F4D03F 0%, #16A085 100%)',
-      'linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)',
-      'linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)'
-    ]
-  },
-
   // Sim 主题配置
   simThemeConfig: {
     // 海报图

src/components/search-engine/index.ts

+
+export enum SearchType {
+  All = 1,
+  Title,
+  Desc,
+  Url,
+}

src/components/search-engine/search-engine.component.html

 <div class="search-engine" *ngIf="searchEngineList && searchEngineList.length > 0">
   <div class="input-wrapper dark-bg dark-border-color">
-    <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIcon" nzSize="large">
+    <nz-input-group
+      [nzPrefix]="prefixIcon"
+      [nzSuffix]="suffixIcon"
+      nzSize="large"
+      [nzAddOnBefore]="addOnBeforeTemplate"
+    >
       <input
         type="text"
         nz-input
@@ -23,6 +28,13 @@
     <ng-template #suffixIcon>
       <i class="search-icon iconfont iconsousuo dark-text" (click)="triggerSearch()"></i>
     </ng-template>
+    <ng-template #addOnBeforeTemplate>
+      <nz-select [(ngModel)]="searchTypeValue" *ngIf="!currentEngine.url">
+        <nz-option nzLabel="标题" [nzValue]="SearchType.Title"></nz-option>
+        <nz-option nzLabel="描述" [nzValue]="SearchType.Desc"></nz-option>
+        <nz-option nzLabel="链接" [nzValue]="SearchType.Url"></nz-option>
+      </nz-select>
+    </ng-template>
   </div>
 
   <div class="engine-main dark-bg dark-border-color" *ngIf="showEngine">

src/components/search-engine/search-engine.component.ts

@@ -6,6 +6,7 @@ import { getDefaultSearchEngine, setDefaultSearchEngine, queryString } from '../
 import { Router } from '@angular/router'
 import * as searchEngineList from '../../../data/search.json'
 import { ISearchEngineProps } from '../../types'
+import { SearchType } from './index'
 
 @Component({
   selector: 'app-search-engine',
@@ -14,7 +15,9 @@ import { ISearchEngineProps } from '../../types'
 })
 export class SearchEngineComponent {
   searchEngineList: ISearchEngineProps[] = (searchEngineList as any).default
-  currentEngine = getDefaultSearchEngine()
+  currentEngine: ISearchEngineProps = getDefaultSearchEngine()
+  SearchType = SearchType
+  searchTypeValue = SearchType.Title
   showEngine = false
   keyword = queryString().q
 
@@ -22,8 +25,7 @@ export class SearchEngineComponent {
 
   inputFocus() {
     setTimeout(() => {
-      const inputEl = document.getElementById('search-engine-input')
-      inputEl?.focus?.()
+      document.getElementById('search-engine-input')?.focus?.()
     }, 100)
   }
 
@@ -70,7 +72,8 @@ export class SearchEngineComponent {
     this.router.navigate([this.router.url.split('?')[0]], {
       queryParams: {
         ...params,
-        q: this.keyword
+        q: this.keyword,
+        type: this.searchTypeValue
       }
     })
   }

src/types/index.d.ts

@@ -80,10 +80,6 @@ export interface IConfig {
   cnzzStatisticsUrl?: string
   showGithub: boolean
 
-  lightThemeConfig: {
-    backgroundLinear: string[]
-  },
-
   simThemeConfig: {
     posterImageUrls: string[]
     description: string

src/utils/index.ts

@@ -2,19 +2,20 @@
 // See https://github.com/xjh22222228/nav
 
 import qs from 'qs'
-import config from '../../nav.config'
 import Clipboard from 'clipboard'
-import { INavFourProp, INavThreeProp, INavProps, ISearchEngineProps } from '../types'
+import {
+  INavFourProp, INavThreeProp, INavProps,
+  ISearchEngineProps
+} from '../types'
 import * as db from '../../data/db.json'
 import * as s from '../../data/search.json'
 import { STORAGE_KEY_MAP } from '../constants'
 import { isLogin } from './user'
+import { SearchType } from '../components/search-engine/index'
 
 export const websiteList: INavProps[] = getWebsiteList()
 
 let total = 0
-const { lightThemeConfig } = config
-const { backgroundLinear } = lightThemeConfig
 const searchEngineList: ISearchEngineProps[] = (s as any).default
 
 export function randomInt(max: number) {
@@ -22,7 +23,9 @@ export function randomInt(max: number) {
 }
 
 export function fuzzySearch(navList: INavProps[], keyword: string) {
-  let searchResultList = [{ nav: [] }]
+  const sType = Number(queryString().type) || SearchType.Title
+  const navData = []
+  const resultList = [{ nav: navData }]
 
   function f(arr?: any[]) {
     arr = arr || navList
@@ -33,7 +36,7 @@ export function fuzzySearch(navList: INavProps[], keyword: string) {
         f(item.nav)
       }
 
-      if (searchResultList[0].nav.length > 50) break
+      if (navData.length > 50) break
 
       if (item.name) {
         const name = item.name.toLowerCase()
@@ -42,28 +45,47 @@ export function fuzzySearch(navList: INavProps[], keyword: string) {
         const search = keyword.toLowerCase()
         const urls = Object.values(item.urls || {})
 
-        if (name.includes(search) || desc.includes(search)) {
-          try {
-            let result = Object.assign({}, item)
-            const regex = new RegExp(`(${keyword})`, 'i')
-            result.name = result.name.replace(regex, `$1`.bold())
-            result.desc = result.desc.replace(regex, `$1`.bold())
-
-            const exists = searchResultList[0].nav.some(item => item.name === result.name)
-            if (!exists) {
-              searchResultList[0].nav.push(result)
-            }
-          } catch (err) {}
-          continue
-        }
-
-        if (url?.includes?.(keyword.toLowerCase())) {
-          searchResultList[0].nav.push(item)
-        }
-
-        const find = urls.some((item: string) => item.includes(keyword))
-        if (find) {
-          searchResultList[0].nav.push(item)
+        try {
+          switch (sType) {
+            case SearchType.Url:
+              if (url?.includes?.(keyword.toLowerCase())) {
+                navData.push(item)
+              }
+      
+              const find = urls.some((item: string) => item.includes(keyword))
+              if (find) {
+                navData.push(item)
+              }
+              break
+
+            case SearchType.Title:
+              if (name.includes(search)) {
+                let result = { ...item }
+                const regex = new RegExp(`(${keyword})`, 'i')
+                result.name = result.name.replace(regex, `$1`.bold())
+
+                const exists = navData.some(item => item.name === result.name)
+                if (!exists) {
+                  navData.push(result)
+                }
+              }
+              break
+
+            case SearchType.Desc:
+              if (desc.includes(search)) {
+                let result = { ...item }
+                const regex = new RegExp(`(${keyword})`, 'i')
+                result.desc = result.desc.replace(regex, `$1`.bold())
+
+                const exists = navData.some(item => item.desc === result.desc)
+                if (!exists) {
+                  navData.push(result)
+                }
+              }
+              break
+          }
+        } catch (error) {
+          console.error(error)
         }
       }
     }
@@ -71,11 +93,11 @@ export function fuzzySearch(navList: INavProps[], keyword: string) {
 
   f()
 
-  if (searchResultList[0].nav.length <= 0) {
+  if (navData.length <= 0) {
     return []
   }
 
-  return searchResultList
+  return resultList
 }
 
 export function totalWeb(): number {
@@ -100,6 +122,14 @@ export function totalWeb(): number {
   return total
 }
 
+function randomColor(): string {
+  const r = randomInt(255)
+  const g = randomInt(255)
+  const b = randomInt(255)
+  const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`
+  return c.slice(0, 7)
+}
+
 let randomTimer
 export function randomBgImg() {
   if (isDark()) return
@@ -107,13 +137,16 @@ export function randomBgImg() {
   clearInterval(randomTimer)
 
   const el = document.createElement('div')
+  const deg = randomInt(360)
   el.id = 'random-light-bg'
   el.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:-3;transition: 1s linear;'
-  el.style.backgroundImage = backgroundLinear[randomInt(backgroundLinear.length)]
+  el.style.backgroundImage =
+    `linear-gradient(${deg}deg, ${randomColor()} 0%, ${randomColor()} 100%)`
   document.body.appendChild(el)
 
   function setBg() {
-    const randomBg = backgroundLinear[randomInt(backgroundLinear.length)]
+    const randomBg =
+    `linear-gradient(${deg}deg, ${randomColor()} 0%, ${randomColor()} 100%)`
     el.style.opacity = '.3'
     setTimeout(() => {
       el.style.backgroundImage = randomBg
@@ -131,7 +164,7 @@ export function queryString(): {
   [key: string]: any
 } {
   const { href } = window.location
-  const search = href.slice(href.indexOf('?') + 1)
+  const search = href.split('?')[1] || ''
   const parseQs = qs.parse(search)
   let id = parseInt(parseQs.id) || 0
   let page = parseInt(parseQs.page) || 0