Semi

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

@@ -87,7 +87,6 @@ function renderHostLabel({ host, merged, virtual, alias }: timer.site.SiteInfo):
 }
 
 const _default = defineComponent({
-    name: "TrendFilter",
     props: {
         site: Object as PropType<timer.site.SiteKey>,
         timeFormat: String as PropType<timer.app.TimeFormat>

src/app/components/analysis/components/trend/index.ts

@@ -195,7 +195,7 @@ const _default = defineComponent({
         const indicators: Ref<IndicatorSet> = ref()
         const lastIndicators: Ref<IndicatorSet> = ref()
         const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const rangeLength: ComputedRef = computed(() => getDayLenth(dateRange.value?.[0], dateRange.value?.[1]))
+        const rangeLength: ComputedRef<number> = computed(() => getDayLenth(dateRange.value?.[0], dateRange.value?.[1]))
 
         const compute = () => handleDataChange(
             { dateRange: dateRange.value, rows: props.rows },

src/app/components/analysis/index.ts

@@ -53,7 +53,6 @@ const _default = defineComponent(() => {
     const site: Ref<timer.site.SiteKey> = ref(siteFromQuery)
     const timeFormat: Ref<timer.app.TimeFormat> = ref('default')
     const rows: Ref<timer.stat.Row[]> = ref()
-    const filter: Ref = ref()
 
     const queryInner = async () => {
         const siteKey = site.value
@@ -67,7 +66,6 @@ const _default = defineComponent(() => {
         filter: () => h(Filter, {
             site: site.value,
             timeFormat: timeFormat.value,
-            ref: filter,
             onSiteChange: (newSite: timer.site.SiteKey) => site.value = newSite,
             onTimeFormatChange: (newFormat: timer.app.TimeFormat) => timeFormat.value = newFormat
         }),

src/app/components/common/content-container.ts

@@ -9,17 +9,19 @@ import { ElCard, ElScrollbar } from "element-plus"
 import ContentCard from "./content-card"
 import { defineComponent, h, useSlots } from "vue"
 
-const _default = defineComponent(() => {
-    const slots = useSlots()
-    const children = []
-    const { default: default_, filter, content } = slots
-    filter && children.push(h(ElCard, { class: "filter-container" }, () => h(filter)))
-    if (default_) {
-        children.push(h(slots.default))
-    } else {
-        content && children.push(h(ContentCard, () => h(content)))
+const _default = defineComponent({
+    setup() {
+        const slots = useSlots()
+        const children = []
+        const { default: default_, filter, content } = slots
+        filter && children.push(h(ElCard, { class: "filter-container" }, () => h(filter)))
+        if (default_) {
+            children.push(h(slots.default))
+        } else {
+            content && children.push(h(ContentCard, () => h(content)))
+        }
+        return () => h(ElScrollbar, () => h("div", { class: "content-container" }, children))
     }
-    return () => h(ElScrollbar, () => h("div", { class: "content-container" }, children))
 })
 
 export default _default

src/app/components/dashboard/components/calendar-heat-map.ts

@@ -258,7 +258,7 @@ const _default = defineComponent({
         const now = new Date()
         const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
 
-        const chart: Ref = ref()
+        const chart: Ref<HTMLDivElement> = ref()
         const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
 
         onMounted(async () => {

src/app/components/dashboard/components/top-k-visit.ts

@@ -97,12 +97,11 @@ class ChartWrapper {
 }
 
 const _default = defineComponent({
-    name: "TopKVisit",
     setup() {
         const now = new Date()
         const startTime: Date = new Date(now.getTime() - MILL_PER_DAY * DAY_NUM)
 
-        const chart: Ref = ref()
+        const chart: Ref<HTMLDivElement> = ref()
         const chartWrapper: ChartWrapper = new ChartWrapper()
 
         onMounted(async () => {

src/app/components/data-manage/clear/filter/index.ts

@@ -13,6 +13,10 @@ import DateFilter from "./date-filter"
 import NumberFilter from "./number-filter"
 import DeleteButton from "./delete-button"
 
+export type FilterInstance = {
+    getFilterOption(): DataManageClearFilterOption
+}
+
 const _default = defineComponent({
     emits: {
         delete: () => true
@@ -23,17 +27,18 @@ const _default = defineComponent({
         const focusEndRef: Ref<string> = ref('2')
         const timeStartRef: Ref<string> = ref('0')
         const timeEndRef: Ref<string> = ref('')
-        const computeFilterOption = () => ({
-            dateRange: dateRangeRef.value,
-            focusStart: focusStartRef.value,
-            focusEnd: focusEndRef.value,
-            timeStart: timeStartRef.value,
-            timeEnd: timeEndRef.value,
-        } as DataManageClearFilterOption)
 
-        ctx.expose({
-            getFilterOption: computeFilterOption
-        })
+        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)),

src/app/components/data-manage/clear/index.ts

@@ -9,7 +9,7 @@ import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus"
 import { defineComponent, h, Ref, ref, SetupContext } from "vue"
 import { t } from "@app/locale"
 import { alertProps } from "../common"
-import Filter from "./filter"
+import Filter, { FilterInstance } from "./filter"
 import StatDatabase, { StatCondition } from "@db/stat-database"
 import { MILL_PER_DAY } from "@util/time"
 
@@ -109,7 +109,7 @@ const _default = defineComponent({
         dataDelete: () => true
     },
     setup(_, ctx) {
-        const filterRef: Ref = ref()
+        const filter: Ref<FilterInstance> = ref()
         return () => h(ElCard, {
             class: 'clear-container'
         }, () => [
@@ -118,8 +118,8 @@ const _default = defineComponent({
                 title: t(msg => msg.dataManage.operationAlert)
             }),
             h(Filter, {
-                ref: filterRef,
-                onDelete: () => handleClick(filterRef, ctx),
+                ref: filter,
+                onDelete: () => handleClick(filter, ctx),
             }),
         ])
     }

src/app/components/data-manage/index.ts

@@ -9,13 +9,15 @@ 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 from "./memory-info"
+import MemeryInfo, { MemeryInfoInstance } from "./memory-info"
 import ClearPanel from "./clear"
 import './style'
 
 export default defineComponent(() => {
-    const memeryInfoRef: Ref = ref()
-    const queryData = () => memeryInfoRef?.value?.queryData()
+    const memeryInfoRef: Ref<MemeryInfoInstance> = ref()
+
+    const queryData = () => memeryInfoRef.value?.queryData()
+
     return () => h(ContentContainer, {
         class: 'data-manage-container'
     }, () => h(ElRow, { gutter: 20 },

src/app/components/data-manage/memory-info.ts

@@ -11,6 +11,10 @@ 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 })
@@ -19,6 +23,7 @@ const memoryAlert = (totalMb: number) => {
     !totalMb && (props.type = 'warning')
     return h(ElAlert, props)
 }
+
 const progressStyle: Partial<CSSStyleDeclaration> = {
     height: '260px',
     paddingTop: '50px'
@@ -53,7 +58,6 @@ function computeColor(percentage: number, total: number): string {
 }
 
 const _default = defineComponent({
-    name: "MemoryInfo",
     setup(_, ctx) {
         // Total memory with byte
         const usedRef: Ref<number> = ref(0)
@@ -64,8 +68,11 @@ const _default = defineComponent({
             usedRef.value = used || 0
             totalRef.value = total
         }
+
+        const instance: MemeryInfoInstance = { queryData }
+        ctx.expose(instance)
+
         queryData()
-        ctx.expose({ queryData })
 
         const usedMbRef: ComputedRef<number> = computed(() => byte2Mb(usedRef.value))
         const totalMbRef: ComputedRef<number> = computed(() => byte2Mb(totalRef.value))

src/app/components/data-manage/migration/import-button.ts

@@ -37,20 +37,20 @@ const _default = defineComponent({
         import: () => true
     },
     setup(_, ctx) {
-        const fileInputRef = ref<HTMLInputElement>()
+        const fileInput = ref<HTMLInputElement>()
         return () => h(ElButton, {
             size: 'large',
             type: 'primary',
             icon: Upload,
-            onClick: () => fileInputRef.value.click()
+            onClick: () => fileInput.value.click()
         }, () => [
             t(msg => msg.item.operation.importWholeData),
             h('input', {
-                ref: fileInputRef,
+                ref: fileInput,
                 type: 'file',
                 accept: '.json',
                 style: { display: 'none' },
-                onChange: () => handleFileSelected(fileInputRef, () => ctx.emit('import'))
+                onChange: () => handleFileSelected(fileInput, () => ctx.emit('import'))
             })
         ])
     }

src/app/components/data-manage/migration/import-other-button/style.sass

@@ -1,16 +1,4 @@
 
-.sop-dialog-container
-    margin-right: 16px
-.step-container
-    width: 400px
-    margin: auto
-    .el-step__head
-        .el-step__line
-            margin-right: -50% !important
-            left: 50% !important
-    .el-step__title
-        text-align: center
-
 .operation-container
     margin: 40px 20px 0 20px
 
@@ -46,14 +34,3 @@
     margin-top: 20px
     text-align: center
     line-height: 32px
-
-.sop-footer
-    display: block
-    width: 100%
-    margin: auto
-    margin-top: 40px
-    .el-button
-        width: initial !important
-        height: initial !important
-    .el-button:not(:last-child)
-        margin-right: 10px

src/app/components/habit/component/chart/index.ts

@@ -10,15 +10,20 @@ import type { Ref } from "vue"
 import ChartWrapper from "./wrapper"
 import { defineComponent, h, onMounted, ref } from "vue"
 
+export type HabitChartInstance = {
+    render(data: timer.period.Row[], averageByDate: boolean, periodSize: number): void
+}
+
 const _default = defineComponent({
     name: "HabitChart",
     setup(_, ctx) {
         const elRef: Ref<HTMLDivElement> = ref()
         const wrapper: ChartWrapper = new ChartWrapper()
         onMounted(() => wrapper.init(elRef.value))
-        ctx.expose({
-            render: (data: timer.period.Row[], averageByDate: boolean, periodSize: number) => wrapper.render(data, averageByDate, periodSize)
-        })
+        const instance: HabitChartInstance = {
+            render: (data, averageByDate, periodSize) => wrapper.render(data, averageByDate, periodSize)
+        }
+        ctx.expose(instance)
         return () => h('div', {
             class: 'chart-container',
             ref: elRef

src/app/components/habit/index.ts

@@ -11,7 +11,7 @@ import { defineComponent, h, ref, onMounted } from "vue"
 import periodService from "@service/period-service"
 import { daysAgo, isSameDay } from "@util/time"
 import ContentContainer from "@app/components/common/content-container"
-import HabitChart from "./component/chart"
+import HabitChart, { HabitChartInstance } from "./component/chart"
 import HabitFilter from "./component/filter"
 import { keyOf, MAX_PERIOD_ORDER, keyBefore } from "@util/period"
 
@@ -49,9 +49,8 @@ function computeParam(periodSize: Ref<number>, dateRange: Ref<Date[]>, averageBy
 }
 
 const _default = defineComponent({
-    name: "Habit",
     setup() {
-        const chart: Ref = ref()
+        const chart: Ref<HabitChartInstance> = ref()
         const periodSize: Ref<number> = ref(1)
         //@ts-ignore ts(2322)
         const dateRange: Ref<Date[]> = ref(daysAgo(1, 0))
@@ -60,7 +59,7 @@ const _default = defineComponent({
         async function queryAndRender() {
             const queryParam = computeParam(periodSize, dateRange, averageByDate)
             const result = await periodService.list(queryParam)
-            chart?.value.render?.(result, averageByDate.value, periodSize.value)
+            chart.value.render?.(result, averageByDate.value, periodSize.value)
         }
 
         onMounted(queryAndRender)

src/app/components/limit/index.ts

@@ -9,8 +9,8 @@ import { defineComponent, h, ref, Ref } from "vue"
 import ContentContainer from "../common/content-container"
 import LimitFilter from "./filter"
 import LimitTable from "./table"
-import LimitModify from "./modify"
-import LimitTest from "./test"
+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"
@@ -34,8 +34,8 @@ const _default = defineComponent(() => {
     useRouter().replace({ query: {} })
     urlParam && (url.value = decodeURIComponent(urlParam))
 
-    const modify: Ref = ref()
-    const test: Ref = ref()
+    const modify: Ref<ModifyInstance> = ref()
+    const test: Ref<TestInstance> = ref()
 
     return () => h(ContentContainer, {}, {
         filter: () => h(LimitFilter, {