Support search with alias (#214)

Author: qcloud

src/app/components/analysis/components/filter.ts

@@ -10,23 +10,36 @@ import type { Ref, PropType, VNode } from "vue"
 import { ElOption, ElSelect, ElTag } from "element-plus"
 import { ref, h, defineComponent } from "vue"
 import statService, { HostSet } from "@service/stat-service"
+import siteService from "@service/site-service"
 import { t } from "@app/locale"
 import SelectFilterItem from "@app/components/common/select-filter-item"
 import { labelOfHostInfo } from "../util"
 
-async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<timer.site.SiteKey[]>, searching: Ref<boolean>) {
+const calcUniqueKey = ({ host, virtual, merged }: timer.site.SiteInfo) => `${host}${virtual ? 1 : 0}${merged ? 1 : 0}`
+
+async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<timer.site.SiteInfo[]>, searching: Ref<boolean>) {
     if (!queryStr) {
         trendDomainOptions.value = []
         return
     }
     searching.value = true
-    const domains: HostSet = await statService.listHosts(queryStr)
-    const options: timer.site.SiteKey[] = []
-    const { origin, merged, virtual } = domains
-    origin.forEach(host => options.push({ host }))
-    merged.forEach(host => options.push({ host, merged: true }))
-    virtual.forEach(host => options.push({ host, virtual: true }))
-    trendDomainOptions.value = options
+
+    const options: Record<string, timer.site.SiteInfo> = {}
+    const sites = await siteService.selectAll({ fuzzyQuery: queryStr })
+    const hosts: HostSet = await statService.listHosts(queryStr)
+
+    sites.forEach(site => options[calcUniqueKey(site)] = site)
+
+    const { origin, merged, virtual } = hosts
+    const originSiteInfo: timer.site.SiteInfo[] = []
+    origin.forEach(host => originSiteInfo.push({ host }))
+    merged.forEach(host => originSiteInfo.push({ host, merged: true }))
+    virtual.forEach(host => originSiteInfo.push({ host, virtual: true }))
+    originSiteInfo.forEach(o => {
+        const key = calcUniqueKey(o)
+        !options[key] && (options[key] = o)
+    })
+    trendDomainOptions.value = Object.values(options)
     searching.value = false
 }
 
@@ -55,16 +68,21 @@ function hostInfoOfKey(key: string): timer.site.SiteKey {
 
 const MERGED_TAG_TXT = t(msg => msg.analysis.common.merged)
 const VIRTUAL_TAG_TXT = t(msg => msg.analysis.common.virtual)
-function renderHostLabel(hostInfo: timer.site.SiteKey): VNode[] {
+
+const renderOptionTag = (tagLabel: string) => h('span',
+    { style: { float: "right", height: "34px" } },
+    h(ElTag, { size: 'small' }, () => tagLabel)
+)
+
+function renderHostLabel({ host, merged, virtual, alias }: timer.site.SiteInfo): VNode[] {
     const result = [
-        h('span', {}, hostInfo.host)
+        h('span', {}, host)
     ]
-    hostInfo.merged && result.push(
-        h(ElTag, { size: 'small' }, () => MERGED_TAG_TXT)
-    )
-    hostInfo.virtual && result.push(
-        h(ElTag, { size: 'small' }, () => VIRTUAL_TAG_TXT)
+    alias && result.push(
+        h(ElTag, { size: 'small', type: 'info' }, () => alias)
     )
+    merged && result.push(renderOptionTag(MERGED_TAG_TXT))
+    virtual && result.push(renderOptionTag(VIRTUAL_TAG_TXT))
     return result
 }
 
@@ -113,10 +131,10 @@ const _default = defineComponent({
                     handleSiteChange()
                 }
             }, () => (trendDomainOptions.value || [])?.map(
-                hostInfo => h(ElOption, {
-                    value: keyOfHostInfo(hostInfo),
-                    label: labelOfHostInfo(hostInfo),
-                }, () => renderHostLabel(hostInfo))
+                siteInfo => h(ElOption, {
+                    value: keyOfHostInfo(siteInfo),
+                    label: labelOfHostInfo(siteInfo),
+                }, () => renderHostLabel(siteInfo))
             )),
             h(SelectFilterItem, {
                 historyName: 'timeFormat',

src/database/site-database.ts

@@ -11,6 +11,10 @@ import { REMAIN_WORD_PREFIX } from "./common/constant"
 export type SiteCondition = {
     host?: string
     alias?: string
+    /**
+     * Fuzzy query of host or alias
+     */
+    fuzzyQuery?: string
     source?: timer.site.AliasSource
     virtual?: boolean
 }
@@ -95,16 +99,18 @@ async function select(this: SiteDatabase, condition?: SiteCondition): Promise<ti
 }
 
 function buildFilter(condition: SiteCondition): (site: timer.site.SiteInfo) => boolean {
-    const { host, alias, source, virtual } = condition || {}
+    const { host, alias, source, virtual, fuzzyQuery } = condition || {}
     return site => {
-        if (host && !site.host.includes(host)) return false
-        if (alias && !site.alias?.includes(alias)) return false
-        if (source && source !== site.source) return false
+        const { host: siteHost, alias: siteAlias, source: siteSource, virtual: siteVirtual } = site || {}
+        if (host && !siteHost.includes(host)) return false
+        if (alias && !siteAlias?.includes(alias)) return false
+        if (source && source !== siteSource) return false
         if (virtual !== undefined && virtual !== null) {
             const virtualCond = virtual || false
-            const virtualFactor = site.virtual || false
+            const virtualFactor = siteVirtual || false
             if (virtualCond !== virtualFactor) return false
         }
+        if (fuzzyQuery && !(siteHost?.includes(fuzzyQuery) || siteAlias?.includes(fuzzyQuery))) return false
         return true
     }
 }

src/service/site-service.ts

@@ -6,10 +6,12 @@
  */
 
 import SiteDatabase, { SiteCondition } from "@db/site-database"
+import StatDatabase from "@db/stat-database"
 import { slicePageResult } from "./components/page-info"
 
 const storage = chrome.storage.local
 const siteDatabase = new SiteDatabase(storage)
+const statDatabase = new StatDatabase(storage)
 
 export type SiteQueryParam = SiteCondition
 
@@ -63,6 +65,10 @@ class SiteService {
         return result
     }
 
+    selectAll(param?: SiteQueryParam): Promise<timer.site.SiteInfo[]> {
+        return siteDatabase.select(param)
+    }
+
     async batchSelect(keys: timer.site.SiteKey[]): Promise<timer.site.SiteInfo[]> {
         return siteDatabase.getBatch(keys)
     }