diff --git a/.vscode/settings.json b/.vscode/settings.json
index f39f435a..0b1106bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,10 +9,14 @@
         "Auths",
         "clipboardy",
         "countup",
+        "daterange",
         "echarts",
         "filemanager",
         "Hengyang",
         "Kanban",
+        "Popconfirm",
+        "vueuse",
+        "webtime",
         "zrender"
     ],
     "cSpell.ignorePaths": [
diff --git a/aaa b/aaa
new file mode 100644
index 00000000..68468eaf
Binary files /dev/null and b/aaa differ
diff --git a/package.json b/package.json
index 2096403d..19305cda 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@vueuse/core": "^10.7.2",
         "axios": "^1.6.5",
         "clipboardy": "^4.0.0",
         "countup.js": "^2.8.0",
@@ -71,4 +72,4 @@
     "engines": {
         "node": ">=18"
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/analysis/components/filter.ts b/src/app/components/Analysis/components/AnalysisFilter.tsx
similarity index 58%
rename from src/app/components/analysis/components/filter.ts
rename to src/app/components/Analysis/components/AnalysisFilter.tsx
index 8431601b..b928c779 100644
--- a/src/app/components/analysis/components/filter.ts
+++ b/src/app/components/Analysis/components/AnalysisFilter.tsx
@@ -1,14 +1,14 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
-import type { Ref, PropType, VNode } from "vue"
+import type { Ref, PropType } from "vue"
 
 import { ElOption, ElSelect, ElTag } from "element-plus"
-import { ref, h, defineComponent } from "vue"
+import { ref, defineComponent } from "vue"
 import statService, { HostSet } from "@service/stat-service"
 import siteService from "@service/site-service"
 import { t } from "@app/locale"
@@ -45,7 +45,7 @@ async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<time
 
 const HOST_PLACEHOLDER = t(msg => msg.analysis.common.hostPlaceholder)
 
-function keyOfHostInfo(option: timer.site.SiteKey): string {
+function calcKey(option: timer.site.SiteKey): string {
     const { merged, virtual, host } = option
     let prefix = '_'
     merged && (prefix = 'm')
@@ -53,7 +53,7 @@ function keyOfHostInfo(option: timer.site.SiteKey): string {
     return `${prefix}${host || ''}`
 }
 
-function hostInfoOfKey(key: string): timer.site.SiteKey {
+function calcSite(key: string): timer.site.SiteKey {
     if (!key?.length) return undefined
     const prefix = key.charAt(0)
     return { host: key.substring(1), merged: prefix === 'm', virtual: prefix === 'v' }
@@ -62,22 +62,18 @@ 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)
 
-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', {}, host)
-    ]
-    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
-}
+const SiteOptionTag = defineComponent({
+    props: {
+        text: String,
+    },
+    setup: ({ text }) => {
+        return () => (
+            <span style={{ float: "right", height: "34px" }}>
+                <ElTag size="small">{text}</ElTag>
+            </span>
+        )
+    }
+})
 
 const _default = defineComponent({
     props: {
@@ -91,48 +87,58 @@ const _default = defineComponent({
     setup(props, ctx) {
         const domainKey: Ref<string> = ref('')
         const trendSearching: Ref<boolean> = ref(false)
-        const trendDomainOptions: Ref<timer.site.SiteKey[]> = ref([])
+        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 = keyOfHostInfo(defaultSite)
+            domainKey.value = calcKey(defaultSite)
             trendDomainOptions.value.push(defaultSite)
         }
 
-        function handleSiteChange() {
-            const siteInfo: timer.site.SiteInfo = hostInfoOfKey(domainKey.value)
+        const handleSiteChange = () => {
+            const siteInfo: timer.site.SiteInfo = calcSite(domainKey.value)
             ctx.emit('siteChange', siteInfo)
         }
 
-        return () => [
-            h(ElSelect, {
-                placeholder: HOST_PLACEHOLDER,
-                class: 'filter-item',
-                modelValue: domainKey.value,
-                filterable: true,
-                remote: true,
-                loading: trendSearching.value,
-                clearable: true,
-                remoteMethod: (query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching),
-                onChange: (key: string) => {
+        return () => <>
+            <ElSelect
+                placeholder={HOST_PLACEHOLDER}
+                class="filter-item"
+                modelValue={domainKey.value}
+                filterable
+                remote
+                loading={trendSearching.value}
+                clearable
+                remoteMethod={(query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching)}
+                onChange={(key: string) => {
                     domainKey.value = key
                     handleSiteChange()
-                },
-                onClear: () => {
+                }}
+                onClear={() => {
                     domainKey.value = undefined
                     handleSiteChange()
-                }
-            }, () => (trendDomainOptions.value || [])?.map(
-                siteInfo => h(ElOption, {
-                    value: keyOfHostInfo(siteInfo),
-                    label: labelOfHostInfo(siteInfo),
-                }, () => renderHostLabel(siteInfo))
-            )),
-            h(TimeFormatFilterItem, {
-                defaultValue: timeFormat.value,
-                onSelect: (newVal: timer.app.TimeFormat) => ctx.emit('timeFormatChange', timeFormat.value = newVal)
-            })
-        ]
+                }}
+            >
+                {(trendDomainOptions.value || [])?.map(
+                    site => (
+                        <ElOption
+                            value={calcKey(site)}
+                            label={labelOfHostInfo(site)}
+                        >
+                            <span>{site.host}</span>
+                            {site.alias && <ElTag size="small" type="info">{site.alias}</ElTag>}
+                            {site.merged && <SiteOptionTag text={MERGED_TAG_TXT} />}
+                            {site.virtual && <SiteOptionTag text={VIRTUAL_TAG_TXT} />}
+                        </ElOption>
+                    )
+                )}
+            </ElSelect>
+            <TimeFormatFilterItem
+                defaultValue={timeFormat.value}
+                onChange={val => ctx.emit("timeFormatChange", timeFormat.value = val)}
+            />
+        </>
     }
 })
 
diff --git a/src/app/components/Analysis/components/Summary/Site.tsx b/src/app/components/Analysis/components/Summary/Site.tsx
new file mode 100644
index 00000000..a8ab2e65
--- /dev/null
+++ b/src/app/components/Analysis/components/Summary/Site.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Ref, defineComponent } from "vue"
+import { computedAsync } from "@vueuse/core"
+import { labelOfHostInfo } from "../../util"
+import { t } from "@app/locale"
+import { useAnalysisSite } from "../../context"
+import siteService from "@service/site-service"
+
+const EMPTY_DESC = t(msg => msg.analysis.common.emptyDesc)
+
+function renderChildren(site: timer.site.SiteInfo) {
+    if (!site) return <h1 class="site-alias">{EMPTY_DESC}</h1>
+
+    const { iconUrl, alias } = site
+    const label = labelOfHostInfo(site)
+    const title: string = alias ? alias : label
+    const subtitle: string = alias ? label : undefined
+    return <>
+        {iconUrl && <img src={iconUrl} width={24} height={24} />}
+        <h1 class="site-alias">{title}</h1>
+        {subtitle && <p class="site-host">{subtitle}</p>}
+    </>
+}
+
+const computedSiteInfo = async (siteKey: timer.site.SiteKey): Promise<timer.site.SiteInfo> => {
+    if (!siteKey) return undefined
+    return await siteService.get(siteKey)
+}
+
+const _default = defineComponent(() => {
+    const site = useAnalysisSite()
+    const siteInfo: Ref<timer.site.SiteInfo> = computedAsync(() => computedSiteInfo(site.value))
+    return () => (
+        <div class="site-container">
+            {renderChildren(siteInfo.value)}
+        </div>
+    )
+})
+
+export default _default
diff --git a/src/app/components/Analysis/components/Summary/index.tsx b/src/app/components/Analysis/components/Summary/index.tsx
new file mode 100644
index 00000000..218b423f
--- /dev/null
+++ b/src/app/components/Analysis/components/Summary/index.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import type { Ref } from "vue"
+
+import { computed, defineComponent } from "vue"
+import Site from "./Site"
+import { KanbanIndicatorCell, KanbanCard, KanbanIndicatorRow } from "@app/components/common/kanban"
+import "./summary.sass"
+import { ElCol } from "element-plus"
+import { t } from "@app/locale"
+import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
+import { useAnalysisRows, useAnalysisSite, useAnalysisTimeFormat } from "../../context"
+
+type Summary = {
+    focus: number
+    visit: number
+    day: number
+    firstDay?: string
+}
+
+function computeSummary(site: timer.site.SiteKey, rows: timer.stat.Row[]): Summary {
+    if (!site) return undefined
+
+    const summary: Summary = { focus: 0, visit: 0, day: 0 }
+    summary.firstDay = rows?.[0]?.date
+    rows?.forEach(({ focus, time: visit }) => {
+        summary.focus += focus
+        summary.visit += visit
+        focus && (summary.day += 1)
+    })
+    return summary
+}
+
+const DAYS_LABEL = t(msg => msg.analysis.summary.day)
+const FOCUS_LABEL = t(msg => msg.analysis.common.focusTotal)
+const VISIT_LABEL = t(msg => msg.analysis.common.visitTotal)
+
+const _default = defineComponent(() => {
+    const site = useAnalysisSite()
+    const timeFormat = useAnalysisTimeFormat()
+    const rows = useAnalysisRows()
+
+    const summary: Ref<Summary> = computed(() => computeSummary(site.value, rows.value))
+
+    return () => (
+        <KanbanCard title={t(msg => msg.analysis.summary.title)}>
+            <KanbanIndicatorRow>
+                <ElCol span={6}>
+                    <Site />
+                </ElCol>
+                <ElCol span={6}>
+                    <KanbanIndicatorCell
+                        mainName={DAYS_LABEL}
+                        mainValue={summary.value?.day?.toString?.() || '-'}
+                        subTips={msg => msg.analysis.summary.firstDay}
+                        subValue={summary.value?.firstDay ? `@${cvt2LocaleTime(summary.value?.firstDay)}` : ''}
+                    />
+                </ElCol>
+                <ElCol span={6}>
+                    <KanbanIndicatorCell
+                        mainName={FOCUS_LABEL}
+                        mainValue={summary.value?.focus === undefined ? '-' : periodFormatter(summary.value?.focus, timeFormat.value, false)}
+                    />
+                </ElCol>
+                <ElCol span={6}>
+                    <KanbanIndicatorCell mainName={VISIT_LABEL} mainValue={summary.value?.visit?.toString?.() || '-'} />
+                </ElCol>
+            </KanbanIndicatorRow>
+        </KanbanCard>
+    )
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/summary/summary.sass b/src/app/components/Analysis/components/Summary/summary.sass
similarity index 100%
rename from src/app/components/analysis/components/summary/summary.sass
rename to src/app/components/Analysis/components/Summary/summary.sass
diff --git a/src/app/components/analysis/components/trend/dimension/chart.ts b/src/app/components/Analysis/components/Trend/Dimension/Chart.tsx
similarity index 71%
rename from src/app/components/analysis/components/trend/dimension/chart.ts
rename to src/app/components/Analysis/components/Trend/Dimension/Chart.tsx
index bbd527fa..c9bb68e2 100644
--- a/src/app/components/analysis/components/trend/dimension/chart.ts
+++ b/src/app/components/Analysis/components/Trend/Dimension/Chart.tsx
@@ -6,9 +6,9 @@
  */
 
 import type { PropType, Ref } from "vue"
-import type { DimensionEntry, ValueFormatter } from "@app/components/analysis/util"
+import type { DimensionEntry, ValueFormatter } from "@app/components/Analysis/util"
 
-import { defineComponent, h, watch, onMounted, ref } from "vue"
+import { defineComponent, watch, onMounted, ref } from "vue"
 import ChartWrapper from "./wrapper"
 
 const _default = defineComponent({
@@ -20,7 +20,12 @@ const _default = defineComponent({
     setup(props) {
         const elRef: Ref<HTMLDivElement> = ref()
         const wrapper: ChartWrapper = new ChartWrapper()
-        const render = () => wrapper.render({ entries: props.data, title: props.title, valueFormatter: props.valueFormatter })
+
+        const render = () => wrapper.render({
+            entries: props.data,
+            title: props.title,
+            valueFormatter: props.valueFormatter,
+        })
 
         watch(() => props.data, render)
         watch(() => props.valueFormatter, render)
@@ -30,7 +35,7 @@ const _default = defineComponent({
             render()
         })
 
-        return () => h('div', { class: 'analysis-trend-dimension-chart', ref: elRef })
+        return () => <div class="analysis-trend-dimension-chart" ref={elRef} />
     }
 })
 
diff --git a/src/app/components/Analysis/components/Trend/Dimension/index.tsx b/src/app/components/Analysis/components/Trend/Dimension/index.tsx
new file mode 100644
index 00000000..41f1e967
--- /dev/null
+++ b/src/app/components/Analysis/components/Trend/Dimension/index.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * 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 { KanbanIndicatorCell } from "@app/components/common/kanban"
+import Chart from "./Chart"
+import { cvt2LocaleTime } from "@app/util/time"
+
+const _default = defineComponent({
+    props: {
+        maxLabel: String,
+        maxValue: Number,
+        averageLabel: String,
+        maxDate: String,
+        average: [Object, Object] as PropType<RingValue>,
+        data: Array as PropType<DimensionEntry[]>,
+        valueFormatter: Function as PropType<ValueFormatter>,
+        chartTitle: String,
+    },
+    setup(p) {
+        return () => (
+            <div class="analysis-trend-dimension-container" >
+                <div class="analysis-trend-dimension-indicator-container">
+                    <div class="analysis-trend-dimension-indicator-item">
+                        <KanbanIndicatorCell
+                            mainName={p.maxLabel}
+                            mainValue={p.valueFormatter ? p.valueFormatter(p.maxValue) : p.maxValue?.toString() || '-'}
+                            subValue={p.maxDate ? `@${cvt2LocaleTime(p.maxDate)}` : ''}
+                        />
+                    </div>
+                    <div class="analysis-trend-dimension-indicator-item">
+                        <KanbanIndicatorCell
+                            mainName={p.averageLabel}
+                            mainValue={formatValue(p.average?.[0], p.valueFormatter)}
+                            subTips={msg => msg.analysis.common.ringGrowth}
+                            subValue={computeRingText(p.average, p.valueFormatter)}
+                        />
+                    </div>
+                </div>
+                <div class="analysis-trend-dimension-chart-container">
+                    <Chart
+                        data={p.data}
+                        valueFormatter={p.valueFormatter}
+                        title={p.chartTitle}
+                    />
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
diff --git a/src/app/components/analysis/components/trend/dimension/wrapper.ts b/src/app/components/Analysis/components/Trend/Dimension/wrapper.ts
similarity index 97%
rename from src/app/components/analysis/components/trend/dimension/wrapper.ts
rename to src/app/components/Analysis/components/Trend/Dimension/wrapper.ts
index 694e7936..d359f634 100644
--- a/src/app/components/analysis/components/trend/dimension/wrapper.ts
+++ b/src/app/components/Analysis/components/Trend/Dimension/wrapper.ts
@@ -22,7 +22,7 @@ import TitleComponent from "@echarts/component/title"
 import TooltipComponent from "@echarts/component/tooltip"
 import GridComponent from '@echarts/component/grid'
 
-import { ValueFormatter } from "@app/components/analysis/util"
+import { ValueFormatter } from "@app/components/Analysis/util"
 import { getSecondaryTextColor } from "@util/style"
 import { EchartsWrapper } from "@app/components/common/echarts-wrapper"
 
diff --git a/src/app/components/analysis/components/trend/filter.ts b/src/app/components/Analysis/components/Trend/Filter.tsx
similarity index 62%
rename from src/app/components/analysis/components/trend/filter.ts
rename to src/app/components/Analysis/components/Trend/Filter.tsx
index 6beb76e2..e128174b 100644
--- a/src/app/components/analysis/components/trend/filter.ts
+++ b/src/app/components/Analysis/components/Trend/Filter.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2023 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -11,7 +11,7 @@ import type { CalendarMessage } from "@i18n/message/common/calendar"
 
 import { t } from "@app/locale"
 import { ElDatePicker } from "element-plus"
-import { defineComponent, h, ref } from "vue"
+import { defineComponent, ref } from "vue"
 import { daysAgo } from "@util/time"
 
 function datePickerShortcut(msgKey: keyof CalendarMessage['range'], agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
@@ -21,6 +21,12 @@ function datePickerShortcut(msgKey: keyof CalendarMessage['range'], agoOfStart?:
     }
 }
 
+const DATE_FORMAT = t(msg => msg.calendar.dateFormat, {
+    y: 'YYYY',
+    m: 'MM',
+    d: 'DD'
+})
+
 const SHORTCUTS = [
     datePickerShortcut('last7Days', 7),
     datePickerShortcut('last15Days', 15),
@@ -36,24 +42,21 @@ const _default = defineComponent({
         dateRangeChange: (_val: [Date, Date]) => true
     },
     setup(props, ctx) {
-        const dateFormat = t(msg => msg.calendar.dateFormat, {
-            y: 'YYYY',
-            m: 'MM',
-            d: 'DD'
-        })
         const dateRange: Ref<[Date, Date]> = ref(props.dateRange)
-        return () => h('div', [
-            h(ElDatePicker, {
-                modelValue: dateRange.value,
-                disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
-                format: dateFormat,
-                type: 'daterange',
-                shortcuts: SHORTCUTS,
-                rangeSeparator: '-',
-                clearable: false,
-                'onUpdate:modelValue': (newVal: [Date, Date]) => ctx.emit("dateRangeChange", dateRange.value = newVal),
-            })
-        ])
+        return () => (
+            <div>
+                <ElDatePicker
+                    modelValue={dateRange.value}
+                    disabledDate={(date: Date) => date.getTime() > new Date().getTime()}
+                    format={DATE_FORMAT}
+                    type="daterange"
+                    shortcuts={SHORTCUTS}
+                    rangeSeparator="-"
+                    clearable={false}
+                    onUpdate:modelValue={(newVal: [Date, Date]) => ctx.emit("dateRangeChange", dateRange.value = newVal)}
+                />
+            </div>
+        )
     }
 })
 
diff --git a/src/app/components/Analysis/components/Trend/Total.tsx b/src/app/components/Analysis/components/Trend/Total.tsx
new file mode 100644
index 00000000..9d2c7909
--- /dev/null
+++ b/src/app/components/Analysis/components/Trend/Total.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { RingValue } from "@app/components/Analysis/util"
+import type { PropType } from "vue"
+import type { I18nKey } from "@app/locale"
+
+import { defineComponent } from "vue"
+import { KanbanIndicatorCell } from "@app/components/common/kanban"
+import { t } from "@app/locale"
+import { periodFormatter } from "@app/util/time"
+import { computeRingText } from "@app/components/Analysis/util"
+import { useAnalysisTrendRangeLength } from "./context"
+import { useAnalysisTimeFormat } from "../../context"
+
+const DAY_LABEL = `${t(msg => msg.analysis.trend.activeDay)}/${t(msg => msg.analysis.trend.totalDay)}`
+const VISIT_LABEL = t(msg => msg.analysis.common.visitTotal)
+const FOCUS_LABEL = t(msg => msg.analysis.common.focusTotal)
+const RING_TIP: I18nKey = msg => msg.analysis.common.ringGrowth
+
+const computeDayValue = (activeDay: RingValue, rangeLength: number) => {
+    const thisActiveDay = activeDay?.[0]
+    return `${thisActiveDay?.toString() || '-'}/${rangeLength?.toString() || '-'}`
+}
+
+const computeFocusText = (focusRing: RingValue, format: timer.app.TimeFormat) => {
+    const current = focusRing?.[0]
+    return current === undefined ? '-' : periodFormatter(current, format)
+}
+
+const _default = defineComponent({
+    props: {
+        activeDay: [Object, Object] as PropType<RingValue>,
+        visit: [Object, Object] as PropType<RingValue>,
+        focus: [Object, Object] as PropType<RingValue>,
+    },
+    setup(props) {
+        const rangeLength = useAnalysisTrendRangeLength()
+        const timeFormat = useAnalysisTimeFormat()
+        return () => (
+            <div class="analysis-trend-total-container">
+                <div>
+                    <KanbanIndicatorCell
+                        mainName={DAY_LABEL}
+                        mainValue={computeDayValue(props.activeDay, rangeLength.value)}
+                        subTips={RING_TIP}
+                        subValue={computeRingText(props.activeDay)}
+                    />
+                </div>
+                <div>
+                    <KanbanIndicatorCell
+                        mainName={FOCUS_LABEL}
+                        mainValue={computeFocusText(props.focus, timeFormat.value)}
+                        subTips={RING_TIP}
+                        subValue={computeRingText(props.focus, delta => periodFormatter(delta, timeFormat.value))}
+                    />
+                </div>
+                <div>
+                    <KanbanIndicatorCell
+                        mainName={VISIT_LABEL}
+                        mainValue={props.visit?.[0]?.toString() || '-'}
+                        subTips={RING_TIP}
+                        subValue={computeRingText(props.visit)}
+                    />
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Analysis/components/Trend/context.ts b/src/app/components/Analysis/components/Trend/context.ts
new file mode 100644
index 00000000..f0b7c18a
--- /dev/null
+++ b/src/app/components/Analysis/components/Trend/context.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2024 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+import { Ref } from "vue"
+
+type Context = {
+    dateRange: Ref<[Date, Date]>
+    rangeLength: Ref<number>
+}
+
+const NAMESPACE = 'siteAnalysis_trend'
+
+export const initProvider = (
+    dateRange: Ref<[Date, Date]>,
+    rangeLength: Ref<number>
+) => provideWithNs<Context>(NAMESPACE, {
+    dateRange, rangeLength
+})
+
+export const useAnalysisTrendDateRange = (): Ref<[Date, Date]> => useProviderWithNs<Context>(NAMESPACE, "dateRange").dateRange
+
+export const useAnalysisTrendRangeLength = (): Ref<number> => useProviderWithNs<Context>(NAMESPACE, "rangeLength").rangeLength
\ No newline at end of file
diff --git a/src/app/components/analysis/components/trend/index.ts b/src/app/components/Analysis/components/Trend/index.tsx
similarity index 52%
rename from src/app/components/analysis/components/trend/index.ts
rename to src/app/components/Analysis/components/Trend/index.tsx
index 8ea2fa2f..e558a339 100644
--- a/src/app/components/analysis/components/trend/index.ts
+++ b/src/app/components/Analysis/components/Trend/index.tsx
@@ -4,19 +4,21 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import type { DimensionEntry, ValueFormatter } from "@app/components/analysis/util"
-import type { PropType, Ref, ComputedRef } from "vue"
+import type { DimensionEntry, ValueFormatter } from "@app/components/Analysis/util"
+import type { Ref } from "vue"
 
-import { defineComponent, h, ref, watch, computed } from "vue"
+import { defineComponent, ref, watch, computed, onMounted } from "vue"
 import { KanbanCard } from "@app/components/common/kanban"
-import Filter from "./filter"
-import Total from "./total"
-import Dimension from "./dimension"
+import Filter from "./Filter"
+import Total from "./Total"
+import Dimension from "./Dimension"
 import { t } from "@app/locale"
 import './style.sass'
 import { MILL_PER_DAY, daysAgo, getAllDatesBetween, getDayLength } from "@util/time"
 import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
 import { groupBy } from "@util/array"
+import { useAnalysisRows, useAnalysisTimeFormat } from "../../context"
+import { initProvider } from "./context"
 
 type DailyIndicator = {
     value: number
@@ -100,13 +102,7 @@ function lastRange(dateRange: [Date, Date]): [Date, Date] {
     return [newStart, newEnd]
 }
 
-const visitFormatter: ValueFormatter = (val: number) => {
-    if (Number.isInteger(val)) {
-        return val.toString()
-    } else {
-        return val?.toFixed(1) || '-'
-    }
-}
+const visitFormatter: ValueFormatter = (val: number) => Number.isInteger(val) ? val.toString() : val?.toFixed(1) || '-'
 
 function handleDataChange(source: SourceParam, effect: EffectParam) {
     const { dateRange, rows } = source
@@ -129,97 +125,67 @@ function handleDataChange(source: SourceParam, effect: EffectParam) {
     lastIndicators.value = computeIndicatorSet(rows, lastRange(dateRange))[0]
 }
 
-const renderTotal = (
-    indicators: IndicatorSet,
-    lastIndicators: IndicatorSet,
-    timeFormat: timer.app.TimeFormat,
-    rangeLength: number,
-) => h('div',
-    { class: 'analysis-trend-content-col0' },
-    h(Total, {
-        activeDay: [indicators?.activeDay, lastIndicators?.activeDay],
-        rangeLength: rangeLength,
-        visit: [indicators?.visit?.total, lastIndicators?.visit?.total],
-        focus: [indicators?.focus?.total, lastIndicators?.focus?.total],
-        timeFormat,
-    })
-)
-
-const renderFocusTrend = (
-    indicators: IndicatorSet,
-    lastIndicators: IndicatorSet,
-    timeFormat: timer.app.TimeFormat,
-    data: DimensionEntry[],
-) => h('div',
-    { class: 'analysis-trend-content-col1' },
-    h(Dimension, {
-        maxLabel: FOCUS_MAX,
-        maxValue: indicators?.focus?.max?.value,
-        maxDate: indicators?.focus?.max?.date,
-        averageLabel: FOCUS_AVE,
-        average: [indicators?.focus?.average, lastIndicators?.focus?.average],
-        valueFormatter: (val: number) => val === undefined ? '-' : periodFormatter(val, timeFormat),
-        data,
-        chartTitle: FOCUS_CHART_TITLE,
-    })
-)
-
-const renderVisitTrend = (
-    indicators: IndicatorSet,
-    lastIndicators: IndicatorSet,
-    data: DimensionEntry[],
-) => h('div',
-    { class: 'analysis-trend-content-col2' },
-    h(Dimension, {
-        maxLabel: VISIT_MAX,
-        maxValue: indicators?.visit?.max?.value,
-        maxDate: indicators?.visit?.max?.date,
-        averageLabel: VISIT_AVE,
-        average: [indicators?.visit?.average, lastIndicators?.visit?.average],
-        valueFormatter: visitFormatter,
-        data,
-        chartTitle: VISIT_CHART_TITLE,
-    })
-)
-
-const _default = defineComponent({
-    props: {
-        rows: Array as PropType<timer.stat.Row[]>,
-        timeFormat: String as PropType<timer.app.TimeFormat>,
-    },
-    setup(props) {
-        const dateRange: Ref<[Date, Date]> = ref(daysAgo(29, 0))
-        const visitData: Ref<DimensionEntry[]> = ref([])
-        const focusData: Ref<DimensionEntry[]> = ref([])
-        const indicators: Ref<IndicatorSet> = ref()
-        const lastIndicators: Ref<IndicatorSet> = ref()
-        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const rangeLength: ComputedRef<number> = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1]))
-
-        const compute = () => handleDataChange(
-            { dateRange: dateRange.value, rows: props.rows },
-            { indicators, lastIndicators, visitData, focusData }
-        )
-
-        watch(() => props.rows, compute)
-        watch(dateRange, compute)
-        watch(() => props.timeFormat, () => timeFormat.value = props.timeFormat)
-
-        compute()
-        return () => h(KanbanCard, {
-            title: t(msg => msg.analysis.trend.title),
-        }, {
-            filter: () => h(Filter, {
-                dateRange: dateRange.value,
-                onDateRangeChange: (newVal: [Date, Date]) => dateRange.value = newVal,
-            }),
-            default: () => h('div', { class: 'analysis-trend-content' }, [
-                renderTotal(indicators.value, lastIndicators.value, timeFormat.value, rangeLength.value),
-                renderFocusTrend(indicators.value, lastIndicators.value, timeFormat.value, focusData.value),
-                renderVisitTrend(indicators.value, lastIndicators.value, visitData.value),
-            ])
-        })
-    }
+const _default = defineComponent(() => {
+    const dateRange: Ref<[Date, Date]> = ref(daysAgo(29, 0))
+    const rangeLength: Ref<number> = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1]))
+    initProvider(dateRange, rangeLength)
+
+    const visitData: Ref<DimensionEntry[]> = ref([])
+    const focusData: Ref<DimensionEntry[]> = ref([])
+    const indicators: Ref<IndicatorSet> = ref()
+    const lastIndicators: Ref<IndicatorSet> = ref()
+    const rows = useAnalysisRows()
+    const timeFormat = useAnalysisTimeFormat()
+
+    const computeEffect = () => handleDataChange(
+        { dateRange: dateRange.value, rows: rows.value },
+        { indicators, lastIndicators, visitData, focusData }
+    )
+    watch([dateRange, rows], computeEffect)
+    onMounted(computeEffect)
+
+    return () => (
+        <KanbanCard
+            title={t(msg => msg.analysis.trend.title)}
+            v-slots={{
+                filter: () => <Filter dateRange={dateRange.value} onDateRangeChange={val => dateRange.value = val} />
+            }}
+        >
+            <div class="analysis-trend-content">
+                <div class="analysis-trend-content-col0">
+                    <Total
+                        activeDay={[indicators.value?.activeDay, lastIndicators.value?.activeDay]}
+                        visit={[indicators.value?.visit?.total, lastIndicators.value?.visit?.total]}
+                        focus={[indicators.value?.focus?.total, lastIndicators.value?.focus?.total]}
+                    />
+                </div>
+                <div class="analysis-trend-content-col1">
+                    <Dimension
+                        maxLabel={FOCUS_MAX}
+                        maxValue={indicators.value?.focus?.max?.value}
+                        maxDate={indicators.value?.focus?.max?.date}
+                        averageLabel={FOCUS_AVE}
+                        average={[indicators.value?.focus?.average, lastIndicators.value?.focus?.average]}
+                        valueFormatter={val => val === undefined ? '-' : periodFormatter(val, timeFormat.value)}
+                        data={focusData.value}
+                        chartTitle={FOCUS_CHART_TITLE}
+                    />
+                </div>
+                <div class="analysis-trend-content-col2">
+                    <Dimension
+                        maxLabel={VISIT_MAX}
+                        maxValue={indicators.value?.visit?.max?.value}
+                        maxDate={indicators.value?.visit?.max?.date}
+                        averageLabel={VISIT_AVE}
+                        average={[indicators.value?.visit?.average, lastIndicators.value?.visit?.average]}
+                        valueFormatter={visitFormatter}
+                        data={visitData.value}
+                        chartTitle={VISIT_CHART_TITLE}
+                    />
+                </div>
+            </div>
+        </KanbanCard>
+    )
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/trend/style.sass b/src/app/components/Analysis/components/Trend/style.sass
similarity index 100%
rename from src/app/components/analysis/components/trend/style.sass
rename to src/app/components/Analysis/components/Trend/style.sass
diff --git a/src/app/components/Analysis/context.ts b/src/app/components/Analysis/context.ts
new file mode 100644
index 00000000..7dcdc319
--- /dev/null
+++ b/src/app/components/Analysis/context.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+import { Ref } from "vue"
+
+type Context = {
+    site: Ref<timer.site.SiteKey>
+    timeFormat: Ref<timer.app.TimeFormat>
+    rows: Ref<timer.stat.Row[]>
+}
+
+const NAMESPACE = 'siteAnalysis'
+
+export const initProvider = (
+    site: Ref<timer.site.SiteKey>,
+    timeFormat: Ref<timer.app.TimeFormat>,
+    rows: Ref<timer.stat.Row[]>,
+) => provideWithNs<Context>(NAMESPACE, {
+    site, timeFormat, rows
+})
+
+export const useAnalysisSite = (): Ref<timer.site.SiteKey> => useProviderWithNs<Context>(NAMESPACE, "site").site
+
+export const useAnalysisTimeFormat = (): Ref<timer.app.TimeFormat> => useProviderWithNs<Context>(NAMESPACE, "timeFormat").timeFormat
+
+export const useAnalysisRows = (): Ref<timer.stat.Row[]> => useProviderWithNs<Context>(NAMESPACE, "rows").rows
\ No newline at end of file
diff --git a/src/app/components/analysis/index.ts b/src/app/components/Analysis/index.tsx
similarity index 67%
rename from src/app/components/analysis/index.ts
rename to src/app/components/Analysis/index.tsx
index 30ef505d..50d3acca 100644
--- a/src/app/components/analysis/index.ts
+++ b/src/app/components/Analysis/index.tsx
@@ -7,15 +7,16 @@
 
 import type { Ref } from "vue"
 
-import { defineComponent, h, onMounted, watch, ref } from "vue"
+import { defineComponent, onMounted, watch, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import ContentContainer from "../common/content-container"
-import Trend from "./components/trend"
-import Filter from "./components/filter"
-import Summary from "./components/summary"
+import Trend from "./components/Trend"
+import Filter from "./components/AnalysisFilter"
+import Summary from "./components/Summary"
 import statService, { StatQueryParam } from "@service/stat-service"
 import './style.sass'
 import { judgeVirtualFast } from "@util/pattern"
+import { initProvider } from "./context"
 
 type _Queries = {
     host: string
@@ -28,9 +29,7 @@ function getSiteFromQuery(): timer.site.SiteInfo {
     useRouter().replace({ query: {} })
     const { host, merge } = query
     // Init with queries
-    if (!host) {
-        return undefined
-    }
+    if (!host) return undefined
     return { host, merged: merge === "1", virtual: judgeVirtualFast(host) }
 }
 
@@ -54,6 +53,8 @@ const _default = defineComponent(() => {
     const timeFormat: Ref<timer.app.TimeFormat> = ref('default')
     const rows: Ref<timer.stat.Row[]> = ref()
 
+    initProvider(site, timeFormat, rows)
+
     const queryInner = async () => {
         const siteKey = site.value
         rows.value = siteKey ? (await query(siteKey)) || [] : undefined
@@ -62,18 +63,19 @@ const _default = defineComponent(() => {
     onMounted(() => queryInner())
     watch(site, queryInner)
 
-    return () => h(ContentContainer, {}, {
-        filter: () => h(Filter, {
-            site: site.value,
-            timeFormat: timeFormat.value,
-            onSiteChange: (newSite: timer.site.SiteKey) => site.value = newSite,
-            onTimeFormatChange: (newFormat: timer.app.TimeFormat) => timeFormat.value = newFormat
-        }),
-        default: () => [
-            h(Summary, { site: site.value, rows: rows.value, timeFormat: timeFormat.value }),
-            h(Trend, { rows: rows.value, timeFormat: timeFormat.value }),
-        ]
-    })
+    return () => (
+        <ContentContainer v-slots={{
+            filter: () => <Filter
+                site={site.value}
+                timeFormat={timeFormat.value}
+                onSiteChange={val => site.value = val}
+                onTimeFormatChange={val => timeFormat.value = val}
+            />
+        }}>
+            <Summary />
+            <Trend />
+        </ContentContainer>
+    )
 })
 
 export default _default
diff --git a/src/app/components/analysis/style.sass b/src/app/components/Analysis/style.sass
similarity index 100%
rename from src/app/components/analysis/style.sass
rename to src/app/components/Analysis/style.sass
diff --git a/src/app/components/analysis/util.ts b/src/app/components/Analysis/util.ts
similarity index 86%
rename from src/app/components/analysis/util.ts
rename to src/app/components/Analysis/util.ts
index c640b88f..ed9e2bd9 100644
--- a/src/app/components/analysis/util.ts
+++ b/src/app/components/Analysis/util.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2022 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -8,7 +8,7 @@
 import { t } from "@app/locale"
 
 /**
- * Transfer host info to label 
+ * Transfer host info to label
  */
 export function labelOfHostInfo(site: timer.site.SiteKey): string {
     if (!site) return ''
@@ -24,12 +24,12 @@ export type RingValue = [number, number]
 
 /**
  * Compute ring text
- * 
+ *
  * @param ring ring value
- * @param fromatter formatter
+ * @param formatter formatter
  * @returns text or '-'
  */
-export function computeRingText(ring: RingValue, fromatter?: ValueFormatter): string {
+export function computeRingText(ring: RingValue, formatter?: ValueFormatter): string {
     if (!ring) {
         return '-'
     }
@@ -39,7 +39,7 @@ export function computeRingText(ring: RingValue, fromatter?: ValueFormatter): st
         return '-'
     }
     const delta = (current || 0) - (last || 0)
-    let result = fromatter ? fromatter(delta) : delta?.toString()
+    let result = formatter ? formatter(delta) : delta?.toString()
     delta >= 0 && (result = '+' + result)
     return result
 }
diff --git a/src/app/components/Dashboard/components/Indicator/index.tsx b/src/app/components/Dashboard/components/Indicator/index.tsx
index 5e98b1ef..1489b8ae 100644
--- a/src/app/components/Dashboard/components/Indicator/index.tsx
+++ b/src/app/components/Dashboard/components/Indicator/index.tsx
@@ -92,7 +92,6 @@ const IndicatorLabel = defineComponent({
         const myParam: Ref<Record<string, number>> = ref()
         watch(() => props.param, () => myParam.value = props.param)
         const i18nParam = computed(() => computeI18nParam(myParam.value, props.duration))
-        watch(i18nParam, () => console.log(i18nParam.value))
         return () => (
             <div class="indicator-label" >
                 {
diff --git a/src/app/components/data-manage/clear/filter/date-filter.ts b/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx
similarity index 57%
rename from src/app/components/data-manage/clear/filter/date-filter.ts
rename to src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx
index b41f48a6..15994c7d 100644
--- a/src/app/components/data-manage/clear/filter/date-filter.ts
+++ b/src/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx
@@ -1,16 +1,16 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { DateModelType, ElDatePicker } from "element-plus"
-import { h, defineComponent, PropType } from "vue"
+import { defineComponent, PropType } from "vue"
 import { formatTime, MILL_PER_DAY } from "@util/time"
-import { t, tN } from "@app/locale"
+import { t } from "@app/locale"
 import { DataManageMessage } from "@i18n/message/app/data-manage"
-import { stepNoClz } from "./constants"
+import I18nNode from "@app/components/common/I18nNode"
 
 const yesterday = new Date().getTime() - MILL_PER_DAY
 const daysBefore = (days: number) => new Date().getTime() - days * MILL_PER_DAY
@@ -38,7 +38,6 @@ const startPlaceholder = t(msg => msg.calendar.dateFormat, { y: '1994', m: '12',
 const endPlaceholder = formatTime(yesterday, t(msg => msg.calendar.dateFormat))
 
 const _default = defineComponent({
-    name: "DateFilter",
     emits: {
         change: (_date: [DateModelType, DateModelType]) => true
     },
@@ -46,25 +45,29 @@ const _default = defineComponent({
         dateRange: Object as PropType<[DateModelType, DateModelType]>
     },
     setup(props, ctx) {
-        return () => h('p', [
-            h('a', { class: stepNoClz }, '1.'),
-            tN(msg => msg.dataManage.filterDate, {
-                // @ts-ignore
-                picker: h(ElDatePicker, {
-                    modelValue: props.dateRange,
-                    "onUpdate:modelValue": (date: [DateModelType, DateModelType]) => ctx.emit('change', date),
-                    size: 'small',
-                    style: 'width: 250px;',
-                    startPlaceholder,
-                    format: dateFormat,
-                    endPlaceholder,
-                    type: 'daterange',
-                    disabledDate(date: Date) { return date.getTime() > yesterday },
-                    shortcuts: pickerShortcuts,
-                    rangeSeparator: '-'
-                })
-            })
-        ])
+        return () => (
+            <p key="foobar">
+                <a class="step-no">1.</a>
+                <I18nNode
+                    path={msg => msg.dataManage.filterDate}
+                    param={{
+                        picker: <ElDatePicker
+                            modelValue={props.dateRange}
+                            onUpdate:modelValue={date => ctx.emit("change", date)}
+                            size="small"
+                            style={{ width: "250px" }}
+                            startPlaceholder={startPlaceholder}
+                            endPlaceholder={endPlaceholder}
+                            dateFormat={dateFormat}
+                            type="daterange"
+                            disabledDate={(date: Date) => date.getTime() > yesterday}
+                            shortcuts={pickerShortcuts}
+                            rangeSeparator="-"
+                        />
+                    }}
+                />
+            </p>
+        )
     }
 })
 
diff --git a/src/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx b/src/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx
new file mode 100644
index 00000000..5bb8c649
--- /dev/null
+++ b/src/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElInput } from "element-plus"
+import { h, defineComponent, PropType, ref, watch } from "vue"
+import { t } from "@app/locale"
+import { DataManageMessage } from "@i18n/message/app/data-manage"
+import I18nNode from "@app/components/common/I18nNode"
+
+const elInput = (val: string, setter: (val: string) => void, placeholder: string, min?: string) =>
+    h(ElInput, {
+        class: 'filter-input',
+        placeholder: placeholder,
+        min: min !== undefined ? min || '0' : undefined,
+        clearable: true,
+        size: 'small',
+        modelValue: val,
+        onInput: (val: string) => setter?.(val.trim()),
+        onClear: () => setter?.('')
+    })
+
+const _default = defineComponent({
+    props: {
+        translateKey: String as PropType<keyof DataManageMessage>,
+        defaultValue: Object as PropType<[string, string]>,
+        lineNo: Number,
+    },
+    emits: {
+        change: (_val: [string, string]) => true,
+    },
+    setup(props, ctx) {
+        const start = ref(props.defaultValue?.[0])
+        const end = ref(props.defaultValue?.[1])
+        watch([start, end], () => ctx.emit("change", [start.value, end.value]))
+
+        return () => (
+            <p>
+                <a class="step-no">{props.lineNo}.</a>
+                <I18nNode
+                    path={msg => msg.dataManage[props.translateKey]}
+                    param={{
+                        start: elInput(start.value, v => start.value = v, '0'),
+                        end: elInput(end.value, v => end.value = v, t(msg => msg.dataManage.unlimited), start.value)
+                    }}
+                />
+            </p>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/DataManage/ClearPanel/ClearFilter/index.tsx b/src/app/components/DataManage/ClearPanel/ClearFilter/index.tsx
new file mode 100644
index 00000000..91a5351d
--- /dev/null
+++ b/src/app/components/DataManage/ClearPanel/ClearFilter/index.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref } from "vue"
+
+import { defineComponent, ref } from "vue"
+import { t } from "@app/locale"
+import DateFilter from "./DateFilter"
+import NumberFilter from "./NumberFilter"
+import { DateModelType, ElButton } from "element-plus"
+import { Delete } from "@element-plus/icons-vue"
+
+export type ClearFilterInstance = {
+    getFilterOption(): DataManageClearFilterOption
+}
+
+const _default = defineComponent({
+    emits: {
+        delete: () => true
+    },
+    setup(_, ctx) {
+        const dateRange: Ref<[DateModelType, DateModelType]> = ref([null, null])
+        const focus: Ref<[string, string]> = ref(['0', '2'])
+        const time: Ref<[string, string]> = ref(['0', ''])
+
+        const instance: ClearFilterInstance = {
+            getFilterOption: () => ({
+                dateRange: dateRange.value,
+                focusStart: focus.value?.[0],
+                focusEnd: focus.value?.[1],
+                timeStart: time.value?.[0],
+                timeEnd: time.value?.[1],
+            } as DataManageClearFilterOption)
+        }
+
+        ctx.expose(instance)
+
+        return () => (
+            <div class="clear-panel">
+                <h3>{t(msg => msg.dataManage.filterItems)}</h3>
+                <DateFilter dateRange={dateRange.value} onChange={val => dateRange.value = val} />
+                <NumberFilter
+                    translateKey="filterFocus"
+                    defaultValue={focus.value}
+                    lineNo={2}
+                />
+                <NumberFilter
+                    translateKey="filterTime"
+                    defaultValue={time.value}
+                    lineNo={3}
+                    onChange={val => time.value = val}
+                />
+                <div class="footer-container filter-container">
+                    <ElButton
+                        icon={<Delete />}
+                        type="danger"
+                        size="small"
+                        onClick={() => ctx.emit("delete")}
+                    >
+                        {t(msg => msg.item.operation.delete)}
+                    </ElButton>
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/clear/clear.d.ts b/src/app/components/DataManage/ClearPanel/clear.d.ts
similarity index 100%
rename from src/app/components/data-manage/clear/clear.d.ts
rename to src/app/components/DataManage/ClearPanel/clear.d.ts
diff --git a/src/app/components/data-manage/clear/index.ts b/src/app/components/DataManage/ClearPanel/index.tsx
similarity index 87%
rename from src/app/components/data-manage/clear/index.ts
rename to src/app/components/DataManage/ClearPanel/index.tsx
index 224215aa..4c22cba0 100644
--- a/src/app/components/data-manage/clear/index.ts
+++ b/src/app/components/DataManage/ClearPanel/index.tsx
@@ -1,15 +1,15 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus"
-import { defineComponent, h, Ref, ref, SetupContext } from "vue"
+import { defineComponent, Ref, ref, SetupContext } from "vue"
 import { t } from "@app/locale"
 import { alertProps } from "../common"
-import Filter, { FilterInstance } from "./filter"
+import ClearFilter, { ClearFilterInstance } from "./ClearFilter"
 import StatDatabase, { StatCondition } from "@db/stat-database"
 import { MILL_PER_DAY } from "@util/time"
 
@@ -58,7 +58,7 @@ function generateParamAndSelect(props: DataManageClearFilterOption): Promise<tim
 
 /**
  * Assert query param with numeric range
- * 
+ *
  * @param range       numeric range, 2-length array
  * @param mustInteger must be integer?
  * @returns true when has error, or false
@@ -109,19 +109,13 @@ const _default = defineComponent({
         dataDelete: () => true
     },
     setup(_, ctx) {
-        const filter: Ref<FilterInstance> = ref()
-        return () => h(ElCard, {
-            class: 'clear-container'
-        }, () => [
-            h(ElAlert, {
-                ...alertProps,
-                title: t(msg => msg.dataManage.operationAlert)
-            }),
-            h(Filter, {
-                ref: filter,
-                onDelete: () => handleClick(filter, ctx),
-            }),
-        ])
+        const filter: Ref<ClearFilterInstance> = ref()
+        return () => (
+            <ElCard class="clear-container">
+                <ElAlert {...alertProps} title={t(msg => msg.dataManage.operationAlert)} />
+                <ClearFilter ref={filter} onDelete={() => handleClick(filter, ctx)} />
+            </ElCard>
+        )
     }
 })
 
diff --git a/src/app/components/DataManage/MemoryInfo.tsx b/src/app/components/DataManage/MemoryInfo.tsx
new file mode 100644
index 00000000..f42f1979
--- /dev/null
+++ b/src/app/components/DataManage/MemoryInfo.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElAlert, ElCard, ElProgress } from "element-plus"
+import { computed, ComputedRef, defineComponent, onMounted, ref, Ref } from "vue"
+import { t } from "@app/locale"
+import { alertProps } from "./common"
+import { getUsedStorage } from "@db/memory-detector"
+
+export type MemoryInfoInstance = {
+    queryData(): void
+}
+
+const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000
+
+function computeColor(percentage: number, total: number): string {
+    // Danger color
+    let typeColor = '#F56C6C'
+    // Primary color
+    if (percentage < 50) typeColor = '#409EFF'
+    // Warning color
+    else if (percentage < 75) typeColor = '#E6A23C'
+    // Specially, show warning color if not detect the max memory
+    if (!total) typeColor = '#E6A23C'
+    return typeColor
+}
+const totalTitle = (totalMb: number) => totalMb
+    ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb })
+    : t(msg => msg.dataManage.totalMemoryAlert1)
+
+const _default = defineComponent({
+    setup(_, ctx) {
+        // Total memory with byte
+        const used: Ref<number> = ref(0)
+        // As the denominator of percentage, cannot be 0, so be 1
+        const total: Ref<number> = ref(1)
+        const queryData = async () => {
+            const { used: currentUsed, total: currentTotal } = await getUsedStorage()
+            used.value = currentUsed || 0
+            total.value = currentTotal
+        }
+
+        const instance: MemoryInfoInstance = { queryData }
+        ctx.expose(instance)
+
+        onMounted(queryData)
+
+        const usedMb: ComputedRef<number> = computed(() => byte2Mb(used.value))
+        const totalMb: ComputedRef<number> = computed(() => byte2Mb(total.value))
+        const percentage: ComputedRef<number> = computed(() => total.value ? Math.round(used.value * 10000.0 / total.value) / 100 : 0)
+        const color: ComputedRef<string> = computed(() => computeColor(percentage.value, total.value))
+
+        return () => (
+            <ElCard>
+                <ElAlert
+                    {...alertProps}
+                    type={totalMb.value ? "info" : "warning"}
+                    title={totalTitle(totalMb.value)}
+                />
+                <div style={{ height: '260px', paddingTop: '50px' }}>
+                    <ElProgress
+                        strokeWidth={15}
+                        percentage={percentage.value}
+                        type="circle"
+                        color={color.value}
+                    />
+                </div>
+                <div style={{ userSelect: 'none' }}>
+                    <h3 style={{ color: color.value }}>
+                        {t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb.value })}
+                    </h3>
+                </div>
+            </ElCard>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-button.ts b/src/app/components/DataManage/Migration/ImportButton.tsx
similarity index 65%
rename from src/app/components/data-manage/migration/import-button.ts
rename to src/app/components/DataManage/Migration/ImportButton.tsx
index ff1630e8..4140be16 100644
--- a/src/app/components/data-manage/migration/import-button.ts
+++ b/src/app/components/DataManage/Migration/ImportButton.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -10,7 +10,7 @@ import { Upload } from "@element-plus/icons-vue"
 import Immigration from "@service/components/immigration"
 import { deserialize } from "@util/file"
 import { ElButton, ElLoading, ElMessage } from "element-plus"
-import { Ref, defineComponent, h, ref } from "vue"
+import { Ref, defineComponent, ref } from "vue"
 
 const immigration: Immigration = new Immigration()
 
@@ -38,21 +38,23 @@ const _default = defineComponent({
     },
     setup(_, ctx) {
         const fileInput = ref<HTMLInputElement>()
-        return () => h(ElButton, {
-            size: 'large',
-            type: 'primary',
-            icon: Upload,
-            onClick: () => fileInput.value.click()
-        }, () => [
-            t(msg => msg.item.operation.importWholeData),
-            h('input', {
-                ref: fileInput,
-                type: 'file',
-                accept: '.json',
-                style: { display: 'none' },
-                onChange: () => handleFileSelected(fileInput, () => ctx.emit('import'))
-            })
-        ])
+        return () => (
+            <ElButton
+                size="large"
+                type="primary"
+                icon={<Upload />}
+                onClick={() => fileInput.value?.click()}
+            >
+                {t(msg => msg.item.operation.importWholeData)}
+                <input
+                    ref={fileInput}
+                    type="file"
+                    accept=".json"
+                    style={{ display: "none" }}
+                    onChange={() => handleFileSelected(fileInput, () => ctx.emit('import'))}
+                />
+            </ElButton>
+        )
     }
 })
 
diff --git a/src/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx b/src/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx
new file mode 100644
index 00000000..59e5c4ac
--- /dev/null
+++ b/src/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { ElStep, ElSteps } from "element-plus"
+import { Ref, defineComponent, nextTick, ref } from "vue"
+import Step1 from "./Step1"
+import Step2 from "./Step2"
+
+const _default = defineComponent({
+    emits: {
+        cancel: () => true,
+        import: () => true,
+    },
+    setup(_, ctx) {
+        const step: Ref<0 | 1> = ref(0)
+        const data: Ref<timer.imported.Data> = ref()
+        return () => (
+            <div class="sop-dialog-container">
+                <div class="step-container">
+                    <ElSteps space={200} finishStatus="success" active={step.value}>
+                        <ElStep title={t(msg => msg.dataManage.importOther.step1)} />
+                        <ElStep title={t(msg => msg.dataManage.importOther.step2)} />
+                    </ElSteps>
+                </div>
+                <div class="operation-container">
+                    {step.value === 0
+                        ? <Step1
+                            onCancel={() => ctx.emit("cancel")}
+                            onNext={newData => {
+                                data.value = newData
+                                step.value = 1
+                            }}
+                        />
+                        : <Step2
+                            data={data.value}
+                            onBack={() => step.value = 0}
+                            onImport={() => {
+                                step.value = 0
+                                nextTick(() => ctx.emit("import"))
+                            }}
+                        />
+                    }
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx b/src/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx
new file mode 100644
index 00000000..3aba618b
--- /dev/null
+++ b/src/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { ElButton, ElForm, ElFormItem, ElMessage, ElOption, ElSelect } from "element-plus"
+import { Ref, defineComponent, ref } from "vue"
+import { Document, Close, Right } from "@element-plus/icons-vue"
+import { OtherExtension, parseFile } from "./processor"
+
+const OTHER_NAMES: { [ext in OtherExtension]: string } = {
+    webtime_tracker: "Webtime Tracker",
+    web_activity_time_tracker: "Web Activity Time Tracker",
+    history_trends_unlimited: "History Trends Unlimited",
+}
+
+const OTHER_FILE_FORMAT: { [ext in OtherExtension]: string } = {
+    webtime_tracker: '.csv,.json',
+    web_activity_time_tracker: '.csv',
+    history_trends_unlimited: '.tsv',
+}
+
+const ALL_TYPES: OtherExtension[] = Object.keys(OTHER_NAMES) as OtherExtension[]
+
+const _default = defineComponent({
+    emits: {
+        cancel: () => true,
+        next: (_rows: timer.imported.Data) => true,
+    },
+    setup(_, ctx) {
+        const type: Ref<OtherExtension> = ref('webtime_tracker')
+        const selectedFile: Ref<File> = ref()
+        const fileInput: Ref<HTMLInputElement> = ref()
+        const fileParsing: Ref<boolean> = ref(false)
+
+        const handleNext = () => {
+            const file = selectedFile.value
+            if (!file) {
+                ElMessage.warning(t(msg => msg.dataManage.importOther.fileNotSelected))
+                return
+            }
+            fileParsing.value = true
+            parseFile(type.value, selectedFile.value)
+                .then(data => data?.rows?.length ? ctx.emit('next', data) : ElMessage.error("No rows parsed"))
+                .catch((e: Error) => ElMessage.error(e.message))
+                .finally(() => fileParsing.value = false)
+        }
+        return () => <>
+            <ElForm labelWidth={100} class="import-other-form" labelPosition="left">
+                <ElFormItem label={t(msg => msg.dataManage.importOther.dataSource)} required>
+                    <ElSelect modelValue={type.value} onChange={(val: OtherExtension) => type.value = val}>
+                        {
+                            ALL_TYPES.map(type => <ElOption value={type} label={OTHER_NAMES[type]} />)
+                        }
+                    </ElSelect>
+                </ElFormItem>
+                <ElFormItem label={t(msg => msg.dataManage.importOther.file)} required>
+                    <ElButton icon={<Document />} onClick={() => fileInput.value?.click?.()}>
+                        {t(msg => msg.dataManage.importOther.selectFileBtn)}
+                        <input
+                            ref={fileInput}
+                            type="file"
+                            accept={OTHER_FILE_FORMAT[type.value]}
+                            style={{ display: 'none' }}
+                            onChange={() => selectedFile.value = fileInput.value?.files?.[0]}
+                        />
+                    </ElButton>
+                    {selectedFile.value?.name && <span class="select-import-file-name">{selectedFile.value?.name}</span>}
+                </ElFormItem>
+            </ElForm>
+            <div class="sop-footer">
+                <ElButton type="info" icon={<Close />} onClick={() => ctx.emit('cancel')}>
+                    {t(msg => msg.button.cancel)}
+                </ElButton>
+                <ElButton type="primary" icon={<Right />} loading={fileParsing.value} onClick={() => handleNext()}>
+                    {t(msg => msg.button.next)}
+                </ElButton>
+            </div>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-other-button/step2.ts b/src/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx
similarity index 59%
rename from src/app/components/data-manage/migration/import-other-button/step2.ts
rename to src/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx
index 61f1cbd6..274711fd 100644
--- a/src/app/components/data-manage/migration/import-other-button/step2.ts
+++ b/src/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx
@@ -7,11 +7,11 @@
 
 import { t } from "@app/locale"
 import { ElButton, ElMessage } from "element-plus"
-import { PropType, Ref, defineComponent, h, ref } from "vue"
+import { PropType, Ref, defineComponent, ref } from "vue"
 import { Back, Check } from "@element-plus/icons-vue"
 import { processImportedData } from "@service/components/import-processor"
 import { renderResolutionFormItem } from "@app/components/common/imported/conflict"
-import CompareTable from "@app/components/common/imported/comapre-table"
+import CompareTable from "@app/components/common/imported/CompareTable"
 
 const _default = defineComponent({
     props: {
@@ -40,27 +40,28 @@ const _default = defineComponent({
                 .catch(e => ElMessage.error(e))
                 .finally(() => importing.value = false)
         }
-
-        return () => [
-            h(CompareTable, {
-                data: props.data,
-                comparedColName: t(msg => msg.dataManage.importOther.imported),
-            }),
-            h('div', { class: 'resolution-container' }, renderResolutionFormItem(resolution)),
-            h('div', { class: 'sop-footer' }, [
-                h(ElButton, {
-                    type: 'info',
-                    icon: Back,
-                    disabled: importing.value,
-                    onClick: () => ctx.emit('back'),
-                }, () => t(msg => msg.button.previous)),
-                h(ElButton, {
-                    type: 'success',
-                    icon: Check,
-                    loading: importing.value,
-                    onClick: handleImport
-                }, () => t(msg => msg.button.confirm)),
-            ])]
+        return () => <>
+            <CompareTable
+                data={props.data}
+                comparedColName={t(msg => msg.dataManage.importOther.imported)}
+            />
+            <div class="resolution-container">
+                {renderResolutionFormItem(resolution)}
+            </div>
+            <div class="sop-footer">
+                <ElButton
+                    type="info"
+                    icon={<Back />}
+                    disabled={importing.value}
+                    onClick={() => ctx.emit("back")}
+                >
+                    {t(msg => msg.button.previous)}
+                </ElButton>
+                <ElButton type="success" icon={<Check />} loading={importing.value} onClick={handleImport}>
+                    {t(msg => msg.button.confirm)}
+                </ElButton>
+            </div>
+        </>
     }
 })
 
diff --git a/src/app/components/DataManage/Migration/ImportOtherButton/index.tsx b/src/app/components/DataManage/Migration/ImportOtherButton/index.tsx
new file mode 100644
index 00000000..c000c4b0
--- /dev/null
+++ b/src/app/components/DataManage/Migration/ImportOtherButton/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { Upload } from "@element-plus/icons-vue"
+import { ElButton, ElDialog } from "element-plus"
+import { Ref, defineComponent, ref } from "vue"
+import Sop from "./Sop"
+import "./style"
+
+const _default = defineComponent({
+    emits: {
+        import: () => true
+    },
+    setup(_) {
+        const dialogVisible: Ref<boolean> = ref(false)
+        const open = () => dialogVisible.value = true
+        const close = () => dialogVisible.value = false
+        return () => <>
+            <ElButton size="large" type="warning" icon={<Upload />} onClick={open}>
+                {t(msg => msg.item.operation.importOtherData)}
+            </ElButton>
+            <ElDialog
+                top="10vh"
+                modelValue={dialogVisible.value}
+                title={t(msg => msg.item.operation.importOtherData)}
+                width="80%"
+                closeOnClickModal={false}
+            >
+                <Sop onCancel={close} onImport={close} />
+            </ElDialog>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-other-button/processor.ts b/src/app/components/DataManage/Migration/ImportOtherButton/processor.ts
similarity index 99%
rename from src/app/components/data-manage/migration/import-other-button/processor.ts
rename to src/app/components/DataManage/Migration/ImportOtherButton/processor.ts
index cdfbe222..0a848c5b 100644
--- a/src/app/components/data-manage/migration/import-other-button/processor.ts
+++ b/src/app/components/DataManage/Migration/ImportOtherButton/processor.ts
@@ -19,7 +19,7 @@ const throwError = () => { throw new Error("Failed to parse, please check your f
 
 /**
  * Parse the content to rows
- * 
+ *
  * @param type extension type
  * @param file selected file
  * @returns row data
diff --git a/src/app/components/data-manage/migration/import-other-button/style.sass b/src/app/components/DataManage/Migration/ImportOtherButton/style.sass
similarity index 100%
rename from src/app/components/data-manage/migration/import-other-button/style.sass
rename to src/app/components/DataManage/Migration/ImportOtherButton/style.sass
diff --git a/src/app/components/data-manage/migration/index.ts b/src/app/components/DataManage/Migration/index.tsx
similarity index 51%
rename from src/app/components/data-manage/migration/index.ts
rename to src/app/components/DataManage/Migration/index.tsx
index b901c268..cc0799a8 100644
--- a/src/app/components/data-manage/migration/index.ts
+++ b/src/app/components/DataManage/Migration/index.tsx
@@ -1,13 +1,12 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { defineComponent } from "vue"
 
-import { h } from "vue"
 import { ElAlert, ElButton, ElCard, ElMain } from "element-plus"
 import { t } from "@app/locale"
 import { alertProps } from "../common"
@@ -15,8 +14,8 @@ import { exportJson } from "@util/file"
 import { formatTime } from "@util/time"
 import Immigration from "@service/components/immigration"
 import { Download } from "@element-plus/icons-vue"
-import ImportButton from "./import-button"
-import ImportOtherButton from "./import-other-button"
+import ImportButton from "./ImportButton"
+import ImportOtherButton from "./ImportOtherButton"
 
 const immigration: Immigration = new Immigration()
 
@@ -26,26 +25,27 @@ async function handleExport() {
     exportJson(data, `timer_backup_${timestamp}`)
 }
 
-const exportButtonText = t(msg => msg.item.operation.exportWholeData)
-
 const _default = defineComponent({
-    name: "Migration",
     emits: {
         import: () => true
     },
     setup(_, ctx) {
-        return () => h(ElCard, { class: 'migration-container' }, () => h(ElMain, {}, () => [
-            h(ElAlert, alertProps, () => t(msg => msg.dataManage.migrationAlert)),
-            h(ElButton, {
-                size: 'large',
-                type: 'success',
-                icon: Download,
-                onClick: handleExport
-            }, () => exportButtonText),
-            h(ImportButton, { onImport: () => ctx.emit('import') }),
-            h(ImportOtherButton, { onImport: () => ctx.emit('import') }),
-        ]))
+        const handleImported = () => ctx.emit("import")
+        return () => (
+            <ElCard class="migration-container">
+                <ElMain>
+                    <ElAlert {...alertProps} >
+                        {t(msg => msg.dataManage.migrationAlert)}
+                    </ElAlert>
+                    <ElButton size="large" type="success" icon={<Download />} onClick={handleExport}>
+                        {t(msg => msg.item.operation.exportWholeData)}
+                    </ElButton>
+                    <ImportButton onImport={handleImported} />
+                    <ImportOtherButton onImport={handleImported} />
+                </ElMain>
+            </ElCard>
+        )
     }
 })
 
-export default _default
\ No newline at end of file
+export default _default
diff --git a/src/app/components/data-manage/common.ts b/src/app/components/DataManage/common.ts
similarity index 100%
rename from src/app/components/data-manage/common.ts
rename to src/app/components/DataManage/common.ts
diff --git a/src/app/components/DataManage/index.tsx b/src/app/components/DataManage/index.tsx
new file mode 100644
index 00000000..df85cccb
--- /dev/null
+++ b/src/app/components/DataManage/index.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElRow, ElCol } from "element-plus"
+import { defineComponent, Ref, ref } from "vue"
+import ContentContainer from "../common/content-container"
+import Migration from "./Migration"
+import MemoryInfo, { MemoryInfoInstance } from "./MemoryInfo"
+import ClearPanel from "./ClearPanel"
+import './style'
+
+export default defineComponent(() => {
+    const memoryInfoRef: Ref<MemoryInfoInstance> = ref()
+
+    const refreshMemory = () => memoryInfoRef.value?.queryData()
+
+    return () => (
+        <ContentContainer class="data-manage-container">
+            <ElRow gutter={20}>
+                <ElCol span={8}>
+                    <MemoryInfo ref={memoryInfoRef} />
+                </ElCol>
+                <ElCol span={11}>
+                    <ClearPanel onDataDelete={refreshMemory} />
+                </ElCol>
+                <ElCol span={5}>
+                    <Migration onImport={refreshMemory} />
+                </ElCol>
+            </ElRow>
+        </ContentContainer>
+    )
+})
\ No newline at end of file
diff --git a/src/app/components/data-manage/style.sass b/src/app/components/DataManage/style.sass
similarity index 99%
rename from src/app/components/data-manage/style.sass
rename to src/app/components/DataManage/style.sass
index da7ab717..99224cdf 100644
--- a/src/app/components/data-manage/style.sass
+++ b/src/app/components/DataManage/style.sass
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
diff --git a/src/app/components/habit/components/filter.ts b/src/app/components/Habit/components/HabitFilter.tsx
similarity index 65%
rename from src/app/components/habit/components/filter.ts
rename to src/app/components/Habit/components/HabitFilter.tsx
index 1ff0b49b..15455a28 100644
--- a/src/app/components/habit/components/filter.ts
+++ b/src/app/components/Habit/components/HabitFilter.tsx
@@ -8,7 +8,7 @@
 import type { Ref, PropType } from "vue"
 import type { CalendarMessage } from "@i18n/message/common/calendar"
 
-import { ref, h, defineComponent, watch } from "vue"
+import { ref, defineComponent, watch } from "vue"
 import { daysAgo } from "@util/time"
 import { t } from "@app/locale"
 import { ElementDatePickerShortcut } from "@src/element-ui/date"
@@ -37,7 +37,6 @@ function datePickerShortcut(msg: keyof CalendarMessage['range'], agoOfStart: num
 const SHORTCUTS: ElementDatePickerShortcut[] = shortcutProps.map(([label, dayAgo]) => datePickerShortcut(label, dayAgo))
 
 const _default = defineComponent({
-    name: "HabitFilter",
     props: {
         defaultValue: Object as PropType<FilterOption>,
     },
@@ -48,27 +47,24 @@ const _default = defineComponent({
         const dateRange: Ref<[Date, Date]> = ref(props.defaultValue?.dateRange || [null, null])
         const timeFormat: Ref<timer.app.TimeFormat> = ref(props.defaultValue?.timeFormat)
 
-        watch(
-            [dateRange, timeFormat],
-            () => ctx.emit("change", {
-                dateRange: dateRange.value,
-                timeFormat: timeFormat.value,
-            })
-        )
+        watch([dateRange, timeFormat], () => ctx.emit("change", {
+            dateRange: dateRange.value,
+            timeFormat: timeFormat.value,
+        }))
 
-        return () => [
-            h(DateRangeFilterItem, {
-                clearable: false,
-                disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
-                defaultRange: dateRange.value,
-                shortcuts: SHORTCUTS,
-                onChange: (newVal: [Date, Date]) => dateRange.value = newVal
-            }),
-            h(TimeFormatFilterItem, {
-                defaultValue: props.defaultValue?.timeFormat,
-                onChange: (newVal: timer.app.TimeFormat) => timeFormat.value = newVal
-            }),
-        ]
+        return () => <>
+            <DateRangeFilterItem
+                clearable={false}
+                disabledDate={(date: Date) => date.getTime() > new Date().getTime()}
+                defaultRange={dateRange.value}
+                shortcuts={SHORTCUTS}
+                onChange={val => dateRange.value = val}
+            />
+            <TimeFormatFilterItem
+                defaultValue={timeFormat.value}
+                onChange={val => timeFormat.value = val}
+            />
+        </>
     }
 })
 
diff --git a/src/app/components/habit/components/context.ts b/src/app/components/Habit/components/context.ts
similarity index 100%
rename from src/app/components/habit/components/context.ts
rename to src/app/components/Habit/components/context.ts
diff --git a/src/app/components/habit/components/period/bar-wrapper.ts b/src/app/components/Habit/components/period/bar-wrapper.ts
similarity index 100%
rename from src/app/components/habit/components/period/bar-wrapper.ts
rename to src/app/components/Habit/components/period/bar-wrapper.ts
diff --git a/src/app/components/habit/components/period/bar.ts b/src/app/components/Habit/components/period/bar.ts
similarity index 100%
rename from src/app/components/habit/components/period/bar.ts
rename to src/app/components/Habit/components/period/bar.ts
diff --git a/src/app/components/habit/components/period/common.ts b/src/app/components/Habit/components/period/common.ts
similarity index 100%
rename from src/app/components/habit/components/period/common.ts
rename to src/app/components/Habit/components/period/common.ts
diff --git a/src/app/components/habit/components/period/context.ts b/src/app/components/Habit/components/period/context.ts
similarity index 100%
rename from src/app/components/habit/components/period/context.ts
rename to src/app/components/Habit/components/period/context.ts
diff --git a/src/app/components/habit/components/period/filter.ts b/src/app/components/Habit/components/period/filter.ts
similarity index 100%
rename from src/app/components/habit/components/period/filter.ts
rename to src/app/components/Habit/components/period/filter.ts
diff --git a/src/app/components/habit/components/period/index.ts b/src/app/components/Habit/components/period/index.ts
similarity index 100%
rename from src/app/components/habit/components/period/index.ts
rename to src/app/components/Habit/components/period/index.ts
diff --git a/src/app/components/habit/components/period/style.sass b/src/app/components/Habit/components/period/style.sass
similarity index 100%
rename from src/app/components/habit/components/period/style.sass
rename to src/app/components/Habit/components/period/style.sass
diff --git a/src/app/components/habit/components/site/common.ts b/src/app/components/Habit/components/site/common.ts
similarity index 100%
rename from src/app/components/habit/components/site/common.ts
rename to src/app/components/Habit/components/site/common.ts
diff --git a/src/app/components/habit/components/site/context.ts b/src/app/components/Habit/components/site/context.ts
similarity index 100%
rename from src/app/components/habit/components/site/context.ts
rename to src/app/components/Habit/components/site/context.ts
diff --git a/src/app/components/habit/components/site/focus-pie-wrapper.ts b/src/app/components/Habit/components/site/focus-pie-wrapper.ts
similarity index 100%
rename from src/app/components/habit/components/site/focus-pie-wrapper.ts
rename to src/app/components/Habit/components/site/focus-pie-wrapper.ts
diff --git a/src/app/components/habit/components/site/focus-pie.ts b/src/app/components/Habit/components/site/focus-pie.ts
similarity index 100%
rename from src/app/components/habit/components/site/focus-pie.ts
rename to src/app/components/Habit/components/site/focus-pie.ts
diff --git a/src/app/components/habit/components/site/histogram-wrapper.ts b/src/app/components/Habit/components/site/histogram-wrapper.ts
similarity index 100%
rename from src/app/components/habit/components/site/histogram-wrapper.ts
rename to src/app/components/Habit/components/site/histogram-wrapper.ts
diff --git a/src/app/components/habit/components/site/histogram.ts b/src/app/components/Habit/components/site/histogram.ts
similarity index 100%
rename from src/app/components/habit/components/site/histogram.ts
rename to src/app/components/Habit/components/site/histogram.ts
diff --git a/src/app/components/habit/components/site/index.ts b/src/app/components/Habit/components/site/index.ts
similarity index 100%
rename from src/app/components/habit/components/site/index.ts
rename to src/app/components/Habit/components/site/index.ts
diff --git a/src/app/components/habit/components/site/style.sass b/src/app/components/Habit/components/site/style.sass
similarity index 100%
rename from src/app/components/habit/components/site/style.sass
rename to src/app/components/Habit/components/site/style.sass
diff --git a/src/app/components/habit/components/site/time-pie-wrapper.ts b/src/app/components/Habit/components/site/time-pie-wrapper.ts
similarity index 100%
rename from src/app/components/habit/components/site/time-pie-wrapper.ts
rename to src/app/components/Habit/components/site/time-pie-wrapper.ts
diff --git a/src/app/components/habit/components/site/time-pie.ts b/src/app/components/Habit/components/site/time-pie.ts
similarity index 100%
rename from src/app/components/habit/components/site/time-pie.ts
rename to src/app/components/Habit/components/site/time-pie.ts
diff --git a/src/app/components/habit/index.ts b/src/app/components/Habit/index.tsx
similarity index 54%
rename from src/app/components/habit/index.ts
rename to src/app/components/Habit/index.tsx
index ad4544b0..b9a19679 100644
--- a/src/app/components/habit/index.ts
+++ b/src/app/components/Habit/index.tsx
@@ -8,12 +8,12 @@
 import type { Ref } from "vue"
 import type { FilterOption } from "./type"
 
-import { defineComponent, h, ref, onMounted, computed, watch } from "vue"
+import { defineComponent, ref, onMounted, computed, watch } from "vue"
 import periodService from "@service/period-service"
 import statService from "@service/stat-service"
 import { daysAgo, isSameDay } from "@util/time"
 import ContentContainer from "@app/components/common/content-container"
-import HabitFilter from "./components/filter"
+import HabitFilter from "./components/HabitFilter"
 import Site from "./components/site"
 import Period from "./components/period"
 import { keyOf, MAX_PERIOD_ORDER, keyBefore } from "@util/period"
@@ -38,37 +38,34 @@ function computeParam(dateRange: [Date, Date]): timer.period.KeyRange {
     return [periodStart, periodEnd]
 }
 
-const _default = defineComponent({
-    setup() {
-        const filter: Ref<FilterOption> = ref({
-            dateRange: daysAgo(7, 0),
-            timeFormat: "default",
-        })
-        const periodRange = computed(() => computeParam(filter.value?.dateRange))
-        const periodResults: Ref<timer.period.Result[]> = ref([])
-        const rows: Ref<timer.stat.Row[]> = ref([])
+const _default = defineComponent(() => {
+    const filter: Ref<FilterOption> = ref({
+        dateRange: daysAgo(7, 0),
+        timeFormat: "default",
+    })
+    const periodRange = computed(() => computeParam(filter.value?.dateRange))
+    const periodResults: Ref<timer.period.Result[]> = ref([])
+    const rows: Ref<timer.stat.Row[]> = ref([])
 
-        initProvider(filter)
+    initProvider(filter)
 
-        async function fetchData() {
-            periodResults.value = await periodService.list({ periodRange: periodRange.value })
-            rows.value = await statService.select({ exclusiveVirtual: true, date: filter.value?.dateRange }, true)
-        }
+    async function fetchData() {
+        periodResults.value = await periodService.list({ periodRange: periodRange.value })
+        rows.value = await statService.select({ exclusiveVirtual: true, date: filter.value?.dateRange }, true)
+    }
 
-        watch(filter, fetchData)
-        onMounted(fetchData)
+    watch(filter, fetchData)
+    onMounted(fetchData)
+
+    return () => (
+        <ContentContainer v-slots={{
+            filter: () => <HabitFilter defaultValue={filter.value} onChange={val => val && (filter.value = { ...val })} />
+        }}>
+            <Site />
+            <Period />
+        </ContentContainer>
+    )
 
-        return () => h(ContentContainer, {}, {
-            filter: () => h(HabitFilter, {
-                defaultValue: filter.value,
-                onChange: newVal => newVal && (filter.value = { ...newVal }),
-            }),
-            default: () => [
-                h(Site),
-                h(Period),
-            ]
-        })
-    }
 })
 
 export default _default
diff --git a/src/app/components/habit/type.d.ts b/src/app/components/Habit/type.d.ts
similarity index 100%
rename from src/app/components/habit/type.d.ts
rename to src/app/components/Habit/type.d.ts
diff --git a/src/app/components/Report/ReportFilter/DownloadFile.tsx b/src/app/components/Report/ReportFilter/DownloadFile.tsx
new file mode 100644
index 00000000..a5062bf4
--- /dev/null
+++ b/src/app/components/Report/ReportFilter/DownloadFile.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Download } from "@element-plus/icons-vue"
+import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus"
+import { defineComponent } from "vue"
+
+const ALL_FILE_FORMATS: FileFormat[] = ["json", "csv"]
+
+const renderDropdown = (onMenuClick: (f: FileFormat) => void) => (
+    <ElDropdownMenu>
+        {ALL_FILE_FORMATS.map(
+            format => (
+                <ElDropdownItem onClick={() => onMenuClick(format)}>
+                    {format}
+                </ElDropdownItem>
+            )
+        )}
+    </ElDropdownMenu>
+)
+
+const _default = defineComponent({
+    emits: {
+        download: (_format: FileFormat) => true,
+    },
+    setup(_, ctx) {
+        return () => (
+            <ElDropdown
+                class="export-dropdown"
+                showTimeout={100}
+                v-slots={{ dropdown: () => renderDropdown(f => ctx.emit("download", f)) }}
+            >
+                <ElButton size="small" class="export-dropdown-button">
+                    <ElIcon size={17} style={{ padding: "0 1px" }}>
+                        <Download />
+                    </ElIcon>
+                </ElButton>
+            </ElDropdown>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportFilter/RemoteClient.tsx b/src/app/components/Report/ReportFilter/RemoteClient.tsx
new file mode 100644
index 00000000..195f8072
--- /dev/null
+++ b/src/app/components/Report/ReportFilter/RemoteClient.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { UploadFilled } from "@element-plus/icons-vue"
+import statService from "@service/stat-service"
+import { ElButton, ElIcon, ElTooltip } from "element-plus"
+import { defineComponent, ref, watch, computed, onMounted } from "vue"
+
+const _default = defineComponent({
+    emits: {
+        change: (_readRemote: boolean) => true
+    },
+    setup(_, ctx) {
+        const readRemote = ref(false)
+        watch(readRemote, () => ctx.emit("change", readRemote.value))
+        const content = computed(() => t(msg => msg.report.remoteReading[readRemote.value ? 'on' : 'off']))
+        const visible = ref(false)
+        onMounted(() => statService.canReadRemote().then(v => visible.value = !!v))
+
+        return () => (
+            <ElTooltip trigger="hover" placement="bottom-start" effect="dark" content={content.value}>
+                <ElButton
+                    size="small"
+                    style={{ display: visible.value ? 'inline-flex' : 'none' }}
+                    type={readRemote.value ? 'primary' : null}
+                    class="export-dropdown-button"
+                    onClick={() => readRemote.value = !readRemote.value}
+                >
+                    <ElIcon size={17} style={{ padding: "0 1px" }}>
+                        <UploadFilled />
+                    </ElIcon>
+                </ElButton>
+            </ElTooltip>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportFilter/index.tsx b/src/app/components/Report/ReportFilter/index.tsx
new file mode 100644
index 00000000..06a3b6a6
--- /dev/null
+++ b/src/app/components/Report/ReportFilter/index.tsx
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref, PropType } from "vue"
+import type { ElementDatePickerShortcut } from "@src/element-ui/date"
+import type { CalendarMessage } from "@i18n/message/common/calendar"
+
+import DownloadFile from "./DownloadFile"
+import RemoteClient from "./RemoteClient"
+import { watch, defineComponent, ref } from "vue"
+import { t } from "@app/locale"
+import InputFilterItem from '@app/components/common/input-filter-item'
+import SwitchFilterItem from "@app/components/common/switch-filter-item"
+import TimeFormatFilterItem from "@app/components/common/time-format-filter-item"
+import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
+import { daysAgo } from "@util/time"
+import { ElButton } from "element-plus"
+import { DeleteFilled } from "@element-plus/icons-vue"
+
+const hostPlaceholder = t(msg => msg.report.hostPlaceholder)
+const mergeDateLabel = t(msg => msg.report.mergeDate)
+const mergeHostLabel = t(msg => msg.report.mergeDomain)
+// Batch Delete
+const batchDeleteButtonText = t(msg => msg.report.batchDelete.buttonText)
+// Date range
+const dateStartPlaceholder = t(msg => msg.calendar.label.startDate)
+const dateEndPlaceholder = t(msg => msg.calendar.label.endDate)
+// date range
+function datePickerShortcut(msg: keyof CalendarMessage['range'], agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
+    const text = t(messages => messages.calendar.range[msg])
+    const value = daysAgo(agoOfStart || 0, agoOfEnd || 0)
+    return { text, value }
+}
+
+const dateShortcuts: ElementDatePickerShortcut[] = [
+    datePickerShortcut('today'),
+    datePickerShortcut('yesterday', 1, 1),
+    datePickerShortcut('last7Days', 7),
+    datePickerShortcut('last30Days', 30),
+    datePickerShortcut('last60Days', 60),
+]
+
+const _default = defineComponent({
+    props: {
+        initial: Object as PropType<ReportFilterOption>
+    },
+    emits: {
+        change: (_filterOption: ReportFilterOption) => true,
+        download: (_format: FileFormat) => true,
+        batchDelete: (_filterOption: ReportFilterOption) => true,
+    },
+    setup(props, ctx) {
+        const initial: ReportFilterOption = props.initial
+        const host: Ref<string> = ref(initial?.host)
+        const dateRange: Ref<[Date, Date]> = ref(initial?.dateRange)
+        const mergeDate: Ref<boolean> = ref(initial?.mergeDate)
+        const mergeHost: Ref<boolean> = ref(initial?.mergeHost)
+        const timeFormat: Ref<timer.app.TimeFormat> = ref(initial?.timeFormat)
+        // Whether to read remote backup data
+        const readRemote: Ref<boolean> = ref(initial?.readRemote)
+        const computeOption = () => ({
+            host: host.value,
+            dateRange: dateRange.value,
+            mergeDate: mergeDate.value,
+            mergeHost: mergeHost.value,
+            timeFormat: timeFormat.value,
+            readRemote: readRemote.value,
+        } as ReportFilterOption)
+        watch([host, dateRange, mergeDate, mergeHost, timeFormat, readRemote], () => {
+            const option = computeOption()
+            ctx.emit("change", option)
+        })
+        return () => <>
+            <InputFilterItem placeholder={hostPlaceholder} onSearch={val => host.value = val} />
+            <DateRangeFilterItem
+                startPlaceholder={dateStartPlaceholder}
+                endPlaceholder={dateEndPlaceholder}
+                disabledDate={(date: Date | number) => new Date(date) > new Date()}
+                shortcuts={dateShortcuts}
+                defaultRange={dateRange.value}
+                onChange={val => dateRange.value = val}
+            />
+            <TimeFormatFilterItem defaultValue={timeFormat.value} onChange={val => timeFormat.value = val} />
+            <SwitchFilterItem
+                historyName="mergeDate"
+                label={mergeDateLabel}
+                defaultValue={mergeDate.value}
+                onChange={val => mergeDate.value = val}
+            />
+            <SwitchFilterItem
+                historyName="mergeHost"
+                label={mergeHostLabel}
+                defaultValue={mergeHost.value}
+                onChange={val => mergeHost.value = val}
+            />
+            <div class="filter-item-right-group">
+                <ElButton
+                    style={{ display: readRemote.value ? 'none' : 'inline-flex' }}
+                    class="batch-delete-button"
+                    disabled={mergeHost.value}
+                    type="primary"
+                    link
+                    icon={<DeleteFilled />}
+                    onClick={() => ctx.emit("batchDelete", computeOption())}
+                >
+                    {batchDeleteButtonText}
+                </ElButton>
+                <RemoteClient onChange={val => readRemote.value = val} />
+                <DownloadFile onDownload={format => ctx.emit("download", format)} />
+            </div>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/FocusColumn.tsx b/src/app/components/Report/ReportTable/columns/FocusColumn.tsx
index 703f12f4..1ba2f86b 100644
--- a/src/app/components/Report/ReportTable/columns/FocusColumn.tsx
+++ b/src/app/components/Report/ReportTable/columns/FocusColumn.tsx
@@ -5,48 +5,40 @@
  * https://opensource.org/licenses/MIT
  */
 
-import type { PropType } from "vue"
-
 import { t } from "@app/locale"
 import { Effect, ElTableColumn, ElTooltip } from "element-plus"
 import { defineComponent } from "vue"
 import { periodFormatter } from "@app/util/time"
 import CompositionTable from './CompositionTable'
 import { ElTableRowScope } from "@src/element-ui/table"
+import { useReportFilter } from "../../context"
 
 const columnLabel = t(msg => msg.item.focus)
 
-const _default = defineComponent({
-    props: {
-        timeFormat: String as PropType<timer.app.TimeFormat>,
-        readRemote: Boolean,
-    },
-    setup({ timeFormat = "default", readRemote }) {
-        return () => (
-            <ElTableColumn prop="focus" label={columnLabel} minWidth={130} align="center" sortable="custom">
-                {
-                    ({ row }: ElTableRowScope<timer.stat.Row>) => {
-                        const valueStr = periodFormatter(row.focus, timeFormat)
-                        return readRemote
-                            ? <ElTooltip
-                                placement="top"
-                                effect={Effect.LIGHT}
-                                offset={10}
-                                v-slots={{
-                                    content: () => <CompositionTable
-                                        data={row.composition?.focus || []}
-                                        valueFormatter={val => periodFormatter(val, timeFormat)}
-                                    />
-                                }}
-                            >
-                                {valueStr}
-                            </ElTooltip>
-                            : valueStr
-                    }
+const _default = defineComponent(() => {
+    const filter = useReportFilter()
+    const formatter = (focus: number): string => periodFormatter(focus, filter.value?.timeFormat)
+    return () => (
+        <ElTableColumn prop="focus" label={columnLabel} minWidth={130} align="center" sortable="custom">
+            {
+                ({ row }: ElTableRowScope<timer.stat.Row>) => {
+                    const valueStr = formatter(row.focus)
+                    return filter.value?.readRemote
+                        ? <ElTooltip
+                            placement="top"
+                            effect={Effect.LIGHT}
+                            offset={10}
+                            v-slots={{
+                                content: () => <CompositionTable valueFormatter={formatter} data={row.composition?.focus || []} />
+                            }}
+                        >
+                            {valueStr}
+                        </ElTooltip>
+                        : valueStr
                 }
-            </ElTableColumn>
-        )
-    }
+            }
+        </ElTableColumn>
+    )
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/HostColumn.tsx b/src/app/components/Report/ReportTable/columns/HostColumn.tsx
index feba844e..aff6fd7b 100644
--- a/src/app/components/Report/ReportTable/columns/HostColumn.tsx
+++ b/src/app/components/Report/ReportTable/columns/HostColumn.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -11,6 +11,7 @@ import { t } from "@app/locale"
 import HostAlert from "@app/components/common/host-alert"
 import { isRemainHost } from "@util/constant/remain-host"
 import { ElTableRowScope } from "@src/element-ui/table"
+import { useReportFilter } from "../../context"
 
 /**
  * Merged host column
@@ -42,30 +43,23 @@ const HostMergedAlert = defineComponent({
 
 const columnLabel = t(msg => msg.item.host)
 
-const _default = defineComponent({
-    props: {
-        mergeHost: {
-            type: Boolean,
-            required: true
-        }
-    },
-    setup(props) {
-        return () => (
-            <ElTableColumn prop="host" label={columnLabel} minWidth={210} sortable="custom" align="center">
-                {
-                    ({ row }: ElTableRowScope<timer.stat.Row>) => props.mergeHost
-                        ? <HostMergedAlert mergedHost={row.host}>
-                            {() => row.mergedHosts.map(origin =>
-                                <p>
-                                    <HostAlert {...origin} clickable={!isRemainHost(origin.host)} />
-                                </p>
-                            )}
-                        </HostMergedAlert>
-                        : <HostAlert {...row} clickable={!isRemainHost(row.host)} />
-                }
-            </ElTableColumn>
-        )
-    }
+const _default = defineComponent(() => {
+    const filter = useReportFilter()
+    return () => (
+        <ElTableColumn prop="host" label={columnLabel} minWidth={210} sortable="custom" align="center">
+            {
+                ({ row }: ElTableRowScope<timer.stat.Row>) => filter.value?.mergeHost
+                    ? <HostMergedAlert mergedHost={row.host}>
+                        {() => row.mergedHosts.map(origin =>
+                            <p>
+                                <HostAlert {...origin} clickable={!isRemainHost(origin.host)} />
+                            </p>
+                        )}
+                    </HostMergedAlert>
+                    : <HostAlert {...row} clickable={!isRemainHost(row.host)} />
+            }
+        </ElTableColumn>
+    )
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/OperationColumn.tsx b/src/app/components/Report/ReportTable/columns/OperationColumn.tsx
new file mode 100644
index 00000000..b77fc352
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/OperationColumn.tsx
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref } from "vue"
+
+import { computed, defineComponent, onMounted, ref } from "vue"
+import { ElButton, ElMessage, ElTableColumn } from "element-plus"
+import StatDatabase from "@db/stat-database"
+import whitelistService from "@service/whitelist-service"
+import { t } from "@app/locale"
+import { LocationQueryRaw, Router, useRouter } from "vue-router"
+import { ANALYSIS_ROUTE } from "@app/router/constants"
+import { Open, Plus, Stopwatch } from "@element-plus/icons-vue"
+import PopupConfirmButton from "@app/components/common/PopupConfirmButton"
+import OperationDeleteButton from "./OperationDeleteButton"
+import { locale } from "@i18n"
+import { useReportFilter } from "../../context"
+import { ElTableRowScope } from "@src/element-ui/table"
+
+const statDatabase = new StatDatabase(chrome.storage.local)
+
+async function handleDeleteByRange(itemHost2Delete: string, dateRange: [Date, Date]): Promise<string[]> {
+    // Delete all
+    if (!dateRange || !dateRange.length) {
+        return await statDatabase.deleteByUrl(itemHost2Delete)
+    }
+    // Delete by range
+    const start = dateRange[0]
+    const end = dateRange[1]
+    await statDatabase.deleteByUrlBetween(itemHost2Delete, start, end)
+}
+
+const COL_LABEL = t(msg => msg.item.operation.label)
+const ANALYSIS = t(msg => msg.item.operation.analysis)
+// Whitelist texts
+const ADD_WHITE = t(msg => msg.item.operation.add2Whitelist)
+const ADD_WHITE_SUCCESS = t(msg => msg.report.added2Whitelist)
+const REMOVE_WHITE = t(msg => msg.item.operation.removeFromWhitelist)
+const REMOVE_WHITE_SUCCESS = t(msg => msg.report.removeFromWhitelist)
+
+const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
+    en: 330,
+    zh_CN: 290,
+    ja: 360,
+    zh_TW: 290,
+    pt_PT: 340,
+    uk: 400,
+}
+const _default = defineComponent({
+    emits: {
+        delete: (_row: timer.stat.Row) => true,
+    },
+    setup(_, ctx) {
+        const filter = useReportFilter()
+        const canOperate = computed(() => !filter.value?.mergeHost)
+        const width = computed(() => canOperate.value ? LOCALE_WIDTH[locale] : 110)
+        const router: Router = useRouter()
+        const whitelist: Ref<string[]> = ref([])
+        const refreshWhitelist = () => whitelistService.listAll().then(val => whitelist.value = val)
+        onMounted(refreshWhitelist)
+
+        const jump2Analysis = (host: string) => {
+            const query: LocationQueryRaw = {
+                host,
+                merge: filter.value?.mergeHost ? '1' : '0',
+            }
+            router.push({ path: ANALYSIS_ROUTE, query })
+        }
+        return () => (
+            <ElTableColumn width={width.value} label={COL_LABEL} align="center">
+                {({ row }: ElTableRowScope<timer.stat.Row>) => <>
+                    {/* Analysis */}
+                    <ElButton
+                        icon={<Stopwatch />}
+                        size="small"
+                        type="primary"
+                        onClick={() => jump2Analysis(row.host)}
+                    >
+                        {ANALYSIS}
+                    </ElButton>
+                    {/* Delete button */}
+                    <OperationDeleteButton
+                        itemUrl={row.host}
+                        itemDate={row.date}
+                        visible={canOperate.value}
+                        onConfirm={async () => {
+                            const host = row.host
+                            filter.value?.mergeDate
+                                ? await handleDeleteByRange(host, filter.value?.dateRange)
+                                : await statDatabase.deleteByUrlAndDate(host, row.date)
+                            ctx.emit("delete", row)
+                        }}
+                    />
+                    {/* Add 2 whitelist */}
+                    <PopupConfirmButton
+                        buttonIcon={Plus}
+                        buttonType="warning"
+                        buttonText={ADD_WHITE}
+                        confirmText={t(msg => msg.whitelist.addConfirmMsg, { url: row.host })}
+                        visible={canOperate.value && !whitelist.value?.includes(row.host)}
+                        onConfirm={async () => {
+                            await whitelistService.add(row.host)
+                            refreshWhitelist()
+                            ElMessage({ message: ADD_WHITE_SUCCESS, type: 'success' })
+                        }}
+                    />
+                    {/* Remove from whitelist */}
+                    <PopupConfirmButton
+                        buttonIcon={Open}
+                        buttonType="primary"
+                        buttonText={REMOVE_WHITE}
+                        confirmText={t(msg => msg.whitelist.removeConfirmMsg, { url: row.host })}
+                        visible={canOperate.value && whitelist.value?.includes(row.host)}
+                        onConfirm={async () => {
+                            await whitelistService.remove(row.host)
+                            refreshWhitelist()
+                            ElMessage({ message: REMOVE_WHITE_SUCCESS, type: 'success' })
+                        }}
+                    />
+                </>}
+            </ElTableColumn>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx b/src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx
new file mode 100644
index 00000000..b7a9f90f
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import type { Ref } from "vue"
+
+import { computed, defineComponent } from "vue"
+import PopupConfirmButton from "@app/components/common/PopupConfirmButton"
+import { Delete } from "@element-plus/icons-vue"
+import { t } from "@app/locale"
+import { formatTime } from "@util/time"
+import { cvt2LocaleTime } from "@app/util/time"
+import { useReportFilter } from "../../context"
+
+const deleteButtonText = t(msg => msg.item.operation.delete)
+
+/**
+ * Compute the confirm text for one item
+ *
+ * @param url  item url
+ * @param date item date
+ */
+function computeSingleConfirmText(url: string, date: string): string {
+    const formatDate = cvt2LocaleTime(date)
+    return t(msg => msg.item.operation.deleteConfirmMsg, { url, date: formatDate })
+}
+
+function computeRangeConfirmText(url: string, dateRange: [Date, Date]): string {
+    const hasDateRange = dateRange?.length === 2 && (dateRange[0] || dateRange[1])
+    if (!hasDateRange) {
+        // Delete all
+        return t(msg => msg.item.operation.deleteConfirmMsgAll, { url })
+    }
+    const dateFormat = t(msg => msg.calendar.dateFormat)
+    const startDate = dateRange[0]
+    const endDate = dateRange[1]
+    const start = formatTime(startDate, dateFormat)
+    const end = formatTime(endDate, dateFormat)
+    return start === end
+        // Only one day
+        ? computeSingleConfirmText(url, start)
+        : t(msg => msg.item.operation.deleteConfirmMsgRange, { url, start, end })
+}
+
+const _default = defineComponent({
+    emits: {
+        confirm: () => true
+    },
+    props: {
+        itemUrl: String,
+        itemDate: String,
+        visible: Boolean
+    },
+    setup(props, ctx) {
+        const filter = useReportFilter()
+        const deleteMsg: Ref<string> = computed(() => {
+            const url = props.itemUrl
+            return filter.value?.mergeDate
+                ? computeRangeConfirmText(url, filter.value?.dateRange)
+                : computeSingleConfirmText(url, props.itemDate)
+        })
+        return () => <PopupConfirmButton
+            buttonIcon={Delete}
+            buttonType="danger"
+            buttonText={deleteButtonText}
+            confirmText={deleteMsg.value}
+            visible={props.visible}
+            onConfirm={() => ctx.emit("confirm")}
+        />
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/TimeColumn.tsx b/src/app/components/Report/ReportTable/columns/TimeColumn.tsx
new file mode 100644
index 00000000..1381c4c7
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/TimeColumn.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent } from "vue"
+import { Effect, ElTableColumn, ElTooltip } from "element-plus"
+import { t } from "@app/locale"
+import CompositionTable from "./CompositionTable"
+import { useReportFilter } from "../../context"
+import { ElTableRowScope } from "@src/element-ui/table"
+
+const columnLabel = t(msg => msg.item.time)
+
+const _default = defineComponent(() => {
+    const filter = useReportFilter()
+    return () => (
+        <ElTableColumn prop="time" label={columnLabel} minWidth={130} align="center" sortable="custom">
+            {({ row }: ElTableRowScope<timer.stat.Row>) => {
+                const valueStr = row.time?.toString?.() || '0'
+                return filter.value?.readRemote
+                    ? <ElTooltip
+                        placement="top"
+                        effect={Effect.LIGHT}
+                        offset={10}
+                        v-slots={{
+                            default: () => valueStr,
+                            content: () => <CompositionTable
+                                data={row.composition?.time || []}
+                                valueFormatter={v => v?.toString?.() || "0"}
+                            />
+                        }}
+                    />
+                    : valueStr
+            }}
+        </ElTableColumn>
+    )
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/operation.ts b/src/app/components/Report/ReportTable/columns/operation.ts
deleted file mode 100644
index cb0d5b9d..00000000
--- a/src/app/components/Report/ReportTable/columns/operation.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-/**
- * Generate operation buttons
- */
-import type { PropType } from "vue"
-
-import { computed, defineComponent, h } from "vue"
-import { ElButton, ElMessage, ElTableColumn } from "element-plus"
-import StatDatabase from "@db/stat-database"
-import whitelistService from "@service/whitelist-service"
-import { t } from "@app/locale"
-import { LocationQueryRaw, Router, useRouter } from "vue-router"
-import { ANALYSIS_ROUTE } from "@app/router/constants"
-import { Open, Plus, Stopwatch } from "@element-plus/icons-vue"
-import OperationPopupConfirmButton from "@app/components/common/popup-confirm-button"
-import OperationDeleteButton from "./operation-delete-button"
-import { locale } from "@i18n"
-
-const statDatabase = new StatDatabase(chrome.storage.local)
-
-async function handleDeleteByRange(itemHost2Delete: string, dateRange: [Date, Date]): Promise<string[]> {
-    // Delete all
-    if (!dateRange || !dateRange.length) {
-        return await statDatabase.deleteByUrl(itemHost2Delete)
-    }
-    // Delete by range
-    const start = dateRange[0]
-    const end = dateRange[1]
-    await statDatabase.deleteByUrlBetween(itemHost2Delete, start, end)
-}
-
-const COL_LABEL = t(msg => msg.item.operation.label)
-const ANALYSIS = t(msg => msg.item.operation.analysis)
-// Whitelist texts
-const ADD_WHITE = t(msg => msg.item.operation.add2Whitelist)
-const ADD_WHITE_SUCC = t(msg => msg.report.added2Whitelist)
-const REMOVE_WHITE = t(msg => msg.item.operation.removeFromWhitelist)
-const REMOVE_WHITE_SUCC = t(msg => msg.report.removeFromWhitelist)
-
-const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
-    en: 330,
-    zh_CN: 290,
-    ja: 360,
-    zh_TW: 290,
-    pt_PT: 340,
-    uk: 400,
-}
-const _default = defineComponent({
-    name: "OperationColumn",
-    props: {
-        mergeDate: Boolean,
-        mergeHost: Boolean,
-        dateRange: Object as PropType<[Date, Date]>,
-        whitelist: Array as PropType<string[]>
-    },
-    emits: {
-        whitelistChange: (_host: string, _isWhite: boolean) => true,
-        delete: (_row: timer.stat.Row) => true,
-    },
-    setup(props, ctx) {
-        const canOperate = computed(() => !props.mergeHost)
-        const width = computed(() => props.mergeHost ? 110 : LOCALE_WIDTH[locale])
-        const router: Router = useRouter()
-        return () => h(ElTableColumn, {
-            width: width.value,
-            label: COL_LABEL,
-            align: "center"
-        }, {
-            default: ({ row }: { row: timer.stat.Row }) => [
-                // Analysis
-                h(ElButton, {
-                    icon: Stopwatch,
-                    size: 'small',
-                    type: 'primary',
-                    onClick() {
-                        const query: LocationQueryRaw = {
-                            host: row.host,
-                            merge: props.mergeHost ? '1' : '0',
-                        }
-                        router.push({ path: ANALYSIS_ROUTE, query })
-                    }
-                }, () => ANALYSIS),
-                // Delete button
-                h(OperationDeleteButton, {
-                    mergeDate: props.mergeDate,
-                    itemUrl: row.host,
-                    itemDate: row.date,
-                    dateRange: props.dateRange,
-                    visible: canOperate.value,
-                    async onConfirm() {
-                        const host = row.host
-                        props.mergeDate
-                            ? await handleDeleteByRange(host, props.dateRange)
-                            : await statDatabase.deleteByUrlAndDate(host, row.date)
-                        ctx.emit("delete", row)
-                    }
-                }),
-                // Add 2 whitelist
-                h(OperationPopupConfirmButton, {
-                    buttonIcon: Plus,
-                    buttonType: "warning",
-                    buttonText: ADD_WHITE,
-                    confirmText: t(msg => msg.whitelist.addConfirmMsg, { url: row.host }),
-                    visible: canOperate.value && !props.whitelist?.includes(row.host),
-                    async onConfirm() {
-                        await whitelistService.add(row.host)
-                        ElMessage({ message: ADD_WHITE_SUCC, type: 'success' })
-                        ctx.emit("whitelistChange", row.host, true)
-                    }
-                }),
-                // Remove from whitelist
-                h(OperationPopupConfirmButton, {
-                    buttonIcon: Open,
-                    buttonType: "primary",
-                    buttonText: REMOVE_WHITE,
-                    confirmText: t(msg => msg.whitelist.removeConfirmMsg, { url: row.host }),
-                    visible: canOperate.value && props.whitelist?.includes(row.host),
-                    async onConfirm() {
-                        await whitelistService.remove(row.host)
-                        ElMessage({ message: REMOVE_WHITE_SUCC, type: 'success' })
-                        ctx.emit("whitelistChange", row.host, false)
-                    }
-                })
-            ]
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/selection.ts b/src/app/components/Report/ReportTable/columns/selection.ts
deleted file mode 100644
index 8cbf4056..00000000
--- a/src/app/components/Report/ReportTable/columns/selection.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElTableColumn } from "element-plus"
-import { defineComponent, h } from "vue"
-
-const _default = defineComponent({
-    name: "ReportSelection",
-    props: {
-        disabled: Boolean
-    },
-    setup(props) {
-        return () => h(ElTableColumn, {
-            type: "selection",
-            selectable: (_row, _index) => !props.disabled
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/ReportTable/columns/time.ts b/src/app/components/Report/ReportTable/columns/time.ts
deleted file mode 100644
index 44793741..00000000
--- a/src/app/components/Report/ReportTable/columns/time.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { defineComponent, h } from "vue"
-import { Effect, ElTableColumn, ElTooltip } from "element-plus"
-import { t } from "@app/locale"
-import CompositionTable from "./CompositionTable"
-
-const columnLabel = t(msg => msg.item.time)
-
-const _default = defineComponent({
-    name: "TimeColumn",
-    props: {
-        readRemote: Boolean,
-    },
-    setup(props) {
-        return () => h(ElTableColumn, {
-            prop: "time",
-            label: columnLabel,
-            minWidth: 130,
-            align: 'center',
-            sortable: 'custom'
-        }, {
-            default: ({ row }: { row: timer.stat.Row }) => {
-                const valueStr = row.time?.toString?.() || '0'
-                if (!props.readRemote) {
-                    return valueStr
-                }
-                return h(ElTooltip, {
-                    placement: "top",
-                    effect: Effect.LIGHT,
-                    offset: 10
-                }, {
-                    default: () => valueStr,
-                    content: () => h(CompositionTable, {
-                        data: row.composition?.time || [],
-                        valueFormatter: val => val?.toString() || '0'
-                    })
-                })
-            }
-        })
-    }
-})
-
-export default _default
diff --git a/src/app/components/Report/ReportTable/index.tsx b/src/app/components/Report/ReportTable/index.tsx
index 929626d0..46e0ef53 100644
--- a/src/app/components/Report/ReportTable/index.tsx
+++ b/src/app/components/Report/ReportTable/index.tsx
@@ -1,21 +1,21 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import type { PropType } from "vue"
 
-import { ElTable } from "element-plus"
-import { defineComponent, ref, watch } from "vue"
-import SelectionColumn from "./columns/selection"
+import { ElTable, ElTableColumn } from "element-plus"
+import { defineComponent } from "vue"
 import DateColumn from "./columns/DateColumn"
 import HostColumn from "./columns/HostColumn"
 import AliasColumn from "./columns/AliasColumn"
 import FocusColumn from "./columns/FocusColumn"
-import TimeColumn from "./columns/time"
-import OperationColumn from "./columns/operation"
+import TimeColumn from "./columns/TimeColumn"
+import OperationColumn from "./columns/OperationColumn"
+import { useReportFilter } from "../context"
 
 export type TableInstance = {
     getSelected(): timer.stat.Row[]
@@ -25,23 +25,15 @@ const _default = defineComponent({
     props: {
         data: Array as PropType<timer.stat.Row[]>,
         defaultSort: Object as PropType<SortInfo>,
-        mergeDate: Boolean,
-        mergeHost: Boolean,
-        timeFormat: String as PropType<timer.app.TimeFormat>,
-        dateRange: Object as PropType<[Date, Date]>,
-        whitelist: Array as PropType<string[]>,
-        readRemote: Boolean,
     },
     emits: {
         sortChange: (_newSortInfo: SortInfo) => true,
         aliasChange: (_host: string, _newAlias: string) => true,
         itemDelete: (_row: timer.stat.Row) => true,
-        whitelistChange: (_host: string, _addOrRemove: boolean) => true,
     },
     setup(props, ctx) {
+        const filterOption = useReportFilter()
         let selectedRows: timer.stat.Row[] = []
-        const readRemote = ref(props.readRemote)
-        watch(() => props.readRemote, newVal => readRemote.value = newVal)
         const instance: TableInstance = { getSelected: () => selectedRows }
         ctx.expose(instance)
         return () => (
@@ -56,17 +48,13 @@ const _default = defineComponent({
                 onSelection-change={(data: timer.stat.Row[]) => selectedRows = data}
                 onSort-change={(newSortInfo: SortInfo) => ctx.emit("sortChange", newSortInfo)}
             >
-                <SelectionColumn disabled={props.mergeHost} />
-                {!props.mergeDate && <DateColumn />}
-                <HostColumn {...props} />
+                <ElTableColumn type="selection" selectable={() => !filterOption.value?.mergeHost} />
+                {!filterOption.value?.mergeDate && <DateColumn />}
+                <HostColumn />
                 <AliasColumn onAliasChange={(host, newAlias) => ctx.emit("aliasChange", host, newAlias)} />
-                <FocusColumn {...props} />
-                <TimeColumn {...props} />
-                <OperationColumn
-                    {...props}
-                    onDelete={row => ctx.emit("itemDelete", row)}
-                    onWhitelistChange={(host, addOrRemove) => ctx.emit("whitelistChange", host, addOrRemove)}
-                />
+                <FocusColumn />
+                <TimeColumn />
+                <OperationColumn onDelete={row => ctx.emit("itemDelete", row)} />
             </ElTable>
         )
     }
diff --git a/src/app/components/Report/context.ts b/src/app/components/Report/context.ts
new file mode 100644
index 00000000..226ace21
--- /dev/null
+++ b/src/app/components/Report/context.ts
@@ -0,0 +1,16 @@
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+import { Ref } from "vue"
+
+type Context = {
+    filter: Ref<ReportFilterOption>
+}
+
+const NAMESPACE = 'report'
+
+export const initProvider = (
+    filter: Ref<ReportFilterOption>,
+) => provideWithNs<Context>(NAMESPACE, {
+    filter
+})
+
+export const useReportFilter = (): Ref<ReportFilterOption> => useProviderWithNs<Context>(NAMESPACE, "filter").filter
diff --git a/src/app/components/Report/filter/download-file.ts b/src/app/components/Report/filter/download-file.ts
deleted file mode 100644
index c06912bc..00000000
--- a/src/app/components/Report/filter/download-file.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { Download } from "@element-plus/icons-vue"
-import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus"
-import { h, defineComponent } from "vue"
-
-const ALL_FILE_FORMATS: FileFormat[] = ["json", "csv"]
-
-const _default = defineComponent({
-    name: "FileDownload",
-    emits: {
-        download: (_format: FileFormat) => true,
-    },
-    setup(_, ctx) {
-        return () => h(ElDropdown, { class: 'export-dropdown', showTimeout: 100 }, {
-            default: () => h(ElButton,
-                { size: 'small', class: 'export-dropdown-button' },
-                () => h(ElIcon, { size: 17, style: { padding: '0 1px' } }, () => h(Download))
-            ),
-            dropdown: () => h(ElDropdownMenu, {},
-                () => ALL_FILE_FORMATS.map(
-                    format => h(ElDropdownItem, {
-                        onClick: () => ctx.emit("download", format)
-                    }, () => format)
-                )
-            )
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/filter/index.ts b/src/app/components/Report/filter/index.ts
deleted file mode 100644
index f8c66720..00000000
--- a/src/app/components/Report/filter/index.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { Ref, PropType } from "vue"
-import type { ElementDatePickerShortcut } from "@src/element-ui/date"
-import type { CalendarMessage } from "@i18n/message/common/calendar"
-
-import DownloadFile from "./download-file"
-import RemoteClient from "./remote-client"
-import { h, defineComponent, ref, } from "vue"
-import { t } from "@app/locale"
-import InputFilterItem from '@app/components/common/input-filter-item'
-import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import TimeFormatFilterItem from "@app/components/common/time-format-filter-item"
-import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
-import { daysAgo } from "@util/time"
-import { ElButton } from "element-plus"
-import { DeleteFilled } from "@element-plus/icons-vue"
-import statService from "@service/stat-service"
-
-const hostPlaceholder = t(msg => msg.report.hostPlaceholder)
-const mergeDateLabel = t(msg => msg.report.mergeDate)
-const mergeHostLabel = t(msg => msg.report.mergeDomain)
-// Batch Delete
-const batchDeleteButtonText = t(msg => msg.report.batchDelete.buttonText)
-// Date range
-const dateStartPlaceholder = t(msg => msg.calendar.label.startDate)
-const dateEndPlaceholder = t(msg => msg.calendar.label.endDate)
-// date range
-function datePickerShortcut(msg: keyof CalendarMessage['range'], agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
-    const text = t(messages => messages.calendar.range[msg])
-    const value = daysAgo(agoOfStart || 0, agoOfEnd || 0)
-    return { text, value }
-}
-
-const dateShortcuts: ElementDatePickerShortcut[] = [
-    datePickerShortcut('today'),
-    datePickerShortcut('yesterday', 1, 1),
-    datePickerShortcut('last7Days', 7),
-    datePickerShortcut('last30Days', 30),
-    datePickerShortcut('last60Days', 60),
-]
-
-const _default = defineComponent({
-    name: "ReportFilter",
-    props: {
-        host: String,
-        dateRange: Object as PropType<[Date, Date]>,
-        mergeDate: Boolean,
-        mergeHost: Boolean,
-        timeFormat: String as PropType<timer.app.TimeFormat>
-    },
-    emits: {
-        change: (_filterOption: ReportFilterOption) => true,
-        download: (_format: FileFormat) => true,
-        batchDelete: (_filterOption: ReportFilterOption) => true,
-        remoteChange: (_readRemote: boolean) => true,
-    },
-    setup(props, ctx) {
-        const host: Ref<string> = ref(props.host)
-        const dateRange: Ref<[Date, Date]> = ref(props.dateRange)
-        const mergeDate: Ref<boolean> = ref(props.mergeDate)
-        const mergeHost: Ref<boolean> = ref(props.mergeHost)
-        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const remoteSwitchVisible: Ref<boolean> = ref(false)
-        // Whether to read remote backup data
-        const readRemote: Ref<boolean> = ref(false)
-        const computeOption = () => ({
-            host: host.value,
-            dateRange: dateRange.value,
-            mergeDate: mergeDate.value,
-            mergeHost: mergeHost.value,
-            timeFormat: timeFormat.value
-        } as ReportFilterOption)
-        const handleChange = () => ctx.emit("change", computeOption())
-        statService.canReadRemote().then(abled => remoteSwitchVisible.value = abled)
-        return () => [
-            h(InputFilterItem, {
-                placeholder: hostPlaceholder,
-                onSearch(searchVal: string) {
-                    host.value = searchVal
-                    handleChange()
-                },
-            }),
-            h(DateRangeFilterItem, {
-                startPlaceholder: dateStartPlaceholder,
-                endPlaceholder: dateEndPlaceholder,
-                disabledDate: (date: Date | number) => new Date(date) > new Date(),
-                shortcuts: dateShortcuts,
-                defaultRange: dateRange.value,
-                onChange(newVal: [Date, Date]) {
-                    dateRange.value = newVal
-                    handleChange()
-                }
-            }),
-            h(TimeFormatFilterItem, {
-                defaultValue: timeFormat.value,
-                onChange: newVal => {
-                    timeFormat.value = newVal
-                    handleChange()
-                }
-            }),
-            h(SwitchFilterItem, {
-                historyName: 'mergeDate',
-                label: mergeDateLabel,
-                defaultValue: mergeDate.value,
-                onChange(newVal: boolean) {
-                    mergeDate.value = newVal
-                    handleChange()
-                }
-            }),
-            h(SwitchFilterItem, {
-                historyName: 'mergeHost',
-                label: mergeHostLabel,
-                defaultValue: mergeHost.value,
-                onChange(newVal: boolean) {
-                    mergeHost.value = newVal
-                    handleChange()
-                }
-            }),
-            // Float right
-            h("div", { class: "filter-item-right-group" }, [
-                h(ElButton, {
-                    style: readRemote.value ? { display: 'none' } : { display: 'inline-flex' },
-                    class: "batch-delete-button",
-                    disabled: mergeHost.value,
-                    type: "primary",
-                    link: true,
-                    icon: DeleteFilled,
-                    onClick: () => ctx.emit("batchDelete", computeOption())
-                }, () => batchDeleteButtonText),
-                h(RemoteClient, {
-                    visible: remoteSwitchVisible.value,
-                    onChange: newVal => {
-                        readRemote.value = newVal
-                        ctx.emit('remoteChange', readRemote.value)
-                    }
-                }),
-                h(DownloadFile, {
-                    onDownload: (format: FileFormat) => ctx.emit("download", format)
-                })
-            ])
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/filter/remote-client.ts b/src/app/components/Report/filter/remote-client.ts
deleted file mode 100644
index aaafaade..00000000
--- a/src/app/components/Report/filter/remote-client.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2022-present Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { Ref } from "vue"
-
-import { t } from "@app/locale"
-import { UploadFilled } from "@element-plus/icons-vue"
-import { ElButton, ElIcon, ElTooltip } from "element-plus"
-import { defineComponent, ref, h, watch } from "vue"
-
-const _default = defineComponent({
-    name: "ClientSelect",
-    emits: {
-        change: (_readRemote: boolean) => true
-    },
-    props: {
-        visible: Boolean
-    },
-    setup(props, ctx) {
-        const button = ref()
-        const style: Ref<Partial<CSSStyleDeclaration>> = ref({ display: 'none' })
-        watch(() => props.visible, visibe => style.value = { display: visibe ? 'inline-flex' : 'none' })
-        const readRemote = ref(false)
-        return () => h(ElTooltip, {
-            trigger: 'hover',
-            placement: 'bottom-start',
-            effect: 'dark',
-            content: t(msg => msg.report.remoteReading[readRemote.value ? 'on' : 'off'])
-        }, () => h(ElButton, {
-            size: 'small',
-            ref: button.value,
-            style: style.value,
-            type: readRemote.value ? 'primary' : '',
-            class: 'export-dropdown-button',
-            onClick() {
-                readRemote.value = !readRemote.value
-                ctx.emit('change', readRemote.value)
-            }
-        },
-            () => h(ElIcon, { size: 17, style: { padding: '0 1px' } }, () => h(UploadFilled))
-        ))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/Report/index.tsx b/src/app/components/Report/index.tsx
index e3f4837d..dba8b017 100644
--- a/src/app/components/Report/index.tsx
+++ b/src/app/components/Report/index.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -9,14 +9,13 @@ import type { Ref, UnwrapRef, ComputedRef } from "vue"
 import type { StatQueryParam } from "@service/stat-service"
 import type { Router, RouteLocation } from "vue-router"
 
-import { computed, defineComponent, reactive, ref } from "vue"
+import { computed, defineComponent, watch, reactive, ref } from "vue"
 import { I18nKey, t } from "@app/locale"
 import statService from "@service/stat-service"
-import whitelistService from "@service/whitelist-service"
 import './styles/element'
 import ReportTable, { TableInstance } from "./ReportTable"
-import ReportFilter from "./filter"
-import Pagination from "../common/pagination"
+import ReportFilter from "./ReportFilter"
+import Pagination from "../common/Pagination"
 import ContentContainer from "../common/content-container"
 import { ElLoadingService, ElMessage, ElMessageBox } from "element-plus"
 import siteService from "@service/site-service"
@@ -26,6 +25,7 @@ import { groupBy, sum } from "@util/array"
 import { formatTime } from "@util/time"
 import StatDatabase from "@db/stat-database"
 import { handleWindowVisibleChange } from "@util/window"
+import { initProvider } from "./context"
 
 const statDatabase = new StatDatabase(chrome.storage.local)
 
@@ -33,15 +33,10 @@ async function queryData(
     queryParam: Ref<StatQueryParam>,
     data: Ref<timer.stat.Row[]>,
     page: UnwrapRef<timer.common.Pagination>,
-    readRemote: Ref<boolean>
 ) {
     const loading = ElLoadingService({ target: `.container-card>.el-card__body`, text: "LOADING..." })
     const pageInfo = { size: page.size, num: page.num }
-    const param = {
-        ...queryParam.value,
-        inclusiveRemote: readRemote.value
-    }
-    const pageResult = await statService.selectByPage(param, pageInfo, true)
+    const pageResult = await statService.selectByPage(queryParam.value, pageInfo, true)
     const { list, total } = pageResult
     data.value = list
     page.total = total
@@ -60,11 +55,6 @@ async function handleAliasChange(key: timer.site.SiteKey, newAlias: string, data
         .forEach(item => item.alias = newAlias)
 }
 
-async function queryWhiteList(whitelist: Ref<string[]>): Promise<void> {
-    const value = await whitelistService.listAll()
-    whitelist.value = value
-}
-
 async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: boolean, dateRange: [Date, Date]): Promise<string> {
     // host => total focus
     const hostFocus: { [host: string]: number } = groupBy(selected,
@@ -77,7 +67,7 @@ async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: bool
         return t(msg => msg.report.batchDelete.noSelectedMsg)
     }
     const count2Delete: number = mergeDate
-        // All the items 
+        // All the items
         ? sum(await Promise.all(Array.from(hosts).map(host => statService.count({ host, fullHost: true, date: dateRange }))))
         // The count of row
         : selected?.length || 0
@@ -193,93 +183,60 @@ function computeTimerQueryParam(filterOption: ReportFilterOption, sort: SortInfo
         date: filterOption.dateRange,
         mergeHost: filterOption.mergeHost,
         mergeDate: filterOption.mergeDate,
+        inclusiveRemote: filterOption.readRemote,
         sort: sort.prop,
         sortOrder: sort.order === 'ascending' ? 'ASC' : 'DESC'
     }
 }
 
-function copyFilterParam(newVal: ReportFilterOption, oldVal: ReportFilterOption) {
-    oldVal.host = newVal.host
-    oldVal.dateRange = newVal.dateRange
-    oldVal.mergeDate = newVal.mergeDate
-    oldVal.mergeHost = newVal.mergeHost
-    oldVal.timeFormat = newVal.timeFormat
-}
+const DEFAULT_PAGINATION: timer.common.Pagination = { size: 10, num: 1, total: 0 }
 
 const _default = defineComponent(() => {
     const route = useRoute()
     const router = useRouter()
     const [initialFilterParam, initialSort] = initQueryParam(route, router)
-    const filterOption: UnwrapRef<ReportFilterOption> = reactive(initialFilterParam)
-    const sort: UnwrapRef<SortInfo> = reactive(initialSort)
+    const filterOption: Ref<ReportFilterOption> = ref(initialFilterParam)
+    initProvider(filterOption)
+    const sort: Ref<SortInfo> = ref(initialSort)
 
     const data: Ref<timer.stat.Row[]> = ref([])
-    const whitelist: Ref<string[]> = ref([])
-    const remoteRead: Ref<boolean> = ref(false)
 
     const page: UnwrapRef<timer.common.Pagination> = reactive({ size: 10, num: 1, total: 0 })
-    const queryParam: ComputedRef<StatQueryParam> = computed(() => computeTimerQueryParam(filterOption, sort))
+    const queryParam: ComputedRef<StatQueryParam> = computed(() => computeTimerQueryParam(filterOption.value, sort.value))
     const table: Ref<TableInstance> = ref()
 
-    const query = () => queryData(queryParam, data, page, remoteRead)
+    const query = () => queryData(queryParam, data, page)
     // Query data if window become visible
     handleWindowVisibleChange(query)
-    // Init first
-    queryWhiteList(whitelist).then(query)
+
+    watch([filterOption, sort, () => page.num, () => page.size], query)
 
     const renderFilter = () => <ReportFilter
-        host={filterOption.host}
-        dateRange={filterOption.dateRange}
-        mergeDate={filterOption.mergeDate}
-        mergeHost={filterOption.mergeHost}
-        timeFormat={filterOption.timeFormat}
-        onChange={(newVal) => {
-            copyFilterParam(newVal, filterOption)
-            query()
-        }}
+        initial={filterOption.value}
+        onChange={newVal => filterOption.value = newVal}
         onDownload={async format => {
             const rows = await statService.select(queryParam.value, true)
-            format === 'json' && exportJson(filterOption, rows)
-            format === 'csv' && exportCsv(filterOption, rows)
+            format === 'json' && exportJson(filterOption.value, rows)
+            format === 'csv' && exportCsv(filterOption.value, rows)
         }}
         onBatchDelete={filterOption => handleBatchDelete(table, filterOption, query)}
-        onRemoteChange={newRemoteChange => {
-            remoteRead.value = newRemoteChange
-            query()
-        }}
     />
 
     const renderContent = () => <>
         <ReportTable
-            whitelist={whitelist.value}
-            mergeDate={filterOption.mergeDate}
-            mergeHost={filterOption.mergeHost}
-            timeFormat={filterOption.timeFormat}
-            dateRange={filterOption.dateRange}
-            readRemote={remoteRead.value}
             data={data.value}
-            defaultSort={sort}
+            defaultSort={sort.value}
             ref={table}
-            onSortChange={({ order, prop }) => {
-                sort.order = order
-                sort.prop = prop
-                query()
-            }}
+            onSortChange={newVal => sort.value = newVal}
             onItemDelete={query}
-            onWhitelistChange={() => queryWhiteList(whitelist)}
-            onAliasChange={(host, newAlias) => handleAliasChange({ host, merged: filterOption.mergeHost }, newAlias, data)}
+            onAliasChange={(host, newAlias) => handleAliasChange({ host, merged: filterOption.value?.mergeHost }, newAlias, data)}
         />
         <Pagination
+            defaultValue={[DEFAULT_PAGINATION.num, DEFAULT_PAGINATION.size]}
             total={page.total}
-            size={page.size}
-            num={page.num}
-            onNumChange={newNum => {
-                page.num = newNum
-                query()
-            }}
-            onSizeChange={newSize => {
-                page.size = newSize
-                query()
+            onChange={(currentPage, pageSize) => {
+                page.num = currentPage
+                page.size = pageSize
             }}
         />
     </>
diff --git a/src/app/components/Report/report.d.ts b/src/app/components/Report/report.d.ts
index df66bbe0..b414d033 100644
--- a/src/app/components/Report/report.d.ts
+++ b/src/app/components/Report/report.d.ts
@@ -17,6 +17,7 @@ declare type ReportFilterOption = {
      * @since 1.1.7
      */
     timeFormat: timer.app.TimeFormat
+    readRemote?: boolean
 }
 
 /**
diff --git a/src/app/components/analysis/components/summary/index.ts b/src/app/components/analysis/components/summary/index.ts
deleted file mode 100644
index 8c497313..00000000
--- a/src/app/components/analysis/components/summary/index.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-import type { PropType, Ref, VNode } from "vue"
-
-import { defineComponent, h, ref, watch } from "vue"
-import siteService from "@service/site-service"
-import Site from "./site"
-import { KanbanIndicatorCell, KanbanCard, KanbanIndicatorRow } from "@app/components/common/kanban"
-import "./summary.sass"
-import { ElCol } from "element-plus"
-import { t } from "@app/locale"
-import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
-
-type Summary = {
-    focus: number
-    visit: number
-    day: number
-    firstDay?: string
-}
-
-function computeSummary(site: timer.site.SiteKey, rows: timer.stat.Row[]): Summary {
-    if (!site) return undefined
-
-    const summary: Summary = { focus: 0, visit: 0, day: 0 }
-    summary.firstDay = rows?.[0]?.date
-    rows?.forEach(({ focus, time: visit }) => {
-        summary.focus += focus
-        summary.visit += visit
-        focus && (summary.day += 1)
-    })
-    return summary
-}
-
-const DAYS_LABEL = t(msg => msg.analysis.summary.day)
-const FOCUS_LABEL = t(msg => msg.analysis.common.focusTotal)
-const VISIT_LABEL = t(msg => msg.analysis.common.visitTotal)
-
-function renderContent(siteInfo: timer.site.SiteInfo, summary: Summary, timeFormat: timer.app.TimeFormat): VNode {
-    const { day, firstDay, focus, visit } = summary || {}
-    return h(KanbanIndicatorRow, {}, () => [
-        h(ElCol, { span: 6 }, () => h(Site, { site: siteInfo })),
-        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
-            mainName: DAYS_LABEL,
-            mainValue: day?.toString() || '-',
-            subTips: msg => msg.analysis.summary.firstDay,
-            subValue: firstDay ? `@${cvt2LocaleTime(firstDay)}` : ''
-        })),
-        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
-            mainName: FOCUS_LABEL,
-            mainValue: focus === undefined ? '-' : periodFormatter(focus, timeFormat, false),
-        })),
-        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
-            mainName: VISIT_LABEL,
-            mainValue: visit?.toString() || '-',
-        })),
-    ])
-}
-
-const _default = defineComponent({
-    props: {
-        site: Object as PropType<timer.site.SiteKey>,
-        timeFormat: String as PropType<timer.app.TimeFormat>,
-        rows: Array as PropType<timer.stat.Row[]>,
-    },
-    setup(props) {
-        const siteInfo: Ref<timer.site.SiteInfo> = ref()
-        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const summaryInfo: Ref<Summary> = ref(computeSummary(props.site, props.rows))
-
-        const querySiteInfo = async () => {
-            const siteKey = props.site
-            if (!siteKey) {
-                siteInfo.value = undefined
-            } else {
-                siteInfo.value = (await siteService.get(siteKey)) || siteKey
-            }
-        }
-
-        watch(() => props.timeFormat, () => timeFormat.value = props.timeFormat)
-        watch(() => props.site, querySiteInfo)
-        watch(() => props.rows, () => summaryInfo.value = computeSummary(props.site, props.rows))
-
-        querySiteInfo()
-
-        return () => h(KanbanCard, {
-            title: t(msg => msg.analysis.summary.title)
-        }, () => renderContent(siteInfo.value, summaryInfo.value, timeFormat.value))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/summary/site.ts b/src/app/components/analysis/components/summary/site.ts
deleted file mode 100644
index 86fd3c8c..00000000
--- a/src/app/components/analysis/components/summary/site.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { PropType, defineComponent, h } from "vue"
-import { labelOfHostInfo } from "../../util"
-import { t } from "@app/locale"
-
-const renderIcon = (iconUrl: string) => h('img', { src: iconUrl, width: 24, height: 24 })
-const renderTitle = (title: string) => h('h1', { class: 'site-alias' }, title)
-const renderSubtitle = (subtitle: string) => h('p', { class: 'site-host' }, subtitle)
-
-const EMPTY_DESC = t(msg => msg.analysis.common.emptyDesc)
-
-function renderChildren(site: timer.site.SiteInfo) {
-    if (!site) {
-        return renderTitle(EMPTY_DESC)
-    }
-    const result = []
-
-    const { iconUrl, alias } = site
-    const label = labelOfHostInfo(site)
-    const title: string = alias ? alias : label
-    const subtitle: string = alias ? label : undefined
-
-    iconUrl && result.push(renderIcon(iconUrl))
-    result.push(renderTitle(title))
-    subtitle && result.push(renderSubtitle(subtitle))
-    return result
-}
-
-const _default = defineComponent({
-    props: {
-        site: Object as PropType<timer.site.SiteInfo>,
-    },
-    setup(props) {
-        return () => h('div', { class: 'site-container' }, renderChildren(props.site))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/trend/dimension/index.ts b/src/app/components/analysis/components/trend/dimension/index.ts
deleted file mode 100644
index fe1d2e9d..00000000
--- a/src/app/components/analysis/components/trend/dimension/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- * 
- * 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, h } from "vue"
-import { KanbanIndicatorCell } from "@app/components/common/kanban"
-import Chart from "./chart"
-import { cvt2LocaleTime } from "@app/util/time"
-
-type RenderProps = {
-    maxLabel: string
-    maxValue: number
-    averageLabel: string
-    average: RingValue
-    maxDate: string
-    valueFormatter: ValueFormatter
-}
-
-const renderMax = ({ maxLabel, maxValue, valueFormatter: formatter, maxDate }: RenderProps) =>
-    h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(KanbanIndicatorCell, {
-        mainName: maxLabel,
-        mainValue: formatter ? formatter(maxValue) : maxValue?.toString() || '-',
-        subValue: maxDate ? `@${cvt2LocaleTime(maxDate)}` : '',
-    }))
-
-const renderAverage = ({ averageLabel, valueFormatter, average }: RenderProps) => {
-    const currentAverage = average?.[0]
-    return h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(KanbanIndicatorCell, {
-        mainName: averageLabel,
-        mainValue: formatValue(currentAverage, valueFormatter),
-        subTips: msg => msg.analysis.common.ringGrowth,
-        subValue: computeRingText(average, valueFormatter),
-    }))
-}
-
-
-const _default = defineComponent({
-    props: {
-        maxLabel: String,
-        maxValue: Number,
-        averageLabel: String,
-        averageValue: String,
-        maxDate: String,
-        average: [Object, Object] as PropType<RingValue>,
-        data: Array as PropType<DimensionEntry[]>,
-        valueFormatter: Function as PropType<ValueFormatter>,
-        dateRange: [Object, Object] as PropType<[Date, Date]>,
-        chartTitle: String,
-    },
-    setup(props) {
-        return () => h('div', { class: "analysis-trend-dimension-container" }, [
-            h('div', { class: 'analysis-trend-dimension-indicator-container' }, [
-                renderMax(props),
-                renderAverage(props),
-            ]),
-            h('div', { class: 'analysis-trend-dimension-chart-container' },
-                h(Chart, { data: props.data, valueFormatter: props.valueFormatter, title: props.chartTitle })
-            ),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/trend/total.ts b/src/app/components/analysis/components/trend/total.ts
deleted file mode 100644
index 0e0e41cb..00000000
--- a/src/app/components/analysis/components/trend/total.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { RingValue } from "@app/components/analysis/util"
-import type { PropType } from "vue"
-import type { I18nKey } from "@app/locale"
-import type { IndicatorProps } from "@app/components/common/kanban/indicator-cell"
-
-import { defineComponent, h } from "vue"
-import { KanbanIndicatorCell } from "@app/components/common/kanban"
-import { t } from "@app/locale"
-import { periodFormatter } from "@app/util/time"
-import { computeRingText } from "@app/components/analysis/util"
-
-type Props = {
-    activeDay: RingValue
-    rangeLength: number
-    visit: RingValue
-    focus: RingValue
-    timeFormat: timer.app.TimeFormat
-}
-
-const DAY_LABEL = `${t(msg => msg.analysis.trend.activeDay)}/${t(msg => msg.analysis.trend.totalDay)}`
-const VISIT_LABEL = t(msg => msg.analysis.common.visitTotal)
-const FOCUS_LABEL = t(msg => msg.analysis.common.focusTotal)
-const RING_TIP: I18nKey = msg => msg.analysis.common.ringGrowth
-
-const computeDayValue = (props: Props) => {
-    const { activeDay, rangeLength } = props
-    const thisActiveDay = activeDay?.[0]
-    return `${thisActiveDay?.toString() || '-'}/${rangeLength?.toString() || '-'}`
-}
-
-const renderIndicator = (props: IndicatorProps) => h('div', h(KanbanIndicatorCell, props))
-
-const computeFocusText = (focusRing: RingValue, format: timer.app.TimeFormat) => {
-    const current = focusRing?.[0]
-    return current === undefined ? '-' : periodFormatter(current, format)
-}
-
-const _default = defineComponent({
-    props: {
-        activeDay: [Object, Object] as PropType<RingValue>,
-        rangeLength: Number,
-        visit: [Object, Object] as PropType<RingValue>,
-        focus: [Object, Object] as PropType<RingValue>,
-        timeFormat: String as PropType<timer.app.TimeFormat>
-    },
-    setup(props) {
-        return () => h('div', { class: 'analysis-trend-total-container' }, [
-            renderIndicator({
-                mainName: DAY_LABEL,
-                mainValue: computeDayValue(props),
-                subTips: RING_TIP,
-                subValue: computeRingText(props.activeDay)
-            }),
-            renderIndicator({
-                mainName: FOCUS_LABEL,
-                mainValue: computeFocusText(props.focus, props.timeFormat),
-                subTips: RING_TIP,
-                subValue: computeRingText(props.focus, delta => periodFormatter(delta, props.timeFormat))
-            }),
-            renderIndicator({
-                mainName: VISIT_LABEL,
-                mainValue: props.visit?.[0]?.toString() || '-',
-                subTips: RING_TIP,
-                subValue: computeRingText(props.visit),
-            }),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/common/Pagination.tsx b/src/app/components/common/Pagination.tsx
new file mode 100644
index 00000000..dbff32a4
--- /dev/null
+++ b/src/app/components/common/Pagination.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElPagination } from "element-plus"
+import { PropType, defineComponent } from "vue"
+
+const _default = defineComponent({
+    props: {
+        defaultValue: Object as PropType<[number, number]>,
+        total: Number
+    },
+    emits: {
+        change: (_currentPage: number, _pageSize: number) => true,
+    },
+    setup(props, ctx) {
+        return () => (
+            <div class="pagination-container">
+                <ElPagination
+                    pageSizes={[10, 20, 50]}
+                    defaultCurrentPage={props.defaultValue?.[0]}
+                    defaultPageSize={props.defaultValue?.[1]}
+                    layout="total, sizes, prev, pager, next, jumper"
+                    total={props.total}
+                    onChange={(currentPage, pageSize) => ctx.emit("change", currentPage, pageSize)}
+                />
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/common/PopupConfirmButton.tsx b/src/app/components/common/PopupConfirmButton.tsx
new file mode 100644
index 00000000..68eaefeb
--- /dev/null
+++ b/src/app/components/common/PopupConfirmButton.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { ButtonType, ElButton, ElPopconfirm, IconProps } from "element-plus"
+import { defineComponent, PropType, h, computed } from "vue"
+
+const confirmButtonText = t(msg => msg.confirm.confirmMsg)
+const cancelButtonText = t(msg => msg.confirm.cancelMsg)
+
+const _default = defineComponent({
+    props: {
+        confirmText: String,
+        buttonText: String,
+        buttonType: String as PropType<ButtonType>,
+        buttonIcon: Object as PropType<IconProps>,
+        visible: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    emits: {
+        confirm: () => true,
+    },
+    setup(props, ctx) {
+        return () => (
+            <ElPopconfirm
+                confirmButtonText={confirmButtonText}
+                cancelButtonText={cancelButtonText}
+                title={props.confirmText}
+                width={300}
+                onConfirm={() => ctx.emit("confirm")}
+                v-slots={{
+                    reference: () => (
+                        <ElButton
+                            v-show={props.visible}
+                            size="small"
+                            type={props.buttonType}
+                            icon={props.buttonIcon}
+                        >
+                            {props.buttonText}
+                        </ElButton>
+                    )
+                }}
+            />
+        )
+    }
+})
+
+export default _default
diff --git a/src/app/components/common/imported/CompareTable.tsx b/src/app/components/common/imported/CompareTable.tsx
new file mode 100644
index 00000000..bda8d277
--- /dev/null
+++ b/src/app/components/common/imported/CompareTable.tsx
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2023-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
+
+import { isRemainHost } from "@util/constant/remain-host"
+import { ElTable, ElTableColumn, Sort } from "element-plus"
+import HostAlert from "@app/components/common/host-alert"
+import { computed, defineComponent, PropType, ref, Ref, VNode, watch } from "vue"
+import { t } from "@app/locale"
+
+type SortInfo = Sort & {
+    prop: keyof timer.imported.Row
+}
+
+function computeList(sort: SortInfo, originRows: timer.imported.Row[]): timer.imported.Row[] {
+    const { prop, order } = sort || {}
+    originRows = originRows || []
+    if (!prop) {
+        return originRows
+    }
+    const comparator = (a: timer.imported.Row, b: timer.imported.Row): number => {
+        const av = a[prop], bv = b[prop]
+        if (av == bv) return 0
+        if (order === 'descending') {
+            return av > bv ? -1 : 1
+        } else {
+            return av > bv ? 1 : -1
+        }
+    }
+    return originRows.sort(comparator)
+}
+
+const renderFocus = (data: timer.imported.Data, comparedColName: string): VNode | undefined => {
+    if (!data?.focus) return
+    return (
+        <ElTableColumn label={t(msg => msg.item.focus)} align="center">
+            <ElTableColumn
+                prop="focus"
+                sortable
+                label={comparedColName}
+                align="center"
+                minWidth={180}
+                formatter={(row: timer.imported.Row) => periodFormatter(row.focus, "default")}
+            />
+            <ElTableColumn
+                label={t(msg => msg.dataManage.importOther.local)}
+                align="center"
+                minWidth={180}
+                formatter={(row: timer.imported.Row) => {
+                    const localVal = row?.exist?.focus
+                    return localVal ? periodFormatter(localVal, "default") : '-'
+                }}
+            />
+        </ElTableColumn>
+    )
+}
+
+const renderTime = (data: timer.imported.Data, comparedColName: string): VNode | undefined => {
+    if (!data?.time) return
+    return (
+        <ElTableColumn label={t(msg => msg.item.time)} align="center">
+            <ElTableColumn
+                prop="time"
+                align="center"
+                sortable minWidth={150}
+                label={comparedColName}
+                formatter={(row: timer.imported.Row) => (row?.time || 0).toString()}
+            />
+            <ElTableColumn
+                label={t(msg => msg.dataManage.importOther.local)}
+                align="center"
+                minWidth={150}
+                formatter={({ exist }: timer.imported.Row) => exist ? (exist.time || 0).toString() : '-'}
+            />
+        </ElTableColumn>
+    )
+}
+
+const _default = defineComponent({
+    props: {
+        data: Object as PropType<timer.imported.Data>,
+        comparedColName: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props) {
+        const data: Ref<timer.imported.Data> = ref(props.data)
+        watch(() => props.data, () => data.value = props.data)
+        const sort: Ref<SortInfo> = ref({ order: 'ascending', prop: 'date' })
+
+        const list: Ref<timer.imported.Row[]> = computed(() => computeList(sort.value, data.value?.rows))
+        return () => (
+            <ElTable
+                size="small"
+                maxHeight="45vh"
+                border
+                highlightCurrentRow
+                fit
+                defaultSort={sort.value}
+                onSort-change={newSort => sort.value = newSort}
+                data={list.value || []}
+            >
+                <ElTableColumn type="index" align="center" />
+                <ElTableColumn
+                    prop="date"
+                    label={t(msg => msg.item.date)}
+                    sortable
+                    align="center"
+                    minWidth={120}
+                    formatter={(row: timer.imported.Row) => cvt2LocaleTime(row.date)}
+                />
+                <ElTableColumn
+                    prop="host"
+                    label={t(msg => msg.item.host)}
+                    sortable
+                    minWidth={300}
+                    align="center"
+                    formatter={({ host }: timer.imported.Row) => <HostAlert host={host} clickable={!isRemainHost(host)} />}
+                />
+                {renderFocus(data.value, props.comparedColName)}
+                {renderTime(data.value, props.comparedColName)}
+            </ElTable>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/common/imported/comapre-table.ts b/src/app/components/common/imported/comapre-table.ts
deleted file mode 100644
index 1919b459..00000000
--- a/src/app/components/common/imported/comapre-table.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright (c) 2023-present Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
-
-import { isRemainHost } from "@util/constant/remain-host"
-import { ElTable, ElTableColumn, Sort } from "element-plus"
-import HostAlert from "@app/components/common/host-alert"
-import { computed, defineComponent, h, PropType, ref, Ref, VNode, watch } from "vue"
-import { t } from "@app/locale"
-
-type SortInfo = Sort & {
-    prop: keyof timer.imported.Row
-}
-
-function computeList(sort: SortInfo, originRows: timer.imported.Row[]): timer.imported.Row[] {
-    const { prop, order } = sort || {}
-    originRows = originRows || []
-    if (!prop) {
-        return originRows
-    }
-    const comparator = (a: timer.imported.Row, b: timer.imported.Row): number => {
-        const av = a[prop], bv = b[prop]
-        if (av == bv) return 0
-        if (order === 'descending') {
-            return av > bv ? -1 : 1
-        } else {
-            return av > bv ? 1 : -1
-        }
-    }
-    return originRows.sort(comparator)
-}
-
-
-const renderFocus = (data: timer.imported.Data, comparedColName: string): VNode | undefined => data?.focus && h(ElTableColumn, {
-    label: t(msg => msg.item.focus),
-    align: 'center',
-}, {
-    default: () => [
-        h(ElTableColumn, {
-            prop: 'focus',
-            sortable: true,
-            label: comparedColName,
-            align: 'center',
-            minWidth: 180,
-            formatter: (row: timer.imported.Row) => periodFormatter(row.focus, "default"),
-        }),
-        h(ElTableColumn, {
-            label: t(msg => msg.dataManage.importOther.local),
-            align: 'center',
-            minWidth: 180,
-            formatter: (row: timer.imported.Row) => {
-                const localVal = row?.exist?.focus
-                return localVal ? periodFormatter(localVal, "default") : '-'
-            }
-        }),
-    ]
-})
-
-const renderTime = (data: timer.imported.Data, comparedColName: string): VNode | undefined => data?.time && h(ElTableColumn, {
-    label: t(msg => msg.item.time),
-    align: 'center',
-}, {
-    default: () => [
-        h(ElTableColumn, {
-            prop: 'time',
-            align: 'center',
-            sortable: true,
-            minWidth: 150,
-            label: comparedColName,
-            formatter: (row: timer.imported.Row) => (row?.time || 0).toString()
-        }),
-        h(ElTableColumn, {
-            label: t(msg => msg.dataManage.importOther.local),
-            align: 'center',
-            minWidth: 150,
-            formatter: (row: timer.imported.Row) => {
-                const { exist } = row || {}
-                return exist ? (exist.time || 0).toString() : '-'
-            }
-        })
-    ]
-})
-
-const _default = defineComponent({
-    props: {
-        data: Object as PropType<timer.imported.Data>,
-        comparedColName: {
-            type: String,
-            required: true,
-        },
-    },
-    setup(props) {
-        const data: Ref<timer.imported.Data> = ref(props.data)
-        watch(() => props.data, () => data.value = props.data)
-        const sort: Ref<SortInfo> = ref({ order: 'ascending', prop: 'date' })
-
-        const list: Ref<timer.imported.Row[]> = computed(() => computeList(sort.value, data.value?.rows))
-
-        return () => h(ElTable, {
-            size: 'small',
-            maxHeight: '45vh',
-            border: true,
-            highlightCurrentRow: true,
-            fit: true,
-            defaultSort: sort.value,
-            "onSort-change": newSort => sort.value = newSort,
-            data: list.value || [],
-        }, () => [
-            h(ElTableColumn, { type: 'index', align: 'center' }),
-            h(ElTableColumn, {
-                prop: 'date',
-                label: t(msg => msg.item.date),
-                sortable: true,
-                align: 'center',
-                minWidth: 120,
-                formatter: (row: timer.imported.Row) => cvt2LocaleTime(row.date)
-            }),
-            h(ElTableColumn, {
-                prop: 'host',
-                label: t(msg => msg.item.host),
-                sortable: true,
-                minWidth: 300,
-                align: 'center',
-                formatter: (row: timer.imported.Row) => h(HostAlert, { host: row.host, clickable: !isRemainHost(row.host) })
-            }),
-            renderFocus(data.value, props.comparedColName),
-            renderTime(data.value, props.comparedColName),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/common/imported/conflict/index.ts b/src/app/components/common/imported/conflict/index.ts
deleted file mode 100644
index 890f0886..00000000
--- a/src/app/components/common/imported/conflict/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-present Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { InfoFilled } from "@element-plus/icons-vue"
-import { ElRadio, ElForm, ElFormItem, ElTooltip, ElIcon, ElRadioGroup } from "element-plus"
-import { VNode, h, Ref } from "vue"
-import "./style.sass"
-
-export const ALL_RESOLUTIONS: timer.imported.ConflictResolution[] = ['overwrite', 'accumulate']
-
-const renderResolutionRadio = (resolution: timer.imported.ConflictResolution): VNode => h(ElRadio,
-    { label: resolution },
-    () => t(msg => msg.dataManage.importOther[resolution])
-)
-
-export const renderResolutionFormItem = (resolution: Ref<timer.imported.ConflictResolution>): VNode => h(ElForm, {
-    class: "data-conflit-form",
-}, () => h(ElFormItem, {
-    required: true,
-}, {
-    label: () => [
-        t(msg => msg.dataManage.importOther.conflictType),
-        h(ElTooltip, {
-            content: t(msg => msg.dataManage.importOther.conflictTip),
-        }, () => h(ElIcon, () => h(InfoFilled)))
-    ],
-    default: () => h(ElRadioGroup, {
-        modelValue: resolution.value,
-        onChange: (val: timer.imported.ConflictResolution) => resolution.value = val,
-    }, () => ALL_RESOLUTIONS.map(renderResolutionRadio))
-}))
\ No newline at end of file
diff --git a/src/app/components/common/imported/conflict/index.tsx b/src/app/components/common/imported/conflict/index.tsx
new file mode 100644
index 00000000..39467205
--- /dev/null
+++ b/src/app/components/common/imported/conflict/index.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { InfoFilled } from "@element-plus/icons-vue"
+import { ElRadio, ElForm, ElFormItem, ElTooltip, ElIcon, ElRadioGroup } from "element-plus"
+import { VNode, Ref } from "vue"
+import "./style.sass"
+
+export const ALL_RESOLUTIONS: timer.imported.ConflictResolution[] = ['overwrite', 'accumulate']
+
+const renderResolutionRadio = (resolution: timer.imported.ConflictResolution): VNode => (
+    <ElRadio label={resolution}>
+        {t(msg => msg.dataManage.importOther[resolution])}
+    </ElRadio>
+)
+
+export const renderResolutionFormItem = (resolution: Ref<timer.imported.ConflictResolution>): VNode => (
+    <ElForm class="data-conflict-form">
+        <ElFormItem required v-slots={{
+            label: () => <>
+                {t(msg => msg.dataManage.importOther.conflictType)}
+                <ElTooltip content={t(msg => msg.dataManage.importOther.conflictTip)}>
+                    <ElIcon>
+                        <InfoFilled />
+                    </ElIcon>
+                </ElTooltip>
+            </>
+        }}>
+            <ElRadioGroup
+                modelValue={resolution.value}
+                onChange={(val: timer.imported.ConflictResolution) => resolution.value = val}
+            >
+                {ALL_RESOLUTIONS.map(renderResolutionRadio)}
+            </ElRadioGroup>
+        </ElFormItem>
+    </ElForm>
+)
\ No newline at end of file
diff --git a/src/app/components/common/imported/conflict/style.sass b/src/app/components/common/imported/conflict/style.sass
index b1849565..e4df9432 100644
--- a/src/app/components/common/imported/conflict/style.sass
+++ b/src/app/components/common/imported/conflict/style.sass
@@ -1,4 +1,4 @@
-.data-conflit-form
+.data-conflict-form
     display: flex
     justify-content: center
     margin-bottom: -5px
diff --git a/src/app/components/common/pagination.ts b/src/app/components/common/pagination.ts
deleted file mode 100644
index 45da29fb..00000000
--- a/src/app/components/common/pagination.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElPagination } from "element-plus"
-import { defineComponent, h } from "vue"
-
-const _default = defineComponent({
-    name: "Pagination",
-    props: {
-        num: Number,
-        size: Number,
-        total: Number
-    },
-    emits: {
-        sizeChange: (_val: number) => true,
-        numChange: (_val: number) => true,
-    },
-    setup(props, ctx) {
-        return () => h('div', { class: 'pagination-container' }, h(ElPagination,
-            {
-                currentPage: props.num,
-                pageSizes: [10, 20, 50],
-                pageSize: props.size,
-                layout: "total, sizes, prev, pager, next, jumper",
-                total: props.total,
-                onSizeChange: (size: number) => ctx.emit("sizeChange", size),
-                onCurrentChange: (pageNum: number) => ctx.emit("numChange", pageNum)
-            }
-        ))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/common/popup-confirm-button.ts b/src/app/components/common/popup-confirm-button.ts
deleted file mode 100644
index b26a03f5..00000000
--- a/src/app/components/common/popup-confirm-button.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { ButtonType, ElButton, ElPopconfirm, IconProps } from "element-plus"
-import { defineComponent, PropType, h, computed } from "vue"
-
-const confirmButtonText = t(msg => msg.confirm.confirmMsg)
-const cancelButtonText = t(msg => msg.confirm.cancelMsg)
-
-const _default = defineComponent({
-    name: "OperationPopupConfirmButton",
-    props: {
-        confirmText: String,
-        buttonText: String,
-        buttonType: String as PropType<ButtonType>,
-        buttonIcon: Object as PropType<IconProps>,
-        visible: {
-            type: Boolean,
-            default: true
-        }
-    },
-    emits: {
-        confirm: () => true,
-        referenceClick: () => true,
-    },
-    setup(props, ctx) {
-        const display = computed(() => props.visible ? "inline-block" : "none")
-        return () => h(ElPopconfirm, {
-            confirmButtonText,
-            cancelButtonText,
-            title: props.confirmText,
-            onConfirm: () => ctx.emit("confirm")
-        }, {
-            reference: () => h(ElButton, {
-                size: 'small',
-                type: props.buttonType,
-                icon: props.buttonIcon,
-                style: {
-                    display: display.value
-                },
-                onClick: () => ctx.emit("referenceClick")
-            }, () => props.buttonText)
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/common/select-filter-item.ts b/src/app/components/common/select-filter-item.ts
index b4c68fc2..885139ae 100644
--- a/src/app/components/common/select-filter-item.ts
+++ b/src/app/components/common/select-filter-item.ts
@@ -12,7 +12,7 @@ const _default = defineComponent({
     props: {
         defaultValue: String,
         /**
-         * Whether to save the value in the localstorage with {@param historyName}
+         * Whether to save the value in the localStorage with {@param historyName}
          */
         historyName: {
             type: String,
@@ -26,7 +26,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         const modelValue: Ref<string> = ref(props.defaultValue)
         const historyWrapper = new FilterItemHistoryWrapper(useRoute().path, props.historyName)
-        // Initiliaze value
+        // Initialize value
         historyWrapper.ifPresent(
             historyVal => nextTick(() => ctx.emit('select', (modelValue.value = historyVal)))
         )
diff --git a/src/app/components/data-manage/clear/filter/constants.ts b/src/app/components/data-manage/clear/filter/constants.ts
deleted file mode 100644
index 1f164bd8..00000000
--- a/src/app/components/data-manage/clear/filter/constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-export const stepNoClz = 'step-no'
\ No newline at end of file
diff --git a/src/app/components/data-manage/clear/filter/delete-button.ts b/src/app/components/data-manage/clear/filter/delete-button.ts
deleted file mode 100644
index 1f931b3e..00000000
--- a/src/app/components/data-manage/clear/filter/delete-button.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElButton } from "element-plus"
-import { h, defineComponent } from "vue"
-import { t } from "@src/app/locale"
-import { Delete } from "@element-plus/icons-vue"
-
-const _default = defineComponent({
-    name: "DeleteButton",
-    emits: {
-        click: () => true
-    },
-    setup(_, ctx) {
-        return () => h('div', { class: 'footer-container filter-container' }, h(ElButton, {
-            icon: Delete,
-            type: 'danger',
-            size: 'small',
-            onClick: () => ctx.emit('click')
-        }, () => t(msg => msg.item.operation.delete)))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/clear/filter/index.ts b/src/app/components/data-manage/clear/filter/index.ts
deleted file mode 100644
index 838283d9..00000000
--- a/src/app/components/data-manage/clear/filter/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { Ref } from "vue"
-
-import { defineComponent, h, ref } from "vue"
-import { t } from "@app/locale"
-import DateFilter from "./date-filter"
-import NumberFilter from "./number-filter"
-import DeleteButton from "./delete-button"
-import { DateModelType } from "element-plus"
-
-export type FilterInstance = {
-    getFilterOption(): DataManageClearFilterOption
-}
-
-const _default = defineComponent({
-    emits: {
-        delete: () => true
-    },
-    setup(_, ctx) {
-        const dateRangeRef: Ref<[DateModelType, DateModelType]> = ref([null, null])
-        const focusStartRef: Ref<string> = ref('0')
-        const focusEndRef: Ref<string> = ref('2')
-        const timeStartRef: Ref<string> = ref('0')
-        const timeEndRef: Ref<string> = ref('')
-
-        const instance: FilterInstance = {
-            getFilterOption: () => ({
-                dateRange: dateRangeRef.value,
-                focusStart: focusStartRef.value,
-                focusEnd: focusEndRef.value,
-                timeStart: timeStartRef.value,
-                timeEnd: timeEndRef.value,
-            } as DataManageClearFilterOption)
-        }
-
-        ctx.expose(instance)
-
-        return () => h('div', { class: 'clear-panel' }, [
-            h('h3', t(msg => msg.dataManage.filterItems)),
-            h(DateFilter, { dateRange: dateRangeRef.value, onChange: (newVal: [DateModelType, DateModelType]) => dateRangeRef.value = newVal }),
-            h(NumberFilter, {
-                translateKey: 'filterFocus',
-                start: focusStartRef.value,
-                end: focusEndRef.value,
-                lineNo: 2,
-                onStartChange: v => focusStartRef.value = v,
-                onEndChange: v => focusEndRef.value = v,
-            }),
-            h(NumberFilter, {
-                translateKey: 'filterTime',
-                start: timeStartRef.value,
-                end: timeEndRef.value,
-                lineNo: 3,
-                onStartChange: v => timeStartRef.value = v,
-                onEndChange: v => timeEndRef.value = v,
-            }),
-            h(DeleteButton, {
-                onClick: () => ctx.emit('delete')
-            }),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/clear/filter/number-filter.ts b/src/app/components/data-manage/clear/filter/number-filter.ts
deleted file mode 100644
index 236b2254..00000000
--- a/src/app/components/data-manage/clear/filter/number-filter.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElInput } from "element-plus"
-import { h, defineComponent, PropType } from "vue"
-import { t, tN } from "@app/locale"
-import { DataManageMessage } from "@i18n/message/app/data-manage"
-import { stepNoClz } from "./constants"
-
-const elInput = (val: string, setter: (val: string) => void, placeholder: string, min?: string) =>
-    h(ElInput, {
-        class: 'filter-input',
-        placeholder: placeholder,
-        min: min !== undefined ? min || '0' : undefined,
-        clearable: true,
-        size: 'small',
-        modelValue: val,
-        onInput: (val: string) => setter?.(val.trim()),
-        onClear: () => setter?.('')
-    })
-
-
-const _default = defineComponent({
-    name: "NumberFilter",
-    props: {
-        translateKey: String as PropType<keyof DataManageMessage>,
-        start: String,
-        end: String,
-        lineNo: Number,
-    },
-    emits: {
-        startChange: (_val: string) => true,
-        endChange: (_val: string) => true,
-    },
-    setup(props, ctx) {
-        return () => h('p', [
-            h('a', { class: stepNoClz }, `${props.lineNo}.`),
-            tN(msg => msg.dataManage[props.translateKey], {
-                start: elInput(props.start, v => ctx.emit('startChange', v), '0'),
-                end: elInput(props.end, v => ctx.emit('endChange', v), t(msg => msg.dataManage.unlimited), props.start)
-            })
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/clear/filter/operation-button.ts b/src/app/components/data-manage/clear/filter/operation-button.ts
deleted file mode 100644
index 5476e6a5..00000000
--- a/src/app/components/data-manage/clear/filter/operation-button.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ButtonType, ElButton, ElMessage, ElMessageBox, ElTooltip, IconProps } from "element-plus"
-import { Ref, h } from "vue"
-import StatDatabase, { StatCondition } from "@db/stat-database"
-import { ItemMessage } from "@i18n/message/common/item"
-import { t } from "@src/app/locale"
-import { DataManageMessage } from "@i18n/message/app/data-manage"
-import { MILL_PER_DAY } from "@util/time"
-
-const statDatabase = new StatDatabase(chrome.storage.local)
-
-export type BaseFilterProps = {
-    focusStartRef: Ref<string>
-    focusEndRef: Ref<string>
-    timeStartRef: Ref<string>
-    timeEndRef: Ref<string>
-    dateRangeRef: Ref<[Date, Date]>
-}
-
-type _Props = BaseFilterProps & {
-    onDateChanged: () => void
-
-    confirm: {
-        message: keyof DataManageMessage
-        operation: (result: timer.stat.Row[]) => Promise<any>
-        resultMessage: keyof DataManageMessage
-    }
-
-    button: {
-        icon: IconProps
-        type: ButtonType
-        message: keyof ItemMessage['operation']
-    }
-
-    tooltipMessage?: keyof DataManageMessage
-}
-
-export type OperationButtonProps = _Props
-
-/**
- * Assert query param with numeric range
- * 
- * @param range       numeric range, 2-length array
- * @param mustInteger must be integer?
- * @returns true when has error, or false
- */
-function assertQueryParam(range: number[], mustInteger?: boolean): boolean {
-    const reg = mustInteger ? /^[0-9]+$/ : /^[0-9]+.?[0-9]*$/
-    const start = range[0]
-    const end = range[1]
-    const noStart = start !== undefined && start !== null
-    const noEnd = end !== undefined && end !== null
-    return (noStart && !reg.test(start.toString()))
-        || (noEnd && !reg.test(end.toString()))
-        || (noStart && noEnd && start > end)
-}
-
-const str2Num = (str: Ref<string>, defaultVal?: number) => (str.value && str.value !== '') ? parseInt(str.value) : defaultVal
-
-const str2Range = (startAndEnd: Ref<string>[], numAmplifier?: (origin: number) => number) => {
-    const startStr = startAndEnd[0]
-    const endStr = startAndEnd[1]
-    let start = str2Num(startStr, 0)
-    numAmplifier && (start = numAmplifier(start))
-    let end = str2Num(endStr)
-    end && numAmplifier && (end = numAmplifier(end))
-    return [start, end]
-}
-
-const seconds2Milliseconds = (a: number) => a * 1000
-
-function checkParam(props: _Props): StatCondition | undefined {
-    const { focusStartRef, focusEndRef, timeStartRef, timeEndRef } = props
-    let hasError = false
-    const focusRange = str2Range([focusStartRef, focusEndRef], seconds2Milliseconds)
-    hasError = hasError || assertQueryParam(focusRange)
-    const timeRange = str2Range([timeStartRef, timeEndRef])
-    hasError = hasError || assertQueryParam(timeRange, true)
-    if (hasError) {
-        return undefined
-    }
-    const condition: StatCondition = {}
-    condition.focusRange = focusRange
-    condition.timeRange = timeRange
-    return condition
-}
-
-function generateParamAndSelect(props: _Props): Promise<timer.stat.Row[]> | undefined {
-    const condition = checkParam(props)
-    if (!condition) {
-        ElMessage({ message: t(msg => msg.dataManage.paramError), type: 'warning' })
-        return
-    }
-
-    const { dateRangeRef } = props
-    let [dateStart, dateEnd] = dateRangeRef?.value || []
-    if (dateEnd == null) {
-        // default end time is the yesterday
-        dateEnd = new Date(new Date().getTime() - MILL_PER_DAY)
-    }
-    condition.date = [dateStart, dateEnd]
-
-    return statDatabase.select(condition)
-}
-
-const operationCancelMsg = t(msg => msg.button.cancel)
-const operationConfirmMsg = t(msg => msg.button.confirm)
-
-const handleClick = async (props: _Props) => {
-    const result: timer.stat.Row[] = await generateParamAndSelect(props)
-
-    const count = result.length
-    const confirmMsg = t(msg => msg.dataManage[props.confirm.message], { count })
-    ElMessageBox.confirm(confirmMsg, {
-        cancelButtonText: operationCancelMsg,
-        confirmButtonText: operationConfirmMsg
-    }).then(async () => {
-        await props.confirm.operation(result)
-        ElMessage(t(msg => msg.dataManage[props.confirm.resultMessage]))
-        props.onDateChanged()
-    }).catch(() => { })
-}
-
-const button = (props: _Props) => h(ElButton,
-    {
-        icon: props.button.icon,
-        type: props.button.type,
-        size: 'small',
-        onClick: () => handleClick(props)
-    },
-    () => t(msg => msg.item.operation[props.button.message])
-)
-
-const buttonWithTooltip = (props: _Props) => h(ElTooltip,
-    { content: t(msg => msg.dataManage[props.tooltipMessage]) },
-    () => button(props)
-)
-
-const operationButton = (props: _Props) => props.tooltipMessage ? buttonWithTooltip(props) : button(props)
-
-export default operationButton
\ No newline at end of file
diff --git a/src/app/components/data-manage/index.ts b/src/app/components/data-manage/index.ts
deleted file mode 100644
index 5a6433ec..00000000
--- a/src/app/components/data-manage/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElRow, ElCol } from "element-plus"
-import { defineComponent, h, Ref, ref } from "vue"
-import ContentContainer from "../common/content-container"
-import Migration from "./migration"
-import MemeryInfo, { MemeryInfoInstance } from "./memory-info"
-import ClearPanel from "./clear"
-import './style'
-
-export default defineComponent(() => {
-    const memeryInfoRef: Ref<MemeryInfoInstance> = ref()
-
-    const queryData = () => memeryInfoRef.value?.queryData()
-
-    return () => h(ContentContainer, {
-        class: 'data-manage-container'
-    }, () => h(ElRow, { gutter: 20 },
-        () => [
-            h(ElCol, { span: 8 }, () => h(MemeryInfo, { ref: memeryInfoRef })),
-            h(ElCol, { span: 11 }, () => h(ClearPanel, { onDataDelete: queryData })),
-            h(ElCol, { span: 5 }, () => h(Migration, { onImport: queryData })),
-        ]
-    ))
-})
\ No newline at end of file
diff --git a/src/app/components/data-manage/memory-info.ts b/src/app/components/data-manage/memory-info.ts
deleted file mode 100644
index 5b48df14..00000000
--- a/src/app/components/data-manage/memory-info.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElAlert, ElCard, ElProgress } from "element-plus"
-import { computed, ComputedRef, defineComponent, h, ref, Ref } from "vue"
-import { t } from "@app/locale"
-import { alertProps } from "./common"
-import { getUsedStorage } from "@db/memory-detector"
-
-export type MemeryInfoInstance = {
-    queryData(): void
-}
-
-const memoryAlert = (totalMb: number) => {
-    const title = totalMb
-        ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb })
-        : t(msg => msg.dataManage.totalMemoryAlert1)
-    const props = { ...alertProps, title }
-    !totalMb && (props.type = 'warning')
-    return h(ElAlert, props)
-}
-
-const progressStyle: Partial<CSSStyleDeclaration> = {
-    height: '260px',
-    paddingTop: '50px'
-}
-const memoryProgress = (percentage: number, typeColor: string) =>
-    h('div', { style: progressStyle },
-        h(ElProgress, { strokeWidth: 15, percentage, type: 'circle', color: typeColor })
-    )
-
-const usedAlertStyle: Partial<CSSStyleDeclaration> = {
-    userSelect: 'none'
-}
-const usedAlert = (usedMb: number, typeColor: string) => h('div', { style: usedAlertStyle },
-    h('h3',
-        { style: `color:${typeColor}` },
-        t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb })
-    )
-)
-
-const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000
-
-function computeColor(percentage: number, total: number): string {
-    // Danger color
-    let typeColor = '#F56C6C'
-    // Primary color
-    if (percentage < 50) typeColor = '#409EFF'
-    // Warning color
-    else if (percentage < 75) typeColor = '#E6A23C'
-    // Specially, show warning color if not detect the max memory
-    if (!total) typeColor = '#E6A23C'
-    return typeColor
-}
-
-const _default = defineComponent({
-    setup(_, ctx) {
-        // Total memory with byte
-        const usedRef: Ref<number> = ref(0)
-        // As the denominator of percentage, cannot be 0, so be 1
-        const totalRef: Ref<number> = ref(1)
-        const queryData = async () => {
-            const { used, total } = await getUsedStorage()
-            usedRef.value = used || 0
-            totalRef.value = total
-        }
-
-        const instance: MemeryInfoInstance = { queryData }
-        ctx.expose(instance)
-
-        queryData()
-
-        const usedMbRef: ComputedRef<number> = computed(() => byte2Mb(usedRef.value))
-        const totalMbRef: ComputedRef<number> = computed(() => byte2Mb(totalRef.value))
-        const percentageRef: ComputedRef<number> = computed(() => totalRef.value ? Math.round(usedRef.value * 10000.0 / totalRef.value) / 100 : 0)
-        const colorRef: ComputedRef<string> = computed(() => computeColor(percentageRef.value, totalRef.value))
-
-        return () => h(ElCard, {},
-            () => [memoryAlert(totalMbRef.value), memoryProgress(percentageRef.value, colorRef.value), usedAlert(usedMbRef.value, colorRef.value)]
-        )
-    },
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-other-button/index.ts b/src/app/components/data-manage/migration/import-other-button/index.ts
deleted file mode 100644
index 88a78661..00000000
--- a/src/app/components/data-manage/migration/import-other-button/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { t } from "@app/locale"
-import { Upload } from "@element-plus/icons-vue"
-import { ElButton, ElDialog } from "element-plus"
-import { Ref, defineComponent, h, ref } from "vue"
-import Sop from "./sop"
-import "./style"
-
-const _default = defineComponent({
-    emits: {
-        import: () => true
-    },
-    setup(_) {
-        const dialogVisible: Ref<boolean> = ref(false)
-        const close = () => dialogVisible.value = false
-        return () => [
-            h(ElButton, {
-                size: 'large',
-                type: 'warning',
-                icon: Upload,
-                onClick: () => dialogVisible.value = true
-            }, () => t(msg => msg.item.operation.importOtherData)),
-            h(ElDialog, {
-                top: '10vh',
-                modelValue: dialogVisible.value,
-                title: t(msg => msg.item.operation.importOtherData),
-                width: '80%',
-                closeOnClickModal: false,
-            }, () => h(Sop, {
-                onCancel: close,
-                onImport: close,
-            }))
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-other-button/sop.ts b/src/app/components/data-manage/migration/import-other-button/sop.ts
deleted file mode 100644
index 12b2b583..00000000
--- a/src/app/components/data-manage/migration/import-other-button/sop.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { ElStep, ElSteps } from "element-plus"
-import { Ref, defineComponent, h, nextTick, ref } from "vue"
-import Step1 from "./step1"
-import Step2 from "./step2"
-
-const _default = defineComponent({
-    emits: {
-        cancel: () => true,
-        import: () => true,
-    },
-    setup(_, ctx) {
-        const step: Ref<0 | 1> = ref(0)
-        const data: Ref<timer.imported.Data> = ref()
-        return () => h('div', { class: 'sop-dialog-container' }, [
-            h('div', { class: 'step-container' }, h(ElSteps, {
-                space: 200,
-                finishStatus: 'success',
-                active: step.value,
-            }, () => [
-                h(ElStep, { title: t(msg => msg.dataManage.importOther.step1) }),
-                h(ElStep, { title: t(msg => msg.dataManage.importOther.step2) }),
-            ])),
-            h('div', { class: 'operation-container' }, step.value === 0
-                ? h(Step1, {
-                    onCancel: () => ctx.emit('cancel'),
-                    onNext: newData => {
-                        data.value = newData
-                        step.value = 1
-                    },
-                })
-                : h(Step2, {
-                    data: data.value,
-                    onBack: () => step.value = 0,
-                    onImport: () => {
-                        step.value = 0
-                        nextTick(() => ctx.emit('import'))
-                    },
-                })
-            ),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/data-manage/migration/import-other-button/step1.ts b/src/app/components/data-manage/migration/import-other-button/step1.ts
deleted file mode 100644
index 62d47f17..00000000
--- a/src/app/components/data-manage/migration/import-other-button/step1.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { ElButton, ElForm, ElFormItem, ElMessage, ElOption, ElSelect } from "element-plus"
-import { Ref, defineComponent, h, ref } from "vue"
-import { Document, Close, Right } from "@element-plus/icons-vue"
-import { OtherExtension, parseFile } from "./processor"
-
-const OTHER_NAMES: { [ext in OtherExtension]: string } = {
-    webtime_tracker: "Webtime Tracker",
-    web_activity_time_tracker: "Web Activity Time Tracker",
-    history_trends_unlimited: "History Trends Unlimited",
-}
-
-const OTHER_FILE_FORMAT: { [ext in OtherExtension]: string } = {
-    webtime_tracker: '.csv,.json',
-    web_activity_time_tracker: '.csv',
-    history_trends_unlimited: '.tsv',
-}
-
-const ALL_TYPES: OtherExtension[] = Object.keys(OTHER_NAMES) as OtherExtension[]
-
-const _default = defineComponent({
-    emits: {
-        cancel: () => true,
-        next: (_rows: timer.imported.Data) => true,
-    },
-    setup(_, ctx) {
-        const type: Ref<OtherExtension> = ref('webtime_tracker')
-        const selectedFile: Ref<File> = ref()
-        const fileInput: Ref<HTMLInputElement> = ref()
-        const fileParsing: Ref<boolean> = ref(false)
-
-        const handleNext = () => {
-            const file = selectedFile.value
-            if (!file) {
-                ElMessage.warning(t(msg => msg.dataManage.importOther.fileNotSelected))
-                return
-            }
-            fileParsing.value = true
-            parseFile(type.value, selectedFile.value)
-                .then(data => data?.rows?.length ? ctx.emit('next', data) : ElMessage.error("No rows parsed"))
-                .catch((e: Error) => ElMessage.error(e.message))
-                .finally(() => fileParsing.value = false)
-        }
-
-        return () => [
-            h(ElForm, {
-                labelWidth: 100,
-                class: "import-other-form",
-                labelPosition: 'left',
-            }, () => [
-                h(ElFormItem, {
-                    label: t(msg => msg.dataManage.importOther.dataSource),
-                    required: true,
-                }, () => h(ElSelect, {
-                    modelValue: type.value,
-                    onChange: (val: OtherExtension) => type.value = val,
-                }, () => ALL_TYPES.map(type => h(ElOption, { value: type, label: OTHER_NAMES[type] })))),
-                h(ElFormItem,
-                    { label: t(msg => msg.dataManage.importOther.file), required: true },
-                    () => [
-                        h(ElButton, {
-                            icon: Document,
-                            onClick: () => fileInput.value?.click()
-                        }, () => [
-                            t(msg => msg.dataManage.importOther.selectFileBtn),
-                            h('input', {
-                                ref: fileInput,
-                                type: 'file',
-                                accept: OTHER_FILE_FORMAT[type.value],
-                                style: { display: 'none' },
-                                onChange: () => selectedFile.value = fileInput.value?.files?.[0],
-                            })
-                        ]),
-                        selectedFile.value?.name && h('span', { class: 'select-import-file-name' }, selectedFile.value?.name),
-                    ]
-                )
-            ]),
-            h('div', { class: 'sop-footer' }, [
-                h(ElButton, {
-                    type: 'info',
-                    icon: Close,
-                    onClick: () => ctx.emit('cancel'),
-                }, () => t(msg => msg.button.cancel)),
-                h(ElButton, {
-                    type: 'primary',
-                    icon: Right,
-                    loading: fileParsing.value,
-                    onClick: handleNext
-                }, () => t(msg => msg.button.next)),
-            ]),
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/download/step2.ts b/src/app/components/option/components/backup/download/step2.ts
index 79619060..e163e48e 100644
--- a/src/app/components/option/components/backup/download/step2.ts
+++ b/src/app/components/option/components/backup/download/step2.ts
@@ -11,7 +11,7 @@ import { PropType, Ref, defineComponent, h, ref } from "vue"
 import { Back, Check } from "@element-plus/icons-vue"
 import { processImportedData } from "@service/components/import-processor"
 import { renderResolutionFormItem } from "@app/components/common/imported/conflict"
-import CompareTable from "@app/components/common/imported/comapre-table"
+import CompareTable from "@app/components/common/imported/CompareTable"
 
 const _default = defineComponent({
     props: {
diff --git a/src/app/components/site-manage/index.ts b/src/app/components/site-manage/index.ts
index ebbd3885..38ebfdb9 100644
--- a/src/app/components/site-manage/index.ts
+++ b/src/app/components/site-manage/index.ts
@@ -10,7 +10,7 @@ import type { Ref, UnwrapRef, ComputedRef, WritableComputedRef } from "vue"
 import { reactive, defineComponent, h, ref, computed, } from "vue"
 import ContentContainer from "../common/content-container"
 import SiteManageFilter from "./filter"
-import Pagination from "../common/pagination"
+import Pagination from "../common/Pagination"
 import SiteManageTable from "./table"
 import siteService, { SiteQueryParam } from "@service/site-service"
 import Modify, { ModifyInstance } from './modify'
diff --git a/src/app/components/site-manage/table/column/operation.ts b/src/app/components/site-manage/table/column/operation.ts
index 6eb20995..089e9835 100644
--- a/src/app/components/site-manage/table/column/operation.ts
+++ b/src/app/components/site-manage/table/column/operation.ts
@@ -11,7 +11,7 @@ import { ElTableColumn } from "element-plus"
 import { t } from "@app/locale"
 import { defineComponent, h } from "vue"
 import { Delete } from "@element-plus/icons-vue"
-import PopupConfirmButton from "@app/components/common/popup-confirm-button"
+import PopupConfirmButton from "@app/components/common/PopupConfirmButton"
 import siteService from "@service/site-service"
 
 type _Emit = {
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index dd102008..c22ac2da 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021-present Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -17,7 +17,7 @@ const dataRoutes: RouteRecordRaw[] = [
         path: '/data',
         redirect: '/data/dashboard',
     },
-    // Needn't nested router 
+    // Needn't nested router
     {
         path: '/data/dashboard',
         component: () => import('../components/Dashboard')
@@ -27,10 +27,10 @@ const dataRoutes: RouteRecordRaw[] = [
         component: () => import('../components/Report')
     }, {
         path: ANALYSIS_ROUTE,
-        component: () => import('../components/analysis')
+        component: () => import('../components/Analysis')
     }, {
         path: '/data/manage',
-        component: () => import('../components/data-manage')
+        component: () => import('../components/DataManage')
     }
 ]
 
@@ -40,7 +40,7 @@ const behaviorRoutes: RouteRecordRaw[] = [
         redirect: '/behavior/habit'
     }, {
         path: '/behavior/habit',
-        component: () => import('../components/habit')
+        component: () => import('../components/Habit')
     }, {
         path: LIMIT_ROUTE,
         component: () => import('../components/limit')