Skip to content

Commit 9af00b2

Browse files
sheepzhsheepzh
authored
feat: use localstorage to store the default queries of popup page (#472)
1 parent 218d586 commit 9af00b2

File tree

18 files changed

+96
-245
lines changed

18 files changed

+96
-245
lines changed

‎src/i18n/message/app/option-resource.json‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
"popup": {
66
"title": "弹窗页",
77
"max": "只显示前 {input} 条数据，剩下的条目合并显示",
8-
"defaultMergeMethod": "默认数据合并方式 {input}",
9-
"defaultDisplay": "打开时显示 {duration} {type}",
108
"displaySiteName": "{input} 显示时是否使用 {siteName} 来代替域名"
119
},
1210
"appearance": {
@@ -136,8 +134,6 @@
136134
"popup": {
137135
"title": "彈出視窗",
138136
"max": "僅顯示前 {input} 筆資料，其餘項目合併",
139-
"defaultMergeMethod": "預設資料合併方式 {input}",
140-
"defaultDisplay": "開啟時顯示 {duration} {type}",
141137
"displaySiteName": "{input} 是否使用 {siteName} 取代網域"
142138
},
143139
"appearance": {
@@ -266,8 +262,6 @@
266262
"popup": {
267263
"title": "Popup Page",
268264
"max": "Show the first {input} data items",
269-
"defaultMergeMethod": "Default data merging method {input}",
270-
"defaultDisplay": "Show {duration} {type} on open",
271265
"displaySiteName": "{input} Whether to display {siteName} instead of URL"
272266
},
273267
"appearance": {
@@ -397,8 +391,6 @@
397391
"popup": {
398392
"title": "ポップアップページ",
399393
"max": "最初の {input} 個のデータのみを表示し、残りのエントリは結合されます",
400-
"defaultMergeMethod": "デフォルトのデータマージ方法 {input}",
401-
"defaultDisplay": "開くと {duration} {type} が表示されます",
402394
"displaySiteName": "{input} ホストの代わりに {siteName} を表示するかどうか"
403395
},
404396
"appearance": {
@@ -527,8 +519,6 @@
527519
"popup": {
528520
"title": "Página de Pop-up",
529521
"max": "Mostrar os primeiros {input} itens de dados",
530-
"defaultMergeMethod": "Método padrão de fusão de dados {input}",
531-
"defaultDisplay": "Mostrar {type} de {duration} em aberto",
532522
"displaySiteName": "{input} Se deve exibir {siteName} em vez de URL"
533523
},
534524
"appearance": {
@@ -656,8 +646,6 @@
656646
"popup": {
657647
"title": "Вікно розширення",
658648
"max": "Кількість записів для показу: {input}",
659-
"defaultMergeMethod": "Метод злиття даних за замовчуванням {input}",
660-
"defaultDisplay": "Дані для показу: {duration} {type}",
661649
"displaySiteName": "{input} Показувати {siteName} замість URL-адреси"
662650
},
663651
"appearance": {
@@ -786,8 +774,6 @@
786774
"popup": {
787775
"title": "Página emergente",
788776
"max": "Mostrar los primeros {input} elementos de datos",
789-
"defaultMergeMethod": "Método de fusión de datos predeterminado {input}",
790-
"defaultDisplay": "Mostrar {duration} {type} al abrir",
791777
"displaySiteName": "{input} Mostrar {siteName} en lugar de la URL"
792778
},
793779
"appearance": {
@@ -915,8 +901,6 @@
915901
"popup": {
916902
"title": "Popup-Seite",
917903
"max": "Zeige die ersten {input} Datenelemente",
918-
"defaultMergeMethod": "Standardmethode zum Zusammenführen von Daten {input}",
919-
"defaultDisplay": "{duration} {type} beim Öffnen anzeigen",
920904
"displaySiteName": "{input} {siteName} statt URL anzeigen"
921905
},
922906
"appearance": {
@@ -1041,8 +1025,6 @@
10411025
"popup": {
10421026
"title": "Page pop-up",
10431027
"max": "Afficher les {input} premiers éléments de données",
1044-
"defaultMergeMethod": "Méthode de fusion des données par défaut {input}",
1045-
"defaultDisplay": "Afficher {duration} {type} à l'ouverture",
10461028
"displaySiteName": "{input} S'il faut afficher {siteName} au lieu de l'URL"
10471029
},
10481030
"appearance": {
@@ -1167,7 +1149,6 @@
11671149
"popup": {
11681150
"title": "Всплывающее окно",
11691151
"max": "Показать первые {input} элементов данных",
1170-
"defaultDisplay": "Показать {duration} {type} при открытии",
11711152
"displaySiteName": "{input} Отображать ли {siteName} вместо URL"
11721153
},
11731154
"appearance": {

‎src/i18n/message/app/option.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ export type OptionMessage = {
1212
popup: {
1313
title: string
1414
max: string
15-
defaultMergeMethod: string
16-
defaultDisplay: string
1715
displaySiteName: string
1816
}
1917
appearance: {

‎src/pages/app/components/Option/components/PopupOption.tsx‎

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,54 +5,18 @@
55
* https://opensource.org/licenses/MIT
66
*/
77
import { t } from "@app/locale"
8-
import { type I18nKey, t as t_ } from "@i18n"
9-
import DurationSelect, { rangeLabel } from "@popup/components/Footer/DurationSelect"
108
import { IS_ANDROID } from "@util/constant/environment"
119
import { defaultPopup } from "@util/constant/option"
12-
import { ALL_DIMENSIONS } from "@util/stat"
13-
import { ElInputNumber, ElOption, ElSelect, ElSwitch } from "element-plus"
10+
import { ElInputNumber, ElSwitch } from "element-plus"
1411
import { defineComponent } from "vue"
1512
import { type OptionInstance } from "../common"
1613
import { useOption } from "../useOption"
1714
import OptionItem from "./OptionItem"
1815
import OptionTag from "./OptionTag"
1916

20-
type LocaleStyle = {
21-
/**
22-
* Width of duration select
23-
*/
24-
duration: number
25-
/**
26-
* Width and type select
27-
*/
28-
type: number
29-
}
30-
31-
const STYLES: Messages<LocaleStyle> = {
32-
zh_CN: { type: 85, duration: 100 },
33-
en: { type: 115, duration: 110 },
34-
ja: { type: 85, duration: 110 },
35-
pt_PT: { type: 155, duration: 120 },
36-
zh_TW: { type: 85, duration: 100 },
37-
uk: { type: 145, duration: 120 },
38-
es: { type: 160, duration: 125 },
39-
de: { duration: 120 },
40-
fr: { type: 150, duration: 130 },
41-
ru: { type: 170, duration: 150 },
42-
}
43-
44-
const tStyle = (key: I18nKey<LocaleStyle>) => t_(STYLES, { key })
45-
4617
const defaultPopOptions = defaultPopup()
47-
const defaultTypeLabel = t(msg => msg.item[defaultPopOptions.defaultType])
48-
const defaultDurationLabel = rangeLabel(defaultPopOptions.defaultDuration, defaultPopOptions.defaultDurationNum)
49-
const displayDefaultLabel = `${defaultDurationLabel}/${defaultTypeLabel}`
5018

5119
function copy(target: timer.option.PopupOption, source: timer.option.PopupOption) {
52-
target.defaultMergeMethod = source.defaultMergeMethod
53-
target.defaultDuration = source.defaultDuration
54-
target.defaultDurationNum = source.defaultDurationNum
55-
target.defaultType = source.defaultType
5620
target.displaySiteName = source.displaySiteName
5721
target.popupMax = source.popupMax
5822
}
@@ -66,51 +30,7 @@ const _default = defineComponent((_props, ctx) => {
6630

6731
return () => <>
6832
<OptionItem
69-
label={msg => msg.option.popup.defaultMergeMethod}
70-
defaultValue={t(msg => msg.shared.merge.mergeMethod.notMerge)}
7133
hideDivider
72-
>
73-
<ElSelect
74-
size="small"
75-
modelValue={option.defaultMergeMethod}
76-
placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)}
77-
onChange={(val: timer.stat.MergeMethod) => option.defaultMergeMethod = val || undefined}
78-
>
79-
<ElOption value={''} label={t(msg => msg.shared.merge.mergeMethod.notMerge)} />
80-
{(['domain', 'cate'] satisfies timer.stat.MergeMethod[]).map(m => (
81-
<ElOption value={m} label={t(msg => msg.shared.merge.mergeMethod[m])} />
82-
))}
83-
</ElSelect>
84-
</OptionItem>
85-
<OptionItem
86-
label={msg => msg.option.popup.defaultDisplay}
87-
defaultValue={displayDefaultLabel}
88-
v-slots={{
89-
duration: () => (
90-
<DurationSelect
91-
size="small"
92-
expandTrigger="hover"
93-
modelValue={[option.defaultDuration, option.defaultDurationNum]}
94-
onChange={([duration, num]) => {
95-
option.defaultDuration = duration
96-
option.defaultDurationNum = num
97-
}}
98-
style={{ width: `${tStyle(m => m.duration)}px` }}
99-
/>
100-
),
101-
type: () => (
102-
<ElSelect
103-
modelValue={option.defaultType}
104-
size="small"
105-
style={{ width: `${tStyle(m => m.type)}px` }}
106-
onChange={(val: timer.core.Dimension) => option.defaultType = val}
107-
>
108-
{ALL_DIMENSIONS.map(item => <ElOption value={item} label={t(msg => msg.item[item])} />)}
109-
</ElSelect>
110-
)
111-
}}
112-
/>
113-
<OptionItem
11434
label={msg => msg.option.popup.max}
11535
defaultValue={defaultPopOptions.popupMax}
11636
>

‎src/pages/popup/Main.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
import Flex from "@pages/components/Flex"
2-
import { DefaultOption } from "@util/constant/option"
3-
import { defineComponent, inject } from "vue"
2+
import { defineComponent } from "vue"
43
import { RouterView } from "vue-router"
54
import Footer from "./components/Footer"
65
import Header from "./components/Header"
76
import { initPopupContext } from "./context"
87

9-
export const PROVIDE_KEY = 'POPUP_OPTION'
10-
118
const Main = defineComponent(() => {
12-
const option = inject(PROVIDE_KEY) as DefaultOption
13-
const { defaultDuration, defaultType, defaultDurationNum, defaultMergeMethod } = option
149

15-
const appKey = initPopupContext({
16-
mergeMethod: defaultMergeMethod,
17-
duration: defaultDuration,
18-
type: defaultType,
19-
durationNum: defaultDurationNum,
20-
})
10+
const appKey = initPopupContext()
2111

2212
return () => (
2313
<Flex key={appKey.value} column width='100%' height='100%' gap={10}>

‎src/pages/popup/common.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@ import { type StatQueryParam } from "@service/stat-service"
55
import { isRemainHost } from "@util/constant/remain-host"
66
import { getAppPageUrl } from "@util/constant/url"
77
import { getMonthTime, MILL_PER_DAY } from "@util/time"
8-
9-
export type PopupQuery = {
10-
mergeMethod: timer.stat.MergeMethod | undefined
11-
duration: timer.option.PopupDuration
12-
durationNum?: number
13-
type: timer.core.Dimension
14-
}
8+
import { type PopupQuery } from "./context"
159

1610
type DateRangeCalculator = (now: Date, num?: number) => Awaitable<Date | [Date, Date] | undefined>
1711

@@ -28,12 +22,12 @@ const DATE_RANGE_CALCULATORS: { [duration in timer.option.PopupDuration]: DateRa
2822
}
2923

3024
export const cvt2StatQuery = async (param: PopupQuery): Promise<StatQueryParam> => {
31-
const { duration, durationNum, mergeMethod, type } = param
25+
const { duration, durationNum, mergeMethod, dimension } = param
3226
const stat: StatQueryParam = {
3327
date: await DATE_RANGE_CALCULATORS[duration]?.(new Date(), durationNum),
3428
mergeHost: mergeMethod === 'domain',
3529
mergeCate: mergeMethod === 'cate',
36-
sort: type,
30+
sort: dimension,
3731
sortOrder: 'DESC',
3832
mergeDate: true,
3933
exclusiveVirtual: true,

‎src/pages/popup/components/Footer/index.tsx‎

Lines changed: 37 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Flex from "@pages/components/Flex"
2-
import { type PopupQuery } from "@popup/common"
32
import DurationSelect from "@popup/components/Footer/DurationSelect"
43
import { usePopupContext } from "@popup/context"
54
import { t } from "@popup/locale"
@@ -8,58 +7,49 @@ import { ElOption, ElSelect, ElText } from "element-plus"
87
import { defineComponent } from "vue"
98
import Menu from "./Menu"
109

11-
const Footer = defineComponent({
12-
props: {
13-
total: String,
14-
},
15-
setup() {
16-
const { query, setQuery } = usePopupContext()
10+
const Footer = defineComponent(() => {
11+
const { query } = usePopupContext()
1712

18-
const updateQuery = <K extends keyof PopupQuery>(k: K, v: PopupQuery[K]) => {
19-
setQuery({ ...query.value, [k]: v } satisfies PopupQuery)
20-
}
21-
22-
return () => (
23-
<Flex
24-
justify="space-between"
25-
width="100%"
26-
>
27-
<Flex>
28-
<Menu />
29-
</Flex>
30-
<Flex gap={8}>
31-
<Flex gap={4}>
32-
<ElText>{t(msg => msg.shared.merge.mergeBy)}</ElText>
33-
<ElSelect
34-
modelValue={query.value?.mergeMethod}
35-
onChange={(val: timer.stat.MergeMethod) => updateQuery('mergeMethod', val || undefined)}
36-
placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)}
37-
popperOptions={{ placement: 'top' }}
38-
style={{ width: '90px' }}
39-
>
40-
<ElOption value='' label={t(msg => msg.shared.merge.mergeMethod.notMerge)} />
41-
{(['domain', 'cate'] satisfies timer.stat.MergeMethod[]).map(method => (
42-
<ElOption value={method} label={t(msg => msg.shared.merge.mergeMethod[method])} />
43-
))}
44-
</ElSelect>
45-
</Flex>
46-
<DurationSelect
47-
reverse
48-
modelValue={[query.value?.duration, query.value?.durationNum]}
49-
onChange={([duration, durationNum]) => setQuery({ ...query.value, duration, durationNum })}
50-
/>
13+
return () => (
14+
<Flex justify="space-between" width="100%">
15+
<Flex>
16+
<Menu />
17+
</Flex>
18+
<Flex gap={8}>
19+
<Flex gap={4}>
20+
<ElText>{t(msg => msg.shared.merge.mergeBy)}</ElText>
5121
<ElSelect
52-
modelValue={query?.value?.type}
53-
onChange={(v: timer.core.Dimension) => updateQuery('type', v)}
22+
modelValue={query.mergeMethod}
23+
onChange={v => query.mergeMethod = v}
24+
placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)}
5425
popperOptions={{ placement: 'top' }}
55-
style={{ width: '120px' }}
26+
style={{ width: '90px' }}
5627
>
57-
{ALL_DIMENSIONS.map(item => <ElOption value={item} label={t(msg => msg.item[item])} />)}
28+
<ElOption value='' label={t(msg => msg.shared.merge.mergeMethod.notMerge)} />
29+
{(['domain', 'cate'] satisfies timer.stat.MergeMethod[]).map(method => (
30+
<ElOption value={method} label={t(msg => msg.shared.merge.mergeMethod[method])} />
31+
))}
5832
</ElSelect>
5933
</Flex>
60-
</Flex >
61-
)
62-
}
34+
<DurationSelect
35+
reverse
36+
modelValue={[query.duration, query.durationNum]}
37+
onChange={([duration, durationNum]) => {
38+
query.duration = duration
39+
query.durationNum = durationNum
40+
}}
41+
/>
42+
<ElSelect
43+
modelValue={query.dimension}
44+
onChange={v => query.dimension = v}
45+
popperOptions={{ placement: 'top' }}
46+
style={{ width: '120px' }}
47+
>
48+
{ALL_DIMENSIONS.map(item => <ElOption value={item} label={t(msg => msg.item[item])} />)}
49+
</ElSelect>
50+
</Flex>
51+
</Flex >
52+
)
6353
})
6454

6555
export default Footer

0 commit comments

Comments
 (0)