Support virtual site for whitelist (sheepzh#274) and clean code

Author: sheepzh

src/app/components/Analysis/components/AnalysisFilter.tsx

@@ -5,24 +5,19 @@
  * https://opensource.org/licenses/MIT
  */
 
-import type { Ref, PropType } from "vue"
-
 import { ElOption, ElSelect, ElTag } from "element-plus"
-import { ref, defineComponent } from "vue"
+import { type PropType, watch, defineComponent } from "vue"
 import statService, { HostSet } from "@service/stat-service"
 import siteService from "@service/site-service"
 import { t } from "@app/locale"
 import TimeFormatFilterItem from "@app/components/common/TimeFormatFilterItem"
 import { labelOfHostInfo } from "../util"
+import { useRequest, useState } from "@hooks"
 
 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
+async function fetchDomain(queryStr: string): Promise<timer.site.SiteInfo[]> {
+    if (!queryStr) return []
 
     const options: Record<string, timer.site.SiteInfo> = {}
     const sites = await siteService.selectAll({ fuzzyQuery: queryStr })
@@ -39,8 +34,7 @@ async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<time
         const key = calcUniqueKey(o)
         !options[key] && (options[key] = o)
     })
-    trendDomainOptions.value = Object.values(options)
-    searching.value = false
+    return Object.values(options)
 }
 
 const HOST_PLACEHOLDER = t(msg => msg.analysis.common.hostPlaceholder)
@@ -85,21 +79,15 @@ const _default = defineComponent({
         timeFormatChange: (_format: timer.app.TimeFormat) => true,
     },
     setup(props, ctx) {
-        const domainKey: Ref<string> = ref('')
-        const trendSearching: Ref<boolean> = ref(false)
-        const trendDomainOptions: Ref<timer.site.SiteInfo[]> = ref([])
         const defaultSite: timer.site.SiteKey = props.site
-        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-
-        if (defaultSite) {
-            domainKey.value = calcKey(defaultSite)
-            trendDomainOptions.value.push(defaultSite)
-        }
-
-        const handleSiteChange = () => {
-            const siteInfo: timer.site.SiteInfo = calcSite(domainKey.value)
-            ctx.emit('siteChange', siteInfo)
-        }
+        const [domainKey, setDomainKey] = useState(defaultSite ? calcKey(defaultSite) : '')
+        const { data: trendDomainOptions, loading: trendSearching, refresh: searchRemote } = useRequest<string, timer.site.SiteInfo[]>(
+            fetchDomain,
+            { defaultValue: defaultSite ? [defaultSite] : [], manual: true }
+        )
+        const [timeFormat, setTimeFormat] = useState(props.timeFormat)
+        watch(domainKey, () => ctx.emit('siteChange', calcSite(domainKey.value)))
+        watch(timeFormat, () => ctx.emit('timeFormatChange', timeFormat.value))
 
         return () => <>
             <ElSelect
@@ -110,15 +98,9 @@ const _default = defineComponent({
                 remote
                 loading={trendSearching.value}
                 clearable
-                remoteMethod={(query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching)}
-                onChange={(key: string) => {
-                    domainKey.value = key
-                    handleSiteChange()
-                }}
-                onClear={() => {
-                    domainKey.value = undefined
-                    handleSiteChange()
-                }}
+                remoteMethod={searchRemote}
+                onChange={setDomainKey}
+                onClear={() => setDomainKey()}
             >
                 {(trendDomainOptions.value || [])?.map(
                     site => (
@@ -136,7 +118,7 @@ const _default = defineComponent({
             </ElSelect>
             <TimeFormatFilterItem
                 defaultValue={timeFormat.value}
-                onChange={val => ctx.emit("timeFormatChange", timeFormat.value = val)}
+                onChange={setTimeFormat}
             />
         </>
     }

src/app/components/Analysis/components/Summary/CalendarChart.tsx

@@ -1,4 +1,4 @@
-import { EchartsWrapper, useEcharts } from "@hooks/useEcharts"
+import { EchartsWrapper, useEcharts } from "@hooks"
 import { computed, defineComponent } from "vue"
 import { useAnalysisRows, useAnalysisTimeFormat } from "../../context"
 import {

src/app/components/Analysis/components/Trend/Dimension/Chart.tsx

@@ -10,7 +10,7 @@ import type { DimensionEntry, ValueFormatter } from "@app/components/Analysis/ut
 
 import { defineComponent, watch } from "vue"
 import ChartWrapper from "./wrapper"
-import { useEcharts } from "@hooks/useEcharts"
+import { useEcharts } from "@hooks"
 
 const _default = defineComponent({
     props: {

src/app/components/Analysis/components/Trend/Dimension/index.tsx

@@ -4,12 +4,8 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-
-import type { DimensionEntry, RingValue, ValueFormatter } from "@app/components/Analysis/util"
-import type { PropType } from "vue"
-
-import { computeRingText, formatValue } from "@app/components/Analysis/util"
-import { defineComponent } from "vue"
+import { computeRingText, formatValue, type DimensionEntry, type RingValue, type ValueFormatter } from "@app/components/Analysis/util"
+import { defineComponent, type PropType } from "vue"
 import { KanbanIndicatorCell } from "@app/components/common/kanban"
 import Chart from "./Chart"
 import { cvt2LocaleTime } from "@app/util/time"
@@ -30,7 +26,7 @@ const _default = defineComponent({
         valueFormatter: Function as PropType<ValueFormatter>,
         chartTitle: String,
     },
-    setup(p) {
+    setup: p => {
         return () => (
             <div class="analysis-trend-dimension-container" >
                 <div class="analysis-trend-dimension-indicator-container">

src/app/components/Analysis/components/Trend/Dimension/wrapper.ts

@@ -21,7 +21,7 @@ import { TitleComponent, TooltipComponent, GridComponent } from "echarts/compone
 
 import { ValueFormatter } from "@app/components/Analysis/util"
 import { getSecondaryTextColor } from "@util/style"
-import { EchartsWrapper } from "@hooks/useEcharts"
+import { EchartsWrapper } from "@hooks"
 import { ZRColor } from "echarts/types/dist/shared"
 
 use([

src/app/components/Analysis/components/Trend/Filter.tsx

@@ -6,12 +6,11 @@
  */
 
 import type { ElementDatePickerShortcut } from "@src/element-ui/date"
-import type { PropType } from "vue"
 import type { CalendarMessage } from "@i18n/message/common/calendar"
 
 import { t } from "@app/locale"
 import { ElDatePicker } from "element-plus"
-import { defineComponent, ref } from "vue"
+import { defineComponent, ref, type PropType } from "vue"
 import { daysAgo } from "@util/time"
 
 function datePickerShortcut(msgKey: keyof CalendarMessage['range'], agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {

src/app/components/Analysis/components/Trend/context.ts

@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { useProvide, useProvider } from "@hooks/useProvider"
+import { useProvide, useProvider } from "@hooks"
 import { Ref } from "vue"
 
 type Context = {

src/app/components/Analysis/components/Trend/index.tsx

@@ -5,9 +5,8 @@
  * https://opensource.org/licenses/MIT
  */
 import type { DimensionEntry, ValueFormatter } from "@app/components/Analysis/util"
-import type { Ref } from "vue"
 
-import { defineComponent, ref, watch, computed, onMounted } from "vue"
+import { defineComponent, type Ref, ref, watch, computed, onMounted } from "vue"
 import { KanbanCard } from "@app/components/common/kanban"
 import Filter from "./Filter"
 import Total from "./Total"
@@ -19,6 +18,7 @@ import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
 import { groupBy } from "@util/array"
 import { useAnalysisRows, useAnalysisTimeFormat } from "../../context"
 import { initProvider } from "./context"
+import { useState } from "@hooks"
 
 type DailyIndicator = {
     value: number
@@ -137,7 +137,7 @@ function handleDataChange(source: SourceParam, effect: EffectParam) {
 }
 
 const _default = defineComponent(() => {
-    const dateRange = ref<[Date, Date]>(daysAgo(14, 0))
+    const [dateRange, setDateRange] = useState<[Date, Date]>(daysAgo(14, 0))
     const rangeLength = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1]))
     initProvider(dateRange, rangeLength)
 
@@ -159,7 +159,7 @@ const _default = defineComponent(() => {
         <KanbanCard
             title={t(msg => msg.analysis.trend.title)}
             v-slots={{
-                filter: () => <Filter dateRange={dateRange.value} onDateRangeChange={val => dateRange.value = val} />
+                filter: () => <Filter dateRange={dateRange.value} onDateRangeChange={setDateRange} />
             }}
         >
             <div class="analysis-trend-content">

src/app/components/Analysis/context.ts

@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { useProvide, useProvider } from "@hooks/useProvider"
+import { useProvide, useProvider } from "@hooks"
 import { Ref } from "vue"
 
 type Context = {

src/app/components/Analysis/index.tsx

@@ -4,7 +4,7 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { defineComponent, watch, ref } from "vue"
+import { defineComponent } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import ContentContainer from "../common/ContentContainer"
 import Trend from "./components/Trend"
@@ -14,7 +14,7 @@ import statService, { StatQueryParam } from "@service/stat-service"
 import './style.sass'
 import { judgeVirtualFast } from "@util/pattern"
 import { initProvider } from "./context"
-import { useRequest } from "@hooks/useRequest"
+import { useRequest, useState } from "@hooks"
 
 type _Queries = {
     host: string
@@ -32,9 +32,8 @@ function getSiteFromQuery(): timer.site.SiteInfo {
 }
 
 async function query(site: timer.site.SiteKey): Promise<timer.stat.Row[]> {
-    if (!site?.host) {
-        return []
-    }
+    if (!site?.host) return []
+
     const param: StatQueryParam = {
         host: site.host,
         mergeHost: site?.merged || false,
@@ -46,21 +45,19 @@ async function query(site: timer.site.SiteKey): Promise<timer.stat.Row[]> {
 }
 
 const _default = defineComponent(() => {
-    const siteFromQuery = getSiteFromQuery()
-    const site = ref<timer.site.SiteKey>(siteFromQuery)
-    const timeFormat = ref<timer.app.TimeFormat>('default')
+    const [site, setSite] = useState(getSiteFromQuery())
+    const [timeFormat, setTimeFormat] = useState<timer.app.TimeFormat>('default')
 
-    const { data: rows, refresh, loading } = useRequest<timer.stat.Row[]>(() => site.value ? query(site.value) : [])
-    watch(site, refresh)
+    const { data: rows, loading } = useRequest(() => query(site.value), { deps: site })
 
     initProvider(site, timeFormat, rows)
     return () => (
         <ContentContainer v-slots={{
             filter: () => <Filter
                 site={site.value}
                 timeFormat={timeFormat.value}
-                onSiteChange={val => site.value = val}
-                onTimeFormatChange={val => timeFormat.value = val}
+                onSiteChange={setSite}
+                onTimeFormatChange={setTimeFormat}
             />
         }}>
             <div v-loading={loading.value}>