diff --git a/.vscode/settings.json b/.vscode/settings.json
index fb577554..0b1106bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,9 +7,17 @@
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "cSpell.words": [
         "Auths",
+        "clipboardy",
+        "countup",
+        "daterange",
         "echarts",
+        "filemanager",
         "Hengyang",
-        "Kanban"
+        "Kanban",
+        "Popconfirm",
+        "vueuse",
+        "webtime",
+        "zrender"
     ],
     "cSpell.ignorePaths": [
         "package-lock.json",
diff --git a/package.json b/package.json
index ed548dbe..19305cda 100644
--- a/package.json
+++ b/package.json
@@ -1,71 +1,75 @@
 {
-  "name": "timer",
-  "version": "2.1.1",
-  "description": "Web timer",
-  "homepage": "https://github.com/sheepzh/timer",
-  "scripts": {
-    "dev": "webpack --config=webpack/webpack.dev.ts --watch",
-    "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
-    "build": "webpack --config=webpack/webpack.prod.ts",
-    "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
-    "analyze": "webpack --config=webpack/webpack.analyze.ts",
-    "test": "jest --env=jsdom",
-    "test-c": "jest --coverage --env=jsdom"
-  },
-  "author": {
-    "name": "zhy",
-    "email": "returnzhy1996@outlook.com",
-    "url": "https://www.github.com/sheepzh"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@crowdin/crowdin-api-client": "^1.28.2",
-    "@types/chrome": "0.0.254",
-    "@types/copy-webpack-plugin": "^8.0.1",
-    "@types/echarts": "^4.9.22",
-    "@types/generate-json-webpack-plugin": "^0.3.7",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@types/psl": "^1.1.3",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-bundle-analyzer": "^4.6.3",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.56.0",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "generate-json-webpack-plugin": "^2.0.0",
-    "html-webpack-plugin": "^5.5.4",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "tslib": "^2.6.2",
-    "typescript": "5.3.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.6.2",
-    "clipboardy": "^4.0.0",
-    "countup.js": "^2.8.0",
-    "echarts": "^5.4.3",
-    "element-plus": "2.4.4",
-    "psl": "^1.9.0",
-    "stream-browserify": "^3.0.0",
-    "vue": "^3.3.12",
-    "vue-router": "^4.2.5"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+    "name": "timer",
+    "version": "2.1.1",
+    "description": "Web timer",
+    "homepage": "https://github.com/sheepzh/timer",
+    "scripts": {
+        "dev": "webpack --config=webpack/webpack.dev.ts --watch",
+        "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
+        "build": "webpack --config=webpack/webpack.prod.ts",
+        "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
+        "analyze": "webpack --config=webpack/webpack.analyze.ts",
+        "test": "jest --env=jsdom",
+        "test-c": "jest --coverage --env=jsdom"
+    },
+    "author": {
+        "name": "zhy",
+        "email": "returnzhy1996@outlook.com",
+        "url": "https://www.github.com/sheepzh"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/preset-env": "^7.23.8",
+        "@crowdin/crowdin-api-client": "^1.29.5",
+        "@types/chrome": "0.0.256",
+        "@types/copy-webpack-plugin": "^8.0.1",
+        "@types/echarts": "^4.9.22",
+        "@types/generate-json-webpack-plugin": "^0.3.7",
+        "@types/jest": "^29.5.11",
+        "@types/node": "^20.11.3",
+        "@types/psl": "^1.1.3",
+        "@types/webpack": "^5.28.5",
+        "@types/webpack-bundle-analyzer": "^4.6.3",
+        "@vue/babel-plugin-jsx": "^1.1.6",
+        "babel-loader": "^9.1.3",
+        "copy-webpack-plugin": "^12.0.1",
+        "css-loader": "^6.9.0",
+        "eslint": "^8.56.0",
+        "filemanager-webpack-plugin": "^8.0.0",
+        "generate-json-webpack-plugin": "^2.0.0",
+        "html-webpack-plugin": "^5.6.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "mini-css-extract-plugin": "^2.7.7",
+        "node-sass": "^9.0.0",
+        "sass-loader": "^14.0.0",
+        "style-loader": "^3.3.4",
+        "ts-jest": "^29.1.1",
+        "ts-loader": "^9.5.1",
+        "ts-node": "^10.9.2",
+        "tsconfig-paths": "^4.2.0",
+        "tslib": "^2.6.2",
+        "typescript": "5.3.3",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "^4.10.1",
+        "webpack-cli": "^5.1.4"
+    },
+    "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",
+        "echarts": "^5.4.3",
+        "element-plus": "2.4.4",
+        "psl": "^1.9.0",
+        "stream-browserify": "^3.0.0",
+        "vue": "^3.4.14",
+        "vue-router": "^4.2.5"
+    },
+    "engines": {
+        "node": ">=18"
+    }
 }
diff --git a/src/api/chrome/runtime.ts b/src/api/chrome/runtime.ts
index a728e597..2c02daf4 100644
--- a/src/api/chrome/runtime.ts
+++ b/src/api/chrome/runtime.ts
@@ -42,8 +42,8 @@ export function setUninstallURL(url: string): Promise<void> {
 
 /**
  * Get the url of this extension
- * 
- * @param path The path relative to the root directory of this extension 
+ *
+ * @param path The path relative to the root directory of this extension
  */
 export function getUrl(path: string): string {
     return chrome.runtime.getURL(path)
diff --git a/src/api/obsidian.ts b/src/api/obsidian.ts
index fef3a2ed..78056852 100644
--- a/src/api/obsidian.ts
+++ b/src/api/obsidian.ts
@@ -55,7 +55,7 @@ export function getFileContent(context: ObsidianRequestContext, filePath: string
         }).catch(e => {
             const status = (e as AxiosError)?.response?.status
             if (status !== 404) {
-                console.log("Failed to query file countent of Obsidian", e)
+                console.log("Failed to query file content of Obsidian", e)
             }
             resolve(null)
         })
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 11015c10..50d3acca 100644
--- a/src/app/components/analysis/index.ts
+++ b/src/app/components/Analysis/index.tsx
@@ -1,21 +1,22 @@
 /**
  * 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, 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/card.ts b/src/app/components/Dashboard/DashboardCard.tsx
similarity index 61%
rename from src/app/components/dashboard/card.ts
rename to src/app/components/Dashboard/DashboardCard.tsx
index 53ab3dc7..38442d86 100644
--- a/src/app/components/dashboard/card.ts
+++ b/src/app/components/Dashboard/DashboardCard.tsx
@@ -6,10 +6,9 @@
  */
 
 import { ElCard, ElCol } from "element-plus"
-import { defineComponent, h } from "vue"
+import { defineComponent } from "vue"
 
 const _default = defineComponent({
-    name: "DashboardCard",
     props: {
         span: {
             type: Number,
@@ -17,11 +16,11 @@ const _default = defineComponent({
         }
     },
     setup(props, ctx) {
-        return () => h(ElCol, {
-            span: props.span
-        }, () => h(ElCard, {
-            style: { height: "100%" }
-        }, () => h(ctx.slots.default)))
+        return () => (
+            <ElCol span={props.span}>
+                <ElCard style={{ height: "100%" }} v-slots={ctx.slots} />
+            </ElCol>
+        )
     }
 })
 
diff --git a/src/app/components/dashboard/common.ts b/src/app/components/Dashboard/common.ts
similarity index 100%
rename from src/app/components/dashboard/common.ts
rename to src/app/components/Dashboard/common.ts
diff --git a/src/app/components/dashboard/components/calendar-heat-map.ts b/src/app/components/Dashboard/components/CalendarHeatMap.tsx
similarity index 83%
rename from src/app/components/dashboard/components/calendar-heat-map.ts
rename to src/app/components/Dashboard/components/CalendarHeatMap.tsx
index 153b7d1f..cc54851c 100644
--- a/src/app/components/dashboard/components/calendar-heat-map.ts
+++ b/src/app/components/Dashboard/components/CalendarHeatMap.tsx
@@ -32,7 +32,7 @@ import statService, { StatQueryParam } from "@service/stat-service"
 import { locale } from "@i18n"
 import { formatTime, getWeeksAgo, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time"
 import { ElLoading } from "element-plus"
-import { defineComponent, h, onMounted, ref, Ref } from "vue"
+import { defineComponent, onMounted, ref, Ref } from "vue"
 import { groupBy, rotate } from "@util/array"
 import { BASE_TITLE_OPTION } from "../common"
 import { getPrimaryTextColor } from "@util/style"
@@ -243,45 +243,38 @@ class ChartWrapper {
     }
 }
 
-const _default = defineComponent({
-    name: "CalendarHeatMap",
-    setup() {
-        const isChinese = locale === "zh_CN"
-        const now = new Date()
-        const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
+const _default = defineComponent(() => {
+    const isChinese = locale === "zh_CN"
+    const now = new Date()
+    const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
 
-        const chart: Ref<HTMLDivElement> = ref()
-        const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
+    const chart: Ref<HTMLDivElement> = ref()
+    const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
 
-        onMounted(async () => {
-            // 1. loading
-            const loading = ElLoading.service({
-                target: `#${CONTAINER_ID}`,
-            })
-            // 2. init chart
-            chartWrapper.init(chart.value)
-            // 3. query data
-            const query: StatQueryParam = { date: [startTime, now], sort: "date" }
-            const items = await statService.select(query)
-            const result = {}
-            items.forEach(({ date, focus }) => result[date] = (result[date] || 0) + focus)
-            // 4. set weekdays
-            // Sunday to Monday
-            const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-            if (!isChinese) {
-                // Let Sunday last
-                // Saturday to Sunday
-                rotate(weekDays, 1)
-            }
-            // 5. render
-            chartWrapper.render(result, weekDays, loading)
-        })
-        return () => h('div', {
-            id: CONTAINER_ID,
-            class: 'chart-container',
-            ref: chart,
+    onMounted(async () => {
+        // 1. loading
+        const loading = ElLoading.service({
+            target: `#${CONTAINER_ID}`,
         })
-    }
+        // 2. init chart
+        chartWrapper.init(chart.value)
+        // 3. query data
+        const query: StatQueryParam = { date: [startTime, now], sort: "date" }
+        const items = await statService.select(query)
+        const result = {}
+        items.forEach(({ date, focus }) => result[date] = (result[date] || 0) + focus)
+        // 4. set weekdays
+        // Sunday to Monday
+        const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
+        if (!isChinese) {
+            // Let Sunday last
+            // Saturday to Sunday
+            rotate(weekDays, 1)
+        }
+        // 5. render
+        chartWrapper.render(result, weekDays, loading)
+    })
+    return () => <div id={CONTAINER_ID} class="chart-container" ref={chart} />
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/components/indicator/index.ts b/src/app/components/Dashboard/components/Indicator/index.tsx
similarity index 50%
rename from src/app/components/dashboard/components/indicator/index.ts
rename to src/app/components/Dashboard/components/Indicator/index.tsx
index cef41648..1489b8ae 100644
--- a/src/app/components/dashboard/components/indicator/index.ts
+++ b/src/app/components/Dashboard/components/Indicator/index.tsx
@@ -8,12 +8,14 @@
 import PeriodDatabase from "@db/period-database"
 import statService from "@service/stat-service"
 import { getStartOfDay, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time"
-import { defineComponent, h, ref, Ref } from "vue"
+import { computed, defineComponent, PropType, ref, Ref, VNode, watch } from "vue"
 import NumberGrow from "@app/components/common/number-grow"
 import "./style"
-import { tN } from "@app/locale"
-import IndicatorHeaderIcon from "./header-icon"
+import { I18nKey } from "@app/locale"
 import { calcMostPeriodOf2Hours } from "@util/period"
+import I18nNode from "@app/components/common/I18nNode"
+import { ElIcon } from "element-plus"
+import { Sunrise } from "@element-plus/icons-vue"
 
 const CONTAINER_ID = "__timer-indicator-container"
 
@@ -68,49 +70,43 @@ async function query(): Promise<_Value> {
     return result
 }
 
-
-function renderInstalledDays(value: number) {
-    return h('div',
-        { class: 'indicator-label' },
-        tN(msg => msg.dashboard.indicator.installedDays, {
-            number: h(NumberGrow, { value, duration: 1.5 })
-        })
-    )
-}
-
-function renderVisits(siteNum: number, visitNum: number) {
-    const duration = 1.75
-    return h('div',
-        { class: 'indicator-label' },
-        tN(msg => msg.dashboard.indicator.visitCount, {
-            visit: h(NumberGrow, { value: visitNum, duration }),
-            site: h(NumberGrow, { value: siteNum, duration })
-        })
+const computeI18nParam = (valueParam: Record<string, number>, duration: number): Record<string, VNode> => {
+    return Object.fromEntries(
+        Object.entries(valueParam || {}).map(([key, val]) => [key, <NumberGrow value={val} duration={duration} />])
     )
 }
 
-function renderBrowsingMinute(browsingMinute: number) {
-    return h('div',
-        { class: 'indicator-label' },
-        tN(msg => msg.dashboard.indicator.browsingTime, {
-            minute: h(NumberGrow, { value: browsingMinute, duration: 2 })
-        })
-    )
-}
+const IndicatorLabel = defineComponent({
+    props: {
+        path: {
+            type: Function as PropType<I18nKey>,
+            required: true,
+        },
+        param: {
+            type: Object as PropType<Record<string, number>>,
+            required: true,
+        },
+        duration: Number,
+    },
+    setup: props => {
+        const myParam: Ref<Record<string, number>> = ref()
+        watch(() => props.param, () => myParam.value = props.param)
+        const i18nParam = computed(() => computeI18nParam(myParam.value, props.duration))
+        return () => (
+            <div class="indicator-label" >
+                {
+                    myParam.value !== undefined && <I18nNode path={props.path} param={i18nParam.value} />
+                }
+            </div>
+        )
+    }
+})
 
-function renderMostUse(most2Hour: number) {
-    const [startHour, endHour] = most2Hour === undefined || isNaN(most2Hour)
+const computeMost2HourParam = (most2HourIndex: number): { start: number, end: number } => {
+    const [start, end] = most2HourIndex === undefined || isNaN(most2HourIndex)
         ? [0, 0]
-        : [most2Hour * 2, most2Hour * 2 + 2]
-
-    const duration = 2.25
-    return h('div',
-        { class: 'indicator-label' },
-        tN(msg => msg.dashboard.indicator.mostUse, {
-            start: h(NumberGrow, { value: startHour, duration }),
-            end: h(NumberGrow, { value: endHour, duration })
-        })
-    )
+        : [most2HourIndex * 2, most2HourIndex * 2 + 2]
+    return { start, end }
 }
 
 const _default = defineComponent(() => {
@@ -119,6 +115,8 @@ const _default = defineComponent(() => {
     const visitCount: Ref<number> = ref(0)
     const browsingMinutes: Ref<number> = ref(0)
     const most2Hour: Ref<number> = ref(0)
+    const most2HourParam = computed(() => computeMost2HourParam(most2Hour.value))
+
     query().then(value => {
         installedDays.value = value.installedDays
         siteCount.value = value.sites
@@ -126,22 +124,38 @@ const _default = defineComponent(() => {
         browsingMinutes.value = Math.floor(value.browsingTime / MILL_PER_MINUTE)
         most2Hour.value = value.most2Hour
     })
-    return () => {
-        const items = [
-            renderVisits(siteCount.value, visitCount.value),
-            renderBrowsingMinute(browsingMinutes.value),
-            renderMostUse(most2Hour.value)
-        ]
-        const installedDaysVal = installedDays.value
-        installedDaysVal && items.splice(0, 0, renderInstalledDays(installedDaysVal))
-        return h('div', {
-            id: CONTAINER_ID,
-            class: 'chart-container'
-        }, [
-            h(IndicatorHeaderIcon),
-            ...items
-        ])
-    }
+
+    return () => (
+        <div id={CONTAINER_ID} class="chart-container">
+            <div class="indicator-icon-header">
+                <ElIcon>
+                    <Sunrise />
+                </ElIcon>
+            </div>
+            {
+                installedDays.value && <IndicatorLabel
+                    path={msg => msg.dashboard.indicator.installedDays}
+                    param={{ number: installedDays.value }}
+                    duration={1.5}
+                />
+            }
+            <IndicatorLabel
+                path={msg => msg.dashboard.indicator.visitCount}
+                param={{ visit: visitCount.value, site: siteCount.value }}
+                duration={1.75}
+            />
+            <IndicatorLabel
+                path={msg => msg.dashboard.indicator.browsingTime}
+                param={{ minute: browsingMinutes.value }}
+                duration={2}
+            />
+            <IndicatorLabel
+                path={msg => msg.dashboard.indicator.mostUse}
+                param={most2HourParam.value}
+                duration={2.25}
+            />
+        </div>
+    )
 })
 
 export default _default
diff --git a/src/app/components/dashboard/components/indicator/style.sass b/src/app/components/Dashboard/components/Indicator/style.sass
similarity index 100%
rename from src/app/components/dashboard/components/indicator/style.sass
rename to src/app/components/Dashboard/components/Indicator/style.sass
diff --git a/src/app/components/dashboard/components/top-k-visit.ts b/src/app/components/Dashboard/components/TopKVisit.tsx
similarity index 66%
rename from src/app/components/dashboard/components/top-k-visit.ts
rename to src/app/components/Dashboard/components/TopKVisit.tsx
index 9686614b..512caf7a 100644
--- a/src/app/components/dashboard/components/top-k-visit.ts
+++ b/src/app/components/Dashboard/components/TopKVisit.tsx
@@ -21,7 +21,7 @@ use([PieChart, TitleComponent, TooltipComponent])
 import statService from "@service/stat-service"
 import { MILL_PER_DAY } from "@util/time"
 import { ElLoading } from "element-plus"
-import { defineComponent, h, onMounted, ref } from "vue"
+import { defineComponent, onMounted, ref } from "vue"
 import { BASE_TITLE_OPTION } from "../common"
 import { t } from "@app/locale"
 import { getPrimaryTextColor } from "@util/style"
@@ -88,39 +88,33 @@ class ChartWrapper extends EchartsWrapper<_Value[], EcOption> {
     generateOption = generateOption
 }
 
-const _default = defineComponent({
-    setup() {
-        const now = new Date()
-        const startTime: Date = new Date(now.getTime() - MILL_PER_DAY * DAY_NUM)
+const _default = defineComponent(() => {
+    const now = new Date()
+    const startTime: Date = new Date(now.getTime() - MILL_PER_DAY * DAY_NUM)
 
-        const chart: Ref<HTMLDivElement> = ref()
-        const chartWrapper: ChartWrapper = new ChartWrapper()
+    const chart: Ref<HTMLDivElement> = ref()
+    const chartWrapper: ChartWrapper = new ChartWrapper()
 
-        onMounted(async () => {
-            const loading = ElLoading.service({
-                target: `#${CONTAINER_ID}`,
-            })
-            chartWrapper.init(chart.value)
-            const query: StatQueryParam = {
-                date: [startTime, now],
-                sort: "time",
-                sortOrder: 'DESC',
-                mergeDate: true,
-            }
-            const top: timer.stat.Row[] = (await statService.selectByPage(query, { num: 1, size: TOP_NUM }, true)).list
-            const data: _Value[] = top.map(({ time, host, alias }) => ({ name: alias || host, host, alias, value: time }))
-            for (let realSize = top.length; realSize < TOP_NUM; realSize++) {
-                data.push({ name: '', host: '', value: 0 })
-            }
-            await chartWrapper.render(data)
-            loading.close()
-        })
-        return () => h('div', {
-            id: CONTAINER_ID,
-            class: 'chart-container',
-            ref: chart,
+    onMounted(async () => {
+        const loading = ElLoading.service({
+            target: `#${CONTAINER_ID}`,
         })
-    }
+        chartWrapper.init(chart.value)
+        const query: StatQueryParam = {
+            date: [startTime, now],
+            sort: "time",
+            sortOrder: 'DESC',
+            mergeDate: true,
+        }
+        const top: timer.stat.Row[] = (await statService.selectByPage(query, { num: 1, size: TOP_NUM }, true)).list
+        const data: _Value[] = top.map(({ time, host, alias }) => ({ name: alias || host, host, alias, value: time }))
+        for (let realSize = top.length; realSize < TOP_NUM; realSize++) {
+            data.push({ name: '', host: '', value: 0 })
+        }
+        await chartWrapper.render(data)
+        loading.close()
+    })
+    return () => <div id={CONTAINER_ID} class="chart-container" ref={chart} />
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/components/week-on-week.ts b/src/app/components/Dashboard/components/WeekOnWeek.tsx
similarity index 80%
rename from src/app/components/dashboard/components/week-on-week.ts
rename to src/app/components/Dashboard/components/WeekOnWeek.tsx
index 9ba2a351..83e52117 100644
--- a/src/app/components/dashboard/components/week-on-week.ts
+++ b/src/app/components/Dashboard/components/WeekOnWeek.tsx
@@ -21,7 +21,7 @@ use([CandlestickChart, GridComponent, TitleComponent, TooltipComponent])
 
 import { formatPeriodCommon, MILL_PER_DAY } from "@util/time"
 import { ElLoading } from "element-plus"
-import { defineComponent, h, onMounted, ref } from "vue"
+import { defineComponent, onMounted, ref } from "vue"
 import statService from "@service/stat-service"
 import { groupBy, sum } from "@util/array"
 import { BASE_TITLE_OPTION } from "../common"
@@ -180,41 +180,34 @@ class ChartWrapper {
     }
 }
 
-const _default = defineComponent({
-    name: "WeekOnWeek",
-    setup() {
-        const now = new Date()
-        const lastPeriodStart = new Date(now.getTime() - MILL_PER_DAY * PERIOD_WIDTH * 2)
-        const lastPeriodEnd = new Date(lastPeriodStart.getTime() + MILL_PER_DAY * (PERIOD_WIDTH - 1))
-        const thisPeriodStart = new Date(now.getTime() - MILL_PER_DAY * PERIOD_WIDTH)
-        // Not includes today
-        const thisPeriodEnd = new Date(now.getTime() - MILL_PER_DAY)
-
-        const chartWrapper: ChartWrapper = new ChartWrapper()
-        const chart: Ref<HTMLDivElement> = ref()
-        onMounted(async () => {
-            const loading = ElLoading.service({
-                target: `#${CONTAINER_ID}`,
-            })
-            chartWrapper.init(chart.value)
-            const query: StatQueryParam = {
-                date: [lastPeriodStart, lastPeriodEnd],
-                mergeDate: true,
-            }
-            // Query with alias 
-            // @since 1.1.8
-            const lastPeriodItems: timer.stat.Row[] = await statService.select(query, true)
-            query.date = [thisPeriodStart, thisPeriodEnd]
-            const thisPeriodItems: timer.stat.Row[] = await statService.select(query, true)
-            const option = optionOf(lastPeriodItems, thisPeriodItems)
-            chartWrapper.render(option, loading)
-        })
-        return () => h('div', {
-            id: CONTAINER_ID,
-            class: 'chart-container',
-            ref: chart,
+const _default = defineComponent(() => {
+    const now = new Date()
+    const lastPeriodStart = new Date(now.getTime() - MILL_PER_DAY * PERIOD_WIDTH * 2)
+    const lastPeriodEnd = new Date(lastPeriodStart.getTime() + MILL_PER_DAY * (PERIOD_WIDTH - 1))
+    const thisPeriodStart = new Date(now.getTime() - MILL_PER_DAY * PERIOD_WIDTH)
+    // Not includes today
+    const thisPeriodEnd = new Date(now.getTime() - MILL_PER_DAY)
+
+    const chartWrapper: ChartWrapper = new ChartWrapper()
+    const chart: Ref<HTMLDivElement> = ref()
+    onMounted(async () => {
+        const loading = ElLoading.service({
+            target: `#${CONTAINER_ID}`,
         })
-    }
+        chartWrapper.init(chart.value)
+        const query: StatQueryParam = {
+            date: [lastPeriodStart, lastPeriodEnd],
+            mergeDate: true,
+        }
+        // Query with alias 
+        // @since 1.1.8
+        const lastPeriodItems: timer.stat.Row[] = await statService.select(query, true)
+        query.date = [thisPeriodStart, thisPeriodEnd]
+        const thisPeriodItems: timer.stat.Row[] = await statService.select(query, true)
+        const option = optionOf(lastPeriodItems, thisPeriodItems)
+        chartWrapper.render(option, loading)
+    })
+    return () => <div id={CONTAINER_ID} class="chart-container" ref={chart} />
 })
 
 export default _default
\ No newline at end of file
diff --git a/src/app/components/Dashboard/index.tsx b/src/app/components/Dashboard/index.tsx
new file mode 100644
index 00000000..18668c5b
--- /dev/null
+++ b/src/app/components/Dashboard/index.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent } from "vue"
+import ContentContainer from "@app/components/common/content-container"
+import DashboardCard from './DashboardCard'
+import "./style"
+import { isTranslatingLocale, locale } from "@i18n"
+import { ElRow } from "element-plus"
+import Indicator from "./components/Indicator"
+import WeekOnWeek from "./components/WeekOnWeek"
+import TopKVisit from "./components/TopKVisit"
+import CalendarHeatMap from "./components/CalendarHeatMap"
+import { useRouter } from "vue-router"
+
+const HelpTranslation = defineComponent(() => {
+    const router = useRouter()
+    const handleClick = () => router.push({ path: "/other/help" })
+    return () => (
+        <ElRow gutter={40}>
+            <span class="help-us-link" onClick={handleClick}>
+                💡 Help us translate this extension/addon into your native language!
+            </span>
+        </ElRow>
+    )
+})
+
+const _default = defineComponent({
+    name: 'Dashboard',
+    render: () => (
+        <ContentContainer>
+            <ElRow gutter={20} style={{ height: "300px" }}>
+                <DashboardCard span={4}>
+                    <Indicator />
+                </DashboardCard>
+                <DashboardCard span={12}>
+                    <WeekOnWeek />
+                </DashboardCard>
+                <DashboardCard span={8}>
+                    <TopKVisit />
+                </DashboardCard>
+            </ElRow>
+            <ElRow gutter={40} style={{ height: "280px" }}>
+                <DashboardCard span={24}>
+                    <CalendarHeatMap />
+                </DashboardCard>
+            </ElRow>
+            {
+                // Only shows for translating languages' speakers in English
+                locale === "en" && isTranslatingLocale() && <HelpTranslation />
+            }
+        </ContentContainer>
+    )
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/style/index.sass b/src/app/components/Dashboard/style/index.sass
similarity index 100%
rename from src/app/components/dashboard/style/index.sass
rename to src/app/components/Dashboard/style/index.sass
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/Limit/LimitFilter.tsx b/src/app/components/Limit/LimitFilter.tsx
new file mode 100644
index 00000000..351332c1
--- /dev/null
+++ b/src/app/components/Limit/LimitFilter.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Operation, Plus, SetUp } from "@element-plus/icons-vue"
+import { Ref, defineComponent, watch, ref } from "vue"
+import InputFilterItem from "@app/components/common/input-filter-item"
+import SwitchFilterItem from "@app/components/common/switch-filter-item"
+import ButtonFilterItem from "@app/components/common/button-filter-item"
+import { t } from "@app/locale"
+import { getAppPageUrl } from "@util/constant/url"
+import { OPTION_ROUTE } from "@app/router/constants"
+import { createTabAfterCurrent } from "@api/chrome/tab"
+
+const optionPageUrl = getAppPageUrl(false, OPTION_ROUTE, { i: 'dailyLimit' })
+
+const _default = defineComponent({
+    props: {
+        url: String,
+        onlyEnabled: Boolean
+    },
+    emits: {
+        create: () => true,
+        change: (_option: LimitFilterOption) => true,
+        test: () => true,
+    },
+    setup(props, ctx) {
+        const url: Ref<string> = ref(props.url)
+        const onlyEnabled: Ref<boolean> = ref(props.onlyEnabled)
+        watch([url, onlyEnabled], () => ctx.emit("change", {
+            url: url.value,
+            onlyEnabled: onlyEnabled.value
+        }))
+        return () => <>
+            <InputFilterItem
+                defaultValue={url.value}
+                placeholder={t(msg => msg.limit.conditionFilter)}
+                onSearch={val => url.value = val}
+            />
+            <SwitchFilterItem
+                historyName="onlyEnabled"
+                label={t(msg => msg.limit.filterDisabled)}
+                defaultValue={onlyEnabled.value}
+                onChange={val => onlyEnabled.value = val}
+            />
+            <ButtonFilterItem
+                text={t(msg => msg.limit.button.test)}
+                type="primary"
+                icon={<Operation />}
+                onClick={() => ctx.emit("test")}
+            />
+            <ButtonFilterItem
+                text={t(msg => msg.limit.button.option)}
+                icon={<SetUp />}
+                type="primary"
+                onClick={() => createTabAfterCurrent(optionPageUrl)}
+            />
+            <ButtonFilterItem
+                text={t(msg => msg.button.create)}
+                type="success"
+                icon={<Plus />}
+                onClick={() => ctx.emit("create")}
+            />
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/modify/sop/path-edit.ts b/src/app/components/Limit/LimitModify/Sop/LimitPathEdit.tsx
similarity index 58%
rename from src/app/components/limit/modify/sop/path-edit.ts
rename to src/app/components/Limit/LimitModify/Sop/LimitPathEdit.tsx
index 2deefcb8..5405f4f0 100644
--- a/src/app/components/limit/modify/sop/path-edit.ts
+++ b/src/app/components/Limit/LimitModify/Sop/LimitPathEdit.tsx
@@ -1,18 +1,18 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { ElSwitch, ElTag, ElTooltip } from "element-plus"
-import { defineComponent, h, PropType, reactive, ref, VNode, watch } from "vue"
+import { defineComponent, PropType, reactive, ref, StyleValue, VNode, watch } from "vue"
 import { t } from "@app/locale"
 import { UrlPart } from "./common"
 
-const switchStyle: Partial<CSSStyleDeclaration> = { marginRight: '2px' }
+const switchStyle: StyleValue = { marginRight: '2px' }
 
-const tabStyle: Partial<CSSStyleDeclaration> = {
+const tabStyle: StyleValue = {
     marginBottom: '5px',
     marginRight: '0',
 }
@@ -29,42 +29,29 @@ const ItemTag = defineComponent({
         const myIgnored = ref(ignored)
 
         watch(myIgnored, () => ctx.emit("change", { ignored: myIgnored.value, origin }))
-
-        return () => h(ElTag, {
-            type: 'info',
-            closable: true,
-            onClose: () => ctx.emit("close"),
-            style: tabStyle
-        }, () => [
-            h(ElTooltip, {
-                content: t(msg => msg.limit.useWildcard)
-            }, {
-                default: () => h(ElSwitch, {
-                    style: switchStyle,
-                    modelValue: myIgnored.value,
-                    onChange: (newVal: boolean) => myIgnored.value = newVal
-                })
-            }),
-            h('span', {}, origin),
-        ])
+        return () => (
+            <ElTag type="info" closable onClose={() => ctx.emit("close")} style={tabStyle}>
+                <ElTooltip content={t(msg => msg.limit.useWildcard)}>
+                    <ElSwitch
+                        style={switchStyle}
+                        modelValue={myIgnored.value}
+                        onChange={val => myIgnored.value = !!val}
+                    />
+                </ElTooltip>
+                <span>{origin}</span>
+            </ElTag>
+        )
     }
 })
 
-const item2Tag = (item: UrlPart, index: number, arr: UrlPart[]) => {
-    const isNotHost: boolean = !!index
-    return isNotHost
-        ? h(ItemTag, { part: item, onClose: () => arr.splice(index), onChange: p => arr[index] = p })
-        : h(ElTag, { style: tabStyle }, () => h('span', item.origin))
-}
-
-const combineStyle = {
+const combineStyle: StyleValue = {
     fontSize: '14px',
     margin: '0 2px',
     ...tabStyle
 }
 
 const combineTags = (arr: VNode[], current: VNode) => {
-    arr.length && arr.push(h('span', { style: combineStyle }, '/'))
+    arr.length && arr.push(<span style={combineStyle}>/</span>)
     arr.push(current)
     return arr
 }
@@ -82,7 +69,6 @@ export type PathEditInstance = {
 }
 
 const _default = defineComponent({
-    name: 'LimitPathEdit',
     props: {
         url: {
             type: String,
@@ -107,9 +93,15 @@ const _default = defineComponent({
 
         ctx.expose(instance)
 
-        return () => h('div', {}, items
-            .map((item, index, arr) => item2Tag(item, index, arr))
-            .reduce(combineTags, [])
+        return () => (
+            <div>
+                {
+                    items.map((item, idx, arr) => idx
+                        ? <ItemTag part={item} onClose={() => arr.splice(idx)} onChange={p => arr[idx] = p} />
+                        : <ElTag style={tabStyle}> <span>{item.origin}</span> </ElTag>
+                    ).reduce(combineTags, [])
+                }
+            </div>
         )
     }
 })
diff --git a/src/app/components/Limit/LimitModify/Sop/LimitPeriodFormItem.tsx b/src/app/components/Limit/LimitModify/Sop/LimitPeriodFormItem.tsx
new file mode 100644
index 00000000..8803d088
--- /dev/null
+++ b/src/app/components/Limit/LimitModify/Sop/LimitPeriodFormItem.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { Check, Close, Plus } from "@element-plus/icons-vue"
+import { ElButton, ElFormItem, ElTag, ElTimePicker } from "element-plus"
+import { PropType, defineComponent, reactive, ref } from "vue"
+import { checkImpact, dateMinute2Idx, mergePeriod, period2Str } from "@util/limit"
+
+const range2Period = (range: [Date, Date]): [number, number] => {
+    const start = range?.[0]
+    const end = range?.[1]
+    if (start === undefined || end === undefined) {
+        return undefined
+    }
+    const startIdx = dateMinute2Idx(start)
+    const endIdx = dateMinute2Idx(end)
+    return [Math.min(startIdx, endIdx), Math.max(startIdx, endIdx)]
+}
+
+const PeriodInput = defineComponent({
+    emits: {
+        close: () => true,
+        save: (_p: timer.limit.Period) => true,
+    },
+    setup(_, ctx) {
+        const range = ref<[Date, Date]>()
+        const handleSave = () => {
+            const val = range2Period(range.value)
+            val && ctx.emit("save", val)
+        }
+        return () => (
+            <div class="limit-period-input">
+                <ElTimePicker
+                    modelValue={range.value}
+                    onUpdate:modelValue={val => range.value = val}
+                    popperClass="limit-period-time-picker-popper"
+                    isRange
+                    rangeSeparator="-"
+                    format="HH:mm"
+                    clearable={false}
+                />
+                <ElButton icon={<Close />} onClick={() => ctx.emit("close")} />
+                <ElButton icon={<Check />} onClick={handleSave} />
+            </div>
+        )
+    }
+})
+
+const insertPeriods = (periods: timer.limit.Period[], toInsert: timer.limit.Period) => {
+    if (!toInsert || !periods) return
+    let len = periods.length
+    if (!len) {
+        periods.push(toInsert)
+        return
+    }
+    for (let i = 0; i < len; i++) {
+        const pre = periods[i]
+        const next = periods[i + 1]
+        if (checkImpact(pre, toInsert)) {
+            mergePeriod(pre, toInsert)
+            if (checkImpact(pre, next)) {
+                mergePeriod(pre, next)
+                periods.splice(i + 1, 1)
+            }
+            return
+        }
+        if (checkImpact(toInsert, next)) {
+            mergePeriod(next, toInsert)
+            return
+        }
+    }
+    // Append
+    periods.push(toInsert)
+    periods.sort((a, b) => a[0] - b[0])
+}
+
+const _default = defineComponent({
+    props: {
+        modelValue: Array as PropType<timer.limit.Period[]>
+    },
+    setup({ modelValue }) {
+        const periods = reactive(modelValue || [])
+        const periodEditing = ref(false)
+
+        return () => (
+            <ElFormItem label={t(msg => msg.limit.item.period)}>
+                <div class="period-form-item-container">
+                    {periods?.map((p, idx) =>
+                        <ElTag
+                            closable
+                            size="small"
+                            onClose={() => periods.splice(idx, 1)}
+                        >
+                            {period2Str(p)}
+                        </ElTag>
+                    )}
+                    {periodEditing.value
+                        ? <PeriodInput
+                            onClose={() => periodEditing.value = false}
+                            onSave={p => {
+                                insertPeriods(periods, p)
+                                periodEditing.value = false
+                            }}
+                        />
+                        : <ElButton icon={<Plus />} size="small" onClick={() => periodEditing.value = true}>
+                            {t(msg => msg.button.create)}
+                        </ElButton>
+                    }
+                </div>
+            </ElFormItem>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/modify/sop/time-limit.ts b/src/app/components/Limit/LimitModify/Sop/LimitTimeFormItem.tsx
similarity index 99%
rename from src/app/components/limit/modify/sop/time-limit.ts
rename to src/app/components/Limit/LimitModify/Sop/LimitTimeFormItem.tsx
index 33568008..dd58f92b 100644
--- a/src/app/components/limit/modify/sop/time-limit.ts
+++ b/src/app/components/Limit/LimitModify/Sop/LimitTimeFormItem.tsx
@@ -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/Limit/LimitModify/Sop/Step1.tsx b/src/app/components/Limit/LimitModify/Sop/Step1.tsx
new file mode 100644
index 00000000..d1632426
--- /dev/null
+++ b/src/app/components/Limit/LimitModify/Sop/Step1.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { Close, Right } from "@element-plus/icons-vue"
+import { ElButton, ElForm, ElMessage } from "element-plus"
+import { Ref, defineComponent, ref, watch } from "vue"
+import { Protocol, parseUrl } from "./common"
+import LimitUrlFormItem from "./url"
+import LimitPathEdit, { PathEditInstance } from "./LimitPathEdit"
+
+const _default = defineComponent({
+    props: {
+        defaultValue: {
+            type: String,
+            required: true,
+        },
+        disabled: Boolean,
+    },
+    emits: {
+        cancel: () => true,
+        next: (_cond: string) => true,
+    },
+    setup(props, ctx) {
+        const { protocol: defaultProtocol, url: defaultUrl } = parseUrl(props.defaultValue)
+        const protocol: Ref<Protocol> = ref(defaultProtocol)
+        const pathEdit: Ref<PathEditInstance> = ref()
+        const url: Ref<string> = ref(defaultUrl)
+
+        watch(() => props.defaultValue, () => {
+            const { protocol: newProtocol, url: newUrl } = parseUrl(props.defaultValue)
+            protocol.value = newProtocol
+            url.value = newUrl
+        })
+
+        const handleNext = () => {
+            let cond = props.defaultValue
+            if (!props.disabled) {
+                const urlVal = url.value?.trim?.()
+                if (!urlVal) {
+                    return ElMessage.error(t(msg => msg.limit.message.noUrl))
+                }
+                cond = urlVal ? protocol.value + urlVal : ''
+            }
+            ctx.emit("next", cond)
+        }
+
+        return () => <>
+            <ElForm labelWidth={180} labelPosition="left">
+                <LimitUrlFormItem
+                    url={url.value}
+                    protocol={protocol.value}
+                    disabled={props.disabled}
+                    onUrlChange={val => {
+                        url.value = val
+                        pathEdit.value?.updateUrl?.(val)
+                    }}
+                    onProtocolChange={val => protocol.value = val}
+                />
+            </ElForm>
+            <LimitPathEdit
+                v-show={!props.disabled}
+                ref={pathEdit}
+                url={url.value}
+                onUrlChange={val => url.value = val}
+            />
+            <div class="sop-footer">
+                <ElButton type="info" icon={<Close />} onClick={() => ctx.emit("cancel")}>
+                    {t(msg => msg.button.cancel)}
+                </ElButton>
+                <ElButton
+                    type="primary"
+                    icon={<Right />}
+                    onClick={handleNext}
+                >
+                    {t(msg => msg.button.next)}
+                </ElButton>
+            </div>
+        </>
+    }
+})
+
+export default _default
diff --git a/src/app/components/limit/modify/sop/step2.ts b/src/app/components/Limit/LimitModify/Sop/Step2.tsx
similarity index 95%
rename from src/app/components/limit/modify/sop/step2.ts
rename to src/app/components/Limit/LimitModify/Sop/Step2.tsx
index 1cdd1570..dc5971a2 100644
--- a/src/app/components/limit/modify/sop/step2.ts
+++ b/src/app/components/Limit/LimitModify/Sop/Step2.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -9,8 +9,8 @@ import { t } from "@app/locale"
 import { Back, Check } from "@element-plus/icons-vue"
 import { ElButton, ElForm, ElMessage } from "element-plus"
 import { PropType, Ref, computed, defineComponent, h, ref } from "vue"
-import LimitTimeFormItem from "./time-limit"
-import LimitPeriodFormItem from "./period"
+import LimitTimeFormItem from "./LimitTimeFormItem"
+import LimitPeriodFormItem from "./LimitPeriodFormItem"
 
 export type RuleFormData = Pick<timer.limit.Rule, "time" | "visitTime" | "periods">
 
diff --git a/src/app/components/limit/modify/sop/common.ts b/src/app/components/Limit/LimitModify/Sop/common.ts
similarity index 99%
rename from src/app/components/limit/modify/sop/common.ts
rename to src/app/components/Limit/LimitModify/Sop/common.ts
index 8170040b..3be8e47d 100644
--- a/src/app/components/limit/modify/sop/common.ts
+++ b/src/app/components/Limit/LimitModify/Sop/common.ts
@@ -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/limit/modify/sop/index.ts b/src/app/components/Limit/LimitModify/Sop/index.tsx
similarity index 50%
rename from src/app/components/limit/modify/sop/index.ts
rename to src/app/components/Limit/LimitModify/Sop/index.tsx
index b4f6dc52..fe45742f 100644
--- a/src/app/components/limit/modify/sop/index.ts
+++ b/src/app/components/Limit/LimitModify/Sop/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 { t } from "@app/locale"
 import { ElStep, ElSteps } from "element-plus"
-import { Ref, defineComponent, h, nextTick, reactive, ref, toRaw } from "vue"
-import Step1 from "./step1"
-import Step2, { RuleFormData } from "./step2"
+import { Ref, defineComponent, nextTick, reactive, ref, toRaw } from "vue"
+import Step1 from "./Step1"
+import Step2, { RuleFormData } from "./Step2"
 
 type Step = 0 | 1
 
@@ -33,7 +33,7 @@ const _default = defineComponent({
         cancel: () => true,
         save: (_rule: timer.limit.Rule) => true,
     },
-    setup({ }, ctx) {
+    setup(_, ctx) {
         const step: Ref<Step> = ref(0)
         const data = reactive(createInitial())
         const condDisabled: Ref<boolean> = ref(false)
@@ -61,38 +61,40 @@ const _default = defineComponent({
             data.visitTime = visitTime ? visitTime : undefined
         }
 
-        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.limit.step1) }),
-                h(ElStep, { title: t(msg => msg.limit.step2) }),
-            ])),
-            h('div', { class: 'operation-container' }, step.value === 0
-                ? h(Step1, {
-                    defaultValue: data?.cond,
-                    disabled: condDisabled.value,
-                    onCancel: () => ctx.emit('cancel'),
-                    onNext: (cond: string) => {
-                        step.value = 1
-                        !condDisabled.value && (data.cond = cond)
-                    },
-                })
-                : h(Step2, {
-                    rule: data,
-                    onBack: f => {
-                        restoreData(f)
-                        step.value = 0
-                    },
-                    onSave: f => {
-                        restoreData(f)
-                        nextTick(() => ctx.emit('save', toRaw(data)))
-                    },
-                })
-            ),
-        ])
+        return () => (
+            <div class="sop-dialog-container">
+                <div class="step-container">
+                    <ElSteps space={200} finishStatus="success" active={step.value}>
+                        <ElStep title={t(msg => msg.limit.step1)} />
+                        <ElStep title={t(msg => msg.limit.step2)} />
+                    </ElSteps>
+                </div>
+                <div class="operation-container">
+                    {step.value === 0
+                        ? <Step1
+                            defaultValue={data.cond}
+                            disabled={condDisabled.value}
+                            onCancel={() => ctx.emit("cancel")}
+                            onNext={cond => {
+                                step.value = 1
+                                !condDisabled.value && (data.cond = cond)
+                            }}
+                        />
+                        : <Step2
+                            rule={data}
+                            onBack={f => {
+                                restoreData(f)
+                                step.value = 0
+                            }}
+                            onSave={f => {
+                                restoreData(f)
+                                nextTick(() => ctx.emit('save', toRaw(data)))
+                            }}
+                        />
+                    }
+                </div>
+            </div>
+        )
     }
 })
 
diff --git a/src/app/components/limit/modify/sop/url.ts b/src/app/components/Limit/LimitModify/Sop/url.ts
similarity index 100%
rename from src/app/components/limit/modify/sop/url.ts
rename to src/app/components/Limit/LimitModify/Sop/url.ts
diff --git a/src/app/components/limit/modify/index.ts b/src/app/components/Limit/LimitModify/index.tsx
similarity index 84%
rename from src/app/components/limit/modify/index.ts
rename to src/app/components/Limit/LimitModify/index.tsx
index 45e3a549..6b8c2143 100644
--- a/src/app/components/limit/modify/index.ts
+++ b/src/app/components/Limit/LimitModify/index.tsx
@@ -1,13 +1,13 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { ElDialog, ElMessage } from "element-plus"
-import { computed, defineComponent, h, nextTick, ref, Ref } from "vue"
-import Sop, { SopInstance } from "./sop"
+import { computed, defineComponent, nextTick, ref, Ref } from "vue"
+import Sop, { SopInstance } from "./Sop"
 import limitService from "@service/limit-service"
 import { t } from "@app/locale"
 import "./style/el-input.sass"
@@ -69,16 +69,16 @@ const _default = defineComponent({
 
         ctx.expose(instance)
 
-        return () => h(ElDialog, {
-            title: title.value,
-            modelValue: visible.value,
-            closeOnClickModal: false,
-            onClose
-        }, () => h(Sop, {
-            ref: sop,
-            onSave,
-            onCancel: onClose,
-        }))
+        return () => (
+            <ElDialog
+                title={title.value}
+                modelValue={visible.value}
+                closeOnClickModal={false}
+                onClose={onClose}
+            >
+                <Sop ref={sop} onSave={onSave} onCancel={onClose} />
+            </ElDialog>
+        )
     }
 })
 
diff --git a/src/app/components/limit/modify/style/el-input.sass b/src/app/components/Limit/LimitModify/style/el-input.sass
similarity index 100%
rename from src/app/components/limit/modify/style/el-input.sass
rename to src/app/components/Limit/LimitModify/style/el-input.sass
diff --git a/src/app/components/limit/modify/style/sop.sass b/src/app/components/Limit/LimitModify/style/sop.sass
similarity index 100%
rename from src/app/components/limit/modify/style/sop.sass
rename to src/app/components/Limit/LimitModify/style/sop.sass
diff --git a/src/app/components/Limit/LimitTable/column/LimitDelayColumn.tsx b/src/app/components/Limit/LimitTable/column/LimitDelayColumn.tsx
new file mode 100644
index 00000000..e98236da
--- /dev/null
+++ b/src/app/components/Limit/LimitTable/column/LimitDelayColumn.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { InfoFilled } from "@element-plus/icons-vue"
+import { ElIcon, ElSwitch, ElTableColumn, ElTooltip } from "element-plus"
+import { defineComponent, toRaw } from "vue"
+import { t } from "@app/locale"
+import optionService from "@service/option-service"
+import { ElTableRowScope } from "@src/element-ui/table"
+import { judgeVerificationRequired, processVerification } from "@app/util/limit"
+
+const label = t(msg => msg.limit.item.delayAllowed)
+const tooltip = t(msg => msg.limit.item.delayAllowedInfo)
+
+async function handleChange(row: timer.limit.Item, newVal: boolean): Promise<void> {
+    if (newVal && await judgeVerificationRequired(row)) {
+        // Open delay for limited rules, so verification is required
+        const option = await optionService.getAllOption()
+        await processVerification(option)
+    }
+}
+
+const _default = defineComponent({
+    emits: {
+        rowChange: (_row: timer.limit.Rule, _val: boolean) => true,
+    },
+    setup(_, ctx) {
+        return () => (
+            <ElTableColumn
+                minWidth={80}
+                align="center"
+                v-slots={{
+                    header: () => <div>
+                        {`${label} `}
+                        <ElTooltip content={tooltip} placement="top">
+                            <ElIcon size={14} style={{ paddingLeft: '4px' }}>
+                                <InfoFilled />
+                            </ElIcon>
+                        </ElTooltip>
+                    </div>,
+                    default: ({ row }: ElTableRowScope<timer.limit.Item>) => <ElSwitch
+                        modelValue={row.allowDelay}
+                        onChange={
+                            (val: boolean) => handleChange(row, val)
+                                .then(() => {
+                                    row.allowDelay = val
+                                    ctx.emit("rowChange", toRaw(row), val)
+                                })
+                                .catch(console.log)
+                        }
+                    />
+                }}
+            />
+        )
+    }
+})
+
+export default _default
diff --git a/src/app/components/Limit/LimitTable/column/LimitEnabledColumn.tsx b/src/app/components/Limit/LimitTable/column/LimitEnabledColumn.tsx
new file mode 100644
index 00000000..962189e4
--- /dev/null
+++ b/src/app/components/Limit/LimitTable/column/LimitEnabledColumn.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElSwitch, ElTableColumn } from "element-plus"
+import { defineComponent, toRaw } from "vue"
+import { t } from "@app/locale"
+import optionService from "@service/option-service"
+import { ElTableRowScope } from "@src/element-ui/table"
+import { judgeVerificationRequired, processVerification } from "@app/util/limit"
+
+async function handleChange(row: timer.limit.Item, newVal: boolean): Promise<void> {
+    if (!newVal && await judgeVerificationRequired(row)) {
+        // Disable limited rules, so verification is required
+        const option = await optionService.getAllOption()
+        await processVerification(option)
+    }
+}
+
+const _default = defineComponent({
+    emits: {
+        rowChange: (_row: timer.limit.Item, _val: boolean) => true
+    },
+    setup(_, ctx) {
+        return () => (
+            <ElTableColumn
+                label={t(msg => msg.limit.item.enabled)}
+                minWidth={80}
+                align="center"
+            >
+                {({ row }: ElTableRowScope<timer.limit.Item>) => <ElSwitch
+                    modelValue={row.enabled}
+                    onChange={(val: boolean) => handleChange(row, val)
+                        .then(() => {
+                            row.enabled = val
+                            ctx.emit("rowChange", toRaw(row), val)
+                        })
+                        .catch(console.log)
+                    }
+                />}
+            </ElTableColumn>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx b/src/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx
new file mode 100644
index 00000000..301be8b3
--- /dev/null
+++ b/src/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Delete, Edit } from "@element-plus/icons-vue"
+import { ElButton, ElMessageBox, ElTableColumn } from "element-plus"
+import { defineComponent } from "vue"
+import { t } from "@app/locale"
+import optionService from "@service/option-service"
+import { locale } from "@i18n"
+import { ElTableRowScope } from "@src/element-ui/table"
+import { judgeVerificationRequired, processVerification } from "@app/util/limit"
+
+const label = t((msg) => msg.limit.item.operation)
+const deleteButtonText = t((msg) => msg.button.delete)
+const modifyButtonText = t((msg) => msg.button.modify)
+
+async function handleDelete(row: timer.limit.Item, callback: () => void) {
+    let promise = undefined
+    if (await judgeVerificationRequired(row)) {
+        const option =
+            (await optionService.getAllOption()) as timer.option.DailyLimitOption
+        promise = processVerification(option)
+    }
+    if (!promise) {
+        const message = t((msg) => msg.limit.message.deleteConfirm, {
+            cond: row.cond,
+        })
+        promise = ElMessageBox.confirm(message, { type: "warning" })
+    }
+    promise.then(callback).catch(() => {
+        /** Do nothing */
+    })
+}
+
+async function handleModify(row: timer.limit.Item, callback: () => void) {
+    let promise: Promise<void> = undefined
+    if (await judgeVerificationRequired(row)) {
+        const option =
+            (await optionService.getAllOption()) as timer.option.DailyLimitOption
+        promise = processVerification(option)
+        promise ? promise.then(callback).catch(() => { }) : callback()
+    } else {
+        callback()
+    }
+}
+
+const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
+    en: 220,
+    zh_CN: 200,
+    ja: 200,
+    zh_TW: 200,
+    pt_PT: 250,
+    uk: 260,
+}
+
+const _default = defineComponent({
+    emits: {
+        rowDelete: (_row: timer.limit.Item, _cond: string) => true,
+        rowModify: (_row: timer.limit.Item) => true,
+    },
+    setup(_props, ctx) {
+        return () => <ElTableColumn
+            prop="operations"
+            label={label}
+            width={LOCALE_WIDTH[locale]}
+            align="center"
+            v-slots={({ row }: ElTableRowScope<timer.limit.Item>) => <>
+                <ElButton
+                    type="danger"
+                    size="small"
+                    icon={<Delete />}
+                    onClick={() => handleDelete(row, () => ctx.emit("rowDelete", row, row.cond))}
+                >
+                    {deleteButtonText}
+                </ElButton>
+                <ElButton
+                    type="primary"
+                    size="small"
+                    icon={<Edit />}
+                    onClick={() => handleModify(row, () => ctx.emit("rowModify", row))}
+                >
+                    {modifyButtonText}
+                </ElButton>
+            </>
+            }
+        />
+    },
+})
+
+export default _default
diff --git a/src/app/components/Limit/LimitTable/index.tsx b/src/app/components/Limit/LimitTable/index.tsx
new file mode 100644
index 00000000..a7a1497b
--- /dev/null
+++ b/src/app/components/Limit/LimitTable/index.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElTable, ElTableColumn } from "element-plus"
+import { defineComponent, PropType } from "vue"
+import { t } from "@app/locale"
+import { formatPeriodCommon } from "@util/time"
+import { ElTableRowScope } from "@src/element-ui/table"
+import { period2Str } from "@util/limit"
+import LimitDelayColumn from "./column/LimitDelayColumn"
+import LimitEnabledColumn from "./column/LimitEnabledColumn"
+import LimitOperationColumn from "./column/LimitOperationColumn"
+
+const _default = defineComponent({
+    props: {
+        data: Array as PropType<timer.limit.Item[]>
+    },
+    emits: {
+        delayChange: (_row: timer.limit.Item) => true,
+        enabledChange: (_row: timer.limit.Item) => true,
+        delete: (_row: timer.limit.Item) => true,
+        modify: (_row: timer.limit.Item) => true,
+    },
+    setup(props, ctx) {
+        return () => (
+            <ElTable border size="small" style={{ width: "100%" }} highlightCurrentRow fit data={props.data}>
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.condition)}
+                    minWidth={250}
+                    align="center"
+                    formatter={({ cond }: timer.limit.Item) => cond}
+                />
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.time)}
+                    minWidth={90}
+                    align="center"
+                    formatter={({ time }: timer.limit.Item) => time ? formatPeriodCommon(time * 1000) : '-'}
+                />
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.waste)}
+                    minWidth={90}
+                    align="center"
+                    formatter={({ waste }: timer.limit.Item) => formatPeriodCommon(waste)}
+                />
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.visitTime)}
+                    minWidth={90}
+                    align="center"
+                    formatter={({ visitTime }: timer.limit.Item) => visitTime ? formatPeriodCommon(visitTime * 1000) : '-'}
+                />
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.period)}
+                    minWidth={100}
+                    align="center"
+                >
+                    {({ row: { periods } }: ElTableRowScope<timer.limit.Item>) =>
+                        periods?.length
+                            ? <div>
+                                {periods.map(p => <span style={{ display: "block" }}>{period2Str(p)}</span>)}
+                            </div>
+                            : '-'
+                    }
+                </ElTableColumn>
+                <LimitDelayColumn onRowChange={row => ctx.emit("delayChange", row)} />
+                <LimitEnabledColumn onRowChange={row => ctx.emit("enabledChange", row)} />
+                <LimitOperationColumn
+                    onRowDelete={row => ctx.emit("delete", row)}
+                    onRowModify={row => ctx.emit("modify", row)}
+                />
+            </ElTable>
+        )
+    }
+})
+
+export default _default
+
diff --git a/src/app/components/Limit/LimitTest.tsx b/src/app/components/Limit/LimitTest.tsx
new file mode 100644
index 00000000..7ce73b96
--- /dev/null
+++ b/src/app/components/Limit/LimitTest.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import limitService from "@service/limit-service"
+import { ElAlert, AlertProps, ElButton, ElDialog, ElFormItem, ElInput } from "element-plus"
+import { defineComponent, Ref, ref, h, ComputedRef, computed } from "vue"
+
+export type TestInstance = {
+    show(): void
+}
+
+async function handleTest(url: string): Promise<string[]> {
+    const items = await limitService.select({ url, filterDisabled: true })
+    return items.map(v => v.cond)
+}
+
+function computeResultTitle(url: string, inputting: boolean, matchedCondition: string[]): string {
+    if (!url) {
+        return t(msg => msg.limit.message.inputTestUrl)
+    }
+    if (inputting) {
+        return t(msg => msg.limit.message.clickTestButton, { buttonText: t(msg => msg.button.test) })
+    }
+    if (!matchedCondition?.length) {
+        return t(msg => msg.limit.message.noRuleMatched)
+    } else {
+        return t(msg => msg.limit.message.rulesMatched)
+    }
+}
+
+function computeResultDesc(url: string, inputting: boolean, matchedCondition: string[]): string[] {
+    if (!url || inputting || !matchedCondition?.length) {
+        return []
+    }
+    return matchedCondition
+}
+
+type _ResultType = AlertProps['type']
+
+function computeResultType(url: string, inputting: boolean, matchedCondition: string[]): _ResultType {
+    if (!url || inputting) {
+        return 'info'
+    }
+    return matchedCondition?.length ? 'success' : 'warning'
+}
+
+const _default = defineComponent({
+    setup: (_props, ctx) => {
+        const url: Ref<string> = ref()
+        const matchedCondition: Ref<string[]> = ref([])
+        const visible: Ref<boolean> = ref(false)
+        const urlInputting: Ref<boolean> = ref(true)
+        const resultTitle: ComputedRef<string> = computed(() => computeResultTitle(url.value, urlInputting.value, matchedCondition.value))
+        const resultType: ComputedRef<_ResultType> = computed(() => computeResultType(url.value, urlInputting.value, matchedCondition.value))
+        const resultDesc: ComputedRef<string[]> = computed(() => computeResultDesc(url.value, urlInputting.value, matchedCondition.value))
+
+        const changeInput = (newVal: string) => (urlInputting.value = true) && (url.value = newVal?.trim())
+        const test = () => {
+            urlInputting.value = false
+            handleTest(url.value).then(matched => matchedCondition.value = matched)
+        }
+
+        const instance: TestInstance = {
+            show() {
+                url.value = ''
+                visible.value = true
+                urlInputting.value = true
+                matchedCondition.value = []
+            }
+        }
+        ctx.expose(instance)
+        return () => (
+            <ElDialog
+                title={t(msg => msg.button.test)}
+                modelValue={visible.value}
+                closeOnClickModal={false}
+                onClose={() => visible.value = false}
+            >
+                <ElFormItem labelWidth={120} label={t(msg => msg.limit.button.test)}>
+                    <ElInput
+                        modelValue={url.value}
+                        clearable
+                        onClear={() => changeInput('')}
+                        onKeydown={ev => (ev as KeyboardEvent).key === "Enter" && test()}
+                        onInput={changeInput}
+                        v-slots={{
+                            append: () => <ElButton onClick={test}>{t(msg => msg.button.test)}</ElButton>
+                        }}
+                    />
+                </ElFormItem>
+                <ElAlert closable={false} type={resultType.value} title={resultTitle.value}>
+                    {resultDesc.value.map(desc => <li>{desc}</li>)}
+                </ElAlert>
+            </ElDialog>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Limit/index.tsx b/src/app/components/Limit/index.tsx
new file mode 100644
index 00000000..f3955ca2
--- /dev/null
+++ b/src/app/components/Limit/index.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent, onMounted, ref, Ref } from "vue"
+import ContentContainer from "../common/content-container"
+import LimitFilter from "./LimitFilter"
+import LimitTable from "./LimitTable"
+import LimitModify, { ModifyInstance } from "./LimitModify"
+import LimitTest, { TestInstance } from "./LimitTest"
+import limitService from "@service/limit-service"
+import { useRoute, useRouter } from "vue-router"
+import { t } from "@app/locale"
+import { ElMessage } from "element-plus"
+import { handleWindowVisibleChange } from "@util/window"
+
+const initialUrl = () => {
+    // Init with url parameter
+    const urlParam = useRoute().query['url'] as string
+    useRouter().replace({ query: {} })
+    return urlParam ? decodeURIComponent(urlParam) : ''
+}
+
+const _default = defineComponent(() => {
+    const url: Ref<string> = ref(initialUrl())
+    const onlyEnabled: Ref<boolean> = ref(false)
+    const data: Ref<timer.limit.Item[]> = ref([])
+    // Init and query
+    const queryData = async () => {
+        const list = await limitService.select({ filterDisabled: onlyEnabled.value, url: url.value || '' })
+        data.value = list
+    }
+    onMounted(queryData)
+    // Query data if the window become visible
+    handleWindowVisibleChange(queryData)
+
+    const modify: Ref<ModifyInstance> = ref()
+    const test: Ref<TestInstance> = ref()
+
+    return () => (
+        <ContentContainer
+            v-slots={{
+                filter: () => (
+                    <LimitFilter
+                        url={url.value}
+                        onlyEnabled={onlyEnabled.value}
+                        onChange={option => {
+                            url.value = option.url
+                            onlyEnabled.value = option.onlyEnabled
+                            queryData()
+                        }}
+                        onCreate={() => modify.value?.create?.()}
+                        onTest={() => test.value?.show?.()}
+                    />
+                ),
+                content: () => <>
+                    <LimitTable
+                        data={data.value}
+                        onDelayChange={row => limitService.updateDelay(row)}
+                        onEnabledChange={row => limitService.updateEnabled(row)}
+                        onDelete={async row => {
+                            await limitService.remove(row)
+                            ElMessage.success(t(msg => msg.limit.message.deleted))
+                            queryData()
+                        }}
+                        onModify={row => modify.value?.modify?.(row)}
+                    />
+                    <LimitModify ref={modify} onSave={queryData} />
+                    <LimitTest ref={test} />
+                </>
+            }}
+        />
+    )
+})
+
+export default _default
diff --git a/src/app/components/limit/limit.d.ts b/src/app/components/Limit/limit.d.ts
similarity index 100%
rename from src/app/components/limit/limit.d.ts
rename to src/app/components/Limit/limit.d.ts
diff --git a/src/app/components/Option/common.tsx b/src/app/components/Option/common.tsx
new file mode 100644
index 00000000..c95c2d2c
--- /dev/null
+++ b/src/app/components/Option/common.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { InfoFilled } from "@element-plus/icons-vue"
+import { ElTag, ElTooltip, ElIcon, ElDivider } from "element-plus"
+import { defineComponent, h, PropType, useSlots, VNode } from "vue"
+import { I18nKey } from "@app/locale"
+import I18nNode from "../common/I18nNode"
+
+export const OptionItem = defineComponent({
+    props: {
+        label: {
+            type: Function as PropType<I18nKey>,
+            required: true,
+        },
+        defaultValue: [String, Number],
+        hideDivider: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    setup: (props, ctx) => {
+        return () => {
+            const param: Record<string, VNode> = {}
+            Object.entries(ctx.slots).forEach(([k, slot]) => param[k === "default" ? "input" : k] = h(slot))
+            return (
+                <div class="test">
+                    <ElDivider v-show={!props.hideDivider} />
+                    <div class="option-line">
+                        <a class="option-label">
+                            <I18nNode path={props.label} param={param} />
+                        </a>
+                        {
+                            props.defaultValue && <a class="option-default">
+                                <I18nNode
+                                    path={msg => msg.option.defaultValue}
+                                    param={{ default: <ElTag size="small">{props.defaultValue}</ElTag> }}
+                                />
+                            </a>
+                        }
+                    </div>
+                </div>
+            )
+        }
+    }
+})
+
+export const OptionTag = defineComponent({
+    render: () => <a class="option-tag">{h(useSlots().default)}</a>
+})
+
+export const OptionTooltip = defineComponent({
+    render: () => {
+        const content = useSlots().default
+        if (!content) {
+            return null
+        }
+        return (
+            <ElTooltip v-slots={{ content }}>
+                <ElIcon size={15}>
+                    <InfoFilled />
+                </ElIcon>
+            </ElTooltip>
+        )
+    }
+})
diff --git a/src/app/components/option/components/appearance/dark-mode-input.ts b/src/app/components/Option/components/AppearanceOption/DarkModeInput.tsx
similarity index 57%
rename from src/app/components/option/components/appearance/dark-mode-input.ts
rename to src/app/components/Option/components/AppearanceOption/DarkModeInput.tsx
index 0cfa6761..22d6ea78 100644
--- a/src/app/components/option/components/appearance/dark-mode-input.ts
+++ b/src/app/components/Option/components/AppearanceOption/DarkModeInput.tsx
@@ -8,9 +8,11 @@
 import type { Ref, PropType, ComputedRef } from "vue"
 
 import { ElOption, ElSelect, ElTimePicker } from "element-plus"
-import { defineComponent, ref, h, watch, computed } from "vue"
+import { defineComponent, ref, watch, computed } from "vue"
 import { t } from "@app/locale"
 
+const ALL_MODES: timer.option.DarkMode[] = ["default", "on", "off", "timed"]
+
 function computeSecondToDate(secondOfDate: number): Date {
     const now = new Date()
     const hour = Math.floor(secondOfDate / 3600)
@@ -54,46 +56,43 @@ const _default = defineComponent({
 
         const handleChange = () => ctx.emit("change", darkMode.value, [startSecond.value, endSecond.value])
 
-        return () => {
-            const result = [h(ElSelect, {
-                modelValue: darkMode.value,
-                size: 'small',
-                style: { width: '120px' },
-                onChange: async (newVal: string) => {
-                    darkMode.value = newVal as timer.option.DarkMode
+        return () => <>
+            <ElSelect
+                modelValue={darkMode.value}
+                size="small"
+                style={{ width: "120px" }}
+                onChange={val => {
+                    darkMode.value = val as timer.option.DarkMode
                     handleChange()
+                }}
+            >
+                {
+                    ALL_MODES.map(value => <ElOption value={value} label={t(msg => msg.option.appearance.darkMode.options[value])} />)
                 }
-            }, {
-                default: () => ["default", "on", "off", "timed"].map(
-                    value => h(ElOption, { value, label: t(msg => msg.option.appearance.darkMode.options[value]) })
-                )
-            })]
-            if (darkMode.value === "timed") {
-                result.push(
-                    h(ElTimePicker, {
-                        modelValue: start.value,
-                        size: "small",
-                        style: { marginLeft: '10px' },
-                        "onUpdate:modelValue": (newVal) => {
-                            start.value = newVal
-                            handleChange()
-                        },
-                        clearable: false
-                    }),
-                    h('a', '-'),
-                    h(ElTimePicker, {
-                        modelValue: end.value,
-                        size: "small",
-                        "onUpdate:modelValue": (newVal) => {
-                            end.value = newVal
-                            handleChange()
-                        },
-                        clearable: false
-                    })
-                )
-            }
-            return result
-        }
+            </ElSelect>
+            {darkMode.value === "timed" && <>
+                <ElTimePicker
+                    modelValue={start.value}
+                    size="small"
+                    style={{ marginLeft: "10px" }}
+                    onUpdate:modelValue={val => {
+                        start.value = val
+                        handleChange()
+                    }}
+                    clearable={false}
+                />
+                <a>-</a>
+                <ElTimePicker
+                    modelValue={end.value}
+                    size="small"
+                    onUpdate:modelValue={val => {
+                        end.value = val
+                        handleChange()
+                    }}
+                    clearable={false}
+                />
+            </>}
+        </>
     }
 })
 
diff --git a/src/app/components/Option/components/AppearanceOption/index.tsx b/src/app/components/Option/components/AppearanceOption/index.tsx
new file mode 100644
index 00000000..68c00818
--- /dev/null
+++ b/src/app/components/Option/components/AppearanceOption/index.tsx
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { UnwrapRef } from "vue"
+
+import { ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
+import { defineComponent, reactive, unref, watch } from "vue"
+import optionService from "@service/option-service"
+import { defaultAppearance } from "@util/constant/option"
+import DarkModeInput from "./DarkModeInput"
+import { t, tWith } from "@app/locale"
+import { OptionItem, OptionTag } from "../../common"
+import localeMessages from "@i18n/message/common/locale"
+import { ALL_LOCALES, localeSameAsBrowser } from "@i18n"
+import { toggle } from "@util/dark-mode"
+
+const SORTED_LOCALES: timer.Locale[] = ALL_LOCALES
+    // Keep the locale same as this browser first position
+    .sort((a, _b) => a === localeSameAsBrowser ? -1 : 0)
+const allLocaleOptions: timer.option.LocaleOption[] = ["default", ...SORTED_LOCALES]
+
+function copy(target: timer.option.AppearanceOption, source: timer.option.AppearanceOption) {
+    target.displayWhitelistMenu = source.displayWhitelistMenu
+    target.displayBadgeText = source.displayBadgeText
+    target.locale = source.locale
+    target.printInConsole = source.printInConsole
+    target.darkMode = source.darkMode
+    target.darkModeTimeStart = source.darkModeTimeStart
+    target.darkModeTimeEnd = source.darkModeTimeEnd
+}
+
+const _default = defineComponent((_props, ctx) => {
+    const option: UnwrapRef<timer.option.AppearanceOption> = reactive(defaultAppearance())
+    optionService.getAllOption().then(currentVal => {
+        copy(option, currentVal)
+        watch(option, async () => {
+            await optionService.setAppearanceOption(unref(option))
+            toggle(await optionService.isDarkMode(option))
+        })
+    })
+    ctx.expose({
+        reset: () => copy(option, defaultAppearance())
+    })
+    return () => (
+        <div>
+            <OptionItem
+                label={msg => msg.option.appearance.darkMode.label}
+                defaultValue={t(msg => msg.option.appearance.darkMode.options.default)}
+                hideDivider
+            >
+                <DarkModeInput
+                    modelValue={option.darkMode}
+                    startSecond={option.darkModeTimeStart}
+                    endSecond={option.darkModeTimeEnd}
+                    onChange={async (darkMode, range) => {
+                        option.darkMode = darkMode
+                        option.darkModeTimeStart = range?.[0]
+                        option.darkModeTimeEnd = range?.[1]
+                    }}
+                />
+            </OptionItem>
+            <OptionItem label={msg => msg.option.appearance.locale.label} defaultValue={t(msg => msg.option.appearance.locale.default)}>
+                <ElSelect
+                    modelValue={option.locale}
+                    size="small"
+                    style={{ width: "120px" }}
+                    onChange={(newVal: timer.option.LocaleOption) => {
+                        option.locale = newVal
+                        // await maybe not work in Firefox, so calculate the real locale again
+                        // GG Firefox
+                        const realLocale: timer.Locale = newVal === "default"
+                            ? localeSameAsBrowser
+                            : newVal
+                        ElMessageBox({
+                            message: tWith(msg => msg.option.appearance.locale.changeConfirm, realLocale),
+                            type: "success",
+                            confirmButtonText: t(msg => msg.option.appearance.locale.reloadButton),
+                            // Cant close this on press ESC
+                            closeOnPressEscape: false,
+                            // Cant close this on clicking modal
+                            closeOnClickModal: false
+                        }).then(() => { location.reload?.() })
+                            .catch(() => {/* do nothing */ })
+                    }}
+                >
+                    {allLocaleOptions.map(locale => <ElOption
+                        value={locale}
+                        label={locale === "default" ? t(msg => msg.option.appearance.locale.default) : localeMessages[locale].name}
+                    />)}
+                </ElSelect>
+            </OptionItem>
+            <OptionItem
+                label={msg => msg.option.appearance.displayWhitelist}
+                defaultValue={t(msg => msg.option.yes)}
+                v-slots={{
+                    whitelist: () => <OptionTag>{t(msg => msg.option.appearance.whitelistItem)}</OptionTag>,
+                    contextMenu: () => <OptionTag>{t(msg => msg.option.appearance.contextMenu)}</OptionTag>,
+                }}
+            >
+                <ElSwitch
+                    modelValue={option.displayWhitelistMenu}
+                    onChange={(val: boolean) => option.displayWhitelistMenu = val}
+                />
+            </OptionItem>
+            <OptionItem
+                label={msg => msg.option.appearance.displayBadgeText}
+                defaultValue={t(msg => msg.option.yes)}
+                v-slots={{
+                    timeInfo: () => <OptionTag>{t(msg => msg.option.appearance.badgeTextContent)}</OptionTag>,
+                    icon: () => <OptionTag>{t(msg => msg.option.appearance.icon)}</OptionTag>,
+                }}
+            >
+                <ElSwitch
+                    modelValue={option.displayBadgeText}
+                    onChange={(val: boolean) => option.displayBadgeText = val}
+                />
+            </OptionItem>
+            <OptionItem
+                label={msg => msg.option.appearance.printInConsole.label}
+                defaultValue={t(msg => msg.option.yes)}
+                v-slots={{
+                    console: () => <OptionTag>{t(msg => msg.option.appearance.printInConsole.console)}</OptionTag>,
+                    info: () => <OptionTag>{t(msg => msg.option.appearance.printInConsole.info)}</OptionTag>,
+                }}
+            >
+                <ElSwitch
+                    modelValue={option.printInConsole}
+                    onChange={(val: boolean) => option.printInConsole = val}
+                />
+            </OptionItem>
+        </div>
+    )
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/BackupOption/AutoInput.tsx b/src/app/components/Option/components/BackupOption/AutoInput.tsx
new file mode 100644
index 00000000..9d012bd1
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/AutoInput.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { ElInputNumber, ElSwitch } from "element-plus"
+import { defineComponent, ref, watch } from "vue"
+import localeMessages from "@i18n/message/common/locale"
+import { locale } from "@i18n"
+import I18nNode from "@app/components/common/I18nNode"
+
+const _default = defineComponent({
+    props: {
+        autoBackup: Boolean,
+        interval: Number
+    },
+    emits: {
+        change: (_autoBackUp: boolean, _interval: number) => true
+    },
+    setup(props, ctx) {
+        const autoBackUp = ref(props.autoBackup)
+        const interval = ref(props.interval)
+        watch(() => props.autoBackup, newVal => autoBackUp.value = newVal)
+        watch(() => props.interval, newVal => interval.value = newVal)
+
+        const handleChange = () => ctx.emit('change', autoBackUp.value, interval.value)
+        return () => <>
+            <ElSwitch
+                modelValue={autoBackUp.value}
+                onChange={(val: boolean) => {
+                    autoBackUp.value = val
+                    handleChange()
+                }}
+            />
+            {' ' + t(msg => msg.option.backup.auto.label)}
+            {
+                autoBackUp.value && <>
+                    {localeMessages[locale].comma || ' '}
+                    <I18nNode path={msg => msg.option.backup.auto.interval} param={{
+                        input: <ElInputNumber
+                            min={10}
+                            size="small"
+                            modelValue={interval.value}
+                            onChange={val => {
+                                interval.value = val
+                                handleChange()
+                            }}
+                        />
+                    }} />
+                </>
+            }
+            <span v-show={autoBackUp.value}>{localeMessages[locale].comma || ' '}</span>
+        </>
+    },
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/BackupOption/Clear/Sop.tsx b/src/app/components/Option/components/BackupOption/Clear/Sop.tsx
new file mode 100644
index 00000000..38bf0866
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/Clear/Sop.tsx
@@ -0,0 +1,47 @@
+import { t } from "@app/locale"
+import { ElStep, ElSteps } from "element-plus"
+import { Ref, defineComponent, nextTick, ref } from "vue"
+import Step1, { StatResult } from "./Step1"
+import Step2 from "./Step2"
+
+const _default = defineComponent({
+    emits: {
+        cancel: () => true,
+        clear: () => true,
+    },
+    setup(_, ctx) {
+        const step: Ref<0 | 1> = ref(0)
+        const data: Ref<StatResult> = ref()
+
+        return () => (
+            <div class="sop-dialog-container">
+                <div class="step-container">
+                    <ElSteps space={200} finishStatus="success" active={step.value}>
+                        <ElStep title={t(msg => msg.option.backup.clientTable.selectTip)} />
+                        <ElStep title={t(msg => msg.option.backup.download.step2)} />
+                    </ElSteps>
+                </div>
+                <div class="operation-container" >
+                    {step.value === 0
+                        ? <Step1
+                            onCancel={() => ctx.emit("cancel")}
+                            onNext={val => {
+                                data.value = val
+                                step.value = 1
+                            }}
+                        />
+                        : <Step2
+                            data={data.value}
+                            onBack={() => step.value = 0}
+                            onClear={() => {
+                                step.value = 0
+                                nextTick(() => ctx.emit("clear"))
+                            }} />
+                    }
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/clear/step1.ts b/src/app/components/Option/components/BackupOption/Clear/Step1.tsx
similarity index 72%
rename from src/app/components/option/components/backup/clear/step1.ts
rename to src/app/components/Option/components/BackupOption/Clear/Step1.tsx
index ecb62be4..25972483 100644
--- a/src/app/components/option/components/backup/clear/step1.ts
+++ b/src/app/components/Option/components/BackupOption/Clear/Step1.tsx
@@ -10,8 +10,8 @@ import { Close, Right } from "@element-plus/icons-vue"
 import processor from "@src/common/backup/processor"
 import { BIRTHDAY, parseTime } from "@util/time"
 import { ElButton, ElMessage } from "element-plus"
-import { defineComponent, Ref, h, ref } from "vue"
-import ClientTable from "../client-table"
+import { defineComponent, Ref, ref } from "vue"
+import ClientTable from "../ClientTable"
 
 export type StatResult = {
     rowCount: number
@@ -63,24 +63,26 @@ const _default = defineComponent({
                 .finally(() => loading.value = false)
         }
 
-        return () => [
-            h(ClientTable, {
-                onSelect: newVal => client.value = newVal,
-            }),
-            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: loading.value,
-                    onClick: handleNext
-                }, () => t(msg => msg.button.next)),
-            ])
-        ]
+        return () => <>
+            <ClientTable onSelect={val => client.value = val} />
+            <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={loading.value}
+                    onClick={handleNext}
+                >
+                    {t(msg => msg.button.next)}
+                </ElButton>
+            </div>
+        </>
     }
 })
 
diff --git a/src/app/components/Option/components/BackupOption/Clear/Step2.tsx b/src/app/components/Option/components/BackupOption/Clear/Step2.tsx
new file mode 100644
index 00000000..7bf3aecb
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/Clear/Step2.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { ElAlert, ElButton, ElMessage } from "element-plus"
+import { PropType, Ref, defineComponent, ref } from "vue"
+import { Back, Check } from "@element-plus/icons-vue"
+import { StatResult } from "./Step1"
+import processor from "@src/common/backup/processor"
+
+const processClear = async (client: timer.backup.Client): Promise<void> => {
+    const result = await processor.clear(client.id)
+    if (!result.success) {
+        throw new Error(result.errorMsg)
+    }
+}
+
+const _default = defineComponent({
+    props: {
+        data: Object as PropType<StatResult>,
+    },
+    emits: {
+        back: () => true,
+        clear: () => true,
+    },
+    setup(props, ctx) {
+        const deleting: Ref<boolean> = ref(false)
+
+        const handleClear = () => {
+            deleting.value = true
+            processClear(props.data.client)
+                .then(() => {
+                    ElMessage.success(t(msg => msg.operation.successMsg))
+                    ctx.emit('clear')
+                })
+                .catch((e: Error) => ElMessage.warning(e.message || 'Unknown error'))
+                .finally(() => deleting.value = false)
+        }
+
+        return () => <>
+            <ElAlert type="success" closable={false}>
+                {t(msg => msg.option.backup.clear.confirmTip, {
+                    ...props.data,
+                    clientName: props.data?.client?.name || ''
+                })}
+            </ElAlert>
+            <div class="sop-footer">
+                <ElButton
+                    type="info"
+                    icon={<Back />}
+                    disabled={deleting.value}
+                    onClick={() => ctx.emit("back")}
+                >
+                    {t(msg => msg.button.previous)}
+                </ElButton>
+                <ElButton
+                    type="success"
+                    icon={<Check />}
+                    loading={deleting.value}
+                    onClick={handleClear}
+                >
+                    {t(msg => msg.button.confirm)}
+                </ElButton>
+            </div>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/BackupOption/Clear/index.tsx b/src/app/components/Option/components/BackupOption/Clear/index.tsx
new file mode 100644
index 00000000..c2f0f4fb
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/Clear/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 { Delete } from "@element-plus/icons-vue"
+import { ElButton, ElDialog } from "element-plus"
+import { defineComponent, Ref, ref } from "vue"
+import Sop from "./Sop"
+
+const _default = defineComponent({
+    setup: () => {
+        const dialogVisible: Ref<boolean> = ref(false)
+
+        const close = () => dialogVisible.value = false
+
+        return () => <>
+            <ElButton
+                type="danger"
+                icon={<Delete />}
+                style={{ marginRight: "12px" }}
+                onClick={() => dialogVisible.value = true}
+            >
+                {t(msg => msg.option.backup.clear.btn)}
+            </ElButton>
+            <ElDialog
+                alignCenter
+                title={t(msg => msg.option.backup.clear.btn)}
+                width="70%"
+                modelValue={dialogVisible.value}
+                onClose={close}
+            >
+                <Sop onCancel={close} onClear={close} />
+            </ElDialog>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/BackupOption/ClientTable.tsx b/src/app/components/Option/components/BackupOption/ClientTable.tsx
new file mode 100644
index 00000000..665ea97f
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/ClientTable.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { cvt2LocaleTime } from "@app/util/time"
+import metaService from "@service/meta-service"
+import processor from "@src/common/backup/processor"
+import { ElTableRowScope } from "@src/element-ui/table"
+import { ElMessage, ElRadio, ElTable, ElTableColumn, ElTag } from "element-plus"
+import { defineComponent, ref, Ref, onMounted } from "vue"
+
+const formatTime = (value: timer.backup.Client): string => {
+    const { minDate, maxDate } = value || {}
+    const min = minDate ? cvt2LocaleTime(minDate) : ''
+    const max = maxDate ? cvt2LocaleTime(maxDate) : ''
+    return `${min} - ${max}`
+}
+
+const _default = defineComponent({
+    emits: {
+        select: (_: timer.backup.Client) => true,
+    },
+    setup(_, ctx) {
+        const list: Ref<timer.backup.Client[]> = ref([])
+        const loading: Ref<boolean> = ref(false)
+        const selectedCid: Ref<string> = ref()
+        const localCid: Ref<string> = ref()
+
+        onMounted(() => {
+            loading.value = true
+            processor.listClients()
+                .then(res => {
+                    if (res.success) {
+                        list.value = res.data
+                    } else {
+                        throw res.errorMsg
+                    }
+                })
+                .catch(e => ElMessage.error(typeof e === 'string' ? e : (e as Error).message || 'Unknown error...'))
+                .finally(() => loading.value = false)
+            metaService.getCid().then(cid => localCid.value = cid)
+        })
+
+        const handleRowSelect = (row: timer.backup.Client) => {
+            selectedCid.value = row.id
+            ctx.emit("select", row)
+        }
+
+        return () => (
+            <ElTable data={list.value}
+                border
+                maxHeight="40vh"
+                class="backup-client-table"
+                highlightCurrentRow
+                onCurrent-change={(row: timer.backup.Client) => handleRowSelect(row)}
+                emptyText={loading.value ? 'Loading data ...' : 'Empty data'}
+            >
+                <ElTableColumn align="center" width={50}>
+                    {
+                        ({ row }: ElTableRowScope<timer.backup.Client>) => (
+                            <ElRadio
+                                label={row.id}
+                                modelValue={selectedCid.value}
+                                onChange={() => handleRowSelect(row)}
+                                v-slots={() => ''}
+                            />
+                        )
+                    }
+                </ElTableColumn>
+                <ElTableColumn
+                    label="CID"
+                    align="center"
+                    headerAlign="center"
+                    width={320}
+                    formatter={(client: timer.backup.Client) => client.id || '-'}
+                />
+                <ElTableColumn
+                    label={t(msg => msg.option.backup.client, { input: '' })}
+                    align="center"
+                    headerAlign="center"
+                >
+                    {
+                        ({ row: client }: ElTableRowScope<timer.backup.Client>) => <>
+                            {client.name || '-'}
+                            <ElTag v-show={localCid.value === client?.id} size="small" type="danger">
+                                {t(msg => msg.option.backup.clientTable.current)}
+                            </ElTag>
+                        </>
+                    }
+                </ElTableColumn>
+                <ElTableColumn
+                    label={t(msg => msg.option.backup.clientTable.dataRange)}
+                    align="center"
+                    headerAlign="center"
+                    formatter={formatTime}
+                />
+            </ElTable>
+        )
+    },
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/BackupOption/Download/Sop.tsx b/src/app/components/Option/components/BackupOption/Download/Sop.tsx
new file mode 100644
index 00000000..a343bb31
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/Download/Sop.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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,
+        download: () => true,
+    },
+    setup(_, ctx) {
+        const step: Ref<0 | 1> = ref(0)
+        const data: Ref<timer.imported.Data> = ref()
+        const client: Ref<timer.backup.Client> = ref()
+        return () => (
+            <div class="sop-dialog-container">
+                <div class="step-container">
+                    <ElSteps
+                        space={200}
+                        finishStatus="success"
+                        active={step.value}
+                    >
+                        <ElStep title={t(msg => msg.option.backup.clientTable.selectTip)} />
+                        <ElStep title={t(msg => msg.option.backup.download.step2)} />
+                    </ElSteps>
+                </div>
+                <div class="operation-container">
+                    {
+                        step.value === 0
+                            ? <Step1
+                                onCancel={() => ctx.emit("cancel")}
+                                onNext={(newData, clientVal) => {
+                                    data.value = newData
+                                    client.value = clientVal
+                                    step.value = 1
+                                }}
+                            />
+                            : <Step2
+                                data={data.value}
+                                clientName={client.value?.name}
+                                onBack={() => step.value = 0}
+                                onDownload={() => {
+                                    step.value = 0
+                                    nextTick(() => ctx.emit("download"))
+                                }}
+                            />
+                    }
+                </div>
+            </div>
+        )
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/download/step1.ts b/src/app/components/Option/components/BackupOption/Download/Step1.tsx
similarity index 71%
rename from src/app/components/option/components/backup/download/step1.ts
rename to src/app/components/Option/components/BackupOption/Download/Step1.tsx
index b6752a5a..99abc556 100644
--- a/src/app/components/option/components/backup/download/step1.ts
+++ b/src/app/components/Option/components/BackupOption/Download/Step1.tsx
@@ -11,8 +11,8 @@ import { fillExist } from "@service/components/import-processor"
 import processor from "@src/common/backup/processor"
 import { BIRTHDAY, parseTime } from "@util/time"
 import { ElButton, ElMessage } from "element-plus"
-import { defineComponent, Ref, h, ref } from "vue"
-import ClientTable from "../client-table"
+import { defineComponent, Ref, ref } from "vue"
+import ClientTable from "../ClientTable"
 
 async function fetchData(client: timer.backup.Client): Promise<timer.imported.Data> {
     const { id: specCid, maxDate, minDate = BIRTHDAY } = client
@@ -54,24 +54,26 @@ const _default = defineComponent({
                 .finally(() => loading.value = false)
         }
 
-        return () => [
-            h(ClientTable, {
-                onSelect: newVal => client.value = newVal,
-            }),
-            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: loading.value,
-                    onClick: handleNext
-                }, () => t(msg => msg.button.next)),
-            ])
-        ]
+        return () => <>
+            <ClientTable onSelect={val => client.value = val} />
+            <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={loading.value}
+                    onClick={handleNext}
+                >
+                    {t(msg => msg.button.next)}
+                </ElButton>
+            </div>
+        </>
     }
 })
 
diff --git a/src/app/components/option/components/backup/download/step2.ts b/src/app/components/Option/components/BackupOption/Download/Step2.tsx
similarity index 54%
rename from src/app/components/option/components/backup/download/step2.ts
rename to src/app/components/Option/components/BackupOption/Download/Step2.tsx
index 79619060..693eac44 100644
--- a/src/app/components/option/components/backup/download/step2.ts
+++ b/src/app/components/Option/components/BackupOption/Download/Step2.tsx
@@ -7,11 +7,11 @@
 
 import { t } from "@app/locale"
 import { ElAlert, 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: {
@@ -44,35 +44,28 @@ const _default = defineComponent({
                 .catch()
                 .finally(() => downloading.value = false)
         }
-
-        return () => [
-            h(ElAlert, {
-                type: 'success',
-                closable: false,
-            }, () => t(msg => msg.option.backup.download.confirmTip, {
-                clientName: props.clientName,
-                size: props.data?.rows?.length || 0
-            })),
-            h(CompareTable, {
-                data: props.data,
-                comparedColName: t(msg => msg.option.backup.download.willDownload),
-            }),
-            h('div', { class: 'resolution-container' }, renderResolutionFormItem(resolution)),
-            h('div', { class: 'sop-footer' }, [
-                h(ElButton, {
-                    type: 'info',
-                    icon: Back,
-                    disabled: downloading.value,
-                    onClick: () => ctx.emit('back'),
-                }, () => t(msg => msg.button.previous)),
-                h(ElButton, {
-                    type: 'success',
-                    icon: Check,
-                    loading: downloading.value,
-                    onClick: handleDownload
-                }, () => t(msg => msg.button.confirm)),
-            ]),
-        ]
+        return () => <>
+            <ElAlert type="success" closable={false}>
+                {
+                    t(msg => msg.option.backup.download.confirmTip, {
+                        clientName: props.clientName,
+                        size: props.data?.rows?.length || 0
+                    })
+                }
+            </ElAlert>
+            <CompareTable data={props.data} comparedColName={t(msg => msg.option.backup.download.willDownload)} />
+            <div class="resolution-container">
+                {renderResolutionFormItem(resolution)}
+            </div>
+            <div class="sop-footer">
+                <ElButton type="info" icon={<Back />} disabled={downloading.value} onClick={() => ctx.emit("back")}>
+                    {t(msg => msg.button.previous)}
+                </ElButton>
+                <ElButton type="success" icon={<Check />} loading={downloading.value} onClick={handleDownload}>
+                    {t(msg => msg.button.confirm)}
+                </ElButton>
+            </div>
+        </>
     }
 })
 
diff --git a/src/app/components/Option/components/BackupOption/Download/index.tsx b/src/app/components/Option/components/BackupOption/Download/index.tsx
new file mode 100644
index 00000000..0990b47d
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/Download/index.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { Files } from "@element-plus/icons-vue"
+import { ElButton, ElDialog } from "element-plus"
+import { defineComponent, Ref, ref } from "vue"
+import Sop from "./Sop"
+
+const _default = defineComponent({
+    setup: () => {
+        const dialogVisible: Ref<boolean> = ref(false)
+
+        const close = () => dialogVisible.value = false
+
+        return () => <>
+            <ElButton
+                type="primary"
+                icon={<Files />}
+                style={{ marginRight: "12px" }}
+                onClick={() => dialogVisible.value = true}
+            >
+                {t(msg => msg.option.backup.download.btn)}
+            </ElButton>
+            <ElDialog
+                alignCenter
+                title={t(msg => msg.option.backup.download.btn)}
+                width="70%"
+                modelValue={dialogVisible.value}
+                onClose={close}
+            >
+                <Sop onCancel={close} onDownload={close} />
+            </ElDialog>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/footer.ts b/src/app/components/Option/components/BackupOption/Footer.tsx
similarity index 57%
rename from src/app/components/option/components/backup/footer.ts
rename to src/app/components/Option/components/BackupOption/Footer.tsx
index f9adde1e..dba0b135 100644
--- a/src/app/components/option/components/backup/footer.ts
+++ b/src/app/components/Option/components/BackupOption/Footer.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2023 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -9,13 +9,13 @@ import type { PropType, Ref } from "vue"
 
 import { t } from "@app/locale"
 import { UploadFilled } from "@element-plus/icons-vue"
-import { ElButton, ElLoading, ElMessage, ElText } from "element-plus"
-import { defineComponent, h, ref, watch } from "vue"
+import { ElButton, ElDivider, ElLoading, ElMessage, ElText } from "element-plus"
+import { defineComponent, ref, watch } from "vue"
 import metaService from "@service/meta-service"
 import processor from "@src/common/backup/processor"
 import { formatTime } from "@util/time"
-import Download from "./download"
-import Clear from "./clear"
+import Download from "./Download"
+import Clear from "./Clear"
 
 async function handleBackup(lastTime: Ref<number>) {
     const loading = ElLoading.service({
@@ -51,27 +51,25 @@ const _default = defineComponent({
         queryLastTime()
         watch(() => props.type, queryLastTime)
 
-        return () => {
-            const children = [
-                h(Clear),
-                h(Download),
-                h(ElButton, {
-                    type: 'primary',
-                    icon: UploadFilled,
-                    onClick: () => handleBackup(lastTime)
-                }, () => t(msg => msg.option.backup.operation))
-            ]
-            const lastTimeVal = lastTime.value
-            if (lastTimeVal) {
-                const tips = t(msg => msg.option.backup.lastTimeTip, {
-                    lastTime: formatTime(lastTimeVal, TIME_FORMAT)
-                })
-                const tipText = h(ElText, { style: { marginLeft: '20px' } }, () => tips)
-                children.push(tipText)
-            }
-            lastTime.value && children.push()
-            return h('div', { class: 'backup-footer' }, children)
-        }
+        return () => <div>
+            <ElDivider />
+            <div class="backup-footer">
+                <Clear />
+                <Download />
+                <ElButton
+                    type="primary"
+                    icon={<UploadFilled />}
+                    onClick={() => handleBackup(lastTime)}
+                >
+                    {t(msg => msg.option.backup.operation)}
+                </ElButton>
+                <ElText v-show={!!lastTime.value} style={{ marginLeft: "20px" }}>
+                    {
+                        t(msg => msg.option.backup.lastTimeTip, { lastTime: formatTime(lastTime.value, TIME_FORMAT) })
+                    }
+                </ElText>
+            </div>
+        </div>
     }
 })
 
diff --git a/src/app/components/Option/components/BackupOption/index.tsx b/src/app/components/Option/components/BackupOption/index.tsx
new file mode 100644
index 00000000..87880924
--- /dev/null
+++ b/src/app/components/Option/components/BackupOption/index.tsx
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref, UnwrapRef } from "vue"
+
+import { t } from "@app/locale"
+import optionService from "@service/option-service"
+import processor from "@src/common/backup/processor"
+import { defaultBackup } from "@util/constant/option"
+import { ElInput, ElOption, ElSelect, ElAlert, ElButton, ElMessage, ElLoading } from "element-plus"
+import { defineComponent, computed, watch, reactive, unref } from "vue"
+import { OptionItem, OptionTooltip } from "../../common"
+import AutoInput from "./AutoInput"
+import Footer from "./Footer"
+import { AUTHOR_EMAIL } from "@src/package"
+import { DEFAULT_ENDPOINT } from "@api/obsidian"
+import "./style.sass"
+
+const ALL_TYPES: timer.backup.Type[] = [
+    'none',
+    'gist',
+    'obsidian_local_rest_api',
+]
+
+const AUTH_LABELS: { [t in timer.backup.Type]: string } = {
+    'none': '',
+    'gist': 'Personal Access Token {info} {input}',
+    'obsidian_local_rest_api': 'Authorization {input}'
+}
+
+const TYPE_NAMES: { [t in timer.backup.Type]: string } = {
+    none: t(msg => msg.option.backup.meta.none.label),
+    gist: 'GitHub Gist',
+    obsidian_local_rest_api: "Obsidian - Local REST API",
+}
+
+const DEFAULT = defaultBackup()
+
+const copy = (target: timer.option.BackupOption, origin: timer.option.BackupOption) => {
+    target.clientName = origin.clientName
+    target.backupType = origin.backupType
+    target.autoBackUp = origin.autoBackUp
+    target.autoBackUpInterval = origin.autoBackUpInterval
+    target.backupAuths = origin.backupAuths
+    target.backupExts = origin.backupExts
+}
+
+const _default = defineComponent((_props, ctx) => {
+    const option: UnwrapRef<timer.option.BackupOption> = reactive(defaultBackup())
+    optionService.getAllOption().then(val => {
+        copy(option, val)
+        watch(option, () => optionService.setBackupOption(unref(option)))
+    })
+
+    const isObsidian = computed(() => option.backupType === "obsidian_local_rest_api")
+    const isNotNone = computed(() => option.backupType !== "none")
+    const auth: Ref<string> = computed({
+        get: () => option.backupAuths[option.backupType],
+        set: val => option.backupType && (option.backupAuths[option.backupType] = val),
+    })
+    const ext: Ref<timer.backup.TypeExt> = computed({
+        get: () => option.backupExts[option.backupType],
+        set: val => option.backupType && (option.backupExts[option.backupType] = val),
+    })
+
+    async function handleTest() {
+        const loading = ElLoading.service({ text: "Please wait...." })
+        const { errorMsg } = await processor.checkAuth()
+        loading.close()
+        if (!errorMsg) {
+            ElMessage.success("Valid!")
+        } else {
+            ElMessage.error(errorMsg)
+        }
+    }
+
+    ctx.expose({
+        reset: () => {
+            // Only reset type and auto flag
+            option.backupType = DEFAULT.backupType
+            option.autoBackUp = DEFAULT.autoBackUp
+        }
+    })
+    return () => <>
+        <ElAlert closable={false} type="warning" description={t(msg => msg.option.backup.alert, { email: AUTHOR_EMAIL })} />
+        <OptionItem label={msg => msg.option.backup.type} defaultValue={TYPE_NAMES[DEFAULT.backupType]}>
+            <ElSelect
+                modelValue={option.backupType}
+                size="small"
+                onChange={(val: timer.backup.Type) => option.backupType = val}
+            >
+                {ALL_TYPES.map(type => <ElOption value={type} label={TYPE_NAMES[type]} />)}
+            </ElSelect>
+        </OptionItem >
+        <OptionItem
+            v-show={isNotNone.value}
+            label={_ => "{input}"}
+            defaultValue={t(msg => msg.option.no)}
+        >
+            <AutoInput
+                autoBackup={option.autoBackUp}
+                interval={option.autoBackUpInterval}
+                onChange={(autoBackUpVal, intervalVal) => {
+                    option.autoBackUp = autoBackUpVal
+                    option.autoBackUpInterval = intervalVal
+                }}
+            />
+        </OptionItem>
+        <OptionItem
+            v-show={isObsidian.value}
+            label={msg => msg.option.backup.meta.obsidian_local_rest_api.endpointLabel}
+            v-slots={{
+                info: () => <OptionTooltip>{t(msg => msg.option.backup.meta.obsidian_local_rest_api.endpointInfo)}</OptionTooltip>
+            }}
+        >
+            <ElInput
+                placeholder={DEFAULT_ENDPOINT}
+                modelValue={ext.value?.endpoint}
+                size="small"
+                style={{ width: "400px" }}
+                onInput={val => ext.value = { ...(ext.value || {}), endpoint: val?.trim?.() || '' }}
+            />
+        </OptionItem>
+        <OptionItem
+            v-show={isObsidian.value}
+            label={msg => msg.option.backup.meta.obsidian_local_rest_api.pathLabel}>
+            <ElInput
+                modelValue={ext.value?.dirPath}
+                size="small"
+                style={{ width: "400px" }}
+                onInput={val => ext.value = { ...(ext.value || {}), dirPath: val?.trim?.() || '' }}
+            />
+        </OptionItem>
+        <OptionItem
+            v-show={isNotNone.value}
+            label={_ => AUTH_LABELS[option.backupType]}
+            v-slots={{
+                info: () => <OptionTooltip>{t(msg => msg.option.backup.meta[option.backupType]?.authInfo)}</OptionTooltip>
+            }}
+        >
+            <ElInput
+                modelValue={auth.value}
+                size="small"
+                type="password"
+                showPassword
+                style={{ width: "400px" }}
+                onInput={val => auth.value = val?.trim?.() || ''}
+                v-slots={{
+                    append: () => <ElButton onClick={handleTest}>{t(msg => msg.option.backup.test)}</ElButton>
+                }}
+            />
+        </OptionItem>
+        <OptionItem v-show={isNotNone.value} label={msg => msg.option.backup.client}>
+            <ElInput
+                modelValue={option.clientName}
+                size="small"
+                style={{ width: "120px" }}
+                placeholder={DEFAULT.clientName}
+                onInput={val => option.clientName = val?.trim?.() || ''}
+            />
+        </OptionItem>
+        <Footer v-show={isNotNone.value} />
+    </>
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/style.sass b/src/app/components/Option/components/BackupOption/style.sass
similarity index 100%
rename from src/app/components/option/components/backup/style.sass
rename to src/app/components/Option/components/BackupOption/style.sass
diff --git a/src/app/components/Option/components/LimitOption/index.tsx b/src/app/components/Option/components/LimitOption/index.tsx
new file mode 100644
index 00000000..d7e391e0
--- /dev/null
+++ b/src/app/components/Option/components/LimitOption/index.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { locale } from "@i18n"
+import optionService from "@service/option-service"
+import { defaultDailyLimit } from "@util/constant/option"
+import { ElInput, ElMessageBox, ElOption, ElSelect } from "element-plus"
+import { defineComponent, reactive, unref, UnwrapRef, ref, Ref, watch } from "vue"
+import { OptionItem } from "../../common"
+import "./limit-option.sass"
+import { judgeVerificationRequired, processVerification } from "@app/util/limit"
+import limitService from "@service/limit-service"
+
+const ALL_FILTER: timer.limit.FilterType[] = [
+    'translucent',
+    'groundGlass',
+]
+
+const ALL_LEVEL: timer.limit.RestrictionLevel[] = [
+    'nothing',
+    'verification',
+    'password',
+    'strict',
+]
+
+const ALL_DIFF: timer.limit.VerificationDifficulty[] = [
+    'easy',
+    'hard',
+    'disgusting',
+]
+
+const verifyTriggered = async (option: timer.option.DailyLimitOption, verified: Ref<boolean>): Promise<void> => {
+    if (verified.value) return
+    const items = await limitService.select({ filterDisabled: true, url: undefined })
+    const triggerResults = await Promise.all((items || []).map(judgeVerificationRequired))
+    const anyTrigger = triggerResults.some(t => !!t)
+    if (!anyTrigger) {
+        verified.value = true
+        return
+    }
+    return processVerification(option).then(() => { verified.value = true })
+}
+
+function copy(target: timer.option.DailyLimitOption, source: timer.option.DailyLimitOption) {
+    target.limitFilter = source.limitFilter
+    target.limitLevel = source.limitLevel
+    target.limitPassword = source.limitPassword
+    target.limitVerifyDifficulty = source.limitVerifyDifficulty
+}
+
+function reset(target: timer.option.DailyLimitOption) {
+    const defaultValue = defaultDailyLimit()
+    // Not to reset limitPassword
+    delete defaultValue.limitPassword
+    // Not to reset difficulty
+    delete defaultValue.limitVerifyDifficulty
+    Object.entries(defaultValue).forEach(([key, val]) => target[key] = val)
+}
+
+const confirm4Strict = async (): Promise<void> => {
+    const title = t(msg => msg.option.dailyLimit.level.strictTitle)
+    const content = t(msg => msg.option.dailyLimit.level.strictContent)
+    await ElMessageBox.confirm(content, title, {
+        type: "warning",
+        confirmButtonText: t(msg => msg.button.confirm),
+        cancelButtonText: t(msg => msg.button.cancel),
+    })
+}
+
+const _default = defineComponent((_, ctx) => {
+    const option: UnwrapRef<timer.option.DailyLimitOption> = reactive(defaultDailyLimit())
+    const verified = ref(false)
+    optionService.getAllOption().then(currentVal => {
+        copy(option, currentVal)
+        watch(option, () => optionService.setDailyLimitOption(unref(option)))
+    })
+    ctx.expose({ reset: () => reset(option) })
+
+    return () => <>
+        <OptionItem
+            label={msg => msg.option.dailyLimit.filter.label}
+            defaultValue={t(msg => msg.option.dailyLimit.filter[defaultDailyLimit().limitFilter])}
+            hideDivider
+        >
+            <ElSelect
+                modelValue={option.limitFilter}
+                size="small"
+                onChange={val => option.limitFilter = val}
+            >
+                {ALL_FILTER.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.filter[item])} />)}
+            </ElSelect>
+        </OptionItem>
+        <OptionItem
+            label={msg => msg.option.dailyLimit.level.label}
+            defaultValue={t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel])}
+        >
+            <ElSelect
+                modelValue={option.limitLevel}
+                size="small"
+                class={`option-daily-limit-level-select ${locale}`}
+                onChange={(val: timer.limit.RestrictionLevel) => verifyTriggered(option, verified)
+                    .then(() => val === "strict" ? confirm4Strict() : Promise.resolve())
+                    .then(() => option.limitLevel = val)
+                    .catch(console.log)
+                }
+            >
+                {ALL_LEVEL.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level[item])} />)}
+            </ElSelect>
+        </OptionItem>
+        <OptionItem
+            v-show={option.limitLevel === "password"}
+            label={msg => msg.option.dailyLimit.level.passwordLabel}
+        >
+            <ElInput
+                modelValue={option.limitPassword}
+                size="small"
+                type="password"
+                showPassword
+                style={{ width: "200px" }}
+                onInput={val => verifyTriggered(option, verified)
+                    .then(() => option.limitPassword = val?.trim())
+                    .catch(console.log)
+                }
+            />
+        </OptionItem>
+        <OptionItem
+            v-show={option.limitLevel === "verification"}
+            label={msg => msg.option.dailyLimit.level.verificationLabel}
+            defaultValue={t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitVerifyDifficulty])}
+        >
+            <ElSelect
+                modelValue={option.limitVerifyDifficulty}
+                size="small"
+                onChange={(val: timer.limit.VerificationDifficulty) => verifyTriggered(option, verified)
+                    .then(() => option.limitVerifyDifficulty = val)
+                    .catch(console.log)
+                }
+            >
+                {ALL_DIFF.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level.verificationDifficulty[item])} />)}
+            </ElSelect>
+        </OptionItem>
+    </>
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/daily-limit/daily-limit.sass b/src/app/components/Option/components/LimitOption/limit-option.sass
similarity index 100%
rename from src/app/components/option/components/daily-limit/daily-limit.sass
rename to src/app/components/Option/components/LimitOption/limit-option.sass
diff --git a/src/app/components/Option/components/PopupOption.tsx b/src/app/components/Option/components/PopupOption.tsx
new file mode 100644
index 00000000..751b92b2
--- /dev/null
+++ b/src/app/components/Option/components/PopupOption.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { unref, UnwrapRef, watch } from "vue"
+import { ElInputNumber, ElOption, ElSelect, ElSwitch } from "element-plus"
+import { t } from "@app/locale"
+import { I18nKey, t as t_ } from "@i18n"
+import { defineComponent, reactive } from "vue"
+import optionService from "@service/option-service"
+import { OptionItem, OptionTag } from "../common"
+import { defaultPopup } from "@util/constant/option"
+import { ALL_POPUP_DURATION } from "@util/constant/popup"
+import { ALL_DIMENSIONS } from "@util/stat"
+import { locale } from "@i18n"
+import { rotate } from "@util/array"
+
+type LocaleStyle = {
+    durationSelectWidth: number
+    typeSelectWidth: number
+}
+
+const STYLES: Messages<LocaleStyle> = {
+    zh_CN: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 80,
+    },
+    en: {
+        typeSelectWidth: 115,
+        durationSelectWidth: 110
+    },
+    ja: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 105,
+    },
+    pt_PT: {
+        typeSelectWidth: 155,
+        durationSelectWidth: 120,
+    },
+    zh_TW: {
+        typeSelectWidth: 85,
+        durationSelectWidth: 80,
+    },
+}
+
+const tStyle = (key: I18nKey<LocaleStyle>) => t_(STYLES, { key })
+
+const weekStartOptionPairs: [[timer.option.WeekStartOption, string]] = [
+    ['default', t(msg => msg.option.popup.weekStartAsNormal)]
+]
+const allWeekDays = t(msg => msg.calendar.weekDays)
+    .split('|')
+    .map((weekDay, idx) => [idx + 1, weekDay] as [timer.option.WeekStartOption, string])
+rotate(allWeekDays, locale === 'zh_CN' ? 0 : 1, true)
+allWeekDays.forEach(weekDayInfo => weekStartOptionPairs.push(weekDayInfo))
+
+const defaultPopOptions = defaultPopup()
+const defaultTypeLabel = t(msg => msg.item[defaultPopOptions.defaultType])
+const defaultDurationLabel = t(msg => msg.duration[defaultPopOptions.defaultDuration])
+const displayDefaultLabel = `${defaultDurationLabel}/${defaultTypeLabel}`
+
+function copy(target: timer.option.PopupOption, source: timer.option.PopupOption) {
+    target.defaultMergeDomain = source.defaultMergeDomain
+    target.defaultDuration = source.defaultDuration
+    target.defaultType = source.defaultType
+    target.displaySiteName = source.displaySiteName
+    target.popupMax = source.popupMax
+    target.weekStart = source.weekStart
+}
+
+const _default = defineComponent((_props, ctx) => {
+    const option: UnwrapRef<timer.option.PopupOption> = reactive(defaultPopup())
+    optionService.getAllOption()
+        .then(currentVal => {
+            copy(option, currentVal)
+            watch(option, () => optionService.setPopupOption(unref(option)))
+        })
+    ctx.expose({
+        reset: () => copy(option, defaultPopup())
+    })
+    return () => <>
+        <OptionItem
+            label={msg => msg.option.popup.defaultMergeDomain}
+            defaultValue={t(msg => msg.option.no)}
+            hideDivider
+        >
+            <ElSwitch
+                modelValue={option.defaultMergeDomain}
+                onChange={(val: boolean) => option.defaultMergeDomain = val}
+            />
+        </OptionItem>
+        <OptionItem
+            label={msg => msg.option.popup.defaultDisplay}
+            defaultValue={displayDefaultLabel}
+            v-slots={{
+                duration: () => (
+                    <ElSelect
+                        modelValue={option.defaultDuration}
+                        size="small"
+                        style={{ width: `${tStyle(m => m.durationSelectWidth)}px` }}
+                        onChange={(val: PopupDuration) => option.defaultDuration = val}
+                    >
+                        {ALL_POPUP_DURATION.map(item => <ElOption value={item} label={t(msg => msg.duration[item])} />)}
+                    </ElSelect>
+                ),
+                type: () => (
+                    <ElSelect
+                        modelValue={option.defaultType}
+                        size="small"
+                        style={{ width: `${tStyle(m => m.typeSelectWidth)}px` }}
+                        onChange={(val: timer.stat.Dimension) => option.defaultType = val}
+                    >
+                        {ALL_DIMENSIONS.map(item => <ElOption value={item} label={t(msg => msg.item[item])} />)}
+                    </ElSelect>
+                )
+            }}
+        />
+        <OptionItem label={msg => msg.option.popup.weekStart} defaultValue={t(msg => msg.option.popup.weekStartAsNormal)}>
+            <ElSelect
+                modelValue={option.weekStart}
+                size="small"
+                onChange={(val: timer.option.WeekStartOption) => option.weekStart = val}
+            >
+                {weekStartOptionPairs.map(([val, label]) => <ElOption value={val} label={label} />)}
+            </ElSelect>
+        </OptionItem>
+        <OptionItem
+            label={msg => msg.option.popup.max}
+            defaultValue={defaultPopOptions.popupMax}
+        >
+            <ElInputNumber
+                modelValue={option.popupMax}
+                size="small"
+                min={5}
+                max={30}
+                onChange={val => option.popupMax = val}
+            />
+        </OptionItem>
+        <OptionItem
+            label={msg => msg.option.popup.displaySiteName}
+            defaultValue={t(msg => msg.option.yes)}
+            v-slots={{
+                siteName: () => <OptionTag>{t(msg => msg.option.statistics.siteName)}</OptionTag>
+            }}
+        >
+            <ElSwitch
+                modelValue={option.displaySiteName}
+                onChange={(val: boolean) => option.displaySiteName = val}
+            />
+        </OptionItem>
+    </>
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/Option/components/StatisticsOption.tsx b/src/app/components/Option/components/StatisticsOption.tsx
new file mode 100644
index 00000000..edc28a01
--- /dev/null
+++ b/src/app/components/Option/components/StatisticsOption.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { UnwrapRef } from "vue"
+
+import { ElSwitch } from "element-plus"
+import optionService from "@service/option-service"
+import { defaultStatistics } from "@util/constant/option"
+import { defineComponent, reactive, unref, watch } from "vue"
+import { t } from "@app/locale"
+import { OptionItem, OptionTag, OptionTooltip } from "../common"
+
+function copy(target: timer.option.StatisticsOption, source: timer.option.StatisticsOption) {
+    target.collectSiteName = source.collectSiteName
+    target.countLocalFiles = source.countLocalFiles
+}
+
+const _default = defineComponent({
+    setup(_props, ctx) {
+        const option: UnwrapRef<timer.option.StatisticsOption> = reactive(defaultStatistics())
+        optionService.getAllOption().then(currentVal => {
+            copy(option, currentVal)
+            watch(option, () => optionService.setStatisticsOption(unref(option)))
+        })
+        ctx.expose({
+            reset: () => copy(option, defaultStatistics())
+        })
+        return () => <>
+            <OptionItem
+                label={msg => msg.option.statistics.countLocalFiles}
+                defaultValue={t(msg => msg.option.no)}
+                hideDivider
+                v-slots={{
+                    info: () => <OptionTooltip>{t(msg => msg.option.statistics.localFilesInfo)}</OptionTooltip>,
+                    localFileTime: () => <OptionTag>{t(msg => msg.option.statistics.localFileTime)}</OptionTag>,
+                }}
+            >
+                <ElSwitch
+                    modelValue={option.countLocalFiles}
+                    onChange={(val: boolean) => option.countLocalFiles = val}
+                />
+            </OptionItem>
+            <OptionItem
+                label={msg => msg.option.statistics.collectSiteName}
+                defaultValue={t(msg => msg.option.yes)}
+                v-slots={{
+                    siteName: () => <OptionTag>{t(msg => msg.option.statistics.siteName)}</OptionTag>,
+                    siteNameUsage: () => <OptionTooltip>{t(msg => msg.option.statistics.siteNameUsage)}</OptionTooltip>,
+                }}
+            >
+                <ElSwitch
+                    modelValue={option.collectSiteName}
+                    onChange={(val: boolean) => option.collectSiteName = val}
+                />
+            </OptionItem>
+        </>
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/option/index.ts b/src/app/components/Option/index.tsx
similarity index 52%
rename from src/app/components/option/index.ts
rename to src/app/components/Option/index.tsx
index 207ec108..ceff0c25 100644
--- a/src/app/components/option/index.ts
+++ b/src/app/components/Option/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,12 +9,12 @@ import type { Ref } from "vue"
 import type { Router } from "vue-router"
 
 import ContentContainer from "../common/content-container"
-import { defineComponent, h, ref } from "vue"
-import Popup from "./components/popup"
-import Appearance from "./components/appearance"
-import Statistics from "./components/statistics"
-import Backup from './components/backup'
-import DailyLimit from './components/daily-limit'
+import { defineComponent, ref } from "vue"
+import PopupOption from "./components/PopupOption"
+import Appearance from "./components/AppearanceOption"
+import StatisticsOption from "./components/StatisticsOption"
+import BackupOption from './components/BackupOption'
+import LimitOption from './components/LimitOption'
 import './style'
 import { ElIcon, ElMessage, ElTabPane, ElTabs } from "element-plus"
 import { t } from "@app/locale"
@@ -39,10 +39,10 @@ function initWithQuery(tab: Ref<_Category>) {
 
 /**
  * Handle before leave the option panel tabs
- * 
+ *
  * @param currentActiveNameAndOld
- * @param paneRefMap 
- * @param router 
+ * @param paneRefMap
+ * @param router
  * @returns promise to leave, or not
  */
 function handleBeforeLeave(
@@ -69,7 +69,6 @@ function handleBeforeLeave(
 }
 
 const _default = defineComponent({
-    name: "OptionContainer",
     setup() {
         const tab: Ref<_Category> = ref('appearance')
         initWithQuery(tab)
@@ -82,51 +81,42 @@ const _default = defineComponent({
             dailyLimit: ref(),
         }
         const router = useRouter()
-        return () => h(ContentContainer, () => h(ElTabs, {
-            modelValue: tab.value,
-            type: "border-card",
-            beforeLeave: (active: string, oldActive: string) => handleBeforeLeave([active, oldActive], paneRefMap, router)
-        }, () => [
-            // Appearance
-            h(ElTabPane, {
-                label: t(msg => msg.option.appearance.title),
-                name: "appearance" as _Category
-            }, () => h(Appearance, {
-                ref: paneRefMap.appearance
-            })),
-            // Statistics
-            h(ElTabPane, {
-                label: t(msg => msg.option.statistics.title),
-                name: "statistics" as _Category
-            }, () => h(Statistics, {
-                ref: paneRefMap.statistics
-            })),
-            // Popup
-            h(ElTabPane, {
-                label: t(msg => msg.option.popup.title),
-                name: "popup" as _Category
-            }, () => h(Popup, {
-                ref: paneRefMap.popup
-            })),
-            // Limit
-            h(ElTabPane, {
-                label: t(msg => msg.menu.limit),
-                name: "dailyLimit" as _Category
-            }, () => h(DailyLimit, {
-                ref: paneRefMap.dailyLimit
-            })),
-            // Backup
-            h(ElTabPane, {
-                label: t(msg => msg.option.backup.title),
-                name: "backup" as _Category
-            }, () => h(Backup, {
-                ref: paneRefMap.backup
-            })),
-            // Refresh button
-            h(ElTabPane, { label: t(msg => msg.option.resetButton), name: resetButtonName }, {
-                label: () => [h(ElIcon, () => h(Refresh)), t(msg => msg.option.resetButton)]
-            })
-        ]))
+        return () => (
+            <ContentContainer>
+                <ElTabs
+                    modelValue={tab.value}
+                    type="border-card"
+                    beforeLeave={(active: string, oldActive: string) => handleBeforeLeave([active, oldActive], paneRefMap, router)}
+                >
+                    <ElTabPane name={"appearance" as _Category} label={t(msg => msg.option.appearance.title)}>
+                        <Appearance ref={paneRefMap.appearance} />
+                    </ElTabPane>
+                    <ElTabPane name={"statistics" as _Category} label={t(msg => msg.option.statistics.title)}>
+                        <StatisticsOption ref={paneRefMap.statistics} />
+                    </ElTabPane>
+                    <ElTabPane name={"popup" as _Category} label={t(msg => msg.option.popup.title)}>
+                        <PopupOption ref={paneRefMap.popup} />
+                    </ElTabPane>
+                    <ElTabPane name={"dailyLimit" as _Category} label={t(msg => msg.menu.limit)}>
+                        <LimitOption ref={paneRefMap.dailyLimit} />
+                    </ElTabPane>
+                    <ElTabPane name={"backup" as _Category} label={t(msg => msg.option.backup.title)}>
+                        <BackupOption ref={paneRefMap.backup} />
+                    </ElTabPane>
+                    <ElTabPane
+                        name={resetButtonName}
+                        v-slots={{
+                            label: () => <>
+                                <ElIcon>
+                                    <Refresh />
+                                </ElIcon>
+                                {t(msg => msg.option.resetButton)}
+                            </>
+                        }}
+                    />
+                </ElTabs>
+            </ContentContainer>
+        )
     }
 })
 
diff --git a/src/app/components/option/style/index.sass b/src/app/components/Option/style/index.sass
similarity index 100%
rename from src/app/components/option/style/index.sass
rename to src/app/components/Option/style/index.sass
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/AliasColumn.tsx b/src/app/components/Report/ReportTable/columns/AliasColumn.tsx
new file mode 100644
index 00000000..3dfdf1d0
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/AliasColumn.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElTableColumn } from "element-plus"
+import { defineComponent } from "vue"
+import { t } from "@app/locale"
+import Editable from "@app/components/common/editable"
+
+const _default = defineComponent({
+    emits: {
+        aliasChange: (_host: string, _newAlias: string) => true,
+    },
+    setup(_, ctx) {
+        return () => (
+            <ElTableColumn
+                label={t(msg => msg.siteManage.column.alias)}
+                minWidth={140}
+                align="center"
+            >
+                {
+                    ({ row }: { row: timer.stat.Row }) => <Editable
+                        modelValue={row.alias}
+                        onChange={newAlias => ctx.emit("aliasChange", row.host, newAlias)}
+                    />
+                }
+            </ElTableColumn>
+        )
+    },
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/composition-table.ts b/src/app/components/Report/ReportTable/columns/CompositionTable.tsx
similarity index 58%
rename from src/app/components/report/table/columns/composition-table.ts
rename to src/app/components/Report/ReportTable/columns/CompositionTable.tsx
index db137092..47e7bc6a 100644
--- a/src/app/components/report/table/columns/composition-table.ts
+++ b/src/app/components/Report/ReportTable/columns/CompositionTable.tsx
@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { computed, ComputedRef, defineComponent, h, PropType } from "vue"
+import { computed, ComputedRef, defineComponent, PropType } from "vue"
 import { ElTable, ElTableColumn } from "element-plus"
 import { sum } from "@util/array"
 import { t } from "@app/locale"
@@ -35,38 +35,35 @@ function computeRows(data: timer.stat.RemoteCompositionVal[]): Row[] {
 }
 
 const _default = defineComponent({
-    name: 'CompositionChart',
     props: {
         data: Array as PropType<timer.stat.RemoteCompositionVal[]>,
         valueFormatter: Function as PropType<ValueFormatter>,
     },
     setup(props) {
         const rows: ComputedRef<Row[]> = computed(() => computeRows(props.data))
-        return () => h('div', { style: { width: '400px' } },
-            h(ElTable, {
-                data: rows.value,
-                size: 'small',
-                border: true,
-            }, () => [
-                h(ElTableColumn, {
-                    label: CLIENT_NAME,
-                    formatter: (row: Row) => row.name,
-                    align: 'center',
-                    width: 150,
-                }),
-                h(ElTableColumn, {
-                    label: VALUE,
-                    formatter: (row: Row) => props.valueFormatter(row.value),
-                    align: 'center',
-                    width: 150,
-                }),
-                h(ElTableColumn, {
-                    label: PERCENTAGE,
-                    align: 'center',
-                    formatter: (row: Row) => row.percent,
-                    width: 100,
-                }),
-            ])
+        return () => (
+            <div style={{ width: "400px" }}>
+                <ElTable data={rows.value} size="small" border>
+                    <ElTableColumn
+                        label={CLIENT_NAME}
+                        formatter={(r: Row) => r.name}
+                        align="center"
+                        width={150}
+                    />
+                    <ElTableColumn
+                        label={VALUE}
+                        formatter={(r: Row) => props.valueFormatter?.(r.value)}
+                        align="center"
+                        width={150}
+                    />
+                    <ElTableColumn
+                        label={PERCENTAGE}
+                        align="center"
+                        formatter={(r: Row) => r.percent}
+                        width={100}
+                    />
+                </ElTable>
+            </div>
         )
     }
 })
diff --git a/src/app/components/Report/ReportTable/columns/DateColumn.tsx b/src/app/components/Report/ReportTable/columns/DateColumn.tsx
new file mode 100644
index 00000000..ceb38f8c
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/DateColumn.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElTableColumn } from "element-plus"
+import { defineComponent } from "vue"
+import { t } from "@app/locale"
+import { cvt2LocaleTime } from "@app/util/time"
+import { ElTableRowScope } from "@src/element-ui/table"
+
+const columnLabel = t(msg => msg.item.date)
+
+const _default = defineComponent(() => {
+    return () => (
+        <ElTableColumn prop="date" label={columnLabel} minWidth={135} align="center" sortable="custom">
+            {({ row }: ElTableRowScope<timer.stat.Row>) => <span>{cvt2LocaleTime(row.date)}</span>}
+        </ElTableColumn>
+    )
+})
+
+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
new file mode 100644
index 00000000..1ba2f86b
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/FocusColumn.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+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(() => {
+    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>
+    )
+})
+
+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
new file mode 100644
index 00000000..aff6fd7b
--- /dev/null
+++ b/src/app/components/Report/ReportTable/columns/HostColumn.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Effect, ElTableColumn, ElTooltip } from "element-plus"
+import { h, defineComponent } from "vue"
+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
+ *
+ * @since 0.7.0
+ */
+const HostMergedAlert = defineComponent({
+    props: {
+        mergedHost: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, ctx) {
+        return () => (
+            <ElTooltip
+                placement="left"
+                effect={Effect.LIGHT}
+                offset={10}
+                v-slots={{ content: () => h(ctx.slots.default) }}
+            >
+                <a class="el-link el-link--default is-underline">
+                    <span class="el-link--inner">{props.mergedHost}</span>
+                </a>
+            </ElTooltip>
+        )
+    }
+})
+
+const columnLabel = t(msg => msg.item.host)
+
+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/table/columns/operation-delete-button.ts b/src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx
similarity index 70%
rename from src/app/components/report/table/columns/operation-delete-button.ts
rename to src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx
index 585b3fea..b7a9f90f 100644
--- a/src/app/components/report/table/columns/operation-delete-button.ts
+++ b/src/app/components/Report/ReportTable/columns/OperationDeleteButton.tsx
@@ -4,20 +4,21 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import type { PropType, Ref } from "vue"
+import type { Ref } from "vue"
 
-import { computed, defineComponent, h } from "vue"
-import OperationPopupConfirmButton from "@app/components/common/popup-confirm-button"
+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
  */
@@ -44,33 +45,30 @@ function computeRangeConfirmText(url: string, dateRange: [Date, Date]): string {
 }
 
 const _default = defineComponent({
-    name: "OperationDeleteButton",
     emits: {
         confirm: () => true
     },
     props: {
-        mergeDate: Boolean,
-        // Filter of date range
-        dateRange: Object as PropType<[Date, Date]>,
         itemUrl: String,
         itemDate: String,
         visible: Boolean
     },
     setup(props, ctx) {
+        const filter = useReportFilter()
         const deleteMsg: Ref<string> = computed(() => {
             const url = props.itemUrl
-            return props.mergeDate
-                ? computeRangeConfirmText(url, props.dateRange)
+            return filter.value?.mergeDate
+                ? computeRangeConfirmText(url, filter.value?.dateRange)
                 : computeSingleConfirmText(url, props.itemDate)
         })
-        return () => h(OperationPopupConfirmButton, {
-            buttonIcon: Delete,
-            buttonType: "danger",
-            buttonText: deleteButtonText,
-            confirmText: deleteMsg.value,
-            visible: props.visible,
-            onConfirm: () => ctx.emit("confirm"),
-        })
+        return () => <PopupConfirmButton
+            buttonIcon={Delete}
+            buttonType="danger"
+            buttonText={deleteButtonText}
+            confirmText={deleteMsg.value}
+            visible={props.visible}
+            onConfirm={() => ctx.emit("confirm")}
+        />
     }
 })
 
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/index.tsx b/src/app/components/Report/ReportTable/index.tsx
new file mode 100644
index 00000000..46e0ef53
--- /dev/null
+++ b/src/app/components/Report/ReportTable/index.tsx
@@ -0,0 +1,63 @@
+/**
+ * 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, 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/TimeColumn"
+import OperationColumn from "./columns/OperationColumn"
+import { useReportFilter } from "../context"
+
+export type TableInstance = {
+    getSelected(): timer.stat.Row[]
+}
+
+const _default = defineComponent({
+    props: {
+        data: Array as PropType<timer.stat.Row[]>,
+        defaultSort: Object as PropType<SortInfo>,
+    },
+    emits: {
+        sortChange: (_newSortInfo: SortInfo) => true,
+        aliasChange: (_host: string, _newAlias: string) => true,
+        itemDelete: (_row: timer.stat.Row) => true,
+    },
+    setup(props, ctx) {
+        const filterOption = useReportFilter()
+        let selectedRows: timer.stat.Row[] = []
+        const instance: TableInstance = { getSelected: () => selectedRows }
+        ctx.expose(instance)
+        return () => (
+            <ElTable
+                data={props.data}
+                border
+                size="small"
+                defaultSort={props.defaultSort}
+                style={{ width: "100%" }}
+                fit
+                highlightCurrentRow
+                onSelection-change={(data: timer.stat.Row[]) => selectedRows = data}
+                onSort-change={(newSortInfo: SortInfo) => ctx.emit("sortChange", newSortInfo)}
+            >
+                <ElTableColumn type="selection" selectable={() => !filterOption.value?.mergeHost} />
+                {!filterOption.value?.mergeDate && <DateColumn />}
+                <HostColumn />
+                <AliasColumn onAliasChange={(host, newAlias) => ctx.emit("aliasChange", host, newAlias)} />
+                <FocusColumn />
+                <TimeColumn />
+                <OperationColumn onDelete={row => ctx.emit("itemDelete", row)} />
+            </ElTable>
+        )
+    }
+})
+
+export default _default
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/file-export.ts b/src/app/components/Report/file-export.ts
similarity index 100%
rename from src/app/components/report/file-export.ts
rename to src/app/components/Report/file-export.ts
diff --git a/src/app/components/report/index.ts b/src/app/components/Report/index.tsx
similarity index 58%
rename from src/app/components/report/index.ts
rename to src/app/components/Report/index.tsx
index 9e4e0e56..dba8b017 100644
--- a/src/app/components/report/index.ts
+++ 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, h, 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 "./table"
-import ReportFilter from "./filter"
-import Pagination from "../common/pagination"
+import ReportTable, { TableInstance } from "./ReportTable"
+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,100 +183,68 @@ 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 = defineComponent({
-    name: "Report",
-    setup() {
-        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 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 table: Ref<TableInstance> = ref()
-
-        const query = () => queryData(queryParam, data, page, remoteRead)
-        // Query data if window become visible
-        handleWindowVisibleChange(query)
-        // Init first
-        queryWhiteList(whitelist).then(query)
-
-        return () => h(ContentContainer, {}, {
-            filter: () => h(ReportFilter, {
-                host: filterOption.host,
-                dateRange: filterOption.dateRange,
-                mergeDate: filterOption.mergeDate,
-                mergeHost: filterOption.mergeHost,
-                timeFormat: filterOption.timeFormat,
-                onChange: (newFilterOption: ReportFilterOption) => {
-                    copyFilterParam(newFilterOption, filterOption)
-                    query()
-                },
-                onDownload: async (format: FileFormat) => {
-                    const rows = await statService.select(queryParam.value, true)
-                    format === 'json' && exportJson(filterOption, rows)
-                    format === 'csv' && exportCsv(filterOption, rows)
-                },
-                onBatchDelete: (filterOption: ReportFilterOption) => handleBatchDelete(table, filterOption, query),
-                onRemoteChange(newRemoteChange) {
-                    remoteRead.value = newRemoteChange
-                    query()
-                },
-            }),
-            content: () => [
-                h(ReportTable, {
-                    whitelist: whitelist.value,
-                    mergeDate: filterOption.mergeDate,
-                    mergeHost: filterOption.mergeHost,
-                    timeFormat: filterOption.timeFormat,
-                    dateRange: filterOption.dateRange,
-                    readRemote: remoteRead.value,
-                    data: data.value,
-                    defaultSort: sort,
-                    ref: table,
-                    onSortChange: ((sortInfo: SortInfo) => {
-                        sort.order = sortInfo.order
-                        sort.prop = sortInfo.prop
-                        query()
-                    }),
-                    onItemDelete: (_deleted: timer.stat.Row) => query(),
-                    onWhitelistChange: (_host: string, _addOrRemove: boolean) => queryWhiteList(whitelist),
-                    onAliasChange: (host: string, newAlias: string) => handleAliasChange({ host, merged: filterOption.mergeHost }, newAlias, data)
-                }),
-                h(Pagination, {
-                    total: page.total,
-                    size: page.size,
-                    num: page.num,
-                    onNumChange(newNum: number) {
-                        page.num = newNum
-                        query()
-                    },
-                    onSizeChange(newSize: number) {
-                        page.size = newSize
-                        query()
-                    }
-                })
-            ]
-        })
-    }
+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: Ref<ReportFilterOption> = ref(initialFilterParam)
+    initProvider(filterOption)
+    const sort: Ref<SortInfo> = ref(initialSort)
+
+    const data: Ref<timer.stat.Row[]> = ref([])
+
+    const page: UnwrapRef<timer.common.Pagination> = reactive({ size: 10, num: 1, total: 0 })
+    const queryParam: ComputedRef<StatQueryParam> = computed(() => computeTimerQueryParam(filterOption.value, sort.value))
+    const table: Ref<TableInstance> = ref()
+
+    const query = () => queryData(queryParam, data, page)
+    // Query data if window become visible
+    handleWindowVisibleChange(query)
+
+    watch([filterOption, sort, () => page.num, () => page.size], query)
+
+    const renderFilter = () => <ReportFilter
+        initial={filterOption.value}
+        onChange={newVal => filterOption.value = newVal}
+        onDownload={async format => {
+            const rows = await statService.select(queryParam.value, true)
+            format === 'json' && exportJson(filterOption.value, rows)
+            format === 'csv' && exportCsv(filterOption.value, rows)
+        }}
+        onBatchDelete={filterOption => handleBatchDelete(table, filterOption, query)}
+    />
+
+    const renderContent = () => <>
+        <ReportTable
+            data={data.value}
+            defaultSort={sort.value}
+            ref={table}
+            onSortChange={newVal => sort.value = newVal}
+            onItemDelete={query}
+            onAliasChange={(host, newAlias) => handleAliasChange({ host, merged: filterOption.value?.mergeHost }, newAlias, data)}
+        />
+        <Pagination
+            defaultValue={[DEFAULT_PAGINATION.num, DEFAULT_PAGINATION.size]}
+            total={page.total}
+            onChange={(currentPage, pageSize) => {
+                page.num = currentPage
+                page.size = pageSize
+            }}
+        />
+    </>
+
+    return () => <ContentContainer v-slots={{
+        filter: renderFilter,
+        content: renderContent,
+    }} />
 })
 
 export default _default
diff --git a/src/app/components/report/report.d.ts b/src/app/components/Report/report.d.ts
similarity index 96%
rename from src/app/components/report/report.d.ts
rename to 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/report/styles/element.sass b/src/app/components/Report/styles/element.sass
similarity index 100%
rename from src/app/components/report/styles/element.sass
rename to src/app/components/Report/styles/element.sass
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/I18nNode.tsx b/src/app/components/common/I18nNode.tsx
new file mode 100644
index 00000000..34543ddd
--- /dev/null
+++ b/src/app/components/common/I18nNode.tsx
@@ -0,0 +1,21 @@
+import { I18nKey, tN } from "@app/locale"
+import { PropType, VNode, defineComponent } from "vue"
+
+const _default = defineComponent({
+    props: {
+        path: {
+            type: Function as PropType<I18nKey>,
+            required: true,
+        },
+        param: Object as PropType<Record<string, string | VNode | number>>,
+    },
+    setup: props => {
+        return () => <>
+            {
+                ...tN(props.path, props.param)
+            }
+        </>
+    }
+})
+
+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/dashboard/components/indicator/header-icon.ts b/src/app/components/dashboard/components/indicator/header-icon.ts
deleted file mode 100644
index 10ff81ca..00000000
--- a/src/app/components/dashboard/components/indicator/header-icon.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { Sunrise } from "@element-plus/icons-vue"
-import { ElIcon } from "element-plus"
-import { defineComponent, h } from "vue"
-
-const _default = defineComponent({
-    name: "IndicatorHeaderIcon",
-    setup() {
-        return () => h('div', {
-            class: 'indicator-icon-header'
-        }, h(ElIcon, {}, () => h(Sunrise)))
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/index.ts b/src/app/components/dashboard/index.ts
deleted file mode 100644
index 47e7cb70..00000000
--- a/src/app/components/dashboard/index.ts
+++ /dev/null
@@ -1,29 +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 ContentContainer from "@app/components/common/content-container"
-import DashboardRow1 from './row1'
-import DashboardRow2 from './row2'
-import DashboardRow3 from './row3'
-import "./style"
-import { isTranslatingLocale, locale } from "@i18n"
-
-const _default = defineComponent({
-    name: 'Dashboard',
-    render: () => h(ContentContainer, {}, () => {
-        const nodes = [
-            h(DashboardRow1),
-            h(DashboardRow2),
-        ]
-        // Only shows for translating languages' speakers in English
-        locale === 'en' && isTranslatingLocale() && nodes.push(h(DashboardRow3))
-        return nodes
-    })
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/row1.ts b/src/app/components/dashboard/row1.ts
deleted file mode 100644
index 29613a19..00000000
--- a/src/app/components/dashboard/row1.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElRow } from "element-plus"
-import { defineComponent, h } from "vue"
-import DashboardCard from './card'
-import Indicator from './components/indicator'
-import WeekOnWeek from './components/week-on-week'
-import TopKVisit from './components/top-k-visit'
-
-const _default = defineComponent({
-    name: "DashboardRow1",
-    render: () => h(ElRow, {
-        gutter: 20,
-        style: { height: '300px' }
-    }, () => [
-        h(DashboardCard, {
-            span: 4
-        }, () => h(Indicator)),
-        h(DashboardCard, {
-            span: 12
-        }, () => h(WeekOnWeek)),
-        h(DashboardCard, {
-            span: 8
-        }, () => h(TopKVisit)),
-    ])
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/row2.ts b/src/app/components/dashboard/row2.ts
deleted file mode 100644
index 91e9648e..00000000
--- a/src/app/components/dashboard/row2.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 { ElRow } from "element-plus"
-import { defineComponent, h } from "vue"
-import DashboardCard from './card'
-import CalendarHeatMap from './components/calendar-heat-map'
-
-
-const _default = defineComponent({
-    name: "DashboardRow1",
-    render: () => h(ElRow, {
-        gutter: 40,
-        style: { height: '280px' }
-    }, () => h(DashboardCard, {
-        span: 24
-    }, () => h(CalendarHeatMap)))
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/row3.ts b/src/app/components/dashboard/row3.ts
deleted file mode 100644
index 8402b4ff..00000000
--- a/src/app/components/dashboard/row3.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElRow } from "element-plus"
-import { defineComponent, h } from "vue"
-import { useRouter } from "vue-router"
-
-// Only shows in English
-const ALERT_TEXT = '💡 Help us translate this extension/addon into your native language!'
-
-const _default = defineComponent({
-    name: "DashboardRow3",
-    setup() {
-        const router = useRouter()
-        return () => h(ElRow, {
-            gutter: 40,
-        }, () => h('span', {
-            onClick: () => router.push({ path: '/other/help' }),
-            class: 'help-us-link'
-        }, ALERT_TEXT))
-    }
-})
-
-export default _default
\ No newline at end of file
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/limit/filter.ts b/src/app/components/limit/filter.ts
deleted file mode 100644
index bde063e1..00000000
--- a/src/app/components/limit/filter.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { Operation, Plus, SetUp } from "@element-plus/icons-vue"
-import { Ref, h, defineComponent, ref } from "vue"
-import InputFilterItem from "@app/components/common/input-filter-item"
-import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import ButtonFilterItem from "@app/components/common/button-filter-item"
-import { t } from "@app/locale"
-import { getAppPageUrl } from "@util/constant/url"
-import { OPTION_ROUTE } from "@app/router/constants"
-import { createTabAfterCurrent } from "@api/chrome/tab"
-
-const urlPlaceholder = t(msg => msg.limit.conditionFilter)
-const onlyEnabledLabel = t(msg => msg.limit.filterDisabled)
-const addButtonText = t(msg => msg.button.create)
-const testButtonText = t(msg => msg.limit.button.test)
-const optionButtonText = t(msg => msg.limit.button.option)
-const optionPageUrl = getAppPageUrl(false, OPTION_ROUTE, { i: 'dailyLimit' })
-
-const emits = {
-    create: () => true,
-    change: (_option: LimitFilterOption) => true,
-    test: () => true,
-}
-
-const _default = defineComponent({
-    name: "LimitFilter",
-    props: {
-        url: String,
-        onlyEnabled: Boolean
-    },
-    emits,
-    setup(props, ctx) {
-        const url: Ref<string> = ref(props.url)
-        const onlyEnabled: Ref<boolean> = ref(props.onlyEnabled)
-        const handleChange = () => ctx.emit("change", {
-            url: url.value,
-            onlyEnabled: onlyEnabled.value
-        })
-        return () => [
-            h(InputFilterItem, {
-                defaultValue: props.url,
-                placeholder: urlPlaceholder,
-                onSearch(searchVal: string) {
-                    url.value = searchVal
-                    handleChange()
-                },
-            }),
-            h(SwitchFilterItem, {
-                historyName: 'onlyEnabled',
-                label: onlyEnabledLabel,
-                defaultValue: onlyEnabled.value,
-                onChange(newVal: boolean) {
-                    onlyEnabled.value = newVal
-                    handleChange()
-                }
-            }),
-            h(ButtonFilterItem, {
-                text: testButtonText,
-                type: 'primary',
-                icon: Operation,
-                onClick: () => ctx.emit('test')
-            }),
-            h(ButtonFilterItem, {
-                text: optionButtonText,
-                icon: SetUp,
-                type: 'primary',
-                onClick: () => createTabAfterCurrent(optionPageUrl)
-            }),
-            h(ButtonFilterItem, {
-                text: addButtonText,
-                type: "success",
-                icon: Plus,
-                onClick: () => ctx.emit("create")
-            })
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/index.ts b/src/app/components/limit/index.ts
deleted file mode 100644
index 6a1804d5..00000000
--- a/src/app/components/limit/index.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { defineComponent, h, ref, Ref } from "vue"
-import ContentContainer from "../common/content-container"
-import LimitFilter from "./filter"
-import LimitTable from "./table"
-import LimitModify, { ModifyInstance } from "./modify"
-import LimitTest, { TestInstance } from "./test"
-import limitService from "@service/limit-service"
-import { useRoute, useRouter } from "vue-router"
-import { t } from "@app/locale"
-import { ElMessage } from "element-plus"
-import { handleWindowVisibleChange } from "@util/window"
-
-const initialUrl = () => {
-    // Init with url parameter
-    const urlParam = useRoute().query['url'] as string
-    useRouter().replace({ query: {} })
-    return urlParam ? decodeURIComponent(urlParam) : ''
-}
-
-const _default = defineComponent(() => {
-    const url: Ref<string> = ref(initialUrl())
-    const onlyEnabled: Ref<boolean> = ref(false)
-    const data: Ref<timer.limit.Item[]> = ref([])
-    // Init and query
-    const queryData = async () => {
-        const list = await limitService.select({ filterDisabled: onlyEnabled.value, url: url.value || '' })
-        data.value = list
-    }
-    queryData()
-    // Query data if the window become visible
-    handleWindowVisibleChange(queryData)
-
-    const modify: Ref<ModifyInstance> = ref()
-    const test: Ref<TestInstance> = ref()
-
-    return () => h(ContentContainer, {}, {
-        filter: () => h(LimitFilter, {
-            url: url.value,
-            onlyEnabled: onlyEnabled.value,
-            onChange(option: LimitFilterOption) {
-                url.value = option.url
-                onlyEnabled.value = option.onlyEnabled
-                queryData()
-            },
-            onCreate: () => modify.value?.create?.(),
-            onTest: () => test.value?.show?.(),
-        }),
-        content: () => [
-            h(LimitTable, {
-                data: data.value,
-                onDelayChange: (row: timer.limit.Item) => limitService.updateDelay(row),
-                onEnabledChange: (row: timer.limit.Item) => limitService.updateEnabled(row),
-                async onDelete(row: timer.limit.Item) {
-                    await limitService.remove(row)
-                    ElMessage.success(t(msg => msg.limit.message.deleted))
-                    queryData()
-                },
-                async onModify(row: timer.limit.Item) {
-                    modify.value?.modify?.(row)
-                }
-            }),
-            h(LimitModify, {
-                ref: modify,
-                onSave: queryData
-            }),
-            h(LimitTest, {
-                ref: test
-            }),
-        ]
-    })
-})
-
-export default _default
diff --git a/src/app/components/limit/modify/sop/period.ts b/src/app/components/limit/modify/sop/period.ts
deleted file mode 100644
index b62acb87..00000000
--- a/src/app/components/limit/modify/sop/period.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { Check, Close, Plus } from "@element-plus/icons-vue"
-import { ElButton, ElFormItem, ElTag, ElTimePicker } from "element-plus"
-import { PropType, defineComponent, h, reactive, ref } from "vue"
-import { checkImpact, mergePeriod, period2Str } from "@util/limit"
-
-const date2Idx = (date: Date): number => {
-    const hour = date.getHours()
-    const min = date.getMinutes()
-    return hour * 60 + min
-}
-
-const range2Period = (range: [Date, Date]): [number, number] => {
-    const start = range?.[0]
-    const end = range?.[1]
-    if (start === undefined || end === undefined) {
-        return undefined
-    }
-    const startIdx = date2Idx(start)
-    const endIdx = date2Idx(end)
-    return [Math.min(startIdx, endIdx), Math.max(startIdx, endIdx)]
-}
-
-const PeriodInput = defineComponent({
-    emits: {
-        close: () => true,
-        save: (_p: timer.limit.Period) => true,
-    },
-    setup(_, ctx) {
-        const range = ref<[Date, Date]>()
-        const handleSave = () => {
-            const val = range2Period(range.value)
-            val && ctx.emit("save", val)
-        }
-        return () => h('div', { class: "limit-period-input" }, [
-            h(ElTimePicker, {
-                modelValue: range.value,
-                "onUpdate:modelValue": newVal => range.value = newVal,
-                popperClass: "limit-period-time-picker-popper",
-                isRange: true,
-                rangeSeparator: '-',
-                format: "HH:mm",
-                clearable: false,
-            }),
-            h(ElButton, {
-                icon: Close,
-                onClick: () => ctx.emit("close"),
-            }),
-            h(ElButton, {
-                icon: Check,
-                onClick: handleSave,
-            }),
-        ])
-    }
-})
-
-const insertPeriods = (periods: timer.limit.Period[], toInsert: timer.limit.Period) => {
-    if (!toInsert || !periods) return
-    let len = periods.length
-    if (!len) {
-        periods.push(toInsert)
-        return
-    }
-    for (let i = 0; i < len; i++) {
-        const pre = periods[i]
-        const next = periods[i + 1]
-        if (checkImpact(pre, toInsert)) {
-            mergePeriod(pre, toInsert)
-            if (checkImpact(pre, next)) {
-                mergePeriod(pre, next)
-                periods.splice(i + 1, 1)
-            }
-            return
-        }
-        if (checkImpact(toInsert, next)) {
-            mergePeriod(next, toInsert)
-            return
-        }
-    }
-    // Append
-    periods.push(toInsert)
-    periods.sort((a, b) => a[0] - b[0])
-}
-
-const _default = defineComponent({
-    props: {
-        modelValue: Array as PropType<timer.limit.Period[]>
-    },
-    setup({ modelValue }) {
-        const periods = reactive(modelValue || [])
-        const periodEditing = ref(false)
-
-        return () => h(ElFormItem, {
-            label: t(msg => msg.limit.item.period),
-        }, () => h('div', { class: "period-form-item-container" }, [
-            ...periods?.map((p, index) => h(ElTag, {
-                closable: true,
-                size: "small",
-                onClose: () => periods.splice(index, 1)
-            }, () => period2Str(p))),
-            periodEditing.value
-                ? h(PeriodInput, {
-                    onClose: () => periodEditing.value = false,
-                    onSave: p => {
-                        console.log(p)
-                        insertPeriods(periods, p)
-                        periodEditing.value = false
-                    },
-                })
-                : h(ElButton, {
-                    icon: Plus,
-                    size: "small",
-                    onClick: () => periodEditing.value = true,
-                }, () => t(msg => msg.button.create)),
-        ]))
-    },
-})
-
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/modify/sop/step1.ts b/src/app/components/limit/modify/sop/step1.ts
deleted file mode 100644
index 8c74c6c3..00000000
--- a/src/app/components/limit/modify/sop/step1.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t } from "@app/locale"
-import { Close, Right } from "@element-plus/icons-vue"
-import { ElButton, ElForm, ElMessage } from "element-plus"
-import { Ref, defineComponent, h, ref, watch } from "vue"
-import { Protocol, parseUrl } from "./common"
-import LimitUrlFormItem from "./url"
-import LimitPathEdit, { PathEditInstance } from "./path-edit"
-
-const _default = defineComponent({
-    props: {
-        defaultValue: {
-            type: String,
-            required: true,
-        },
-        disabled: Boolean,
-    },
-    emits: {
-        cancel: () => true,
-        next: (_cond: string) => true,
-    },
-    setup({ disabled, defaultValue }, ctx) {
-        const { protocol, url } = parseUrl(defaultValue)
-        const protocalRef: Ref<Protocol> = ref(protocol)
-        const pathEditRef: Ref<PathEditInstance> = ref()
-        const urlRef: Ref<string> = ref(url)
-
-        watch(() => defaultValue, () => {
-            const { protocol, url } = parseUrl(defaultValue)
-            protocalRef.value = protocol
-            urlRef.value = url
-        })
-
-        const handleNext = () => {
-            let cond = defaultValue
-            if (!disabled) {
-                const url = urlRef.value?.trim?.()
-                if (!url) {
-                    return ElMessage.error(t(msg => msg.limit.message.noUrl))
-                }
-                const protocol = protocalRef.value
-                cond = url ? protocol + url : ''
-            }
-            ctx.emit("next", cond)
-        }
-
-        return () => {
-            const items = [
-                h(ElForm,
-                    { labelWidth: 180, labelPosition: "left" },
-                    () => h(LimitUrlFormItem, {
-                        url: urlRef.value,
-                        protocol: protocalRef.value,
-                        disabled: disabled,
-                        onUrlChange: (newUrl: string) => {
-                            urlRef.value = newUrl
-                            pathEditRef.value?.updateUrl?.(newUrl)
-                        },
-                        onProtocolChange: (newProtocol: Protocol) => protocalRef.value = newProtocol,
-                    }),
-                ),
-            ]
-
-            !disabled && items.push(h(LimitPathEdit, {
-                ref: pathEditRef,
-                url: urlRef.value,
-                onUrlChange: (newVal: string) => urlRef.value = newVal
-            }))
-            items.push(
-                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,
-                        onClick: handleNext,
-                    }, () => t(msg => msg.button.next)),
-                ])
-            )
-            return items
-        }
-    }
-})
-
-export default _default
diff --git a/src/app/components/limit/table/column/cond.ts b/src/app/components/limit/table/column/cond.ts
deleted file mode 100644
index 6a4eb5e5..00000000
--- a/src/app/components/limit/table/column/cond.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2021 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"
-import { t } from "@app/locale"
-
-const label = t(msg => msg.limit.item.condition)
-const _default = defineComponent({
-    name: "LimitCondColumn",
-    render: () => h(ElTableColumn, {
-        prop: 'cond',
-        label,
-        minWidth: 250,
-        align: 'center',
-    }, {
-        default: ({ row }: { row: timer.limit.Item }) => h('span', row.cond)
-    })
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/delay.ts b/src/app/components/limit/table/column/delay.ts
deleted file mode 100644
index a12b7bf2..00000000
--- a/src/app/components/limit/table/column/delay.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { InfoFilled } from "@element-plus/icons-vue"
-import { ElIcon, ElSwitch, ElTableColumn, ElTooltip } from "element-plus"
-import { defineComponent, h, toRaw } from "vue"
-import { t } from "@app/locale"
-import { judgeVerificationRequired, processVerification } from "./common"
-import optionService from "@service/option-service"
-
-const label = t(msg => msg.limit.item.delayAllowed)
-const tooltip = t(msg => msg.limit.item.delayAllowedInfo)
-
-async function handleChange(row: timer.limit.Item, newVal: boolean, callback: () => void) {
-    let promise: Promise<void> = null
-    if (newVal && await judgeVerificationRequired(row)) {
-        // Open delay for limited rules, so verification is required
-        const option = await optionService.getAllOption()
-        promise = processVerification(option)
-    }
-    promise
-        ? promise.then(callback).catch(() => { })
-        : callback()
-}
-
-const _default = defineComponent({
-    name: "LimitDelayColumn",
-    emits: {
-        rowChange: (_row: timer.limit.Rule, _val: boolean) => true,
-    },
-    setup(_, ctx) {
-        return () => h(ElTableColumn, {
-            prop: 'delayClosed',
-            minWidth: 80,
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.limit.Item }) => h(ElSwitch, {
-                modelValue: row.allowDelay,
-                onChange: (val: boolean) => handleChange(row, val, () => {
-                    row.allowDelay = val
-                    ctx.emit("rowChange", toRaw(row), val)
-                })
-            }),
-            header: () => h('div', [
-                label,
-                ' ',
-                h(ElTooltip, {
-                    content: tooltip,
-                    placement: 'top'
-                }, {
-                    default: () => h(ElIcon, { size: 14, style: { paddingLeft: '4px' } }, () => h(InfoFilled))
-                })
-            ])
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/enabled.ts b/src/app/components/limit/table/column/enabled.ts
deleted file mode 100644
index ac7939bc..00000000
--- a/src/app/components/limit/table/column/enabled.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElSwitch, ElTableColumn } from "element-plus"
-import { defineComponent, h, toRaw } from "vue"
-import { t } from "@app/locale"
-import { judgeVerificationRequired, processVerification } from "./common"
-import optionService from "@service/option-service"
-
-const label = t(msg => msg.limit.item.enabled)
-
-async function handleChange(row: timer.limit.Item, newVal: boolean, callback: () => void) {
-    let promise: Promise<void> = null
-    if (!newVal && await judgeVerificationRequired(row)) {
-        // Disable limited rules, so verification is required
-        const option = await optionService.getAllOption()
-        promise = processVerification(option)
-    }
-    promise
-        ? promise.then(callback).catch(() => { })
-        : callback()
-}
-
-const _default = defineComponent({
-    name: "LimitEnabledColumn",
-    emits: {
-        rowChange: (_row: timer.limit.Item, _val: boolean) => true
-    },
-    setup(_, ctx) {
-        return () => h(ElTableColumn, {
-            prop: 'enabled',
-            label,
-            minWidth: 80,
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.limit.Item }) => h(ElSwitch, {
-                modelValue: row.enabled,
-                onChange: (val: boolean) => handleChange(row, val, () => {
-                    row.enabled = val
-                    ctx.emit("rowChange", toRaw(row), val)
-                })
-            })
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/operation.ts b/src/app/components/limit/table/column/operation.ts
deleted file mode 100644
index 99b7457d..00000000
--- a/src/app/components/limit/table/column/operation.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { Delete, Edit } from "@element-plus/icons-vue"
-import { ElButton, ElMessageBox, ElTableColumn } from "element-plus"
-import { defineComponent, h } from "vue"
-import { t } from "@app/locale"
-import optionService from "@service/option-service"
-import { judgeVerificationRequired, processVerification } from "./common"
-import { locale } from "@i18n"
-
-const label = t(msg => msg.limit.item.operation)
-const deleteButtonText = t(msg => msg.button.delete)
-const modifyButtonText = t(msg => msg.button.modify)
-
-async function handleDelete(row: timer.limit.Item, callback: () => void) {
-    let promise = undefined
-    if (await judgeVerificationRequired(row)) {
-        const option = await optionService.getAllOption() as timer.option.DailyLimitOption
-        promise = processVerification(option)
-    }
-    if (!promise) {
-        const message = t(msg => msg.limit.message.deleteConfirm, { cond: row.cond })
-        promise = ElMessageBox.confirm(message, { type: 'warning' })
-    }
-    promise.then(callback).catch(() => { /** Do nothing */ })
-}
-
-async function handleModify(row: timer.limit.Item, callback: () => void) {
-    let promise: Promise<void> = undefined
-    if (await judgeVerificationRequired(row)) {
-        const option = await optionService.getAllOption() as timer.option.DailyLimitOption
-        promise = processVerification(option)
-        promise
-            ? promise.then(callback).catch(() => { })
-            : callback()
-    } else {
-        callback()
-    }
-}
-
-const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
-    en: 220,
-    zh_CN: 200,
-    ja: 200,
-    zh_TW: 200,
-    pt_PT: 250,
-    uk: 260,
-}
-
-const _default = defineComponent({
-    emits: {
-        rowDelete: (_row: timer.limit.Item, _cond: string) => true,
-        rowModify: (_row: timer.limit.Item) => true,
-    },
-    setup(_props, ctx) {
-        return () => h(ElTableColumn, {
-            prop: 'operations',
-            label,
-            width: LOCALE_WIDTH[locale],
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.limit.Item }) => [
-                h(ElButton, {
-                    type: 'danger',
-                    size: 'small',
-                    icon: Delete,
-                    onClick: () => handleDelete(row, () => ctx.emit("rowDelete", row, row.cond))
-                }, () => deleteButtonText),
-                h(ElButton, {
-                    type: 'primary',
-                    size: 'small',
-                    icon: Edit,
-                    onClick: () => handleModify(row, () => ctx.emit('rowModify', row)),
-                }, () => modifyButtonText)
-            ]
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/period.ts b/src/app/components/limit/table/column/period.ts
deleted file mode 100644
index 0cd1e4df..00000000
--- a/src/app/components/limit/table/column/period.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023 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"
-import { t } from "@app/locale"
-import { period2Str } from "@util/limit"
-
-const label = t(msg => msg.limit.item.period)
-
-const SPAN_STYLE: Partial<CSSStyleDeclaration> = {
-    display: "block"
-}
-
-const _default = defineComponent({
-    setup() {
-        return () => h(ElTableColumn, {
-            label,
-            align: "center",
-            minWidth: 100,
-        }, {
-            default: ({ row }: { row: timer.limit.Item }) => {
-                const periods = row?.periods
-                if (!periods?.length) return "-"
-                const tags = periods.map(p => h("span", { style: SPAN_STYLE }, period2Str(p)))
-                return h('div', {}, tags)
-            }
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/time.ts b/src/app/components/limit/table/column/time.ts
deleted file mode 100644
index a42a076e..00000000
--- a/src/app/components/limit/table/column/time.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2021 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"
-import { formatPeriodCommon } from "@util/time"
-import { t } from "@app/locale"
-
-const label = t(msg => msg.limit.item.time)
-
-const _default = defineComponent({
-    name: "LimitTimeColumn",
-    render: () => h(ElTableColumn, {
-        prop: 'limit',
-        label,
-        minWidth: 90,
-        align: 'center',
-    }, {
-        default: ({ row }: { row: timer.limit.Item }) => row?.time ? h('span', formatPeriodCommon(row.time * 1000)) : '-'
-    })
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/visit.ts b/src/app/components/limit/table/column/visit.ts
deleted file mode 100644
index 3389d824..00000000
--- a/src/app/components/limit/table/column/visit.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2023 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"
-import { formatPeriodCommon } from "@util/time"
-import { t } from "@app/locale"
-
-const label = t(msg => msg.limit.item.visitTime)
-
-const _default = defineComponent({
-    render: () => h(ElTableColumn, {
-        label,
-        minWidth: 90,
-        align: 'center',
-    }, {
-        default: ({ row }: { row: timer.limit.Item }) => {
-            const visitTime = row?.visitTime
-            return visitTime ? h('span', formatPeriodCommon(row.visitTime * 1000)) : '-'
-        }
-    })
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/column/waste.ts b/src/app/components/limit/table/column/waste.ts
deleted file mode 100644
index 44f51542..00000000
--- a/src/app/components/limit/table/column/waste.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2021 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"
-import { formatPeriodCommon } from "@util/time"
-import { t } from "@app/locale"
-
-const label = t(msg => msg.limit.item.waste)
-const _default = defineComponent({
-    name: "LimitWasteColumn",
-    render: () => h(ElTableColumn, {
-        prop: 'waste',
-        label,
-        minWidth: 90,
-        align: 'center',
-    }, {
-        default: ({ row }: { row: timer.limit.Item }) => h('span', formatPeriodCommon(row.waste))
-    })
-}
-)
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/limit/table/index.ts b/src/app/components/limit/table/index.ts
deleted file mode 100644
index d1ee945b..00000000
--- a/src/app/components/limit/table/index.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElTable } from "element-plus"
-import { defineComponent, h, PropType } from "vue"
-import LimitCondColumn from "./column/cond"
-import LimitTimeColumn from "./column/time"
-import LimitWasteColumn from "./column/waste"
-import LimitDelayColumn from "./column/delay"
-import LimitEnabledColumn from "./column/enabled"
-import LimitOperationColumn from "./column/operation"
-import LimitVisitTimeColumn from "./column/visit"
-import LimitPeriodColumn from "./column/period"
-
-const _default = defineComponent({
-    props: {
-        data: Array as PropType<timer.limit.Item[]>
-    },
-    emits: {
-        delayChange: (_row: timer.limit.Item) => true,
-        enabledChange: (_row: timer.limit.Item) => true,
-        delete: (_row: timer.limit.Item) => true,
-        modify: (_row: timer.limit.Item) => true,
-    },
-    setup(props, ctx) {
-        return () => h(ElTable, {
-            border: true,
-            size: 'small',
-            style: { width: '100%' },
-            highlightCurrentRow: true,
-            fit: true,
-            data: props.data
-        }, () => [
-            h(LimitCondColumn),
-            h(LimitTimeColumn),
-            h(LimitWasteColumn),
-            h(LimitVisitTimeColumn),
-            h(LimitPeriodColumn),
-            h(LimitDelayColumn, {
-                onRowChange: (row: timer.limit.Item) => ctx.emit("delayChange", row)
-            }),
-            h(LimitEnabledColumn, {
-                onRowChange: (row: timer.limit.Item) => ctx.emit("enabledChange", row)
-            }),
-            h(LimitOperationColumn, {
-                onRowDelete: (row: timer.limit.Item) => ctx.emit("delete", row),
-                onRowModify: (row: timer.limit.Item) => ctx.emit("modify", row),
-            })
-        ])
-    }
-})
-
-export default _default
-
diff --git a/src/app/components/limit/test.ts b/src/app/components/limit/test.ts
deleted file mode 100644
index c2e7fa72..00000000
--- a/src/app/components/limit/test.ts
+++ /dev/null
@@ -1,107 +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 limitService from "@service/limit-service"
-import { ElAlert, AlertProps, ElButton, ElDialog, ElFormItem, ElInput } from "element-plus"
-import { defineComponent, Ref, ref, h, ComputedRef, computed } from "vue"
-
-export type TestInstance = {
-    show(): void
-}
-
-async function handleTest(url: string): Promise<string[]> {
-    const items = await limitService.select({ url, filterDisabled: true })
-    return items.map(v => v.cond)
-}
-
-function computeResultTitle(url: string, inputting: boolean, matchedCondition: string[]): string {
-    if (!url) {
-        return t(msg => msg.limit.message.inputTestUrl)
-    }
-    if (inputting) {
-        return t(msg => msg.limit.message.clickTestButton, { buttonText: t(msg => msg.button.test) })
-    }
-    if (!matchedCondition?.length) {
-        return t(msg => msg.limit.message.noRuleMatched)
-    } else {
-        return t(msg => msg.limit.message.rulesMatched)
-    }
-}
-
-function computeResultDesc(url: string, inputting: boolean, matchedCondition: string[]): string[] {
-    if (!url || inputting || !matchedCondition?.length) {
-        return []
-    }
-    return matchedCondition
-}
-
-type _ResultType = AlertProps['type']
-
-function computeResultType(url: string, inputting: boolean, matchedCondition: string[]): _ResultType {
-    if (!url || inputting) {
-        return 'info'
-    }
-    return matchedCondition?.length ? 'success' : 'warning'
-}
-
-const _default = defineComponent({
-    setup(_props, ctx) {
-        const urlRef: Ref<string> = ref()
-        const matchedConditionRef: Ref<string[]> = ref([])
-        const visible: Ref<boolean> = ref(false)
-        const urlInputtingRef: Ref<boolean> = ref(true)
-        const resultTitleRef: ComputedRef<string> = computed(() => computeResultTitle(urlRef.value, urlInputtingRef.value, matchedConditionRef.value))
-        const resultTypeRef: ComputedRef<_ResultType> = computed(() => computeResultType(urlRef.value, urlInputtingRef.value, matchedConditionRef.value))
-        const resultDescRef: ComputedRef<string[]> = computed(() => computeResultDesc(urlRef.value, urlInputtingRef.value, matchedConditionRef.value))
-
-        const changeInput = (newVal: string) => (urlInputtingRef.value = true) && (urlRef.value = newVal?.trim())
-        const test = () => {
-            urlInputtingRef.value = false
-            handleTest(urlRef.value).then(matched => matchedConditionRef.value = matched)
-        }
-
-        const instance: TestInstance = {
-            show() {
-                urlRef.value = ''
-                visible.value = true
-                urlInputtingRef.value = true
-                matchedConditionRef.value = []
-            }
-        }
-        ctx.expose(instance)
-
-        return () => h(ElDialog, {
-            title: t(msg => msg.button.test),
-            modelValue: visible.value,
-            closeOnClickModal: false,
-            onClose: () => visible.value = false
-        }, () => [
-            h(ElFormItem, {
-                label: t(msg => msg.limit.button.test),
-                labelWidth: 120
-            }, () => h(ElInput, {
-                modelValue: urlRef.value,
-                clearable: true,
-                onClear: () => changeInput(''),
-                onKeyup: (event: KeyboardEvent) => event.key === 'Enter' && test(),
-                onInput: (newVal: string) => changeInput(newVal)
-            }, {
-                append: () => h(ElButton, {
-                    onClick: () => test()
-                }, () => t(msg => msg.button.test)),
-            })),
-            h(ElAlert, {
-                closable: false,
-                type: resultTypeRef.value,
-                title: resultTitleRef.value,
-            }, () => resultDescRef.value.map(desc => h('li', desc)))
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/common.ts b/src/app/components/option/common.ts
deleted file mode 100644
index 4318a9c3..00000000
--- a/src/app/components/option/common.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { InfoFilled } from "@element-plus/icons-vue"
-import { ElTag, ElTooltip, ElIcon } from "element-plus"
-import { h, isVNode, VNode } from "vue"
-import { tN, t, I18nKey } from "@app/locale"
-import { OptionMessage } from "@i18n/message/app/option"
-
-/**
- * Render the option item
- * 
- * @param input input of this option, or param map
- * @param label label
- * @param defaultValue default value
- */
-export function renderOptionItem(
-    input: VNode | { [key: string]: VNode },
-    label: (msg: OptionMessage | EmbeddedPartial<OptionMessage>) => string,
-    defaultValue?: string | number
-) {
-    const param = isVNode(input) ? { input } : input
-    const labelArcher = h('a', { class: 'option-label' }, tN(msg => label(msg.option), param))
-    const content = [labelArcher]
-    if (!!defaultValue) {
-        const defaultTag = h(ElTag, { size: 'small' }, () => defaultValue)
-        const defaultArcher = h('a', { class: 'option-default' }, tN(msg => msg.option.defaultValue, { default: defaultTag }))
-        content.push(defaultArcher)
-    }
-    return h('div', { class: 'option-line' }, content)
-}
-
-/**
- * Render text wrapped with tag
- * 
- * @param text text
- */
-export function tagText(text: I18nKey): VNode {
-    return h('a', { class: 'option-tag' }, t(text))
-}
-
-/**
- * Render the tooltip with message
- *
- * @param content content 
- * @since 0.5.0
- */
-export function tooltip(i18nKey: I18nKey): VNode {
-    const content = t(i18nKey)
-    if (!content) {
-        return null
-    }
-    return h(ElTooltip, { content }, {
-        default: () => h(ElIcon, { size: 15 }, () => h(InfoFilled))
-    })
-}
\ No newline at end of file
diff --git a/src/app/components/option/components/appearance/index.ts b/src/app/components/option/components/appearance/index.ts
deleted file mode 100644
index 23946827..00000000
--- a/src/app/components/option/components/appearance/index.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { UnwrapRef } from "vue"
-
-import { ElDivider, ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
-import { defineComponent, reactive, unref, h } from "vue"
-import optionService from "@service/option-service"
-import { defaultAppearance } from "@util/constant/option"
-import DarkModeInput from "./dark-mode-input"
-import { t, tWith } from "@app/locale"
-import { renderOptionItem, tagText } from "../../common"
-import localeMessages from "@i18n/message/common/locale"
-import { ALL_LOCALES, localeSameAsBrowser } from "@i18n"
-import { toggle } from "@util/dark-mode"
-
-const displayWhitelist = (option: UnwrapRef<timer.option.AppearanceOption>) => h(ElSwitch, {
-    modelValue: option.displayWhitelistMenu,
-    onChange: (newVal: boolean) => {
-        option.displayWhitelistMenu = newVal
-        optionService.setAppearanceOption(unref(option))
-    }
-})
-
-const displayBadgeText = (option: UnwrapRef<timer.option.AppearanceOption>) => h(ElSwitch, {
-    modelValue: option.displayBadgeText,
-    onChange: (newVal: boolean) => {
-        option.displayBadgeText = newVal
-        optionService.setAppearanceOption(unref(option))
-    }
-})
-
-const printInConsole = (option: UnwrapRef<timer.option.AppearanceOption>) => h(ElSwitch, {
-    modelValue: option.printInConsole,
-    onChange: (newVal: boolean) => {
-        option.printInConsole = newVal
-        optionService.setAppearanceOption(unref(option))
-    }
-})
-
-const SORTED_LOCALES: timer.Locale[] = ALL_LOCALES
-    // Keep the locale same as this browser first position
-    .sort((a, _b) => a === localeSameAsBrowser ? -1 : 0)
-const allLocaleOptions: timer.option.LocaleOption[] = ["default", ...SORTED_LOCALES]
-
-const locale = (option: UnwrapRef<timer.option.AppearanceOption>) => h(ElSelect, {
-    modelValue: option.locale,
-    size: 'small',
-    style: { width: '120px' },
-    onChange: async (newVal: timer.option.LocaleOption) => {
-        option.locale = newVal
-        await optionService.setAppearanceOption(unref(option))
-        // await maybe not work in Firefox, so calculate the real locale again
-        // GG Firefox
-        const realLocale: timer.Locale = newVal === "default"
-            ? localeSameAsBrowser
-            : newVal
-        ElMessageBox({
-            message: tWith(msg => msg.option.appearance.locale.changeConfirm, realLocale),
-            type: "success",
-            confirmButtonText: t(msg => msg.option.appearance.locale.reloadButton),
-            // Cant close this on press ESC
-            closeOnPressEscape: false,
-            // Cant close this on clicking modal
-            closeOnClickModal: false
-        }).then(() => { location.reload?.() })
-            .catch(() => {/* do nothing */ })
-    }
-}, {
-    default: () => allLocaleOptions.map(
-        locale => h(ElOption, {
-            value: locale, label: locale === "default"
-                ? t(msg => msg.option.appearance.locale.default)
-                : localeMessages[locale].name
-        })
-    )
-})
-
-function copy(target: timer.option.AppearanceOption, source: timer.option.AppearanceOption) {
-    target.displayWhitelistMenu = source.displayWhitelistMenu
-    target.displayBadgeText = source.displayBadgeText
-    target.locale = source.locale
-    target.printInConsole = source.printInConsole
-    target.darkMode = source.darkMode
-    target.darkModeTimeStart = source.darkModeTimeStart
-    target.darkModeTimeEnd = source.darkModeTimeEnd
-}
-
-const _default = defineComponent((_props, ctx) => {
-    const option: UnwrapRef<timer.option.AppearanceOption> = reactive(defaultAppearance())
-    optionService.getAllOption().then(currentVal => copy(option, currentVal))
-    ctx.expose({
-        async reset() {
-            copy(option, defaultAppearance())
-            await optionService.setAppearanceOption(unref(option))
-            toggle(await optionService.isDarkMode(option))
-        }
-    })
-    return () => h('div', [
-        renderOptionItem({
-            input: h(DarkModeInput, {
-                modelValue: option.darkMode,
-                startSecond: option.darkModeTimeStart,
-                endSecond: option.darkModeTimeEnd,
-                onChange: async (darkMode, range) => {
-                    option.darkMode = darkMode
-                    option.darkModeTimeStart = range?.[0]
-                    option.darkModeTimeEnd = range?.[1]
-                    await optionService.setAppearanceOption(unref(option))
-                    toggle(await optionService.isDarkMode())
-                }
-            })
-        },
-            msg => msg.appearance.darkMode.label,
-            t(msg => msg.option.appearance.darkMode.options.default)),
-        h(ElDivider),
-        renderOptionItem({
-            input: locale(option)
-        },
-            msg => msg.appearance.locale.label,
-            t(msg => msg.option.appearance.locale.default)
-        ),
-        h(ElDivider),
-        renderOptionItem({
-            input: displayWhitelist(option),
-            whitelist: tagText(msg => msg.option.appearance.whitelistItem),
-            contextMenu: tagText(msg => msg.option.appearance.contextMenu)
-        }, msg => msg.appearance.displayWhitelist, t(msg => msg.option.yes)),
-        h(ElDivider),
-        renderOptionItem({
-            input: displayBadgeText(option),
-            timeInfo: tagText(msg => msg.option.appearance.badgeTextContent),
-            icon: tagText(msg => msg.option.appearance.icon)
-        }, msg => msg.appearance.displayBadgeText, t(msg => msg.option.yes)),
-        h(ElDivider),
-        renderOptionItem({
-            input: printInConsole(option),
-            console: tagText(msg => msg.option.appearance.printInConsole.console),
-            info: tagText(msg => msg.option.appearance.printInConsole.info)
-        }, msg => msg.appearance.printInConsole.label, t(msg => msg.option.yes)),
-    ])
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/auto-input.ts b/src/app/components/option/components/backup/auto-input.ts
deleted file mode 100644
index 8a92177c..00000000
--- a/src/app/components/option/components/backup/auto-input.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { t, tN } from "@app/locale"
-import { ElInputNumber, ElSwitch } from "element-plus"
-import { defineComponent, ref, watch, h } from "vue"
-import localeMessages from "@i18n/message/common/locale"
-import { locale } from "@i18n"
-
-const _default = defineComponent({
-    name: 'BackUpAutoInput',
-    props: {
-        autoBackup: Boolean,
-        interval: Number
-    },
-    emits: {
-        change: (_autoBackUp: boolean, _interval: number) => true
-    },
-    setup(props, ctx) {
-        const autoBackUp = ref(props.autoBackup)
-        const interval = ref(props.interval)
-        watch(() => props.autoBackup, newVal => autoBackUp.value = newVal)
-        watch(() => props.interval, newVal => interval.value = newVal)
-
-        const handleChange = () => ctx.emit('change', autoBackUp.value, interval.value)
-
-        return () => {
-            const result = [
-                h(ElSwitch, {
-                    modelValue: autoBackUp.value,
-                    onChange: (newVal: boolean) => {
-                        autoBackUp.value = newVal
-                        handleChange()
-                    }
-                }),
-                ' ' + t(msg => msg.option.backup.auto.label),
-            ]
-            autoBackUp.value && result.push(
-                localeMessages[locale].comma || ' ',
-                ...tN(msg => msg.option.backup.auto.interval, {
-                    input: h(ElInputNumber, {
-                        min: 10,
-                        size: 'small',
-                        modelValue: interval.value,
-                        onChange(newVal) {
-                            interval.value = newVal
-                            handleChange()
-                        },
-                    })
-                })
-            )
-            return result
-        }
-    },
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/clear/index.ts b/src/app/components/option/components/backup/clear/index.ts
deleted file mode 100644
index 2a4bb961..00000000
--- a/src/app/components/option/components/backup/clear/index.ts
+++ /dev/null
@@ -1,41 +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 { Delete } from "@element-plus/icons-vue"
-import { ElButton, ElDialog } from "element-plus"
-import { defineComponent, Ref, ref, h } from "vue"
-import Sop from "./sop"
-
-const _default = defineComponent({
-    setup: () => {
-        const dialogVisible: Ref<boolean> = ref(false)
-
-        const close = () => dialogVisible.value = false
-
-        return () => [
-            h(ElButton, {
-                type: 'danger',
-                icon: Delete,
-                style: { marginRight: '12px' },
-                onClick: () => dialogVisible.value = true,
-            }, () => t(msg => msg.option.backup.clear.btn)),
-            dialogVisible.value && h(ElDialog, {
-                alignCenter: true,
-                title: t(msg => msg.option.backup.clear.btn),
-                width: '70%',
-                modelValue: dialogVisible.value,
-                onClose: close,
-            }, () => h(Sop, {
-                onCancel: close,
-                onClear: close,
-            }))
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/clear/sop.ts b/src/app/components/option/components/backup/clear/sop.ts
deleted file mode 100644
index 31dfba48..00000000
--- a/src/app/components/option/components/backup/clear/sop.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { t } from "@app/locale"
-import { ElStep, ElSteps } from "element-plus"
-import { Ref, defineComponent, h, nextTick, ref } from "vue"
-import Step1, { StatResult } from "./step1"
-import Step2 from "./step2"
-
-const _default = defineComponent({
-    emits: {
-        cancel: () => true,
-        clear: () => true,
-    },
-    setup(_, ctx) {
-        const step: Ref<0 | 1> = ref(0)
-        const data: Ref<StatResult> = 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.option.backup.clientTable.selectTip) }),
-                h(ElStep, { title: t(msg => msg.option.backup.download.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,
-                    onClear: () => {
-                        step.value = 0
-                        nextTick(() => ctx.emit('clear'))
-                    },
-                })
-            ),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/clear/step2.ts b/src/app/components/option/components/backup/clear/step2.ts
deleted file mode 100644
index db606f8b..00000000
--- a/src/app/components/option/components/backup/clear/step2.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { t } from "@app/locale"
-import { ElAlert, ElButton, ElMessage } from "element-plus"
-import { PropType, Ref, defineComponent, h, ref } from "vue"
-import { Back, Check } from "@element-plus/icons-vue"
-import { StatResult } from "./step1"
-import processor from "@src/common/backup/processor"
-
-const processClear = async (client: timer.backup.Client): Promise<void> => {
-    const result = await processor.clear(client.id)
-    if (!result.success) {
-        throw new Error(result.errorMsg)
-    }
-}
-
-const _default = defineComponent({
-    props: {
-        data: Object as PropType<StatResult>,
-    },
-    emits: {
-        back: () => true,
-        clear: () => true,
-    },
-    setup(props, ctx) {
-        const deleting: Ref<boolean> = ref(false)
-
-        const handleClear = () => {
-            deleting.value = true
-            processClear(props.data.client)
-                .then(() => {
-                    ElMessage.success(t(msg => msg.operation.successMsg))
-                    ctx.emit('clear')
-                })
-                .catch((e: Error) => ElMessage.warning(e.message || 'Unknown error'))
-                .finally(() => deleting.value = false)
-        }
-
-        return () => [
-            h(ElAlert, {
-                type: 'success',
-                closable: false,
-            }, () => t(msg => msg.option.backup.clear.confirmTip, {
-                ...props.data,
-                clientName: props.data?.client?.name || ''
-            })),
-            h('div', { class: 'sop-footer' }, [
-                h(ElButton, {
-                    type: 'info',
-                    icon: Back,
-                    disabled: deleting.value,
-                    onClick: () => ctx.emit('back'),
-                }, () => t(msg => msg.button.previous)),
-                h(ElButton, {
-                    type: 'success',
-                    icon: Check,
-                    loading: deleting.value,
-                    onClick: handleClear
-                }, () => t(msg => msg.button.confirm)),
-            ]),
-        ]
-    }
-})
-
-export default _default
diff --git a/src/app/components/option/components/backup/client-table.ts b/src/app/components/option/components/backup/client-table.ts
deleted file mode 100644
index 1e45ddfc..00000000
--- a/src/app/components/option/components/backup/client-table.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 { cvt2LocaleTime } from "@app/util/time"
-import metaService from "@service/meta-service"
-import processor from "@src/common/backup/processor"
-import { ElTableRowScope } from "@src/element-ui/table"
-import { ElMessage, ElRadio, ElTable, ElTableColumn, ElTag } from "element-plus"
-import { defineComponent, h, ref, Ref, onMounted, VNode } from "vue"
-
-const formatTime = (value: timer.backup.Client): string => {
-    const { minDate, maxDate } = value || {}
-    const min = minDate ? cvt2LocaleTime(minDate) : ''
-    const max = maxDate ? cvt2LocaleTime(maxDate) : ''
-    return `${min} - ${max}`
-}
-
-const _default = defineComponent({
-    emits: {
-        select: (_: timer.backup.Client) => true,
-    },
-    setup(_, ctx) {
-        const list: Ref<timer.backup.Client[]> = ref([])
-        const loading: Ref<boolean> = ref(false)
-        const selectedCid: Ref<string> = ref()
-        const localCid: Ref<string> = ref()
-
-        onMounted(() => {
-            loading.value = true
-            processor.listClients()
-                .then(res => {
-                    if (res.success) {
-                        list.value = res.data
-                    } else {
-                        throw res.errorMsg
-                    }
-                })
-                .catch(e => ElMessage.error(typeof e === 'string' ? e : (e as Error).message || 'Unknown error...'))
-                .finally(() => loading.value = false)
-            metaService.getCid().then(cid => localCid.value = cid)
-        })
-
-        const handleRowSelect = (row: timer.backup.Client) => {
-            selectedCid.value = row.id
-            ctx.emit("select", row)
-        }
-
-        return () => h(ElTable, {
-            data: list.value,
-            border: true,
-            maxHeight: '40vh',
-            class: 'backup-client-table',
-            highlightCurrentRow: true,
-            "onCurrent-change": (row: timer.backup.Client) => handleRowSelect(row),
-            emptyText: loading.value ? 'Loading data ...' : 'Empting data'
-        }, () => [
-            h(ElTableColumn, {
-                align: "center",
-                width: 50,
-            }, {
-                default: ({ row }: ElTableRowScope<timer.backup.Client>) => h(ElRadio, {
-                    label: row.id,
-                    modelValue: selectedCid.value,
-                    onChange: () => handleRowSelect(row)
-                }, () => '')
-            }),
-            h(ElTableColumn, {
-                label: 'CID',
-                align: "center",
-                headerAlign: "center",
-                formatter: (client: timer.backup.Client) => client.id || '-',
-                width: 320,
-            }),
-            h(ElTableColumn, {
-                label: t(msg => msg.option.backup.client, { input: '' }),
-                align: "center",
-                headerAlign: "center",
-            }, {
-                default: ({ row: client }: ElTableRowScope<timer.backup.Client>) => {
-                    const result: (VNode | string)[] = [client.name || '-']
-                    localCid.value === client?.id && result.push(
-                        h(ElTag, { size: 'small', type: 'danger' }, () => t(msg => msg.option.backup.clientTable.current))
-                    )
-                    return result
-                }
-            }),
-            h(ElTableColumn, {
-                label: t(msg => msg.option.backup.clientTable.dataRange),
-                align: "center",
-                headerAlign: "center",
-                formatter: formatTime
-            }),
-        ])
-    },
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/download/index.ts b/src/app/components/option/components/backup/download/index.ts
deleted file mode 100644
index 3bca8638..00000000
--- a/src/app/components/option/components/backup/download/index.ts
+++ /dev/null
@@ -1,41 +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 { Files } from "@element-plus/icons-vue"
-import { ElButton, ElDialog } from "element-plus"
-import { defineComponent, Ref, ref, h } from "vue"
-import Sop from "./sop"
-
-const _default = defineComponent({
-    setup: () => {
-        const dialogVisible: Ref<boolean> = ref(false)
-
-        const close = () => dialogVisible.value = false
-
-        return () => [
-            h(ElButton, {
-                type: 'primary',
-                icon: Files,
-                style: { marginRight: '12px' },
-                onClick: () => dialogVisible.value = true,
-            }, () => t(msg => msg.option.backup.download.btn)),
-            dialogVisible.value && h(ElDialog, {
-                alignCenter: true,
-                title: t(msg => msg.option.backup.download.btn),
-                width: '70%',
-                modelValue: dialogVisible.value,
-                onClose: close,
-            }, () => h(Sop, {
-                onCancel: close,
-                onDownload: close,
-            }))
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/download/sop.ts b/src/app/components/option/components/backup/download/sop.ts
deleted file mode 100644
index 5d6fd830..00000000
--- a/src/app/components/option/components/backup/download/sop.ts
+++ /dev/null
@@ -1,55 +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,
-        download: () => true,
-    },
-    setup(_, ctx) {
-        const step: Ref<0 | 1> = ref(0)
-        const data: Ref<timer.imported.Data> = ref()
-        const client: Ref<timer.backup.Client> = 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.option.backup.clientTable.selectTip) }),
-                h(ElStep, { title: t(msg => msg.option.backup.download.step2) }),
-            ])),
-            h('div', { class: 'operation-container' }, step.value === 0
-                ? h(Step1, {
-                    onCancel: () => ctx.emit('cancel'),
-                    onNext: (newData, clientVal) => {
-                        data.value = newData
-                        client.value = clientVal
-                        step.value = 1
-                    },
-                })
-                : h(Step2, {
-                    data: data.value,
-                    clientName: client.value?.name,
-                    onBack: () => step.value = 0,
-                    onDownload: () => {
-                        step.value = 0
-                        nextTick(() => ctx.emit('download'))
-                    },
-                })
-            ),
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/backup/index.ts b/src/app/components/option/components/backup/index.ts
deleted file mode 100644
index c8df1fae..00000000
--- a/src/app/components/option/components/backup/index.ts
+++ /dev/null
@@ -1,228 +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 optionService from "@service/option-service"
-import processor from "@src/common/backup/processor"
-import { defaultBackup } from "@util/constant/option"
-import { ElInput, ElOption, ElSelect, ElDivider, ElAlert, ElButton, ElMessage, ElLoading } from "element-plus"
-import { defineComponent, ref, h } from "vue"
-import { renderOptionItem, tooltip } from "../../common"
-import BackUpAutoInput from "./auto-input"
-import Footer from "./footer"
-import { AUTHOR_EMAIL } from "@src/package"
-import { DEFAULT_ENDPOINT } from "@api/obsidian"
-import "./style.sass"
-
-const ALL_TYPES: timer.backup.Type[] = [
-    'none',
-    'gist',
-    'obsidian_local_rest_api',
-]
-
-const AUTH_LABELS: { [t in timer.backup.Type]: string } = {
-    'none': '',
-    'gist': 'Personal Access Token {info} {input}',
-    'obsidian_local_rest_api': 'Authorization {input}'
-}
-
-const TYPE_NAMES: { [t in timer.backup.Type]: string } = {
-    none: t(msg => msg.option.backup.meta.none.label),
-    gist: 'GitHub Gist',
-    obsidian_local_rest_api: "Obsidian - Local REST API",
-}
-
-const typeOptions = () => ALL_TYPES.map(type => h(ElOption, {
-    value: type,
-    label: TYPE_NAMES[type],
-}))
-
-const clientNameInput = (clientName: Ref<string>, handleInput?: Function) => h(ElInput, {
-    modelValue: clientName.value,
-    size: 'small',
-    style: { width: '120px' },
-    placeholder: DEFAULT.clientName,
-    onInput: newVal => {
-        clientName.value = newVal?.trim?.() || ''
-        handleInput?.()
-    }
-})
-
-const authInput = (auth: Ref<string>, handleInput: Function, handleTest: Function) => h(ElInput, {
-    modelValue: auth.value,
-    size: 'small',
-    type: 'password',
-    showPassword: true,
-    style: { width: '400px' },
-    onInput: newVal => {
-        auth.value = newVal?.trim?.() || ''
-        handleInput()
-    }
-}, {
-    append: () => h(ElButton, {
-        onClick: () => handleTest()
-    }, () => t(msg => msg.option.backup.test))
-})
-
-const DEFAULT = defaultBackup()
-
-const _default = defineComponent((_props, ctx) => {
-    const type: Ref<timer.backup.Type> = ref(DEFAULT.backupType)
-    const auth: Ref<string> = ref('')
-    const endpoint: Ref<string> = ref()
-    const path: Ref<string> = ref()
-    const clientName: Ref<string> = ref(DEFAULT.clientName)
-    const autoBackUp: Ref<boolean> = ref(DEFAULT.autoBackUp)
-    const autoBackUpInterval: Ref<number> = ref(DEFAULT.autoBackUpInterval)
-
-    const parseOption = (option: timer.option.BackupOption) => {
-        clientName.value = option.clientName
-        type.value = option.backupType
-        if (type.value) {
-            auth.value = option.backupAuths?.[type.value]
-            const ext = option.backupExts?.[type.value]
-            path.value = ext?.dirPath
-            endpoint.value = ext?.endpoint
-        }
-        autoBackUp.value = option.autoBackUp
-        autoBackUpInterval.value = option.autoBackUpInterval
-    }
-
-    optionService.getAllOption().then(parseOption)
-
-    async function handleChange() {
-        const backupAuths = {}
-        const backupExts: { [type in timer.backup.Type]?: timer.backup.TypeExt } = {}
-        backupAuths[type.value] = auth.value
-        backupExts[type.value] = {
-            dirPath: path.value,
-            endpoint: endpoint.value,
-        }
-        const newOption: timer.option.BackupOption = {
-            backupType: type.value,
-            backupAuths,
-            backupExts,
-            clientName: clientName.value || DEFAULT.clientName,
-            autoBackUp: autoBackUp.value,
-            autoBackUpInterval: autoBackUpInterval.value,
-        }
-        await optionService.setBackupOption(newOption)
-    }
-
-    async function handleTest() {
-        const loading = ElLoading.service({
-            text: "Please wait...."
-        })
-        const { errorMsg } = await processor.checkAuth()
-        loading.close()
-        if (!errorMsg) {
-            ElMessage.success("Valid!")
-        } else {
-            ElMessage.error(errorMsg)
-        }
-    }
-
-    ctx.expose({
-        async reset() {
-            // Only reset type and auto flag
-            type.value = DEFAULT.backupType
-            autoBackUp.value = DEFAULT.autoBackUp
-            handleChange()
-        }
-    })
-
-    return () => {
-        const nodes = [
-            h(ElAlert, {
-                closable: false,
-                type: "warning",
-                description: t(msg => msg.option.backup.alert, { email: AUTHOR_EMAIL })
-            }),
-            h(ElDivider),
-            renderOptionItem({
-                input: h(ElSelect, {
-                    modelValue: type.value,
-                    size: 'small',
-                    async onChange(newType: timer.backup.Type) {
-                        type.value = newType
-                        const option = await optionService.getAllOption()
-                        option.backupType = type.value
-                        await optionService.setBackupOption(option)
-                        parseOption(option)
-                    }
-                }, () => typeOptions())
-            },
-                msg => msg.backup.type,
-                TYPE_NAMES[DEFAULT.backupType],
-            ),
-        ]
-        type.value !== 'none' && nodes.push(
-            h(ElDivider),
-            renderOptionItem({
-                input: h(BackUpAutoInput, {
-                    autoBackup: autoBackUp.value,
-                    interval: autoBackUpInterval.value,
-                    onChange(newAutoBackUp, newInterval) {
-                        autoBackUp.value = newAutoBackUp
-                        autoBackUpInterval.value = newInterval
-                        handleChange()
-                    }
-                })
-            }, _msg => '{input}', t(msg => msg.option.no)),
-        )
-        type.value === 'obsidian_local_rest_api' && nodes.push(
-            h(ElDivider),
-            renderOptionItem({
-                input: h(ElInput, {
-                    placeholder: DEFAULT_ENDPOINT,
-                    modelValue: endpoint.value,
-                    size: "small",
-                    style: { width: "400px" } as Partial<CSSStyleDeclaration>,
-                    onInput: val => {
-                        endpoint.value = val?.trim?.() || ''
-                        handleChange()
-                    },
-                }),
-                info: tooltip(msg => msg.option.backup.meta.obsidian_local_rest_api.endpointInfo),
-            }, msg => msg.backup.meta.obsidian_local_rest_api.endpointLabel),
-            h(ElDivider),
-            renderOptionItem(
-                h(ElInput, {
-                    modelValue: path.value,
-                    size: "small",
-                    style: { width: "400px" } as Partial<CSSStyleDeclaration>,
-                    onInput: val => {
-                        path.value = val?.trim?.() || ''
-                        handleChange()
-                    },
-                }),
-                msg => msg.backup.meta.obsidian_local_rest_api.pathLabel,
-            ),
-        )
-        type.value !== 'none' && nodes.push(
-            h(ElDivider),
-            renderOptionItem({
-                input: authInput(auth, handleChange, handleTest),
-                info: tooltip(msg => msg.option.backup.meta[type.value]?.authInfo)
-            },
-                _msg => AUTH_LABELS[type.value],
-            ),
-            h(ElDivider),
-            renderOptionItem(
-                clientNameInput(clientName, handleChange),
-                msg => msg.backup.client,
-            ),
-            h(ElDivider),
-            h(Footer, { type: type.value }),
-        )
-        return h('div', nodes)
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/daily-limit/index.ts b/src/app/components/option/components/daily-limit/index.ts
deleted file mode 100644
index a5448f2d..00000000
--- a/src/app/components/option/components/daily-limit/index.ts
+++ /dev/null
@@ -1,134 +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 { locale } from "@i18n"
-import optionService from "@service/option-service"
-import { defaultDailyLimit } from "@util/constant/option"
-import { ElDivider, ElInput, ElOption, ElSelect } from "element-plus"
-import { defineComponent, reactive, unref, UnwrapRef, h } from "vue"
-import { renderOptionItem } from "../../common"
-import "./daily-limit.sass"
-
-const ALL_LIMIT_FILTER_TYPE: timer.limit.FilterType[] = [
-    'translucent',
-    'groundGlass',
-]
-
-const ALL_LEVEL: timer.limit.RestrictionLevel[] = [
-    'nothing',
-    'verification',
-    'password',
-]
-
-const ALL_DIFF: timer.limit.VerificationDifficulty[] = [
-    'easy',
-    'hard',
-    'disgusting',
-]
-
-const filterSelect = (option: timer.option.DailyLimitOption) => h(ElSelect, {
-    modelValue: option.limitFilter,
-    size: 'small',
-    onChange: (val: timer.limit.FilterType) => {
-        option.limitFilter = val
-        optionService.setDailyLimitOption(unref(option))
-    }
-}, () => ALL_LIMIT_FILTER_TYPE.map(item => h(ElOption, { value: item, label: t(msg => msg.option.dailyLimit.filter[item]) })))
-
-const levelSelect = (option: timer.option.DailyLimitOption) => h(ElSelect, {
-    modelValue: option.limitLevel,
-    size: 'small',
-    class: `option-daily-limit-level-select ${locale}`,
-    onChange: (val: timer.limit.RestrictionLevel) => {
-        option.limitLevel = val
-        optionService.setDailyLimitOption(unref(option))
-    }
-}, () => ALL_LEVEL.map(item => h(ElOption, { value: item, label: t(msg => msg.option.dailyLimit.level[item]) })))
-
-const pswInput = (option: timer.option.DailyLimitOption) => h(ElInput, {
-    modelValue: option.limitPassword,
-    size: 'small',
-    type: 'password',
-    showPassword: true,
-    style: { width: '200px' },
-    onInput: (val: string) => {
-        option.limitPassword = val?.trim()
-        optionService.setDailyLimitOption(unref(option))
-    }
-})
-
-const veriDiffSelect = (option: timer.option.DailyLimitOption) => h(ElSelect, {
-    modelValue: option.limitVerifyDifficulty,
-    size: 'small',
-    onChange: (val: timer.limit.VerificationDifficulty) => {
-        option.limitVerifyDifficulty = val
-        optionService.setDailyLimitOption(unref(option))
-    }
-}, () => ALL_DIFF.map(item => h(ElOption, { value: item, label: t(msg => msg.option.dailyLimit.level.verificationDifficulty[item]) })))
-
-function copy(target: timer.option.DailyLimitOption, source: timer.option.DailyLimitOption) {
-    target.limitFilter = source.limitFilter
-    target.limitLevel = source.limitLevel
-    target.limitPassword = source.limitPassword
-    target.limitVerifyDifficulty = source.limitVerifyDifficulty
-}
-
-function reset(target: timer.option.DailyLimitOption) {
-    const defaultValue = defaultDailyLimit()
-    // Not to reset limitPassword
-    delete defaultValue.limitPassword
-    // Not to reset difficulty
-    delete defaultValue.limitVerifyDifficulty
-    Object.entries(defaultValue).forEach(([key, val]) => target[key] = val)
-}
-
-const _default = defineComponent((_, ctx) => {
-    const option: UnwrapRef<timer.option.DailyLimitOption> = reactive(defaultDailyLimit())
-    optionService.getAllOption().then(currentVal => {
-        copy(option, currentVal)
-    })
-    ctx.expose({
-        reset: () => reset(option)
-    })
-    return () => {
-        const nodes = [
-            renderOptionItem({
-                input: filterSelect(option)
-            },
-                msg => msg.dailyLimit.filter.label,
-                t(msg => msg.option.dailyLimit.filter[defaultDailyLimit().limitFilter])
-            ),
-            h(ElDivider),
-            renderOptionItem({
-                input: levelSelect(option)
-            },
-                msg => msg.dailyLimit.level.label,
-                t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel])
-            ),
-        ]
-        const { limitLevel } = option
-        limitLevel === 'password' && nodes.push(
-            h(ElDivider),
-            renderOptionItem({
-                input: pswInput(option),
-            }, msg => msg.dailyLimit.level.passwordLabel)
-        )
-        limitLevel === 'verification' && nodes.push(
-            h(ElDivider),
-            renderOptionItem({
-                input: veriDiffSelect(option),
-            },
-                msg => msg.dailyLimit.level.verificationLabel,
-                t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitVerifyDifficulty])
-            )
-        )
-        return nodes
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/popup.ts b/src/app/components/option/components/popup.ts
deleted file mode 100644
index 5f7bdcf9..00000000
--- a/src/app/components/option/components/popup.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { unref, UnwrapRef } from "vue"
-
-import { ElDivider, ElInputNumber, ElOption, ElSelect, ElSwitch } from "element-plus"
-import { t } from "@app/locale"
-import { I18nKey, t as t_ } from "@i18n"
-import { defineComponent, h, reactive } from "vue"
-import optionService from "@service/option-service"
-import { renderOptionItem, tagText } from "../common"
-import { defaultPopup } from "@util/constant/option"
-import { ALL_POPUP_DURATION } from "@util/constant/popup"
-import { ALL_DIMENSIONS } from "@util/stat"
-import { locale } from "@i18n"
-import { rotate } from "@util/array"
-
-type LocaleStyle = {
-    durationSelectWidth: number
-    typeSelectWidth: number
-}
-
-const STYLES: Messages<LocaleStyle> = {
-    zh_CN: {
-        typeSelectWidth: 85,
-        durationSelectWidth: 80,
-    },
-    en: {
-        typeSelectWidth: 115,
-        durationSelectWidth: 110
-    },
-    ja: {
-        typeSelectWidth: 85,
-        durationSelectWidth: 105,
-    },
-    pt_PT: {
-        typeSelectWidth: 155,
-        durationSelectWidth: 120,
-    },
-    zh_TW: {
-        typeSelectWidth: 85,
-        durationSelectWidth: 80,
-    },
-}
-
-const tStyle = (key: I18nKey<LocaleStyle>) => t_(STYLES, { key })
-
-const mergeDomain = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSwitch, {
-    modelValue: option.defaultMergeDomain,
-    onChange: (newVal: boolean) => {
-        option.defaultMergeDomain = newVal
-        optionService.setPopupOption(option)
-    }
-})
-
-const popupMaxInput = (option: UnwrapRef<timer.option.PopupOption>) => h(ElInputNumber, {
-    modelValue: option.popupMax,
-    size: 'small',
-    min: 5,
-    max: 30,
-    onChange: (val: number) => {
-        option.popupMax = val
-        optionService.setPopupOption(unref(option))
-    }
-})
-
-const typeOptions = () => ALL_DIMENSIONS.map(item => h(ElOption, { value: item, label: t(msg => msg.item[item]) }))
-const typeSelect = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSelect, {
-    modelValue: option.defaultType,
-    size: 'small',
-    style: { width: `${tStyle(m => m.typeSelectWidth)}px` },
-    onChange: (val: timer.stat.Dimension) => {
-        option.defaultType = val
-        optionService.setPopupOption(unref(option))
-    }
-}, { default: typeOptions })
-
-const durationOptions = () => ALL_POPUP_DURATION.map(item => h(ElOption, { value: item, label: t(msg => msg.duration[item]) }))
-const durationSelect = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSelect, {
-    modelValue: option.defaultDuration,
-    size: 'small',
-    style: { width: `${tStyle(m => m.durationSelectWidth)}px` },
-    onChange: (val: PopupDuration) => {
-        option.defaultDuration = val
-        optionService.setPopupOption(unref(option))
-    }
-}, { default: durationOptions })
-
-const displaySiteName = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSwitch, {
-    modelValue: option.displaySiteName,
-    onChange: (newVal: boolean) => {
-        option.displaySiteName = newVal
-        optionService.setPopupOption(option)
-    }
-})
-
-const weekStartOptionPairs: [[timer.option.WeekStartOption, string]] = [
-    ['default', t(msg => msg.option.popup.weekStartAsNormal)]
-]
-const allWeekDays = t(msg => msg.calendar.weekDays)
-    .split('|')
-    .map((weekDay, idx) => [idx + 1, weekDay] as [timer.option.WeekStartOption, string])
-rotate(allWeekDays, locale === 'zh_CN' ? 0 : 1, true)
-allWeekDays.forEach(weekDayInfo => weekStartOptionPairs.push(weekDayInfo))
-
-const weekStartSelect = (option: UnwrapRef<timer.option.PopupOption>) => h(ElSelect, {
-    modelValue: option.weekStart,
-    size: 'small',
-    onChange(newVal: 'default' | number) {
-        option.weekStart = newVal
-        optionService.setPopupOption(option)
-    }
-}, () => weekStartOptionPairs.map(([val, label]) => h(ElOption, { value: val, label })))
-
-const defaultPopOptions = defaultPopup()
-const defaultTypeLabel = t(msg => msg.item[defaultPopOptions.defaultType])
-const defaultDurationLabel = t(msg => msg.duration[defaultPopOptions.defaultDuration])
-const displayDefaultLabel = `${defaultDurationLabel}/${defaultTypeLabel}`
-
-function copy(target: timer.option.PopupOption, source: timer.option.PopupOption) {
-    target.defaultMergeDomain = source.defaultMergeDomain
-    target.defaultDuration = source.defaultDuration
-    target.defaultType = source.defaultType
-    target.displaySiteName = source.displaySiteName
-    target.popupMax = source.popupMax
-    target.weekStart = source.weekStart
-}
-
-const _default = defineComponent({
-    name: "PopupOptionContainer",
-    setup(_props, ctx) {
-        const option: UnwrapRef<timer.option.PopupOption> = reactive(defaultPopup())
-        optionService.getAllOption().then(currentVal => copy(option, currentVal))
-        ctx.expose({
-            async reset() {
-                copy(option, defaultPopup())
-                await optionService.setPopupOption(unref(option))
-            }
-        })
-        return () => h('div', [
-            renderOptionItem({
-                input: mergeDomain(option),
-            },
-                msg => msg.popup.defaultMergeDomain,
-                t(msg => msg.option.no)
-            ),
-            h(ElDivider),
-            renderOptionItem({
-                duration: durationSelect(option),
-                type: typeSelect(option)
-            },
-                msg => msg.popup.defaultDisplay,
-                displayDefaultLabel
-            ),
-            h(ElDivider),
-            renderOptionItem({
-                input: weekStartSelect(option)
-            }, msg => msg.popup.weekStart, t(msg => msg.option.popup.weekStartAsNormal)),
-            h(ElDivider),
-            renderOptionItem(popupMaxInput(option), msg => msg.popup.max, defaultPopOptions.popupMax),
-            h(ElDivider),
-            renderOptionItem({
-                input: displaySiteName(option),
-                siteName: tagText(msg => msg.option.statistics.siteName)
-            }, msg => msg.popup.displaySiteName, t(msg => msg.option.yes))
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/option/components/statistics.ts b/src/app/components/option/components/statistics.ts
deleted file mode 100644
index 6ed11768..00000000
--- a/src/app/components/option/components/statistics.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { UnwrapRef } from "vue"
-
-import { ElDivider, ElSwitch } from "element-plus"
-import optionService from "@service/option-service"
-import { defaultStatistics } from "@util/constant/option"
-import { defineComponent, h, reactive, unref } from "vue"
-import { t } from "@app/locale"
-import { renderOptionItem, tagText, tooltip } from "../common"
-
-function updateOptionVal(key: keyof timer.option.StatisticsOption, newVal: boolean, option: UnwrapRef<timer.option.StatisticsOption>) {
-    option[key] = newVal
-    optionService.setStatisticsOption(unref(option))
-}
-
-
-const countLocalFiles = (option: UnwrapRef<timer.option.StatisticsOption>) => h(ElSwitch, {
-    modelValue: option.countLocalFiles,
-    onChange: (newVal: boolean) => updateOptionVal("countLocalFiles", newVal, option)
-})
-
-const collectSiteName = (option: UnwrapRef<timer.option.StatisticsOption>) => h(ElSwitch, {
-    modelValue: option.collectSiteName,
-    onChange: (newVal: boolean) => updateOptionVal('collectSiteName', newVal, option)
-})
-
-function copy(target: timer.option.StatisticsOption, source: timer.option.StatisticsOption) {
-    target.collectSiteName = source.collectSiteName
-    target.countLocalFiles = source.countLocalFiles
-}
-
-const _default = defineComponent({
-    name: "StatisticsOptionContainer",
-    setup(_props, ctx) {
-        const option: UnwrapRef<timer.option.StatisticsOption> = reactive(defaultStatistics())
-        optionService.getAllOption().then(currentVal => copy(option, currentVal))
-        ctx.expose({
-            async reset() {
-                copy(option, defaultStatistics())
-                await optionService.setStatisticsOption(unref(option))
-            }
-        })
-        return () => h('div', [
-            renderOptionItem({
-                input: countLocalFiles(option),
-                localFileTime: tagText(msg => msg.option.statistics.localFileTime),
-                info: tooltip(msg => msg.option.statistics.localFilesInfo)
-            }, msg => msg.statistics.countLocalFiles, t(msg => msg.option.no)),
-            h(ElDivider),
-            renderOptionItem({
-                input: collectSiteName(option),
-                siteName: tagText(msg => msg.option.statistics.siteName),
-                siteNameUsage: tooltip(msg => msg.option.statistics.siteNameUsage)
-            }, msg => msg.statistics.collectSiteName, t(msg => msg.option.yes))
-        ])
-    }
-})
-
-export default _default
\ No newline at end of file
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/table/columns/alias.ts b/src/app/components/report/table/columns/alias.ts
deleted file mode 100644
index ba14265e..00000000
--- a/src/app/components/report/table/columns/alias.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
- */
-
-/**
- * Column of date 
- */
-import { ElTableColumn } from "element-plus"
-import { defineComponent, h } from "vue"
-import { t } from "@app/locale"
-import Editable from "@app/components/common/editable"
-
-const columnLabel = t(msg => msg.siteManage.column.alias)
-
-const _default = defineComponent({
-    name: "AliasColumn",
-    emits: {
-        aliasChange: (_host: string, _newAlias: string) => true,
-    },
-    setup(_, ctx) {
-        return () => h(ElTableColumn, {
-            label: columnLabel,
-            minWidth: 140,
-            align: "center"
-        }, {
-            default: ({ row }: { row: timer.stat.Row }) => h(Editable, {
-                modelValue: row.alias,
-                onChange: (newAlias: string) => ctx.emit("aliasChange", row.host, newAlias)
-            })
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/date.ts b/src/app/components/report/table/columns/date.ts
deleted file mode 100644
index b51e1cf2..00000000
--- a/src/app/components/report/table/columns/date.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-/**
- * Column of date 
- */
-import { ElTableColumn } from "element-plus"
-import { defineComponent, h } from "vue"
-import { t } from "@app/locale"
-import { cvt2LocaleTime } from "@app/util/time"
-
-const columnLabel = t(msg => msg.item.date)
-
-const _default = defineComponent({
-    name: "DateColumn",
-    setup() {
-        return () => h(ElTableColumn, {
-            prop: "date",
-            label: columnLabel,
-            minWidth: 135,
-            align: "center",
-            sortable: "custom"
-        }, {
-            default: ({ row }: { row: timer.stat.Row }) => h('span', cvt2LocaleTime(row.date))
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/focus.ts b/src/app/components/report/table/columns/focus.ts
deleted file mode 100644
index 927d19e1..00000000
--- a/src/app/components/report/table/columns/focus.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { PropType } from "vue"
-
-import { t } from "@app/locale"
-import { Effect, ElTableColumn, ElTooltip } from "element-plus"
-import { defineComponent, h } from "vue"
-import { periodFormatter } from "@app/util/time"
-import CompositionTable from './composition-table'
-
-const columnLabel = t(msg => msg.item.focus)
-
-const _default = defineComponent({
-    name: "FocusColumn",
-    props: {
-        timeFormat: String as PropType<timer.app.TimeFormat>,
-        readRemote: Boolean,
-    },
-    setup(props) {
-        return () => h(ElTableColumn, {
-            prop: "focus",
-            label: columnLabel,
-            minWidth: 130,
-            align: "center",
-            sortable: "custom"
-        }, {
-            default({ row }: { row: timer.stat.Row }) {
-                const valueStr = periodFormatter(row.focus, props.timeFormat || "default")
-                if (!props.readRemote) {
-                    return valueStr
-                }
-                return h(ElTooltip, {
-                    placement: "top",
-                    effect: Effect.LIGHT,
-                    offset: 10
-                }, {
-                    default: () => valueStr,
-                    content: () => h(CompositionTable, {
-                        data: row.composition?.focus || [],
-                        valueFormatter: val => periodFormatter(val, props.timeFormat || 'default'),
-                    })
-                })
-            }
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/host-merged-alert.ts b/src/app/components/report/table/columns/host-merged-alert.ts
deleted file mode 100644
index 37626bc3..00000000
--- a/src/app/components/report/table/columns/host-merged-alert.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2022 Hengyang Zhang
- *
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { Effect, ElTooltip } from "element-plus"
-import { defineComponent, h } from "vue"
-
-/**
- * Merged host column
- * 
- * @since 0.7.0
- */
-const _default = defineComponent({
-    name: "HostMergedAlert",
-    props: {
-        mergedHost: {
-            type: String,
-            required: true
-        }
-    },
-    setup(props, ctx) {
-        return () => h(ElTooltip, {
-            placement: "left",
-            effect: Effect.LIGHT,
-            offset: 10
-        }, {
-            default: () => h('a',
-                { class: 'el-link el-link--default is-underline' },
-                h('span', { class: 'el-link--inner' }, props.mergedHost)
-            ),
-            content: () => h(ctx.slots.default)
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/host.ts b/src/app/components/report/table/columns/host.ts
deleted file mode 100644
index b58ce23c..00000000
--- a/src/app/components/report/table/columns/host.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElTableColumn } from "element-plus"
-import { h, defineComponent } from "vue"
-import { t } from "@app/locale"
-import HostAlert from "@app/components/common/host-alert"
-import HostMergedAlert from './host-merged-alert'
-import { isRemainHost } from "@util/constant/remain-host"
-
-const columnLabel = t(msg => msg.item.host)
-
-const _default = defineComponent({
-    name: "HostColumn",
-    props: {
-        mergeHost: {
-            type: Boolean,
-            required: true
-        }
-    },
-    setup(props) {
-        return () => h(ElTableColumn, {
-            prop: "host",
-            label: columnLabel,
-            minWidth: 210,
-            sortable: "custom",
-            align: "center"
-        }, {
-            default: ({ row }: { row: timer.stat.Row }) => props.mergeHost
-                ? h(HostMergedAlert,
-                    { mergedHost: row.host },
-                    () => row.mergedHosts.map(origin =>
-                        h('p', h(HostAlert, { host: origin.host, iconUrl: origin.iconUrl, clickable: !isRemainHost(origin.host) }))
-                    )
-                )
-                : h(HostAlert, { host: row.host, iconUrl: row.iconUrl, clickable: !isRemainHost(row.host) })
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/report/table/columns/operation.ts b/src/app/components/report/table/columns/operation.ts
deleted file mode 100644
index cb0d5b9d..00000000
--- a/src/app/components/report/table/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/table/columns/selection.ts b/src/app/components/report/table/columns/selection.ts
deleted file mode 100644
index 8cbf4056..00000000
--- a/src/app/components/report/table/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/table/columns/time.ts b/src/app/components/report/table/columns/time.ts
deleted file mode 100644
index 6c93af23..00000000
--- a/src/app/components/report/table/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 "./composition-table"
-
-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/table/index.ts b/src/app/components/report/table/index.ts
deleted file mode 100644
index d6978196..00000000
--- a/src/app/components/report/table/index.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * 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, h, ref, watch } from "vue"
-import SelectionColumn from "./columns/selection"
-import DateColumn from "./columns/date"
-import HostColumn from "./columns/host"
-import AliasColumn from "./columns/alias"
-import FocusColumn from "./columns/focus"
-import TimeColumn from "./columns/time"
-import OperationColumn from "./columns/operation"
-
-export type TableInstance = {
-    getSelected(): timer.stat.Row[]
-}
-
-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) {
-        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 () => h(ElTable, {
-            data: props.data,
-            border: true,
-            size: 'small',
-            defaultSort: props.defaultSort,
-            style: { width: '100%' },
-            highlightCurrentRow: true,
-            "onSelection-change": (data: timer.stat.Row[]) => selectedRows = data,
-            fit: true,
-            onSortChange: (newSortInfo: SortInfo) => ctx.emit("sortChange", newSortInfo)
-        }, () => {
-            const result = [
-                h(SelectionColumn, { disabled: props.mergeHost })
-            ]
-            props.mergeDate || result.push(h(DateColumn))
-            result.push(
-                h(HostColumn, { mergeHost: props.mergeHost }),
-                h(AliasColumn, {
-                    onAliasChange: (host: string, newAlias: string) => ctx.emit("aliasChange", host, newAlias)
-                }),
-                h(FocusColumn, { timeFormat: props.timeFormat, readRemote: props.readRemote }),
-                h(TimeColumn, { readRemote: props.readRemote }),
-                h(OperationColumn, {
-                    mergeDate: props.mergeDate,
-                    mergeHost: props.mergeHost,
-                    dateRange: props.dateRange,
-                    whitelist: props.whitelist,
-                    onDelete: (row: timer.stat.Row) => ctx.emit("itemDelete", row),
-                    onWhitelistChange: (host: string, addOrRemove: boolean) => ctx.emit("whitelistChange", host, addOrRemove)
-                }),
-            )
-            return result
-        })
-    }
-})
-
-export default _default
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/index.ts b/src/app/index.ts
index 13a356a8..db37bb45 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -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/router/index.ts b/src/app/router/index.ts
index 38fec026..3b6e9d66 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,20 +17,20 @@ const dataRoutes: RouteRecordRaw[] = [
         path: '/data',
         redirect: '/data/dashboard',
     },
-    // Needn't nested router 
+    // Needn't nested router
     {
         path: '/data/dashboard',
-        component: () => import('../components/dashboard')
+        component: () => import('../components/Dashboard')
     },
     {
         path: REPORT_ROUTE,
-        component: () => import('../components/report')
+        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,10 +40,10 @@ const behaviorRoutes: RouteRecordRaw[] = [
         redirect: '/behavior/habit'
     }, {
         path: '/behavior/habit',
-        component: () => import('../components/habit')
+        component: () => import('../components/Habit')
     }, {
         path: LIMIT_ROUTE,
-        component: () => import('../components/limit')
+        component: () => import('../components/Limit')
     }
 ]
 
@@ -62,7 +62,7 @@ const additionalRoutes: RouteRecordRaw[] = [
         component: () => import('../components/rule-merge')
     }, {
         path: OPTION_ROUTE,
-        component: () => import('../components/option')
+        component: () => import('../components/Option')
     }
 ]
 
diff --git a/src/app/components/limit/table/column/common.ts b/src/app/util/limit.tsx
similarity index 60%
rename from src/app/components/limit/table/column/common.ts
rename to src/app/util/limit.tsx
index 13de77b3..95df1831 100644
--- a/src/app/components/limit/table/column/common.ts
+++ b/src/app/util/limit.tsx
@@ -1,12 +1,13 @@
-import { sendMsg2Runtime } from "@api/chrome/runtime"
-import { t, tN } from "@app/locale"
+import I18nNode from "@app/components/common/I18nNode"
+import { t } from "@app/locale"
 import { locale } from "@i18n"
 import { VerificationPair } from "@service/limit-service/verification/common"
 import verificationProcessor from "@service/limit-service/verification/processor"
-import { date2Idx, hasLimited } from "@util/limit"
 import { getCssVariable } from "@util/style"
 import { ElMessageBox, ElMessage } from "element-plus"
-import { defineComponent, h, onMounted, ref, VNode } from "vue"
+import { defineComponent, onMounted, ref, VNode } from "vue"
+import { sendMsg2Runtime } from "@api/chrome/runtime"
+import { hasLimited, dateMinute2Idx } from "@util/limit"
 
 /**
  * Judge wether verification is required
@@ -20,8 +21,8 @@ export async function judgeVerificationRequired(item: timer.limit.Item): Promise
     if (hasLimited(item)) return true
     // Period
     if (periods?.length) {
-        const idx = date2Idx(new Date())
-        const hitPeriod = periods?.find(([s, e]) => s <= idx && e >= idx)
+        const idx = dateMinute2Idx(new Date())
+        const hitPeriod = periods?.some(([s, e]) => s <= idx && e >= idx)
         if (hitPeriod) return true
     }
     // Visit
@@ -32,17 +33,9 @@ export async function judgeVerificationRequired(item: timer.limit.Item): Promise
     return false
 }
 
-const PROMPT_TXT_CSS: Partial<CSSStyleDeclaration> = {
-    userSelect: 'none',
-}
 
 const ANSWER_CANVAS_FONT_SIZE = 24
 
-const CANVAS_WRAPPER_CSS: Partial<CSSStyleDeclaration> = {
-    fontSize: `${ANSWER_CANVAS_FONT_SIZE}px`,
-    textAlign: 'center',
-}
-
 const AnswerCanvas = defineComponent({
     props: {
         text: String
@@ -69,10 +62,17 @@ const AnswerCanvas = defineComponent({
             ctx.fillText(text, 0, ANSWER_CANVAS_FONT_SIZE)
         })
 
-        return () => h('div', {
-            style: CANVAS_WRAPPER_CSS,
-            ref: wrapper,
-        }, h('canvas', { ref: dom }))
+        return () => (
+            <div
+                style={{
+                    fontSize: `${ANSWER_CANVAS_FONT_SIZE}px`,
+                    textAlign: 'center'
+                }}
+                ref={wrapper}
+            >
+                <canvas ref={dom} />
+            </div>
+        )
     })
 })
 
@@ -82,12 +82,22 @@ const AnswerCanvas = defineComponent({
  */
 export async function processVerification(option: timer.option.DailyLimitOption): Promise<void> {
     const { limitLevel, limitPassword, limitVerifyDifficulty } = option
+    if (limitLevel === "strict") {
+        return new Promise(
+            (_, reject) => ElMessageBox({
+                boxType: 'alert',
+                type: 'warning',
+                title: '',
+                message: <div>{t(msg => msg.limit.verification.strictTip)}</div>,
+            }).then(reject).catch(reject)
+        )
+    }
     let answerValue: string
-    let messageNodes: (VNode | string)[]
+    let messageNode: VNode | string | Element
     let incorrectMessage: string
     if (limitLevel === 'password' && limitPassword) {
         answerValue = limitPassword
-        messageNodes = [t(msg => msg.limit.verification.pswInputTip)]
+        messageNode = t(msg => msg.limit.verification.pswInputTip)
         incorrectMessage = t(msg => msg.limit.verification.incorrectPsw)
     } else if (limitLevel === 'verification') {
         const pair: VerificationPair = verificationProcessor.generate(limitVerifyDifficulty, locale)
@@ -98,31 +108,39 @@ export async function processVerification(option: timer.option.DailyLimitOption)
             const promptTxt = typeof prompt === 'function'
                 ? t(msg => prompt(msg.limit.verification), { ...promptParam, answer: answerValue })
                 : prompt
-            messageNodes = tN(msg => msg.limit.verification.inputTip, { prompt: h('b', promptTxt) })
+            messageNode = (
+                <I18nNode
+                    path={msg => msg.limit.verification.inputTip}
+                    param={{ prompt: <b>{promptTxt}</b> }}
+                />
+            )
         } else {
             const answer: VNode = limitVerifyDifficulty === 'disgusting'
-                ? h(AnswerCanvas, { text: answerValue })
-                : h('b', answerValue)
-            messageNodes = tN(msg => msg.limit.verification.inputTip2, { answer })
+                ? <AnswerCanvas text={answerValue} />
+                : <b>{answerValue}</b>
+            messageNode = (
+                <I18nNode
+                    path={msg => msg.limit.verification.inputTip2}
+                    param={{ answer }}
+                />
+            )
         }
     }
-    return messageNodes?.length && answerValue
-        ? new Promise(resolve =>
-            ElMessageBox({
-                boxType: 'prompt',
-                type: 'warning',
-                title: '',
-                message: h('div', { style: PROMPT_TXT_CSS }, messageNodes),
-                showInput: true,
-                showCancelButton: true,
-                showClose: true,
-            }).then(data => {
-                const { value } = data
-                if (value === answerValue) {
-                    return resolve()
-                }
-                ElMessage.error(incorrectMessage)
-            }).catch(() => { })
-        )
-        : null
+    if (!messageNode || !answerValue) return Promise.resolve()
+
+    return new Promise(resolve => {
+        ElMessageBox({
+            boxType: 'prompt',
+            type: 'warning',
+            title: '',
+            message: <div style={{ userSelect: 'none' }}>{messageNode}</div>,
+            showInput: true,
+            showCancelButton: true,
+            showClose: true,
+        }).then(data => {
+            const { value } = data
+            if (value === answerValue) return resolve()
+            ElMessage.error(incorrectMessage)
+        }).catch(() => { })
+    })
 }
diff --git a/src/content-script/limit/modal.ts b/src/content-script/limit/modal.ts
index 38169f32..1143eb93 100644
--- a/src/content-script/limit/modal.ts
+++ b/src/content-script/limit/modal.ts
@@ -71,7 +71,9 @@ function isSameReason(a: LimitReason, b: LimitReason): boolean {
     return same
 }
 
-const canDelay = ({ allowDelay, type }: LimitReason) => allowDelay && (type === "DAILY" || type === "VISIT")
+const canDelay = ({ allowDelay, type }: LimitReason, options: timer.option.DailyLimitOption) => allowDelay
+    && (type === "DAILY" || type === "VISIT")
+    && options.limitLevel !== "strict"
 
 class ModalInstance implements MaskModal {
     url: string
@@ -164,7 +166,7 @@ class ModalInstance implements MaskModal {
         this.mask.append(document.createElement("br"))
         this.mask.append(link2Setup(url))
 
-        if (canDelay(reason)) {
+        if (canDelay(reason, this.options)) {
             const delayConfirm = new DelayConfirm(this.options)
             const delayButton = new DelayButton(
                 () => delayConfirm.doConfirm().then(() => this.delayHandlers?.forEach?.(h => h?.()))
diff --git a/src/database/backup-database.ts b/src/database/backup-database.ts
index 9b899e27..0dd8da2b 100644
--- a/src/database/backup-database.ts
+++ b/src/database/backup-database.ts
@@ -12,7 +12,7 @@ const PREFIX = REMAIN_WORD_PREFIX + "backup"
 const SNAPSHOT_KEY = PREFIX + "_snap"
 const CACHE_KEY = PREFIX + "_cache"
 
-function cackeKeyOf(type: timer.backup.Type) {
+function cacheKeyOf(type: timer.backup.Type) {
     return CACHE_KEY + "_" + type
 }
 
@@ -23,22 +23,22 @@ class BackupDatabase extends BaseDatabase {
     }
 
     async getSnapshot(type: timer.backup.Type): Promise<timer.backup.Snapshot | undefined> {
-        const cache = await this.storage.getOne(SNAPSHOT_KEY) as timer.backup.SnaptshotCache
+        const cache = await this.storage.getOne(SNAPSHOT_KEY) as timer.backup.SnapshotCache
         return cache?.[type]
     }
 
     async updateSnapshot(type: timer.backup.Type, snapshot: timer.backup.Snapshot): Promise<void> {
-        const cache = (await this.storage.getOne(SNAPSHOT_KEY) as timer.backup.SnaptshotCache) || {}
+        const cache = (await this.storage.getOne(SNAPSHOT_KEY) as timer.backup.SnapshotCache) || {}
         cache[type] = snapshot
         await this.storage.put(SNAPSHOT_KEY, cache)
     }
 
     async getCache(type: timer.backup.Type): Promise<unknown> {
-        return (await this.storage.getOne(cackeKeyOf(type))) || {}
+        return (await this.storage.getOne(cacheKeyOf(type))) || {}
     }
 
     async updateCache(type: timer.backup.Type, newVal: unknown): Promise<void> {
-        return this.storage.put(cackeKeyOf(type), newVal)
+        return this.storage.put(cacheKeyOf(type), newVal)
     }
 
     importData(_data: any): Promise<void> {
diff --git a/src/i18n/chrome/index.ts b/src/i18n/chrome/index.ts
index 2e1737f2..ba7a8d67 100644
--- a/src/i18n/chrome/index.ts
+++ b/src/i18n/chrome/index.ts
@@ -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/i18n/chrome/message.ts b/src/i18n/chrome/message.ts
index 6ebbc5ef..817a5aa4 100644
--- a/src/i18n/chrome/message.ts
+++ b/src/i18n/chrome/message.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021-present Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -88,7 +88,7 @@ const placeholder: ChromeMessage = {
     }
 }
 
-function routerPath(root: any, parentPath = undefined) {
+function routerPath(root: any, parentPath = '') {
     Object.entries(root)
         .forEach(([key, value]) => {
             const currentPath = parentPath ? `${parentPath}_${key}` : key
diff --git a/src/i18n/message/app/limit-resource.json b/src/i18n/message/app/limit-resource.json
index 6895787c..51a78d12 100644
--- a/src/i18n/message/app/limit-resource.json
+++ b/src/i18n/message/app/limit-resource.json
@@ -34,9 +34,10 @@
         },
         "urlPlaceholder": "请直接粘贴网址 ➡️",
         "verification": {
-            "inputTip": "该规则已超时，如要继续操作，请输入以下问题的答案：{prompt}",
-            "inputTip2": "该规则已超时，如要继续操作，请在下列输入框中原样输入：{answer}",
-            "pswInputTip": "该规则已超时，如要继续操作，所以请在下列输入框中输入您的解锁密码",
+            "inputTip": "时限规则已触发，如要继续操作，请输入以下问题的答案：{prompt}",
+            "inputTip2": "时限规则已触发，如要继续操作，请在下列输入框中原样输入：{answer}",
+            "pswInputTip": "时限规则已触发，如要继续操作，所以请在下列输入框中输入您的解锁密码",
+            "strictTip": "时限规则已触发，不允许手动解锁！",
             "incorrectPsw": "密码错误",
             "incorrectAnswer": "回答错误",
             "pi": "圆周率 π 的小数部分第 {startIndex} 位到第 {endIndex} 位的共 {digitCount} 位数字",
@@ -76,9 +77,10 @@
         },
         "urlPlaceholder": "請直接粘貼網址 ➡️",
         "verification": {
-            "inputTip": "此規則已逾時，如要繼續操作，請輸入以下問題的答案：{prompt}",
-            "inputTip2": "此規則已逾時，如要繼續操作，請在下列輸入框中原樣輸入：{answer}",
-            "pswInputTip": "此規則已逾時，如要繼續操作，所以請在下列輸入框中輸入您的解鎖密碼",
+            "inputTip": "時限規則已觸發，如要繼續操作，請輸入以下問題的答案：{prompt}",
+            "inputTip2": "時限規則已觸發，如要繼續操作，請在下列輸入框中原樣輸入：{answer}",
+            "pswInputTip": "時限規則已觸發，如要繼續操作，所以請在下列輸入框中輸入您的解鎖密碼",
+            "strictTip": "時限規則已觸發，不允許手動解鎖！",
             "incorrectPsw": "密碼錯誤",
             "incorrectAnswer": "答案不正確",
             "pi": "圓周率 π 的小數部分第 {startIndex} 位到第 {endIndex} 位的共 {digitCount} 位數字",
@@ -122,9 +124,10 @@
         },
         "urlPlaceholder": "Please paste the URL directly ➡️",
         "verification": {
-            "inputTip": "This rule has already been triggered. To continue, please enter the answer to the following prompt: {prompt}",
-            "inputTip2": "This rule has already been triggered. To continue, please enter it as it is: {answer}",
-            "pswInputTip": "This rule has already been triggered. To continue, please enter your unlock password",
+            "inputTip": "Limit rule has already been triggered. To continue, please enter the answer to the following prompt: {prompt}",
+            "inputTip2": "Limit rule has already been triggered. To continue, please enter it as it is: {answer}",
+            "pswInputTip": "Limit rule has already been triggered. To continue, please enter your unlock password",
+            "strictTip": "Limit rule has already been triggered and manual unlocking is not allowed!",
             "incorrectPsw": "Incorrect password",
             "incorrectAnswer": "Incorrect answer",
             "pi": "{digitCount} digits from {startIndex} to {endIndex} of the decimal part of π",
diff --git a/src/i18n/message/app/limit.ts b/src/i18n/message/app/limit.ts
index ad202765..ad1d13cb 100644
--- a/src/i18n/message/app/limit.ts
+++ b/src/i18n/message/app/limit.ts
@@ -45,6 +45,7 @@ export type LimitMessage = {
         inputTip: string
         inputTip2: string
         pswInputTip: string
+        strictTip: string
         incorrectPsw: string
         incorrectAnswer: string
         pi: string
diff --git a/src/i18n/message/app/option-resource.json b/src/i18n/message/app/option-resource.json
index d5af74cd..5b03e1ba 100644
--- a/src/i18n/message/app/option-resource.json
+++ b/src/i18n/message/app/option-resource.json
@@ -69,7 +69,10 @@
                     "easy": "简单",
                     "hard": "困难",
                     "disgusting": "折磨"
-                }
+                },
+                "strict": "不允许手动解锁",
+                "strictTitle": "危险操作",
+                "strictContent": "当您选择这个选项之后，如果某个站点触发了每日限制，除了等到第二天自动解锁以外，不允许您手动解锁。如果规则设置不当，很有可能会阻碍您的日常工作！"
             }
         },
         "backup": {
@@ -189,7 +192,10 @@
                     "easy": "簡單",
                     "hard": "困難",
                     "disgusting": "噁心"
-                }
+                },
+                "strict": "不允許手動解鎖",
+                "strictTitle": "危險操作",
+                "strictContent": "當您選擇這個選項之後，如果某個網站觸發了每日限制，除了等到第二天自動解鎖以外，不允許您手動解鎖。 如果規則設定不當，很有可能會阻礙您的日常工作！"
             }
         },
         "backup": {
@@ -309,7 +315,10 @@
                     "easy": "Easy",
                     "hard": "Hard",
                     "disgusting": "Disgusting"
-                }
+                },
+                "strict": "Not allow unlocking anyway",
+                "strictTitle": "Operation confirm",
+                "strictContent": "When you select this option, if a site triggers daily limit, you will not be allowed to manually unblock it other than waiting until the next day. If rules are not set up properly, they can very well hinder your routines!"
             }
         },
         "backup": {
diff --git a/src/i18n/message/app/option.ts b/src/i18n/message/app/option.ts
index d659b786..9995865c 100644
--- a/src/i18n/message/app/option.ts
+++ b/src/i18n/message/app/option.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021-present Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -69,6 +69,8 @@ export type OptionMessage = {
             verificationDifficulty: {
                 [diff in timer.limit.VerificationDifficulty]: string
             }
+            strictTitle: string
+            strictContent: string
         }
     }
     backup: {
diff --git a/src/manifest.ts b/src/manifest.ts
index 5acc8992..65c88528 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -14,13 +14,13 @@
 // Not use path alias in manifest.json
 import packageInfo from "./package"
 import { OPTION_ROUTE } from "./app/router/constants"
-const { version, author: { name: author }, homepage } = packageInfo
+const { version, author: { email }, homepage } = packageInfo
 
 const _default: chrome.runtime.ManifestV2 = {
     name: '__MSG_meta_marketName__',
     description: "__MSG_meta_description__",
     version,
-    author,
+    author: { email },
     default_locale: 'en',
     homepage_url: homepage,
     manifest_version: 2,
diff --git a/src/service/limit-service/index.ts b/src/service/limit-service/index.ts
index 1ed6fa26..ae6de43c 100644
--- a/src/service/limit-service/index.ts
+++ b/src/service/limit-service/index.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -17,7 +17,7 @@ const db: LimitDatabase = new LimitDatabase(storage)
 
 export type QueryParam = {
     filterDisabled: boolean
-    url: string
+    url?: string
 }
 
 async function select(cond?: QueryParam): Promise<timer.limit.Item[]> {
@@ -48,7 +48,7 @@ async function noticePeriodChanged() {
 
 /**
  * Fired if the item is removed or disabled
- * 
+ *
  * @param item
  */
 async function noticeLimitChanged() {
@@ -96,8 +96,8 @@ async function getRelated(url: string): Promise<timer.limit.Item[]> {
 
 /**
  * Add time
- * @param url url 
- * @param focusTime time, milliseconds 
+ * @param url url
+ * @param focusTime time, milliseconds
  * @returns the rules is limit cause of this operation
  */
 async function addFocusTime(url: string, focusTime: number) {
diff --git a/src/util/constant/option.ts b/src/util/constant/option.ts
index b0d0d662..012492bf 100644
--- a/src/util/constant/option.ts
+++ b/src/util/constant/option.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -30,7 +30,7 @@ export function defaultAppearance(): timer.option.AppearanceOption {
         printInConsole: true,
         darkMode: "default",
         // 6 PM - 6 AM
-        // 18*60*60 
+        // 18*60*60
         darkModeTimeStart: 64800,
         // 6*60*60
         darkModeTimeEnd: 21600,
@@ -40,7 +40,7 @@ export function defaultAppearance(): timer.option.AppearanceOption {
 export function defaultStatistics(): timer.option.StatisticsOption {
     return {
         collectSiteName: true,
-        countLocalFiles: false
+        countLocalFiles: false,
     }
 }
 
@@ -58,6 +58,7 @@ export function defaultBackup(): timer.option.BackupOption {
         backupType: 'none',
         clientName: 'unknown',
         backupAuths: {},
+        backupExts: {},
         autoBackUp: false,
         autoBackUpInterval: 30,
     }
diff --git a/src/util/limit.ts b/src/util/limit.ts
index a4e14e33..a6a65126 100644
--- a/src/util/limit.ts
+++ b/src/util/limit.ts
@@ -39,6 +39,12 @@ const idx2Str = (time: number): string => {
 
 export const date2Idx = (date: Date): number => date.getHours() * 60 * 60 + date.getMinutes() * 60 + date.getSeconds()
 
+export const dateMinute2Idx = (date: Date): number => {
+    const hour = date.getHours()
+    const min = date.getMinutes()
+    return hour * 60 + min
+}
+
 export const period2Str = (p: timer.limit.Period): string => {
     const [start, end] = p || []
     return `${idx2Str(start)}-${idx2Str(end)}`
diff --git a/tsconfig.json b/tsconfig.json
index a77db8a7..53a0bb8b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,10 @@
         "baseUrl": "./",
         "module": "commonjs",
         "target": "es5",
+        "jsx": "preserve",
+        "jsxFactory": "h",
+        "jsxImportSource": "vue",
+        "jsxFragmentFactory": "Fragment",
         "esModuleInterop": true,
         "sourceMap": true,
         "resolveJsonModule": true,
diff --git a/types/timer/backup.d.ts b/types/timer/backup.d.ts
index 0cdd5d17..1a57b85f 100644
--- a/types/timer/backup.d.ts
+++ b/types/timer/backup.d.ts
@@ -32,18 +32,18 @@ declare namespace timer.backup {
         listAllClients(context: timer.backup.CoordinatorContext<Cache>): Promise<Client[]>
         /**
          * Download fragmented data from cloud
-         * 
+         *
          * @param targetCid The client id, default value is the local one in context
          */
         download(context: timer.backup.CoordinatorContext<Cache>, dateStart: Date, dateEnd: Date, targetCid?: string): Promise<timer.stat.RowBase[]>
         /**
          * Upload fragmented data to cloud
-         * @param rows 
+         * @param rows
          */
         upload(context: timer.backup.CoordinatorContext<Cache>, rows: timer.stat.RowBase[]): Promise<void>
         /**
          * Test auth
-         * 
+         *
          * @returns errorMsg or null/undefined
          */
         testAuth(auth: string, ext: timer.backup.TypeExt): Promise<string>
@@ -82,7 +82,7 @@ declare namespace timer.backup {
     /**
      * Snapshot cache
      */
-    type SnaptshotCache = Partial<{
+    type SnapshotCache = Partial<{
         [type in Type]: Snapshot
     }>
 
diff --git a/types/timer/limit.d.ts b/types/timer/limit.d.ts
index dcfcf4dc..663d1a6b 100644
--- a/types/timer/limit.d.ts
+++ b/types/timer/limit.d.ts
@@ -67,6 +67,8 @@ declare namespace timer.limit {
         | 'password'
         // Verification code input required to lock or modify restricted rule
         | 'verification'
+        // Not allowed to unlock manually
+        | 'strict'
     /**
      * @since 1.9.0
      */
diff --git a/types/timer/option.d.ts b/types/timer/option.d.ts
index fa1bf92e..1ae9889c 100644
--- a/types/timer/option.d.ts
+++ b/types/timer/option.d.ts
@@ -1,6 +1,6 @@
 /**
  * The options
- * 
+ *
  * @since 0.3.0
  */
 declare namespace timer.option {
@@ -27,19 +27,19 @@ declare namespace timer.option {
         /**
          * Replace the host name with site name which is detected automatically from the title of site homepages,
          * or modified manually by the user
-         * 
+         *
          * @since 0.5.0
          */
         displaySiteName: boolean
         /**
          * The start of one week
-         * 
+         *
          * @since 1.2.5
          */
         weekStart: WeekStartOption
         /**
          * Whether to merge domain by default
-         * 
+         *
          * @since 1.3.2
          */
         defaultMergeDomain: boolean
@@ -65,37 +65,37 @@ declare namespace timer.option {
     type AppearanceOption = {
         /**
          * Whether to display the whitelist button in the context menu
-         * 
+         *
          * @since 0.3.2
          */
         displayWhitelistMenu: boolean
         /**
          * Whether to display the badge text of focus time
-         * 
+         *
          * @since 0.3.3
          */
         displayBadgeText: boolean
         /**
          * The language of this extension
-         * 
+         *
          * @since 0.8.0
          */
         locale: LocaleOption
         /**
          * Whether to print the info in the console
-         * 
+         *
          * @since 0.8.6
          */
         printInConsole: boolean
         /**
          * The state of dark mode
-         * 
+         *
          * @since 1.1.0
          */
         darkMode: DarkMode
         /**
          * The range of seconds to turn on dark mode. Required if {@param darkMode} is 'timed'
-         * 
+         *
          * @since 1.1.0
          */
         darkModeTimeStart?: number
@@ -105,7 +105,7 @@ declare namespace timer.option {
     type StatisticsOption = {
         /**
          * Whether to collect the site name
-         * 
+         *
          * @since 0.5.0
          */
         collectSiteName: boolean
@@ -137,7 +137,7 @@ declare namespace timer.option {
 
     /**
      * The options of backup
-     * 
+     *
      * @since 1.2.0
      */
     type BackupOption = {
@@ -150,7 +150,7 @@ declare namespace timer.option {
          */
         backupAuths: { [type in backup.Type]?: string }
         /**
-         * The extended information of types, includind url, file path, and so on
+         * The extended information of types, including url, file path, and so on
          */
         backupExts?: {
             [type in backup.Type]?: backup.TypeExt
diff --git a/webpack/webpack.common.ts b/webpack/webpack.common.ts
index 6eb36010..085ebd4f 100644
--- a/webpack/webpack.common.ts
+++ b/webpack/webpack.common.ts
@@ -2,7 +2,7 @@ import path from "path"
 import GenerateJsonPlugin from "generate-json-webpack-plugin"
 import CopyWebpackPlugin from "copy-webpack-plugin"
 import webpack, { Chunk } from "webpack"
-// Generate json files 
+// Generate json files
 import manifest from "../src/manifest"
 import i18nChrome from "../src/i18n/chrome"
 import tsConfig from '../tsconfig.json'
@@ -84,9 +84,15 @@ const staticOptions: webpack.Configuration = {
     module: {
         rules: [
             {
-                test: /\.ts$/,
+                test: /\.tsx?$/,
                 exclude: /^(node_modules|test|script)/,
-                use: ['ts-loader']
+                use: [{
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ["@babel/preset-env"],
+                        plugins: ["@vue/babel-plugin-jsx", "@babel/plugin-transform-modules-commonjs"],
+                    },
+                }, 'ts-loader'],
             }, {
                 test: /\.css$/,
                 use: [MiniCssExtractPlugin.loader, "css-loader"],
diff --git a/webpack/webpack.dev.ts b/webpack/webpack.dev.ts
index d5f2cc9b..d3712b4a 100644
--- a/webpack/webpack.dev.ts
+++ b/webpack/webpack.dev.ts
@@ -8,13 +8,13 @@ const outputDir = path.join(__dirname, '..', 'dist_dev')
 let manifest: chrome.runtime.ManifestV2
 
 const options = optionGenerator(
-  outputDir,
-  baseManifest => {
-    baseManifest.name = 'IS DEV'
-    // Fix the crx id for development mode
-    baseManifest.key = "clbbddpinhgdejpoepalbfnkogbobfdb"
-    manifest = baseManifest
-  }
+    outputDir,
+    baseManifest => {
+        baseManifest.name = 'IS DEV'
+        // Fix the crx id for development mode
+        baseManifest.key = "clbbddpinhgdejpoepalbfnkogbobfdb"
+        manifest = baseManifest
+    }
 )
 
 options.mode = 'development'
@@ -22,30 +22,30 @@ options.mode = 'development'
 const manifestFirefoxName = 'manifest-firefox.json'
 // The manifest.json is different from Chrome's with add-on ID
 const firefoxManifestGeneratePlugin = new GenerateJsonPlugin(
-  manifestFirefoxName,
-  {
-    ...manifest, browser_specific_settings: { gecko: { id: 'timer@zhy' } }
-  }
+    manifestFirefoxName,
+    {
+        ...manifest, browser_specific_settings: { gecko: { id: 'timer@zhy' } }
+    }
 ) as unknown as webpack.WebpackPluginInstance
 options.plugins.push(firefoxManifestGeneratePlugin)
 const firefoxDevDir = path.join(__dirname, '..', 'firefox_dev')
 // Generate FireFox dev files
 options.plugins.push(
-  new FileManagerWebpackPlugin({
-    events: {
-      onEnd: [
-        {
-          copy: [{ source: outputDir, destination: firefoxDevDir }],
-          delete: [path.join(outputDir, manifestFirefoxName), path.join(firefoxDevDir, 'manifest.json')],
-          move: [{ source: path.join(firefoxDevDir, manifestFirefoxName), destination: path.join(firefoxDevDir, 'manifest.json') }]
+    new FileManagerWebpackPlugin({
+        events: {
+            onEnd: [
+                {
+                    copy: [{ source: outputDir, destination: firefoxDevDir }],
+                    delete: [path.join(outputDir, manifestFirefoxName), path.join(firefoxDevDir, 'manifest.json')],
+                    move: [{ source: path.join(firefoxDevDir, manifestFirefoxName), destination: path.join(firefoxDevDir, 'manifest.json') }]
+                }
+            ]
         }
-      ]
-    }
-  }) as webpack.WebpackPluginInstance,
-  new webpack.DefinePlugin({
-    __VUE_OPTIONS_API__: false,
-    __VUE_PROD_DEVTOOLS__: false
-  })
+    }) as webpack.WebpackPluginInstance,
+    new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: false,
+        __VUE_PROD_DEVTOOLS__: false
+    })
 )
 
 options.output.path = outputDir
@@ -56,4 +56,4 @@ options.devtool = 'cheap-module-source-map'
 // Use cache with filesystem
 options.cache = { type: 'filesystem' }
 
-export default options
\ No newline at end of file
+export default options