From 962e872c23b3912bb7d248126fa101961e3447af Mon Sep 17 00:00:00 2001 From: sheepzh Date: Tue, 15 Apr 2025 21:21:00 +0800 Subject: [PATCH] refactor: refactor with provider --- src/database/memory-detector.ts | 2 +- src/pages/app/components/About/DescLink.tsx | 30 ++-- .../app/components/About/InstallationLink.tsx | 27 ++- src/pages/app/components/Analysis/common.ts | 3 - .../AnalysisFilter/TargetSelect.tsx | 142 ++++++++------- .../components/AnalysisFilter/index.tsx | 65 ++----- .../components/Summary/TargetInfo.tsx | 96 +++++----- .../Analysis/components/Trend/Filter.tsx | 46 +++-- .../Analysis/components/Trend/Total.tsx | 65 +++---- .../Analysis/components/Trend/context.ts | 145 ++++++++++++++- .../Analysis/components/Trend/index.tsx | 166 ++---------------- src/pages/app/components/Analysis/context.ts | 61 ++++++- src/pages/app/components/Analysis/index.tsx | 64 +------ .../app/components/Dashboard/ChartTitle.tsx | 19 +- .../components/Dashboard/DashboardCard.tsx | 44 +---- .../Dashboard/components/Indicator/index.tsx | 41 ++--- .../DataManage/ClearPanel/index.tsx | 47 +++-- .../app/components/DataManage/MemoryInfo.tsx | 76 ++++---- .../DataManage/Migration/ImportButton.tsx | 48 +++-- .../Migration/ImportOtherButton/Sop.tsx | 7 +- .../Migration/ImportOtherButton/index.tsx | 56 +++--- .../components/DataManage/Migration/index.tsx | 69 ++++---- .../app/components/DataManage/context.ts | 17 ++ src/pages/app/components/DataManage/index.tsx | 14 +- .../Habit/components/HabitFilter.tsx | 60 ++----- .../Habit/components/Period/Average/index.tsx | 2 +- .../Habit/components/Period/Filter.tsx | 79 ++++----- .../Habit/components/Period/Stack/index.tsx | 2 +- .../Habit/components/Period/Summary.tsx | 4 +- .../Habit/components/Period/Trend/index.tsx | 2 +- .../Habit/components/Period/context.ts | 61 ++++++- .../Habit/components/Period/index.tsx | 84 ++------- .../components/Site/DailyTrend/index.tsx | 12 +- .../components/Site/Distribution/index.tsx | 2 +- .../Habit/components/Site/Summary.tsx | 9 +- .../Habit/components/Site/TopK/index.tsx | 2 +- .../Habit/components/Site/context.ts | 24 ++- .../Habit/components/Site/index.tsx | 17 +- .../components/Habit/components/context.ts | 19 +- src/pages/app/components/Habit/index.tsx | 19 +- .../Option/components/BackupOption/Footer.tsx | 84 ++++----- src/pages/app/components/Option/index.tsx | 7 +- .../components/Report/ReportFilter/index.tsx | 2 +- .../ReportTable/columns/OperationColumn.tsx | 2 +- .../common/filter/TimeFormatFilterItem.tsx | 29 ++- src/pages/hooks/index.ts | 3 + src/pages/util/style.ts | 2 +- 47 files changed, 851 insertions(+), 1026 deletions(-) delete mode 100644 src/pages/app/components/Analysis/common.ts create mode 100644 src/pages/app/components/DataManage/context.ts diff --git a/src/database/memory-detector.ts b/src/database/memory-detector.ts index 64ef51508..5579bef5e 100644 --- a/src/database/memory-detector.ts +++ b/src/database/memory-detector.ts @@ -10,7 +10,7 @@ import StoragePromise from "./common/storage-promise" /** * User memory of this extension */ -type MemoryInfo = { +export type MemoryInfo = { /** * Used bytes */ diff --git a/src/pages/app/components/About/DescLink.tsx b/src/pages/app/components/About/DescLink.tsx index 6651884d6..26590c20e 100644 --- a/src/pages/app/components/About/DescLink.tsx +++ b/src/pages/app/components/About/DescLink.tsx @@ -1,24 +1,18 @@ import { ElLink } from "element-plus" -import { defineComponent, h, useSlots, type PropType } from "vue" +import { defineComponent, h, useSlots } from "vue" import "./desc-link.sass" -export type Icon = "github" | "element-plus" | "echarts" | "vue" +type Icon = "github" | "element-plus" | "echarts" | "vue" -const _default = defineComponent({ - props: { - href: String, - icon: String as PropType - }, - setup(props) { - const { icon, href } = props - const { default: default_ } = useSlots() - return () => ( - - {icon ?
: null} - {!!default_ && h(default_)} - - ) - } -}) +const _default = defineComponent<{ href?: string, icon?: Icon }>(props => { + const { icon, href } = props + const { default: default_ } = useSlots() + return () => ( + + {icon ?
: null} + {!!default_ && h(default_)} + + ) +}, { props: ['href', 'icon'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/About/InstallationLink.tsx b/src/pages/app/components/About/InstallationLink.tsx index 71c82fe40..e4cb57841 100644 --- a/src/pages/app/components/About/InstallationLink.tsx +++ b/src/pages/app/components/About/InstallationLink.tsx @@ -1,23 +1,16 @@ -import { type PropType, defineComponent } from "vue" +import { defineComponent } from "vue" import "./installation-link.sass" type _Source = 'chrome' | 'firefox' | 'edge' | 'kiwi' -const _default = defineComponent({ - props: { - source: String as PropType<_Source>, - name: String, - href: String, - }, - setup({ source, name, href }) { - return () => -
- -
- {name} - -
- } -}) +const _default = defineComponent<{ source: _Source, name: string, href: string }>(({ source, name, href }) => { + return () => +
+ +
+ {name} + +
+}, { props: ['source', 'name', 'href'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Analysis/common.ts b/src/pages/app/components/Analysis/common.ts deleted file mode 100644 index 00fa84ccb..000000000 --- a/src/pages/app/components/Analysis/common.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type AnalysisQuery = Partial & { - cateId?: string -} \ No newline at end of file diff --git a/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx b/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx index 228935b2d..06d1dd0a7 100644 --- a/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx +++ b/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx @@ -6,9 +6,10 @@ import siteService from "@service/site-service" import statService from "@service/stat-service" import { identifySiteKey, parseSiteKeyFromIdentity, SiteMap } from "@util/site" import { useDebounce } from "@vueuse/core" -import { ElSelectV2, ElTag } from "element-plus" +import { ElSelectV2, ElTag, useNamespace } from "element-plus" import type { OptionType } from "element-plus/es/components/select-v2/src/select.types" -import { computed, defineComponent, type PropType, type StyleValue } from "vue" +import { computed, defineComponent, onMounted, ref, type PropType, type StyleValue } from "vue" +import { useAnalysisTarget } from "../../context" import type { AnalysisTarget } from "../../types" import { labelOfHostInfo } from "../../util" @@ -113,77 +114,82 @@ const SiteOption = defineComponent({ }, }) -const TargetSelect = defineComponent({ - props: { - modelValue: Object as PropType, - }, - emits: { - change: (_val?: AnalysisTarget) => true, - }, - setup(props, ctx) { - const { categories } = useCategories() - const selectKey = computed(() => cvtTarget2Key(props.modelValue)) - - const emitChange = (selectKey?: string) => { - const target = cvtKey2Target(selectKey) - ctx.emit('change', target) - } +const TargetSelect = defineComponent(() => { + const { categories } = useCategories() - const { data: allItems } = useRequest( - () => fetchItems(categories.value), - { deps: categories }, - ) + const target = useAnalysisTarget() + const selectKey = computed({ + get: () => cvtTarget2Key(target.value), + set: key => target.value = cvtKey2Target(key), + }) - const [query, setQuery] = useState('') - const debouncedQuery = useDebounce(query, 50) - - const options = computed(() => { - const q = debouncedQuery.value?.trim?.() - let [cateItems, siteItems] = allItems.value || [] - if (q) { - siteItems = siteItems?.filter(item => { - const { host, alias } = (item.key as timer.site.SiteInfo) || {} - return host?.includes?.(q) || alias?.includes?.(q) - }) - cateItems = cateItems?.filter(item => item.label?.includes?.(q)) - } - - let res: OptionType[] = [] - cateItems?.length && res.push({ - value: 'cate', - label: t(msg => msg.analysis.target.cate), - options: cateItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), + const { data: allItems } = useRequest( + () => fetchItems(categories.value), + { deps: categories }, + ) + + const [query, setQuery] = useState('') + const debouncedQuery = useDebounce(query, 50) + + const options = computed(() => { + const q = debouncedQuery.value?.trim?.() + let [cateItems, siteItems] = allItems.value || [] + if (q) { + siteItems = siteItems?.filter(item => { + const { host, alias } = (item.key as timer.site.SiteInfo) || {} + return host?.includes?.(q) || alias?.includes?.(q) }) - siteItems?.length && res.push({ - value: 'site', - label: t(msg => msg.analysis.target.site), - options: siteItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), - }) - if (res.length === 1) { - // Single content, not use group - res = res[0].options - } - return res + cateItems = cateItems?.filter(item => item.label?.includes?.(q)) + } + + let res: OptionType[] = [] + cateItems?.length && res.push({ + value: 'cate', + label: t(msg => msg.analysis.target.cate), + options: cateItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), + }) + siteItems?.length && res.push({ + value: 'site', + label: t(msg => msg.analysis.target.site), + options: siteItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), }) + if (res.length === 1) { + // Single content, not use group + res = res[0].options + } + return res + }) - return () => ( - msg.analysis.common.hostPlaceholder)} - modelValue={selectKey.value} - filterable - filterMethod={setQuery} - onChange={emitChange} - style={{ width: '240px' } as StyleValue} - defaultFirstOption - options={options.value ?? []} - fitInputWidth={false} - v-slots={({ item }: any) => { - const target = (item as any).data as TargetItem - return target?.type === 'site' ? : target?.label - }} - /> - ) - }, + const ns = useNamespace('select') + const select = ref>() + onMounted(() => { + if (target.value) return + let el = select.value?.$el as HTMLElement | undefined + if (!el) return + el.click() + const input = el.querySelector(`.${ns.e('input')}`) as HTMLInputElement + (el.querySelector(`.${ns.e('wrapper')}`) as HTMLElement)?.classList?.add?.(ns.is('focused')) + input?.click?.() + }) + + return () => ( + msg.analysis.common.hostPlaceholder)} + modelValue={selectKey.value} + onChange={val => selectKey.value = val} + filterable + filterMethod={setQuery} + style={{ width: '240px' } as StyleValue} + defaultFirstOption + options={options.value ?? []} + fitInputWidth={false} + v-slots={({ item }: any) => { + const target = (item as any).data as TargetItem + return target?.type === 'site' ? : target?.label + }} + /> + ) }) export default TargetSelect \ No newline at end of file diff --git a/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx b/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx index fd6edaa1c..6c8b29fea 100644 --- a/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx +++ b/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx @@ -6,62 +6,23 @@ */ import TimeFormatFilterItem from "@app/components/common/filter/TimeFormatFilterItem" -import { useState } from "@hooks" import Flex from "@pages/components/Flex" -import { defineComponent, type PropType, ref, VNode, VNodeRef, watch } from "vue" -import type { AnalysisTarget } from "../../types" +import { defineComponent } from "vue" +import { useAnalysisTimeFormat } from "../../context" import TargetSelect from "./TargetSelect" -import { useNamespace } from "element-plus" -export type AnalysisFilterInstance = { - openTargetSelect: () => void -} +const AnalysisFilter = defineComponent(() => { + const timeFormat = useAnalysisTimeFormat() -const AnalysisFilter = defineComponent({ - props: { - target: Object as PropType, - timeFormat: { - type: String as PropType, - required: true, - } - }, - emits: { - targetChange: (_target: AnalysisTarget | undefined) => true, - timeFormatChange: (_format: timer.app.TimeFormat) => true, - }, - setup(props, ctx) { - const [target, setTarget] = useState(props.target) - const [timeFormat, setTimeFormat] = useState(props.timeFormat) - watch(target, () => ctx.emit('targetChange', target.value)) - watch(timeFormat, () => ctx.emit('timeFormatChange', timeFormat.value)) - - const targetSelect: VNodeRef = ref() - const { is } = useNamespace('select') - const openTargetSelect = () => { - const targetEl = targetSelect.value?.$el as HTMLDivElement - targetEl?.click?.() - const input = targetEl?.querySelector('.el-select__input') as HTMLInputElement - (targetEl?.querySelector('.el-select__wrapper') as HTMLElement)?.classList?.add?.(is('focused')) - // input?.focus?.() - input?.click?.() - } - - ctx.expose({ openTargetSelect } satisfies AnalysisFilterInstance) - - return () => ( - - - - - ) - } + return () => ( + + + timeFormat.value = val} + /> + + ) }) export default AnalysisFilter \ No newline at end of file diff --git a/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx b/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx index e700d70b5..df978a180 100644 --- a/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx +++ b/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx @@ -7,11 +7,11 @@ import { useCategories } from "@app/context" import { t } from "@app/locale" +import { useRequest } from "@hooks" import Flex from "@pages/components/Flex" import siteService from "@service/site-service" -import { computedAsync } from "@vueuse/core" import { ElTag } from "element-plus" -import { computed, defineComponent, type PropType, type StyleValue, toRef } from "vue" +import { computed, defineComponent, type StyleValue, toRef } from "vue" import { useAnalysisTarget } from "../../context" import { labelOfHostInfo } from "../../util" @@ -33,62 +33,50 @@ const SUBTITLE_STYLE: StyleValue = { margin: 0, } -const SiteInfo = defineComponent({ - props: { - value: Object as PropType, - }, - setup(props) { - const key = toRef(props, 'value') - const site = computedAsync(() => key.value ? siteService.get(key.value) : undefined) - const iconUrl = computed(() => site.value?.iconUrl) - const title = computed(() => site.value?.alias ?? labelOfHostInfo(site.value)) - const subtitle = computed(() => site.value?.alias ? labelOfHostInfo(site.value) : undefined) +const SiteInfo = defineComponent<{ value: timer.site.SiteKey }>(props => { + const key = toRef(props, 'value') + const { data: site } = useRequest(() => key.value ? siteService.get(key.value) : undefined, { deps: key }) + const iconUrl = computed(() => site.value?.iconUrl) + const title = computed(() => site.value?.alias ?? labelOfHostInfo(site.value)) + const subtitle = computed(() => site.value?.alias ? labelOfHostInfo(site.value) : undefined) - return () => ( - - -

{title.value}

- {subtitle &&

{subtitle.value}

} - - ) - }, -}) + return () => ( + + +

{title.value}

+ {subtitle &&

{subtitle.value}

} + + ) +}, { props: ['value'] }) -const CateInfo = defineComponent({ - props: { - value: Number, - }, - setup(props) { - const cateId = toRef(props, 'value') - const { categories } = useCategories() - const cate = computed(() => categories.value?.find(c => c.id === cateId.value)) +const CateInfo = defineComponent<{ value: number }>(props => { + const cateId = toRef(props, 'value') + const { categories } = useCategories() + const cate = computed(() => categories.value?.find(c => c.id === cateId.value)) - return () => ( - -

{cate.value?.name}

- {t(msg => msg.analysis.target.cate)} - - ) - }, -}) + return () => ( + +

{cate.value?.name}

+ {t(msg => msg.analysis.target.cate)} + + ) +}, { props: ['value'] }) -const TargetInfo = defineComponent({ - setup: () => { - const target = useAnalysisTarget() - return () => ( - - {!target.value &&

{t(msg => msg.analysis.common.emptyDesc)}

} - {target.value?.type === 'site' && } - {target.value?.type === 'cate' && } - - ) - } +const TargetInfo = defineComponent(() => { + const target = useAnalysisTarget() + return () => ( + + {!target.value &&

{t(msg => msg.analysis.common.emptyDesc)}

} + {target.value?.type === 'site' && } + {target.value?.type === 'cate' && } + + ) }) export default TargetInfo diff --git a/src/pages/app/components/Analysis/components/Trend/Filter.tsx b/src/pages/app/components/Analysis/components/Trend/Filter.tsx index bae6d0c65..ed2dadce3 100644 --- a/src/pages/app/components/Analysis/components/Trend/Filter.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Filter.tsx @@ -11,7 +11,8 @@ import { type ElementDatePickerShortcut } from "@pages/element-ui/date" import { getDatePickerIconSlots } from "@pages/element-ui/rtl" import { daysAgo } from "@util/time" import { ElDatePicker } from "element-plus" -import { defineComponent, ref, type PropType } from "vue" +import { defineComponent } from "vue" +import { useAnalysisTrendDateRange } from "./context" function datePickerShortcut(agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut { return { @@ -27,31 +28,24 @@ const SHORTCUTS = [ datePickerShortcut(90), ] -const _default = defineComponent({ - props: { - dateRange: [Object, Object] as PropType<[Date, Date]> - }, - emits: { - dateRangeChange: (_val: [Date, Date]) => true - }, - setup(props, ctx) { - const dateRange = ref<[Date, Date] | undefined>(props.dateRange) - return () => ( -
- 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)} - v-slots={getDatePickerIconSlots()} - /> -
- ) - } +const _default = defineComponent(() => { + const dateRange = useAnalysisTrendDateRange() + + return () => ( +
+ date.getTime() > new Date().getTime()} + format={dateFormat()} + type="daterange" + shortcuts={SHORTCUTS} + rangeSeparator="-" + clearable={false} + onUpdate:modelValue={(newVal: [Date, Date]) => dateRange.value = newVal} + v-slots={getDatePickerIconSlots()} + /> +
+ ) }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Analysis/components/Trend/Total.tsx b/src/pages/app/components/Analysis/components/Trend/Total.tsx index 72248ffd7..2831221ec 100644 --- a/src/pages/app/components/Analysis/components/Trend/Total.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Total.tsx @@ -5,53 +5,44 @@ * https://opensource.org/licenses/MIT */ -import { type RingValue } from "@app/components/Analysis/util" +import type { RingValue } from "@app/components/Analysis/util" import { KanbanIndicatorCell } from "@app/components/common/kanban" import { t } from "@app/locale" import { periodFormatter } from "@app/util/time" -import { defineComponent, type PropType } from "vue" +import { defineComponent } from "vue" import { useAnalysisTimeFormat } from "../../context" import { useAnalysisTrendRangeLength } 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 computeDayValue = (activeDay: RingValue | undefined, rangeLength: number) => { const thisActiveDay = activeDay?.[0] return `${thisActiveDay?.toString() || '-'}/${rangeLength?.toString() || '-'}` } -const _default = defineComponent({ - props: { - activeDay: [Object, Object] as PropType, - visit: [Object, Object] as PropType, - focus: [Object, Object] as PropType, - }, - setup(props) { - const rangeLength = useAnalysisTrendRangeLength() - const timeFormat = useAnalysisTimeFormat() - return () => ( -
- - periodFormatter(delta, { format: timeFormat.value })} - /> - -
- ) - } -}) +type Props = Record<'activeDay' | 'visit' | 'focus', RingValue> + +const _default = defineComponent(props => { + const rangeLength = useAnalysisTrendRangeLength() + const timeFormat = useAnalysisTimeFormat() + return () => ( +
+ msg.analysis.trend.activeDay)}/${t(msg => msg.analysis.trend.totalDay)}`} + mainValue={computeDayValue(props.activeDay, rangeLength.value)} + subRing={props.activeDay} + /> + msg.analysis.common.focusTotal)} + mainValue={periodFormatter(props.focus?.[0], { format: timeFormat.value })} + subRing={props.focus} + valueFormatter={delta => periodFormatter(delta, { format: timeFormat.value })} + /> + msg.analysis.common.visitTotal)} + mainValue={props.visit?.[0]?.toString() || '-'} + subRing={props.visit} + /> +
+ ) +}, { props: ['activeDay', 'focus', 'visit'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Analysis/components/Trend/context.ts b/src/pages/app/components/Analysis/components/Trend/context.ts index 2ba9bd1f7..2173fc7d4 100644 --- a/src/pages/app/components/Analysis/components/Trend/context.ts +++ b/src/pages/app/components/Analysis/components/Trend/context.ts @@ -5,22 +5,153 @@ * https://opensource.org/licenses/MIT */ +import { cvt2LocaleTime } from "@app/util/time" import { useProvide, useProvider } from "@hooks" -import { type Ref } from "vue" +import { groupBy } from "@util/array" +import { daysAgo, getAllDatesBetween, getDayLength, MILL_PER_DAY } from "@util/time" +import { computed, onMounted, ref, watch, type Ref } from "vue" +import { useAnalysisRows } from "../../context" +import type { DimensionEntry } from "../../util" +import type { DimensionData } from "./Dimension" type Context = { dateRange: Ref<[Date, Date]> rangeLength: Ref } +type DailyIndicator = { + value: number | undefined + date: string | undefined +} + +type GlobalIndicator = number + +type DimensionType = 'focus' | 'visit' + +type IndicatorSet = Record & { + activeDay: number +} + +type SourceParam = { + dateRange: [Date, Date] + rows: timer.stat.Row[] +} + +type EffectParam = { + indicators: Ref + previousIndicators: Ref + focusData: Ref + visitData: Ref +} + +function computeIndicatorSet( + rows: timer.stat.Row[], + dateRange: [Date, Date] | undefined, +): [IndicatorSet | undefined, Record] { + const [start, end] = dateRange || [] + const allDates = start && end ? getAllDatesBetween(start, end) : [] + if (!rows) { + // No data + return [undefined, groupBy(allDates, date => date, _l => undefined)] + } + + const days = allDates.length + const periodRows = rows.filter(({ date }) => allDates.includes(date ?? '')) + const periodRowMap = groupBy(periodRows, r => r.date, a => a[0]) + let focusMax: DailyIndicator + let visitMax: DailyIndicator + let focusTotal: number, visitTotal: number, activeDay: number + focusMax = visitMax = { date: undefined, value: undefined } + activeDay = focusTotal = visitTotal = 0 + + const fullPeriodRow: Record = {} + allDates.forEach(date => { + const row = periodRowMap[date] + if (!(fullPeriodRow[date] = row)) return + const { focus, time: visit } = row + focus > (focusMax.value ?? Number.MIN_SAFE_INTEGER) && (focusMax = { value: focus, date }) + visit > (visitMax.value ?? Number.MIN_SAFE_INTEGER) && (visitMax = { value: visit, date }) + focusTotal += focus + visitTotal += visit + focus && (activeDay += 1) + }) + + const indicators: IndicatorSet = { + activeDay, + focus: { max: focusMax, total: focusTotal, average: days == 0 ? undefined : focusTotal / days }, + visit: { max: visitMax, total: visitTotal, average: days == 0 ? undefined : visitTotal / days }, + } + return [indicators, fullPeriodRow] +} + +function lastRange(dateRange: [Date, Date]): [Date, Date] | undefined { + const [start, end] = dateRange || [] + if (!start || !end) return undefined + const dayLength = getDayLength(start, end) + const newEnd = new Date(start.getTime() - MILL_PER_DAY) + const newStart = new Date(start.getTime() - MILL_PER_DAY * dayLength) + return [newStart, newEnd] +} + +function handleDataChange(source: SourceParam, effect: EffectParam) { + const { dateRange, rows } = source + const { indicators, previousIndicators, focusData, visitData } = effect + // 1. this period + const [newIndicators, periodRows] = computeIndicatorSet(rows, dateRange) + indicators.value = newIndicators + const newFocusData: DimensionEntry[] = [] + const newVisitData: DimensionEntry[] = [] + Object.entries(periodRows) + .forEach(([rowDate, row]) => { + const { time, focus } = row || {} + const date = cvt2LocaleTime(rowDate) + newFocusData.push({ date, value: focus || 0 }) + newVisitData.push({ date, value: time || 0 }) + }) + // 2. last period + const prevDateRange = lastRange(dateRange) + const [preIndicator, prePeriodRows] = computeIndicatorSet(rows, prevDateRange) + previousIndicators.value = preIndicator + const preFocusData: DimensionEntry[] = [] + const preVisitData: DimensionEntry[] = [] + Object.entries(prePeriodRows) + .forEach(([rowDate, row]) => { + const { time, focus } = row || {} + const date = cvt2LocaleTime(rowDate) + preFocusData.push({ date, value: focus || 0 }) + preVisitData.push({ date, value: time || 0 }) + }) + focusData.value = { thisPeriod: newFocusData, previousPeriod: preFocusData } + visitData.value = { thisPeriod: newVisitData, previousPeriod: preVisitData } +} + const NAMESPACE = 'siteAnalysis_trend' -export const initProvider = ( - dateRange: Ref<[Date, Date]>, - rangeLength: Ref, -) => useProvide(NAMESPACE, { - dateRange, rangeLength -}) +export const initAnalysisTrend = () => { + const dateRange = ref(daysAgo(14, 0)) + const rangeLength = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1])) + + const visitData = ref() + const focusData = ref() + const indicators = ref() + const previousIndicators = ref() + const rows = useAnalysisRows() + + const computeEffect = () => handleDataChange( + { dateRange: dateRange.value, rows: rows.value }, + { indicators, previousIndicators, visitData, focusData } + ) + watch([dateRange, rows], computeEffect) + onMounted(computeEffect) + + useProvide(NAMESPACE, { dateRange, rangeLength }) + + return { visitData, focusData, indicators, previousIndicators } +} export const useAnalysisTrendDateRange = () => useProvider(NAMESPACE, "dateRange").dateRange diff --git a/src/pages/app/components/Analysis/components/Trend/index.tsx b/src/pages/app/components/Analysis/components/Trend/index.tsx index 2f049912f..dd968caeb 100644 --- a/src/pages/app/components/Analysis/components/Trend/index.tsx +++ b/src/pages/app/components/Analysis/components/Trend/index.tsx @@ -4,165 +4,27 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { type DimensionEntry, type ValueFormatter } from "@app/components/Analysis/util" import { KanbanCard } from "@app/components/common/kanban" import { t } from "@app/locale" -import { cvt2LocaleTime, periodFormatter } from "@app/util/time" -import { useState } from "@hooks" -import { groupBy } from "@util/array" -import { MILL_PER_DAY, daysAgo, getAllDatesBetween, getDayLength } from "@util/time" -import { computed, defineComponent, onMounted, ref, watch, type Ref } from "vue" -import { useAnalysisRows, useAnalysisTimeFormat } from "../../context" -import { initProvider } from "./context" -import Dimension, { DimensionData } from "./Dimension" +import { periodFormatter } from "@app/util/time" +import { defineComponent } from "vue" +import { useAnalysisTimeFormat } from "../../context" +import { initAnalysisTrend } from "./context" +import Dimension from "./Dimension" import Filter from "./Filter" import './style.sass' import Total from "./Total" -type DailyIndicator = { - value: number | undefined - date: string | undefined -} - -type GlobalIndicator = number - -type DimensionType = 'focus' | 'visit' - -type IndicatorSet = Record & { - activeDay: number -} - -type SourceParam = { - dateRange: [Date, Date] - rows: timer.stat.Row[] -} - -type EffectParam = { - indicators: Ref - previousIndicators: Ref - focusData: Ref - visitData: Ref -} - -const VISIT_MAX = t(msg => msg.analysis.trend.maxVisit) -const VISIT_AVE = t(msg => msg.analysis.trend.averageVisit) -const VISIT_CHART_TITLE = t(msg => msg.analysis.trend.visitTitle) -const FOCUS_MAX = t(msg => msg.analysis.trend.maxFocus) -const FOCUS_AVE = t(msg => msg.analysis.trend.averageFocus) -const FOCUS_CHART_TITLE = t(msg => msg.analysis.trend.focusTitle) - -function computeIndicatorSet( - rows: timer.stat.Row[], - dateRange: [Date, Date] | undefined, -): [IndicatorSet | undefined, Record] { - const [start, end] = dateRange || [] - const allDates = start && end ? getAllDatesBetween(start, end) : [] - if (!rows) { - // No data - return [undefined, groupBy(allDates, date => date, _l => undefined)] - } - - const days = allDates.length - const periodRows = rows.filter(({ date }) => allDates.includes(date ?? '')) - const periodRowMap = groupBy(periodRows, r => r.date, a => a[0]) - let focusMax: DailyIndicator - let visitMax: DailyIndicator - let focusTotal: number, visitTotal: number, activeDay: number - focusMax = visitMax = { date: undefined, value: undefined } - activeDay = focusTotal = visitTotal = 0 - - const fullPeriodRow: Record = {} - allDates.forEach(date => { - const row = periodRowMap[date] - if (!(fullPeriodRow[date] = row)) return - const { focus, time: visit } = row - focus > (focusMax.value ?? Number.MIN_SAFE_INTEGER) && (focusMax = { value: focus, date }) - visit > (visitMax.value ?? Number.MIN_SAFE_INTEGER) && (visitMax = { value: visit, date }) - focusTotal += focus - visitTotal += visit - focus && (activeDay += 1) - }) - - const indicators: IndicatorSet = { - activeDay, - focus: { max: focusMax, total: focusTotal, average: days == 0 ? undefined : focusTotal / days }, - visit: { max: visitMax, total: visitTotal, average: days == 0 ? undefined : visitTotal / days }, - } - return [indicators, fullPeriodRow] -} - -function lastRange(dateRange: [Date, Date]): [Date, Date] | undefined { - const [start, end] = dateRange || [] - if (!start || !end) return undefined - const dayLength = getDayLength(start, end) - const newEnd = new Date(start.getTime() - MILL_PER_DAY) - const newStart = new Date(start.getTime() - MILL_PER_DAY * dayLength) - return [newStart, newEnd] -} - -const visitFormatter: ValueFormatter = (val: number | undefined) => (Number.isInteger(val) ? val?.toString() : val?.toFixed(1)) ?? '-' - -function handleDataChange(source: SourceParam, effect: EffectParam) { - const { dateRange, rows } = source - const { indicators, previousIndicators, focusData, visitData } = effect - // 1. this period - const [newIndicators, periodRows] = computeIndicatorSet(rows, dateRange) - indicators.value = newIndicators - const newFocusData: DimensionEntry[] = [] - const newVisitData: DimensionEntry[] = [] - Object.entries(periodRows) - .forEach(([rowDate, row]) => { - const { time, focus } = row || {} - const date = cvt2LocaleTime(rowDate) - newFocusData.push({ date, value: focus || 0 }) - newVisitData.push({ date, value: time || 0 }) - }) - // 2. last period - const prevDateRange = lastRange(dateRange) - const [preIndicator, prePeriodRows] = computeIndicatorSet(rows, prevDateRange) - previousIndicators.value = preIndicator - const preFocusData: DimensionEntry[] = [] - const preVisitData: DimensionEntry[] = [] - Object.entries(prePeriodRows) - .forEach(([rowDate, row]) => { - const { time, focus } = row || {} - const date = cvt2LocaleTime(rowDate) - preFocusData.push({ date, value: focus || 0 }) - preVisitData.push({ date, value: time || 0 }) - }) - focusData.value = { thisPeriod: newFocusData, previousPeriod: preFocusData } - visitData.value = { thisPeriod: newVisitData, previousPeriod: preVisitData } -} +const visitFormatter = (val: number | undefined) => (Number.isInteger(val) ? val?.toString() : val?.toFixed(1)) ?? '-' const _default = defineComponent(() => { - const [dateRange, setDateRange] = useState<[Date, Date]>(daysAgo(14, 0)) - const rangeLength = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1])) - initProvider(dateRange, rangeLength) - - const visitData = ref() - const focusData = ref() - const indicators = ref() - const previousIndicators = ref() - const rows = useAnalysisRows() const timeFormat = useAnalysisTimeFormat() - - const computeEffect = () => handleDataChange( - { dateRange: dateRange.value, rows: rows.value }, - { indicators, previousIndicators, visitData, focusData } - ) - watch([dateRange, rows], computeEffect) - onMounted(computeEffect) + const { visitData, focusData, indicators, previousIndicators } = initAnalysisTrend() return () => ( msg.analysis.trend.title)} - v-slots={{ - filter: () => - }} + v-slots={{ filter: () => }} >
{ focus={[indicators.value?.focus?.total, previousIndicators.value?.focus?.total]} /> msg.analysis.trend.maxFocus)} maxValue={indicators.value?.focus?.max?.value} maxDate={indicators.value?.focus?.max?.date} - averageLabel={FOCUS_AVE} + averageLabel={t(msg => msg.analysis.trend.averageFocus)} average={[indicators.value?.focus?.average, previousIndicators.value?.focus?.average]} valueFormatter={val => periodFormatter(val, { format: timeFormat.value })} data={focusData.value} - chartTitle={FOCUS_CHART_TITLE} + chartTitle={t(msg => msg.analysis.trend.focusTitle)} /> msg.analysis.trend.maxVisit)} maxValue={indicators.value?.visit?.max?.value} maxDate={indicators.value?.visit?.max?.date} - averageLabel={VISIT_AVE} + averageLabel={t(msg => msg.analysis.trend.averageVisit)} average={[indicators.value?.visit?.average, previousIndicators.value?.visit?.average]} valueFormatter={visitFormatter} data={visitData.value} - chartTitle={VISIT_CHART_TITLE} + chartTitle={t(msg => msg.analysis.trend.visitTitle)} />
diff --git a/src/pages/app/components/Analysis/context.ts b/src/pages/app/components/Analysis/context.ts index 95422bb56..23368e749 100644 --- a/src/pages/app/components/Analysis/context.ts +++ b/src/pages/app/components/Analysis/context.ts @@ -5,9 +5,11 @@ * https://opensource.org/licenses/MIT */ -import { useProvide, useProvider } from "@hooks" -import { type Ref } from "vue" +import { useLocalStorage, useProvide, useProvider, useRequest } from "@hooks" +import { ref, watch, type Ref } from "vue" import { AnalysisTarget } from "./types" +import { useRoute, useRouter } from "vue-router" +import statService, { type StatQueryParam } from "@service/stat-service" type Context = { target: Ref @@ -15,15 +17,56 @@ type Context = { rows: Ref } +export type AnalysisQuery = Partial & { + cateId?: string +} + +function parseQuery(): AnalysisTarget | undefined { + // Process the query param + const query = useRoute().query as unknown as AnalysisQuery + useRouter().replace({ query: {} }) + const { host, type: siteType, cateId } = query + if (cateId) return { type: 'cate', key: parseInt(cateId) } + if (host && siteType) return { type: 'site', key: { host, type: siteType } } + return undefined +} + +async function queryRows(target: AnalysisTarget | undefined): Promise { + if (!target?.key) return [] + + let param: StatQueryParam = { + sort: 'date', + sortOrder: 'ASC', + } + if (target?.type === 'cate') { + param.cateIds = [target.key] + param.mergeCate = true + } else if (target?.type === 'site') { + const { host, type: siteType } = target.key || {} + param.host = host + param.mergeHost = siteType === 'merged' + param.fullHost = true + } else { + return [] + } + + return await statService.select(param) +} + const NAMESPACE = 'siteAnalysis' -export const initProvider = ( - target: Ref, - timeFormat: Ref, - rows: Ref, -) => useProvide(NAMESPACE, { - target, timeFormat, rows -}) +export const initAnalysis = () => { + const target = ref(parseQuery()) + + const [cachedFormat, setFormatCache] = useLocalStorage('analysis_timeFormat') + const timeFormat = ref(cachedFormat ?? 'default') + watch(timeFormat, setFormatCache) + + const { data: rows, loading } = useRequest(() => queryRows(target.value), { deps: target, defaultValue: [] }) + useProvide(NAMESPACE, { target, timeFormat, rows }) + + return { loading } +} export const useAnalysisTarget = () => useProvider(NAMESPACE, "target").target diff --git a/src/pages/app/components/Analysis/index.tsx b/src/pages/app/components/Analysis/index.tsx index 9af411b15..8fb665d04 100644 --- a/src/pages/app/components/Analysis/index.tsx +++ b/src/pages/app/components/Analysis/index.tsx @@ -4,74 +4,20 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { useRequest, useState } from "@hooks" import Flex from "@pages/components/Flex" -import statService, { type StatQueryParam } from "@service/stat-service" -import { defineComponent, onMounted, ref } from "vue" -import { useRoute, useRouter } from "vue-router" +import { defineComponent } from "vue" import ContentContainer from "../common/ContentContainer" -import { type AnalysisQuery } from "./common" -import AnalysisFilter, { type AnalysisFilterInstance } from "./components/AnalysisFilter" +import AnalysisFilter from "./components/AnalysisFilter" import Summary from "./components/Summary" import Trend from "./components/Trend" -import { initProvider } from "./context" -import type { AnalysisTarget } from "./types" - -function getTargetFromQuery(): AnalysisTarget | undefined { - // Process the query param - const query: AnalysisQuery = useRoute().query as unknown as AnalysisQuery - useRouter().replace({ query: {} }) - const { host, type: siteType, cateId } = query - if (cateId) return { type: 'cate', key: parseInt(cateId) } - if (host && siteType) return { type: 'site', key: { host, type: siteType } } - return undefined -} - -async function query(target: AnalysisTarget | undefined): Promise { - if (!target?.key) return [] - - let param: StatQueryParam = { - sort: 'date', - sortOrder: 'ASC', - } - if (target?.type === 'cate') { - param.cateIds = [target.key] - param.mergeCate = true - } else if (target?.type === 'site') { - const { host, type: siteType } = target.key || {} - param.host = host - param.mergeHost = siteType === 'merged' - param.fullHost = true - } else { - return [] - } - - return await statService.select(param) -} +import { initAnalysis } from "./context" const _default = defineComponent(() => { - const [target, setTarget] = useState(getTargetFromQuery()) - const [timeFormat, setTimeFormat] = useState('default') - - const { data: rows, loading } = useRequest(() => query(target.value), { deps: target, defaultValue: [] }) - - initProvider(target, timeFormat, rows) - - const filter = ref() - - onMounted(() => !target.value && filter.value?.openTargetSelect?.()) + const { loading } = initAnalysis() return () => ( - - ), + filter: () => , default: () => ( diff --git a/src/pages/app/components/Dashboard/ChartTitle.tsx b/src/pages/app/components/Dashboard/ChartTitle.tsx index 196741500..b7ba8803f 100644 --- a/src/pages/app/components/Dashboard/ChartTitle.tsx +++ b/src/pages/app/components/Dashboard/ChartTitle.tsx @@ -1,16 +1,11 @@ import { defineComponent } from "vue" -const _default = defineComponent({ - props: { - text: String - }, - setup(props) { - return () => ( -
- {props.text ?? ''} -
- ) - } -}) +const _default = defineComponent<{ text: string }>(props => { + return () => ( +
+ {props.text ?? ''} +
+ ) +}, { props: ['text'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/DashboardCard.tsx b/src/pages/app/components/Dashboard/DashboardCard.tsx index 66b361b72..9e682323e 100644 --- a/src/pages/app/components/Dashboard/DashboardCard.tsx +++ b/src/pages/app/components/Dashboard/DashboardCard.tsx @@ -6,42 +6,16 @@ */ import { ElCard, ElCol } from "element-plus" -import { defineComponent } from "vue" +import { defineComponent, useSlots } from "vue" -const clzName = (noPadding: boolean) => { - const names = ['dashboard-card'] - noPadding && names.push('no-padding') - return names.join(' ') -} +const _default = defineComponent<{ span: number }>(props => { + const slots = useSlots() -const _default = defineComponent({ - props: { - noPadding: Boolean, - span: { - type: Number, - required: true - }, - height: Number, - xs: Number, - sm: Number, - md: Number, - lg: Number, - xl: Number, - }, - setup(props, ctx) { - return () => ( - - - - ) - } -}) + return () => ( + + + + ) +}, { props: ['span'] }) export default _default diff --git a/src/pages/app/components/Dashboard/components/Indicator/index.tsx b/src/pages/app/components/Dashboard/components/Indicator/index.tsx index fd3bb3efe..61eba0016 100644 --- a/src/pages/app/components/Dashboard/components/Indicator/index.tsx +++ b/src/pages/app/components/Dashboard/components/Indicator/index.tsx @@ -15,7 +15,7 @@ import statService from "@service/stat-service" import { calcMostPeriodOf2Hours } from "@util/period" import { getStartOfDay, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time" import { ElIcon } from "element-plus" -import { computed, defineComponent, toRef, type PropType, type VNode } from "vue" +import { computed, defineComponent, toRef, type VNode } from "vue" import "./style" const periodDatabase = new PeriodDatabase(chrome.storage.local) @@ -74,30 +74,23 @@ const computeI18nParam = (valueParam: Record, duration?: number) Object.entries(valueParam || {}).map(([key, val]) => [key, ]) ) } +type Props = { + path: I18nKey + param: Record + duration?: number +} -const IndicatorLabel = defineComponent({ - props: { - path: { - type: Function as PropType, - required: true, - }, - param: { - type: Object as PropType>, - required: true, - }, - duration: Number, - }, - setup: props => { - const param = toRef(props, 'param') - const i18nParam = computed(() => computeI18nParam(param.value, props.duration)) - return () => ( -
- { - param.value && - } -
- ) - } +const IndicatorLabel = defineComponent(props => { + const param = toRef(props, 'param') + const i18nParam = computed(() => computeI18nParam(param.value, props.duration)) + + return () => ( +
+ { + param.value && + } +
+ ) }) const computeMost2HourParam = (value: _Value | undefined): { start: number, end: number } => { diff --git a/src/pages/app/components/DataManage/ClearPanel/index.tsx b/src/pages/app/components/DataManage/ClearPanel/index.tsx index f015c3900..733f64961 100644 --- a/src/pages/app/components/DataManage/ClearPanel/index.tsx +++ b/src/pages/app/components/DataManage/ClearPanel/index.tsx @@ -12,6 +12,7 @@ import { MILL_PER_DAY, MILL_PER_SECOND } from "@util/time" import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus" import { defineComponent, type StyleValue } from "vue" import { alertProps } from "../common" +import { useDataMemory } from "../context" import ClearFilter from "./ClearFilter" type FilterOption = { @@ -83,33 +84,29 @@ function str2Range(startAndEnd: [string?, string?], numAmplifier?: (origin: numb return [start, end] } -const _default = defineComponent({ - emits: { - dataDelete: () => true - }, - setup(_, ctx) { - async function handleClick(option: FilterOption) { - const result = await generateParamAndSelect(option) +const _default = defineComponent(() => { + const { refreshMemory } = useDataMemory() + async function handleClick(option: FilterOption) { + const result = await generateParamAndSelect(option) - const count = result.length - const confirmMsg = t(msg => msg.dataManage.deleteConfirm, { count }) - ElMessageBox.confirm(confirmMsg, { - cancelButtonText: t(msg => msg.button.cancel), - confirmButtonText: t(msg => msg.button.confirm) - }).then(async () => { - await statService.batchDeleteBase(result) - ElMessage.success(t(msg => msg.operation.successMsg)) - ctx.emit('dataDelete') - }).catch(() => { }) - } - - return () => ( - - msg.dataManage.operationAlert)} /> - handleClick({ date, focus, time })} /> - - ) + const count = result.length + const confirmMsg = t(msg => msg.dataManage.deleteConfirm, { count }) + ElMessageBox.confirm(confirmMsg, { + cancelButtonText: t(msg => msg.button.cancel), + confirmButtonText: t(msg => msg.button.confirm) + }).then(async () => { + await statService.batchDeleteBase(result) + ElMessage.success(t(msg => msg.operation.successMsg)) + refreshMemory?.() + }).catch(() => { }) } + + return () => ( + + msg.dataManage.operationAlert)} /> + handleClick({ date, focus, time })} /> + + ) }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/MemoryInfo.tsx b/src/pages/app/components/DataManage/MemoryInfo.tsx index 209b159a9..c7e046322 100644 --- a/src/pages/app/components/DataManage/MemoryInfo.tsx +++ b/src/pages/app/components/DataManage/MemoryInfo.tsx @@ -6,16 +6,11 @@ */ import { t } from "@app/locale" -import { getUsedStorage } from "@db/memory-detector" -import { useRequest } from "@hooks" import Flex from "@pages/components/Flex" import { ElAlert, ElCard, ElProgress } from "element-plus" import { computed, defineComponent, type StyleValue } from "vue" import { alertProps } from "./common" - -export type MemoryInfoInstance = { - refresh(): void -} +import { useDataMemory } from "./context" const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000 @@ -35,46 +30,43 @@ const totalTitle = (totalMb: number) => totalMb ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb }) : t(msg => msg.dataManage.totalMemoryAlert1) -const _default = defineComponent({ - setup(_, ctx) { - const { data, refresh } = useRequest(getUsedStorage, { defaultValue: { used: 0, total: 1 } }) - ctx.expose({ refresh } as MemoryInfoInstance) +const _default = defineComponent(() => { + const { memory } = useDataMemory() - const usedMb = computed(() => byte2Mb(data.value?.used)) - const totalMb = computed(() => byte2Mb(data.value?.total)) - const percentage = computed(() => data.value?.total ? Math.round(data.value?.used * 10000.0 / data.value.total) / 100 : 0) - const color = computed(() => computeColor(percentage.value, data.value.total)) + const usedMb = computed(() => byte2Mb(memory.value?.used)) + const totalMb = computed(() => byte2Mb(memory.value?.total)) + const percentage = computed(() => memory.value?.total ? Math.round(memory.value?.used * 10000.0 / memory.value.total) / 100 : 0) + const color = computed(() => computeColor(percentage.value, memory.value.total)) - return () => ( - - - ( + + + + + - - - -
-

- {t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb.value })} -

-
- - ) - } +
+

+ {t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb.value })} +

+
+ + + ) }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/ImportButton.tsx b/src/pages/app/components/DataManage/Migration/ImportButton.tsx index f697eafad..696a21ef3 100644 --- a/src/pages/app/components/DataManage/Migration/ImportButton.tsx +++ b/src/pages/app/components/DataManage/Migration/ImportButton.tsx @@ -11,6 +11,7 @@ import Immigration from "@service/components/immigration" import { deserialize } from "@util/file" import { ElButton, ElLoading, ElMessage } from "element-plus" import { defineComponent, ref } from "vue" +import { useDataMemory } from "../context" const immigration: Immigration = new Immigration() @@ -32,31 +33,28 @@ async function handleFileSelected(fileInput: HTMLInputElement | undefined, callb ElMessage.success(t(msg => msg.operation.successMsg)) } -const _default = defineComponent({ - emits: { - import: () => true - }, - setup(_, ctx) { - const fileInput = ref() - return () => ( - } - onClick={() => fileInput.value?.click()} - style={{ margin: 0, flex: 1 }} - > - {t(msg => msg.item.operation.importWholeData)} - handleFileSelected(fileInput.value, () => ctx.emit('import'))} - /> - - ) - } +const _default = defineComponent(() => { + const { refreshMemory } = useDataMemory() + const fileInput = ref() + + return () => ( + } + onClick={() => fileInput.value?.click()} + style={{ margin: 0, flex: 1 }} + > + {t(msg => msg.item.operation.importWholeData)} + handleFileSelected(fileInput.value, refreshMemory)} + /> + + ) }) export default _default diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx index baebb13bc..245657805 100644 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx +++ b/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx @@ -8,6 +8,7 @@ import DialogSop, { type SopStepInstance } from "@app/components/common/DialogSop" import { t } from "@app/locale" import { useManualRequest } from "@hooks" +import Flex from "@pages/components/Flex" import { processImportedData } from "@service/components/import-processor" import { ElMessage, ElStep, ElSteps } from "element-plus" import { defineComponent, ref } from "vue" @@ -62,7 +63,11 @@ const _default = defineComponent({ msg.dataManage.importOther.step2)} /> ), - content: () => step.value === 0 ? : , + content: () => ( + + {step.value === 0 ? : } + + ), }} /> ) diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx index cc8cec0e8..e15f83880 100644 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx +++ b/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx @@ -10,36 +10,38 @@ import { Upload } from "@element-plus/icons-vue" import { useSwitch } from "@hooks" import { ElButton, ElDialog } from "element-plus" import { defineComponent } from "vue" +import { useDataMemory } from "../../context" import Sop from "./Sop" -const _default = defineComponent({ - emits: { - import: () => true - }, - setup(_) { - const [visible, open, close] = useSwitch() - return () => <> - } - onClick={open} - style={{ margin: 0, flex: 1, width: '100%', textWrap: 'wrap', lineHeight: '1.4em' }} - > - {t(msg => msg.item.operation.importOtherData)} - - msg.item.operation.importOtherData)} - width="80%" - closeOnClickModal={false} - onClose={close} - > - - - +const _default = defineComponent(() => { + const { refreshMemory } = useDataMemory() + const [visible, open, close] = useSwitch() + const handleImported = () => { + close() + refreshMemory?.() } + + return () => <> + } + onClick={open} + style={{ margin: 0, flex: 1, width: '100%', textWrap: 'wrap', lineHeight: '1.4em' }} + > + {t(msg => msg.item.operation.importOtherData)} + + msg.item.operation.importOtherData)} + width="80%" + closeOnClickModal={false} + onClose={close} + > + + + }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/index.tsx b/src/pages/app/components/DataManage/Migration/index.tsx index 7113d3d4f..82c90993a 100644 --- a/src/pages/app/components/DataManage/Migration/index.tsx +++ b/src/pages/app/components/DataManage/Migration/index.tsx @@ -14,6 +14,7 @@ import { formatTime } from "@util/time" import { ElAlert, ElButton, ElCard } from "element-plus" import { defineComponent, type StyleValue } from "vue" import { alertProps } from "../common" +import { useDataMemory } from "../context" import ImportButton from "./ImportButton" import ImportOtherButton from "./ImportOtherButton" @@ -25,44 +26,40 @@ async function handleExport() { exportJson(data, `timer_backup_${timestamp}`) } -const _default = defineComponent({ - emits: { - import: () => true - }, - setup(_, ctx) { - const handleImported = () => ctx.emit("import") - return () => ( - - - { + const { refreshMemory } = useDataMemory() + + return () => ( + + + + + {t(msg => msg.dataManage.migrationAlert)} + + } + onClick={handleExport} + style={{ flex: 1 }} > - - {t(msg => msg.dataManage.migrationAlert)} - - } - onClick={handleExport} - style={{ flex: 1 }} - > - {t(msg => msg.item.operation.exportWholeData)} - - - - + {t(msg => msg.item.operation.exportWholeData)} + + + - - ) - } + + + ) }) export default _default diff --git a/src/pages/app/components/DataManage/context.ts b/src/pages/app/components/DataManage/context.ts new file mode 100644 index 000000000..ac8877778 --- /dev/null +++ b/src/pages/app/components/DataManage/context.ts @@ -0,0 +1,17 @@ +import { getUsedStorage, type MemoryInfo } from "@db/memory-detector" +import { useProvide, useProvider, useRequest } from "@hooks" +import { type Ref } from "vue" + +type Context = { + memory: Ref + refreshMemory: () => void +} + +const NAMESPACE = 'dataManage' + +export const initDataManage = () => { + const { data: memory, refresh: refreshMemory } = useRequest(getUsedStorage, { defaultValue: { used: 0, total: 1 } }) + useProvide(NAMESPACE, { memory, refreshMemory }) +} + +export const useDataMemory = () => useProvider(NAMESPACE, 'refreshMemory', 'memory') \ No newline at end of file diff --git a/src/pages/app/components/DataManage/index.tsx b/src/pages/app/components/DataManage/index.tsx index c6fadd059..dbeac481c 100644 --- a/src/pages/app/components/DataManage/index.tsx +++ b/src/pages/app/components/DataManage/index.tsx @@ -6,27 +6,27 @@ */ import Flex from "@pages/components/Flex" -import { defineComponent, ref } from "vue" +import { defineComponent } from "vue" import ContentContainer from "../common/ContentContainer" import ClearPanel from "./ClearPanel" -import MemoryInfo, { type MemoryInfoInstance } from "./MemoryInfo" +import MemoryInfo from "./MemoryInfo" import Migration from "./Migration" +import { initDataManage } from "./context" export default defineComponent(() => { - const memoryInfo = ref() - const refreshMemory = () => memoryInfo.value?.refresh?.() + initDataManage() return () => ( - + - + - + diff --git a/src/pages/app/components/Habit/components/HabitFilter.tsx b/src/pages/app/components/Habit/components/HabitFilter.tsx index 225be1547..4541cf7c9 100644 --- a/src/pages/app/components/Habit/components/HabitFilter.tsx +++ b/src/pages/app/components/Habit/components/HabitFilter.tsx @@ -8,16 +8,11 @@ import DateRangeFilterItem from "@app/components/common/filter/DateRangeFilterItem" import TimeFormatFilterItem from "@app/components/common/filter/TimeFormatFilterItem" import { t } from "@app/locale" -import { useState } from "@hooks" import Flex from "@pages/components/Flex" import { type ElementDatePickerShortcut } from "@pages/element-ui/date" import { daysAgo } from "@util/time" -import { defineComponent, watch, type PropType } from "vue" - -export type FilterOption = { - timeFormat: timer.app.TimeFormat - dateRange: [Date, Date] -} +import { defineComponent } from "vue" +import { useHabitFilter } from "./context" type ShortCutProp = [label: string, dayAgo: number] @@ -32,40 +27,23 @@ const shortcutProps: ShortCutProp[] = [ const SHORTCUTS: ElementDatePickerShortcut[] = shortcutProps.map(([text, agoOfStart]) => ({ text, value: daysAgo(agoOfStart, 0) })) -const _default = defineComponent({ - props: { - defaultValue: { - type: Object as PropType, - required: true, - }, - }, - emits: { - change: (_option: FilterOption) => true - }, - setup(props, ctx) { - const [dateRange, setDateRange] = useState(props.defaultValue.dateRange) - const [timeFormat, setTimeFormat] = useState(props.defaultValue.timeFormat) - - watch([dateRange, timeFormat], () => ctx.emit("change", { - dateRange: dateRange.value, - timeFormat: timeFormat.value, - })) - - return () => ( - - val && setDateRange(val)} - /> - - - ) - } +const _default = defineComponent(() => { + const filter = useHabitFilter() + + return () => ( + + val && (filter.dateRange = val)} + /> + filter.timeFormat = v} + /> + + ) }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/Period/Average/index.tsx b/src/pages/app/components/Habit/components/Period/Average/index.tsx index 8066f4bab..b60cbd5ba 100644 --- a/src/pages/app/components/Habit/components/Period/Average/index.tsx +++ b/src/pages/app/components/Habit/components/Period/Average/index.tsx @@ -22,7 +22,7 @@ const _default = defineComponent(() => { const bizOption = computed(() => { const { curr, prev } = value.value || {} const { curr: currRange, prev: prevRange } = periodRange.value || {} - const { periodSize } = filter.value || {} + const { periodSize } = filter return { curr, prev, currRange, prevRange, diff --git a/src/pages/app/components/Habit/components/Period/Filter.tsx b/src/pages/app/components/Habit/components/Period/Filter.tsx index 14b30ebe0..681803caf 100644 --- a/src/pages/app/components/Habit/components/Period/Filter.tsx +++ b/src/pages/app/components/Habit/components/Period/Filter.tsx @@ -7,11 +7,11 @@ import SelectFilterItem from '@app/components/common/filter/SelectFilterItem' import { t } from '@app/locale' -import { useCached } from '@hooks' import { type HabitMessage } from '@i18n/message/app/habit' import { ElRadioButton, ElRadioGroup } from 'element-plus' -import { type PropType, defineComponent, ref, watch } from 'vue' -import { type ChartType, type FilterOption } from './common' +import { defineComponent } from 'vue' +import { type ChartType } from './common' +import { usePeriodFilter } from './context' // [value, label] type _SizeOption = [number, keyof HabitMessage['period']['sizes']] @@ -36,51 +36,34 @@ const CHART_CONFIG: { [type in ChartType]: string } = { stack: t(msg => msg.habit.period.chartType.stack), } -const _default = defineComponent({ - props: { - defaultValue: { - type: Object as PropType, - required: true, - }, - }, - emits: { - change: (_newVal: FilterOption) => true, - }, - setup(prop, ctx) { - const periodSize = ref(prop.defaultValue.periodSize) - const { data: chartType, setter: setChartType } = useCached('habit-period-chart-type', prop.defaultValue.chartType) - watch([periodSize, chartType], () => - ctx.emit('change', { - periodSize: periodSize.value, - chartType: chartType.value, - }) - ) - return () => ( -
- { - if (!val) return - const newPeriodSize = parseInt(val) - if (isNaN(newPeriodSize)) return - periodSize.value = newPeriodSize - }} - /> - val && setChartType(val as ChartType)} - > - {Object.entries(CHART_CONFIG).map(([type, name]) => ( - - {name} - - ))} - -
- ) - }, +const _default = defineComponent(() => { + const filter = usePeriodFilter() + + return () => ( +
+ { + if (!val) return + const newPeriodSize = parseInt(val) + if (isNaN(newPeriodSize)) return + filter.periodSize = newPeriodSize + }} + /> + val && (filter.chartType = val as ChartType)} + > + {Object.entries(CHART_CONFIG).map(([type, name]) => ( + + {name} + + ))} + +
+ ) }) export default _default diff --git a/src/pages/app/components/Habit/components/Period/Stack/index.tsx b/src/pages/app/components/Habit/components/Period/Stack/index.tsx index bc7107f26..8afe72cdb 100644 --- a/src/pages/app/components/Habit/components/Period/Stack/index.tsx +++ b/src/pages/app/components/Habit/components/Period/Stack/index.tsx @@ -21,7 +21,7 @@ const _default = defineComponent(() => { const globalFilter = useHabitFilter() const bizOption = computed(() => ({ data: value.value?.curr, - timeFormat: globalFilter.value?.timeFormat, + timeFormat: globalFilter.timeFormat, })) const { elRef } = useEcharts(Wrapper, bizOption, { manual: true }) return () =>
diff --git a/src/pages/app/components/Habit/components/Period/Summary.tsx b/src/pages/app/components/Habit/components/Period/Summary.tsx index bff5b4258..331ad130b 100644 --- a/src/pages/app/components/Habit/components/Period/Summary.tsx +++ b/src/pages/app/components/Habit/components/Period/Summary.tsx @@ -74,7 +74,7 @@ const _default = defineComponent(() => { const data = usePeriodValue() const filter = usePeriodFilter() const globalFilter = useHabitFilter() - const summary = computed(() => computeSummary(data.value?.curr, filter.value?.periodSize)) + const summary = computed(() => computeSummary(data.value?.curr, filter.periodSize)) return () => (
@@ -82,7 +82,7 @@ const _default = defineComponent(() => { mainName={t(msg => msg.habit.period.busiest)} mainValue={summary.value?.favorite?.period} subTips={msg => msg.habit.common.focusAverage} - subValue={periodFormatter(summary.value?.favorite?.average, { format: globalFilter.value?.timeFormat })} + subValue={periodFormatter(summary.value?.favorite?.average, { format: globalFilter.timeFormat })} /> msg.habit.period.idle)} diff --git a/src/pages/app/components/Habit/components/Period/Trend/index.tsx b/src/pages/app/components/Habit/components/Period/Trend/index.tsx index 581d9cb43..7503c6b12 100644 --- a/src/pages/app/components/Habit/components/Period/Trend/index.tsx +++ b/src/pages/app/components/Habit/components/Period/Trend/index.tsx @@ -21,7 +21,7 @@ const _default = defineComponent(() => { const globalFilter = useHabitFilter() const bizOption = computed(() => ({ data: value.value?.curr, - timeFormat: globalFilter.value?.timeFormat, + timeFormat: globalFilter.timeFormat, })) const { elRef } = useEcharts(Wrapper, bizOption, { manual: true }) return () =>
diff --git a/src/pages/app/components/Habit/components/Period/context.ts b/src/pages/app/components/Habit/components/Period/context.ts index 0af0d725f..50f7d21c2 100644 --- a/src/pages/app/components/Habit/components/Period/context.ts +++ b/src/pages/app/components/Habit/components/Period/context.ts @@ -5,9 +5,14 @@ * https://opensource.org/licenses/MIT */ -import { useProvide, useProvider } from "@hooks" -import { type Ref } from "vue" -import { FilterOption } from "./common" +import { useLocalStorage, useProvide, useProvider, useRequest } from "@hooks" +import { merge } from "@service/components/period-calculator" +import periodService from "@service/period-service" +import { keyOf, MAX_PERIOD_ORDER } from "@util/period" +import { getDayLength, MILL_PER_DAY } from "@util/time" +import { computed, reactive, toRaw, watch, type Reactive, type Ref } from "vue" +import { useHabitFilter } from "../context" +import type { FilterOption } from "./common" type Value = { curr: timer.period.Row[] @@ -21,17 +26,55 @@ export type PeriodRange = { type Context = { value: Ref - filter: Ref + filter: Reactive periodRange: Ref } +const computeRange = (filterDateRange: [Date, Date]): PeriodRange => { + const [startDate, endDate] = filterDateRange || [] + const dateLength = getDayLength(startDate, endDate) + const prevStartDate = new Date(startDate.getTime() - MILL_PER_DAY * dateLength) + const prevEndDate = new Date(startDate.getTime() - MILL_PER_DAY) + return { + curr: [keyOf(startDate, 0), keyOf(endDate, MAX_PERIOD_ORDER)], + prev: [keyOf(prevStartDate, 0), keyOf(prevEndDate, MAX_PERIOD_ORDER)], + } +} + +const fetchRows = async (range: timer.period.KeyRange, periodSize: number) => { + const results = await periodService.listBetween({ periodRange: range }) + const [start, end] = range || [] + return merge(results, { start, end, periodSize }) +} + const NAMESPACE = 'habitPeriod' -export const initProvider = ( - value: Ref, - filter: Ref, - periodRange: Ref, -) => useProvide(NAMESPACE, { value, filter, periodRange }) +export const initProvider = () => { + const globalFilter = useHabitFilter() + const periodRange = computed(() => computeRange(globalFilter.dateRange)) + const [cachedFilter, setFilterCache] = useLocalStorage( + 'habit_period_filter', { periodSize: 1, chartType: 'average' } + ) + const filter = reactive(cachedFilter) + watch(() => filter, () => setFilterCache(toRaw(filter)), { deep: true }) + + const { data: value } = useRequest(async () => { + const { curr: currRange, prev: prevRange } = periodRange.value || {} + const periodSize = filter.periodSize + const [curr, prev] = await Promise.all([ + fetchRows(currRange, periodSize), + fetchRows(prevRange, periodSize), + ]) + return { curr, prev } + }, { + deps: [periodRange, () => filter.chartType, () => filter.periodSize], + defaultValue: { curr: [], prev: [] }, + }) + + useProvide(NAMESPACE, { value, filter, periodRange }) + + return filter +} export const usePeriodValue = () => useProvider(NAMESPACE, "value").value diff --git a/src/pages/app/components/Habit/components/Period/index.tsx b/src/pages/app/components/Habit/components/Period/index.tsx index 7a7b9890b..7f09e352e 100644 --- a/src/pages/app/components/Habit/components/Period/index.tsx +++ b/src/pages/app/components/Habit/components/Period/index.tsx @@ -7,79 +7,33 @@ import { KanbanCard } from "@app/components/common/kanban" import { t } from "@app/locale" -import { useRequest } from "@hooks/useRequest" -import { merge } from "@service/components/period-calculator" -import periodService from "@service/period-service" -import { keyOf, MAX_PERIOD_ORDER } from "@util/period" -import { getDayLength, MILL_PER_DAY } from "@util/time" -import { computed, defineComponent, type PropType, ref } from "vue" -import { useHabitFilter } from "../context" +import { defineComponent } from "vue" import Average from "./Average" -import { type FilterOption } from "./common" -import { initProvider, type PeriodRange } from "./context" +import { initProvider } from "./context" import Filter from "./Filter" import Stack from "./Stack" import "./style.sass" import Summary from "./Summary" import Trend from "./Trend" -const computeRange = (filterDateRange: [Date, Date]): PeriodRange => { - const [startDate, endDate] = filterDateRange || [] - const dateLength = getDayLength(startDate, endDate) - const prevStartDate = new Date(startDate.getTime() - MILL_PER_DAY * dateLength) - const prevEndDate = new Date(startDate.getTime() - MILL_PER_DAY) - return { - curr: [keyOf(startDate, 0), keyOf(endDate, MAX_PERIOD_ORDER)], - prev: [keyOf(prevStartDate, 0), keyOf(prevEndDate, MAX_PERIOD_ORDER)], - } -} - -const fetchRows = async (range: timer.period.KeyRange, periodSize: number) => { - const results = await periodService.listBetween({ periodRange: range }) - const [start, end] = range || [] - return merge(results, { start, end, periodSize }) -} - -const _default = defineComponent({ - props: { - result: Array as PropType, - range: Object as PropType, - }, - setup: () => { - const globalFilter = useHabitFilter() - const periodRange = computed(() => computeRange(globalFilter.value?.dateRange)) - const filter = ref({ periodSize: 1, chartType: 'average' }) - - const { data } = useRequest(async () => { - const { curr: currRange, prev: prevRange } = periodRange.value || {} - const periodSize = filter.value?.periodSize - const [curr, prev] = await Promise.all([ - fetchRows(currRange, periodSize), - fetchRows(prevRange, periodSize), - ]) - return { curr, prev } - }, { deps: [periodRange, filter], defaultValue: { curr: [], prev: [] } }) - - initProvider(data, filter, periodRange) - - return () => ( - msg.habit.period.title)} - v-slots={{ - filter: () => filter.value = val} /> - }} - > -
- -
- {filter.value?.chartType === 'average' && } - {filter.value?.chartType === 'trend' && } - {filter.value?.chartType === 'stack' && } -
+const _default = defineComponent(() => { + const filter = initProvider() + + return () => ( + msg.habit.period.title)} + v-slots={{ filter: () => }} + > +
+ +
+ {filter.chartType === 'average' && } + {filter.chartType === 'trend' && } + {filter.chartType === 'stack' && }
- - ) - } +
+ + ) }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx b/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx index 18d96ed94..be491ca38 100644 --- a/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx +++ b/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx @@ -14,13 +14,11 @@ import TimelineWrapper, { type BizOption } from "./Wrapper" const _default = defineComponent(() => { const rows = useRows() const filter = useHabitFilter() - const bizOption = computed(() => { - return { - rows: rows.value, - timeFormat: filter.value?.timeFormat, - dateRange: filter.value?.dateRange, - } - }) + const bizOption = computed(() => ({ + rows: rows.value, + timeFormat: filter.timeFormat, + dateRange: filter.dateRange, + })) const { elRef } = useEcharts(TimelineWrapper, bizOption, { manual: true }) return () =>
diff --git a/src/pages/app/components/Habit/components/Site/Distribution/index.tsx b/src/pages/app/components/Habit/components/Site/Distribution/index.tsx index 91d415f81..c9fc32462 100644 --- a/src/pages/app/components/Habit/components/Site/Distribution/index.tsx +++ b/src/pages/app/components/Habit/components/Site/Distribution/index.tsx @@ -14,7 +14,7 @@ import Wrapper, { type BizOption } from "./Wrapper" const _default = defineComponent(() => { const rows = useDateMergedRows() const filter = useHabitFilter() - const bizOption = computed(() => ({ rows: rows.value, dateRange: filter.value?.dateRange } as BizOption)) + const bizOption = computed(() => ({ rows: rows.value, dateRange: filter.dateRange } as BizOption)) const { elRef } = useEcharts(Wrapper, bizOption, { manual: true }) return () =>
diff --git a/src/pages/app/components/Habit/components/Site/Summary.tsx b/src/pages/app/components/Habit/components/Site/Summary.tsx index 88a6f7113..2d2b17b9a 100644 --- a/src/pages/app/components/Habit/components/Site/Summary.tsx +++ b/src/pages/app/components/Habit/components/Site/Summary.tsx @@ -3,8 +3,7 @@ import { t } from "@app/locale" import { periodFormatter } from "@app/util/time" import { sum } from "@util/array" import { computed, defineComponent } from "vue" -import { useHabitFilter } from "../context" -import { type FilterOption } from "../HabitFilter" +import { FilterOption, useHabitFilter } from "../context" import { computeAverageLen } from "./common" import { useRows } from "./context" @@ -51,15 +50,15 @@ const computeCountText = (count: Result['count']): string => { const _default = defineComponent(() => { const filter = useHabitFilter() const rows = useRows() - const summary = computed(() => computeSummary(rows.value, filter.value)) + const summary = computed(() => computeSummary(rows.value, filter)) return () => (
msg.analysis.common.focusTotal)} - mainValue={periodFormatter(summary.value?.focus?.total, { format: filter.value?.timeFormat })} + mainValue={periodFormatter(summary.value?.focus?.total, { format: filter.timeFormat })} subTips={msg => msg.habit.common.focusAverage} - subValue={periodFormatter(summary.value?.focus?.average, { format: filter.value?.timeFormat })} + subValue={periodFormatter(summary.value?.focus?.average, { format: filter.timeFormat })} subInfo={summary.value?.exclusiveToday4Average ? t(msg => msg.habit.site.exclusiveToday) : undefined} /> { const rows = useDateMergedRows() const filter = useHabitFilter() - const bizOption = computed(() => ({ rows: rows.value, timeFormat: filter.value?.timeFormat })) + const bizOption = computed(() => ({ rows: rows.value, timeFormat: filter.timeFormat })) const { elRef } = useEcharts(Wrapper, bizOption, { manual: true }) return () =>
diff --git a/src/pages/app/components/Habit/components/Site/context.ts b/src/pages/app/components/Habit/components/Site/context.ts index 834ff17de..236f29520 100644 --- a/src/pages/app/components/Habit/components/Site/context.ts +++ b/src/pages/app/components/Habit/components/Site/context.ts @@ -5,9 +5,12 @@ * https://opensource.org/licenses/MIT */ -import { useProvide, useProvider } from "@hooks" +import { useProvide, useProvider, useRequest } from "@hooks" +import statService, { type StatQueryParam } from "@service/stat-service" import { mergeDate } from "@service/stat-service/merge/date" +import { getDayLength } from "@util/time" import { computed, type Ref } from "vue" +import { useHabitFilter } from "../context" type Context = { rows: Ref @@ -16,9 +19,26 @@ type Context = { const NAMESPACE = 'habitSite' -export const initProvider = (rows: Ref) => { +export const initProvider = () => { + const filter = useHabitFilter() + + const { data: rows } = useRequest(() => { + const param: StatQueryParam = { + exclusiveVirtual: true, + date: filter.dateRange, + } + return statService.select(param, true) + }, { + deps: [() => filter.dateRange], + defaultValue: [], + }) + + const dateRangeLength = computed(() => getDayLength(filter.dateRange?.[0], filter.dateRange?.[1])) + const dateMergedRows = computed(() => mergeDate(rows.value ?? [])) useProvide(NAMESPACE, { rows, dateMergedRows }) + + return dateRangeLength } export const useRows = (): Ref => useProvider(NAMESPACE, "rows").rows diff --git a/src/pages/app/components/Habit/components/Site/index.tsx b/src/pages/app/components/Habit/components/Site/index.tsx index 7f3f656c7..032f92f67 100644 --- a/src/pages/app/components/Habit/components/Site/index.tsx +++ b/src/pages/app/components/Habit/components/Site/index.tsx @@ -7,11 +7,7 @@ import { KanbanCard } from "@app/components/common/kanban" import { t } from "@app/locale" -import statService, { type StatQueryParam } from "@service/stat-service" -import { getDayLength } from "@util/time" -import { computedAsync } from "@vueuse/core" -import { computed, defineComponent } from "vue" -import { useHabitFilter } from "../context" +import { defineComponent } from "vue" import { initProvider } from "./context" import DailyTrend from "./DailyTrend" import Distribution from "./Distribution" @@ -22,16 +18,7 @@ import TopK from "./TopK" const DISTRIBUTION_MIN_DAY_LENGTH = 15 const _default = defineComponent(() => { - const filter = useHabitFilter() - const rows = computedAsync(() => { - const param: StatQueryParam = { - exclusiveVirtual: true, - date: filter.value?.dateRange, - } - return statService.select(param, true) - }, []) - initProvider(rows) - const dateRangeLength = computed(() => getDayLength(filter.value?.dateRange?.[0], filter?.value?.dateRange?.[1])) + const dateRangeLength = initProvider() return () => ( msg.habit.site.title)}> diff --git a/src/pages/app/components/Habit/components/context.ts b/src/pages/app/components/Habit/components/context.ts index 79be573ac..b1c10f41e 100644 --- a/src/pages/app/components/Habit/components/context.ts +++ b/src/pages/app/components/Habit/components/context.ts @@ -6,15 +6,26 @@ */ import { useProvide, useProvider } from "@hooks" -import { type Ref } from "vue" -import { type FilterOption } from "./HabitFilter" +import { daysAgo } from "@util/time" +import { reactive, Reactive } from "vue" + +export type FilterOption = { + timeFormat: timer.app.TimeFormat + dateRange: [Date, Date] +} type Context = { - filter: Ref + filter: Reactive } const NAMESPACE = 'habit' -export const initProvider = (filter: Ref) => useProvide(NAMESPACE, { filter }) +export const initHabit = () => { + const filter = reactive({ + dateRange: daysAgo(7, 0), + timeFormat: "default", + }) + useProvide(NAMESPACE, { filter }) +} export const useHabitFilter = () => useProvider(NAMESPACE, "filter").filter \ No newline at end of file diff --git a/src/pages/app/components/Habit/index.tsx b/src/pages/app/components/Habit/index.tsx index 7db66a9cc..99436abac 100644 --- a/src/pages/app/components/Habit/index.tsx +++ b/src/pages/app/components/Habit/index.tsx @@ -5,30 +5,19 @@ * https://opensource.org/licenses/MIT */ import ContentContainer from "@app/components/common/ContentContainer" -import { useState } from "@hooks" import Flex from "@pages/components/Flex" -import { daysAgo } from "@util/time" import { defineComponent } from "vue" -import HabitFilter, { type FilterOption } from "./components/HabitFilter" +import HabitFilter from "./components/HabitFilter" import Period from "./components/Period" import Site from "./components/Site" -import { initProvider } from "./components/context" +import { initHabit } from "./components/context" const _default = defineComponent(() => { - const [filter, setFilter] = useState({ - dateRange: daysAgo(7, 0), - timeFormat: "default", - }) - initProvider(filter) + initHabit() return () => ( ( - val && setFilter(val)} - /> - ), + filter: () => , default: () => ( diff --git a/src/pages/app/components/Option/components/BackupOption/Footer.tsx b/src/pages/app/components/Option/components/BackupOption/Footer.tsx index 9792f80bd..6800674bf 100644 --- a/src/pages/app/components/Option/components/BackupOption/Footer.tsx +++ b/src/pages/app/components/Option/components/BackupOption/Footer.tsx @@ -12,7 +12,7 @@ import processor from "@service/backup/processor" import metaService from "@service/meta-service" import { formatTime } from "@util/time" import { ElButton, ElDivider, ElLoading, ElMessage, ElText } from "element-plus" -import { defineComponent, type PropType, toRef } from "vue" +import { defineComponent, toRef } from "vue" import Clear from "./Clear" import Download from "./Download" @@ -32,57 +32,49 @@ async function handleTest() { const TIME_FORMAT = t(msg => msg.calendar.timeFormat) -const _default = defineComponent({ - props: { - type: { - type: String as PropType, - required: false, - } - }, - setup(props) { - const type = toRef(props, 'type') +const _default = defineComponent<{ type: timer.backup.Type }>(props => { + const type = toRef(props, 'type') - const [lastTime, setLastTime] = useState() + const [lastTime, setLastTime] = useState() - useRequest(async () => { - const typeVal = type.value - return typeVal && (await metaService.getLastBackUp(typeVal))?.ts - }, { deps: type, onSuccess: setLastTime }) + useRequest(async () => { + const typeVal = type.value + return typeVal && (await metaService.getLastBackUp(typeVal))?.ts + }, { deps: type, onSuccess: setLastTime }) - async function handleBackup() { - const loading = ElLoading.service({ - text: "Doing backup...." - }) - const result = await processor.syncData() - loading.close() - if (result.success) { - ElMessage.success('Successfully!') - setLastTime(result.data ?? Date.now()) - } else { - ElMessage.error(result.errorMsg || 'Unknown error') - } + async function handleBackup() { + const loading = ElLoading.service({ + text: "Doing backup...." + }) + const result = await processor.syncData() + loading.close() + if (result.success) { + ElMessage.success('Successfully!') + setLastTime(result.data ?? Date.now()) + } else { + ElMessage.error(result.errorMsg || 'Unknown error') } + } - return () =>
- -
- } onClick={handleTest}> - {t(msg => msg.button.test)} - - - - } onClick={handleBackup}> - {t(msg => msg.option.backup.operation)} - - - {t( - msg => msg.option.backup.lastTimeTip, - { lastTime: (lastTime.value && formatTime(lastTime.value, TIME_FORMAT)) ?? '' } - )} - -
+ return () =>
+ +
+ } onClick={handleTest}> + {t(msg => msg.button.test)} + + + + } onClick={handleBackup}> + {t(msg => msg.option.backup.operation)} + + + {t( + msg => msg.option.backup.lastTimeTip, + { lastTime: (lastTime.value && formatTime(lastTime.value, TIME_FORMAT)) ?? '' } + )} +
- } +
}) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/index.tsx b/src/pages/app/components/Option/index.tsx index b8782abd9..a0c800c26 100644 --- a/src/pages/app/components/Option/index.tsx +++ b/src/pages/app/components/Option/index.tsx @@ -46,12 +46,7 @@ const _default = defineComponent(() => { return () => mediaSize.value <= MediaSize.sm ?