Skip to content

Commit 843e0ea

Browse files
sheepzhsheepzh
committed
Reconstruct codes of i18n to optimize size
1 parent d7c2566 commit 843e0ea

File tree

33 files changed

+431
-422
lines changed

33 files changed

+431
-422
lines changed

‎src/app/components/clear/filter.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ElButton, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElTooltip } from "element-plus"
2-
import { defineComponent, h, ref, Ref, SetupContext, VNode } from "vue"
3-
import { t, tN } from "../../../common/vue-i18n"
2+
import { defineComponent, h, ref, Ref, SetupContext } from "vue"
43
import timerDatabase, { TimerCondition } from "../../../database/timer-database"
54
import SiteInfo from "../../../entity/dto/site-info"
65
import timerService from "../../../service/timer-service"
76
import { formatTime, MILL_PER_DAY } from "../../../util/time"
7+
import { I18nKey, t, tN } from "../../locale"
88
import './style/filter'
99

1010
const yesterday = new Date().getTime() - MILL_PER_DAY
@@ -16,7 +16,7 @@ birthdayOfBrowser.setMonth(12 - 1)
1616
birthdayOfBrowser.setDate(15)
1717
const datePickerShortcut = (msg: string, days: number) => {
1818
return {
19-
text: t(`clear.dateShortcut.${msg}`),
19+
text: t(messages => messages.clear.dateShortcut[msg]),
2020
value: [birthdayOfBrowser, daysBefore(days)]
2121
}
2222
}
@@ -60,7 +60,7 @@ const generateParamAndSelect = () => {
6060

6161
if (hasError) {
6262
ElMessage({
63-
message: t('clear.paramError'),
63+
message: t(msg => msg.clear.paramError),
6464
type: 'warning'
6565
})
6666
} else {
@@ -77,7 +77,7 @@ const generateParamAndSelect = () => {
7777
const _default = defineComponent((_props, ctx: SetupContext) => {
7878
const onDateChanged = ctx.attrs.onDateChanged as () => void
7979

80-
const title = h('h3', t('clear.filterItems'))
80+
const title = h('h3', t(msg => msg.clear.filterItems))
8181
const stepNo = 'step-no'
8282

8383
const picker = () => h(ElDatePicker,
@@ -99,10 +99,10 @@ const _default = defineComponent((_props, ctx: SetupContext) => {
9999
})
100100
const first = () => h('p', [
101101
h('a', { class: stepNo }, '1.'),
102-
tN('clear.filterDate', { picker: picker() })
102+
tN(msg => msg.clear.filterDate, { picker: picker() })
103103
])
104104

105-
const startAndInput = (translateKey: string, startRef: Ref<string>, endRef: Ref<string>, lineNo: number) => h('p', [
105+
const startAndInput = (translateKey: I18nKey, startRef: Ref<string>, endRef: Ref<string>, lineNo: number) => h('p', [
106106
h('a', { class: stepNo }, `${lineNo}.`),
107107
tN(translateKey, {
108108
start: h(ElInput, {
@@ -116,7 +116,7 @@ const _default = defineComponent((_props, ctx: SetupContext) => {
116116
onClear: () => startRef.value = ''
117117
}), end: h(ElInput, {
118118
class: 'filter-input',
119-
placeholder: t('clear.unlimited'),
119+
placeholder: t(msg => msg.clear.unlimited),
120120
min: startRef.value || '0',
121121
clearable: true,
122122
size: 'mini',
@@ -128,7 +128,7 @@ const _default = defineComponent((_props, ctx: SetupContext) => {
128128
])
129129

130130
const archiveButton = () => h(ElTooltip,
131-
{ content: t('clear.archiveAlert') },
131+
{ content: t(msg => msg.clear.archiveAlert) },
132132
() => h(ElButton,
133133
{
134134
icon: 'el-icon-document-add',
@@ -138,16 +138,16 @@ const _default = defineComponent((_props, ctx: SetupContext) => {
138138
generateParamAndSelect()
139139
.then((result: SiteInfo[]) => {
140140
const count = result.length
141-
ElMessageBox.confirm(t('clear.archiveConfirm', { count }))
141+
ElMessageBox.confirm(t(msg => msg.clear.archiveConfirm, { count }))
142142
.then(() => timerService.archive(result))
143143
.then(() => {
144-
ElMessage(t('clear.archiveSuccess'))
144+
ElMessage(t(msg => msg.clear.archiveSuccess))
145145
onDateChanged()
146146
}).catch(() => { })
147147
})
148148
}
149149
},
150-
() => t('item.operation.archive')
150+
() => t(msg => msg.item.operation.archive)
151151
))
152152
const deleteButton = () => h(ElButton,
153153
{
@@ -158,26 +158,26 @@ const _default = defineComponent((_props, ctx: SetupContext) => {
158158
generateParamAndSelect()
159159
.then(result => {
160160
const count = result.length
161-
ElMessageBox.confirm(t('clear.deleteConfirm', { count }))
161+
ElMessageBox.confirm(t(msg => msg.clear.deleteConfirm, { count }))
162162
.then(() => timerDatabase.delete(result))
163163
.then(() => {
164-
ElMessage(t('clear.deleteSuccess'))
164+
ElMessage(t(msg => msg.clear.deleteSuccess))
165165
onDateChanged()
166166
}).catch(() => { })
167167
})
168168
}
169169
},
170-
() => t('item.operation.delete')
170+
() => t(msg => msg.item.operation.delete)
171171
)
172172

173173
const footer = () => h('div', { class: 'filter-container', style: 'padding-top: 40px;' }, [archiveButton(), deleteButton()])
174174

175175
return () => h('div', { style: 'text-align:left; padding-left:30px; padding-top:20px;' },
176176
[
177177
title, first(),
178-
startAndInput('clear.filterFocus', focusStartRef, focusEndRef, 2),
179-
startAndInput('clear.filterTotal', totalStartRef, totalEndRef, 3),
180-
startAndInput('clear.filterTime', timeStartRef, timeEndRef, 4),
178+
startAndInput(msg => msg.clear.filterFocus, focusStartRef, focusEndRef, 2),
179+
startAndInput(msg => msg.clear.filterTotal, totalStartRef, totalEndRef, 3),
180+
startAndInput(msg => msg.clear.filterTime, timeStartRef, timeEndRef, 4),
181181
footer()
182182
]
183183
)

‎src/app/components/clear/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ElAlert, ElCard, ElProgress, ElRow, ElCol } from "element-plus"
22
import Filter from './filter'
33
import { computed, defineComponent, h, ref, Ref } from "vue"
4-
import { t } from "../../../common/vue-i18n"
54
import { getUsedStorage } from "../../../database/memory-detector"
65
import './style'
6+
import { t } from "../../locale"
77

88
const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000
99

@@ -39,7 +39,7 @@ export default defineComponent(() => {
3939
}
4040
})
4141
// memory info
42-
const memoryAlert = () => h(ElAlert, { showIcon: true, center: true, title: t('clear.totalMemoryAlert', { size: totalMbRef.value }) })
42+
const memoryAlert = () => h(ElAlert, { showIcon: true, center: true, title: t(msg => msg.clear.totalMemoryAlert, { size: totalMbRef.value }) })
4343
const memoryProfress = () => h('div',
4444
{ style: 'height:260px; padding-top:50px;' },
4545
h(ElProgress, { strokeWidth: 15, percentage: percentageRef.value, type: 'circle', color: typeColorRef.value })
@@ -48,7 +48,7 @@ export default defineComponent(() => {
4848
{ style: 'user-select: none;' },
4949
h('h3',
5050
{ style: `color:${typeColorRef.value};` },
51-
t('clear.usedMemoryAlert', { size: usedMbRef.value })
51+
t(msg => msg.clear.usedMemoryAlert, { size: usedMbRef.value })
5252
)
5353
)
5454

@@ -57,7 +57,7 @@ export default defineComponent(() => {
5757
() => [memoryAlert(), memoryProfress(), usedAlert()]
5858
)
5959

60-
const clearAlert = () => h(ElAlert, { showIcon: true, center: true, title: t('clear.operationAlert'), closable: false, type: 'info' })
60+
const clearAlert = () => h(ElAlert, { showIcon: true, center: true, title: t(msg => msg.clear.operationAlert), closable: false, type: 'info' })
6161
const clearFilter = () => h(Filter, { onDateChanged: queryData })
6262
const clearPanel = () => h(ElCard, { bodyStyle },
6363
() => [clearAlert(), clearFilter()]

‎src/app/components/report/index.ts‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ElButton, ElDatePicker, ElDropdown, ElDropdownMenu, ElDropdownItem, ElInput, ElLink, ElMessage, ElPagination, ElPopconfirm, ElSwitch, ElTable, ElTableColumn, ElTooltip } from "element-plus"
2-
import { computed, defineComponent, h, reactive, Ref, ref, UnwrapRef } from "vue"
3-
import { t } from "../../../common/vue-i18n"
2+
import { computed, defineComponent, h, reactive, Ref, ref, UnwrapRef } from 'vue'
3+
import { t } from '../../locale'
44
import { DATE_FORMAT } from "../../../database/constant"
55
import timerDatabase from "../../../database/timer-database"
66
import SiteInfo, { SiteItem } from "../../../entity/dto/site-info"
@@ -47,23 +47,23 @@ const changeDeleteConfirmUrl = (row: SiteInfo) => {
4747
if (mergeDateRef.value) {
4848
if (!dateRange.length) {
4949
// Delete all
50-
deleteMsgRef.value = t('item.operation.deleteConfirmMsgAll', { url: host })
50+
deleteMsgRef.value = t(msg => msg.item.operation.deleteConfirmMsgAll, { url: host })
5151
} else {
5252
const start = dateRange[0]
5353
const end = dateRange[1]
5454
if (start === end) {
5555
// Among one day
56-
deleteMsgRef.value = t('item.operation.deleteConfirmMsg', { url: host, date: formatTime(start, DISPLAY_DATE_FORMAT) })
56+
deleteMsgRef.value = t(msg => msg.item.operation.deleteConfirmMsg, { url: host, date: formatTime(start, DISPLAY_DATE_FORMAT) })
5757
} else {
5858
// Period
59-
deleteMsgRef.value = t('item.operation.deleteConfirmMsgRange',
59+
deleteMsgRef.value = t(msg => msg.item.operation.deleteConfirmMsgRange,
6060
{ url: host, start: formatTime(start, DISPLAY_DATE_FORMAT), end: formatTime(end, DISPLAY_DATE_FORMAT) }
6161
)
6262
}
6363
}
6464
} else {
6565
// Not merge, delete one item
66-
deleteMsgRef.value = t('item.operation.deleteConfirmMsg', { url: host, date: dateFormatter(row) })
66+
deleteMsgRef.value = t(msg => msg.item.operation.deleteConfirmMsg, { url: host, date: dateFormatter(row) })
6767
}
6868
}
6969

@@ -89,7 +89,7 @@ const queryParam = computed(() => {
8989
})
9090

9191
const exportFileName = computed(() => {
92-
let baseName = t('report.exportFileName')
92+
let baseName = t(msg => msg.report.exportFileName)
9393
const dateRange = dateRangeRef.value
9494
if (dateRange && dateRange.length === 2) {
9595
const start = dateRange[0]
@@ -100,9 +100,9 @@ const exportFileName = computed(() => {
100100
baseName += '_' + formatTime(start, '{y}{m}{d}') + '_' + formatTime(end, '{y}{m}{d}')
101101
}
102102
}
103-
mergeDateRef.value && (baseName += '_' + t('report.mergeDate'))
104-
mergeDomainRef.value && (baseName += '_' + t('report.mergeDomain'))
105-
displayBySecondRef.value && (baseName += '_' + t('report.displayBySecond'))
103+
mergeDateRef.value && (baseName += '_' + t(msg => msg.report.mergeDate))
104+
mergeDomainRef.value && (baseName += '_' + t(msg => msg.report.mergeDomain))
105+
displayBySecondRef.value && (baseName += '_' + t(msg => msg.report.displayBySecond))
106106
return baseName
107107
})
108108

@@ -168,7 +168,7 @@ const exportFile = (format: FileFormat) => {
168168
let columnName = []
169169
!mergeDateRef.value && columnName.push('date')
170170
columnName = [...columnName, 'host', 'total', 'focus', 'time']
171-
const data = [columnName.map(c => t(`item.${c}`))]
171+
const data = [columnName.map(c => t(msg => msg.item[c]))]
172172
rows.forEach(row => {
173173
const csvR = []
174174
!mergeDateRef.value && csvR.push(dateFormatter(row))
@@ -185,7 +185,7 @@ export default defineComponent(() => {
185185
// host
186186
const host = () => h(ElInput,
187187
{
188-
placeholder: t('report.hostPlaceholder'),
188+
placeholder: t(msg => msg.report.hostPlaceholder),
189189
clearable: true,
190190
modelValue: hostRef.value,
191191
class: filterItemClz,
@@ -202,7 +202,7 @@ export default defineComponent(() => {
202202
}
203203
const datePickerShortcut = (msg: string, agoOfStart?: number, agoOfEnd?: number) => {
204204
return {
205-
text: t(`report.${msg}`),
205+
text: t(messages => messages.report[msg]),
206206
value: daysAgo(agoOfStart || 0, agoOfEnd || 0)
207207
}
208208
}
@@ -223,12 +223,12 @@ export default defineComponent(() => {
223223
dateRangeRef.value = date
224224
queryData()
225225
},
226-
startPlaceholder: t('report.startDate'),
227-
endPlaceholder: t('report.endDate')
226+
startPlaceholder: t(msg => msg.report.startDate),
227+
endPlaceholder: t(msg => msg.report.endDate)
228228
})
229229
const dateRange = () => h('span', { class: filterItemClz }, [dateRangePicker()])
230230
// Merge date
231-
const mergeDateName = () => h('a', { class: 'filter-name' }, t('report.mergeDate'))
231+
const mergeDateName = () => h('a', { class: 'filter-name' }, t(msg => msg.report.mergeDate))
232232
const mergeDate = () => h(ElSwitch,
233233
{
234234
class: filterItemClz,
@@ -240,7 +240,7 @@ export default defineComponent(() => {
240240
}
241241
)
242242
// Merge domain
243-
const mergeDomainName = () => h('a', { class: 'filter-name' }, t('report.mergeDomain'))
243+
const mergeDomainName = () => h('a', { class: 'filter-name' }, t(msg => msg.report.mergeDomain))
244244
const mergeDomain = () => h(ElSwitch,
245245
{
246246
class: filterItemClz,
@@ -252,7 +252,7 @@ export default defineComponent(() => {
252252
}
253253
)
254254
// Display by second
255-
const displayBySecondName = () => h('a', { class: 'filter-name' }, t('report.displayBySecond'))
255+
const displayBySecondName = () => h('a', { class: 'filter-name' }, t(msg => msg.report.displayBySecond))
256256
const displayBySecond = () => h(ElSwitch,
257257
{
258258
class: filterItemClz,
@@ -286,7 +286,7 @@ export default defineComponent(() => {
286286
h(ElTableColumn,
287287
{
288288
prop: 'date',
289-
label: t('item.date'),
289+
label: t(msg => msg.item.date),
290290
minWidth: 200,
291291
align: 'center',
292292
sortable: 'custom'
@@ -298,7 +298,7 @@ export default defineComponent(() => {
298298
result.push(
299299
h(ElTableColumn, {
300300
prop: 'host',
301-
label: t('item.host'),
301+
label: t(msg => msg.item.host),
302302
minWidth: 300,
303303
sortable: 'custom',
304304
align: 'center'
@@ -329,21 +329,21 @@ export default defineComponent(() => {
329329
result.push(
330330
h(ElTableColumn, {
331331
prop: 'focus',
332-
label: t('item.focus'),
332+
label: t(msg => msg.item.focus),
333333
minWidth: 220,
334334
align: 'center',
335335
sortable: 'custom'
336336
}, { default: ({ row }: { row: SiteInfo }) => periodFormatter(row.focus) }),
337337
h(ElTableColumn, {
338338
prop: 'total',
339-
label: t('item.total'),
339+
label: t(msg => msg.item.total),
340340
minWidth: 220,
341341
align: 'center',
342342
sortable: 'custom'
343343
}, { default: ({ row }: { row: SiteInfo }) => periodFormatter(row.total) }),
344344
h(ElTableColumn, {
345345
prop: 'time',
346-
label: t('item.time'),
346+
label: t(msg => msg.item.time),
347347
minWidth: 130,
348348
align: 'center',
349349
sortable: 'custom'
@@ -357,8 +357,8 @@ export default defineComponent(() => {
357357
// Delete button
358358
operationButtons.push(h(ElPopconfirm,
359359
{
360-
confirmButtonText: t('item.operation.confirmMsg'),
361-
cancelButtonText: t('item.operation.cancelMsg'),
360+
confirmButtonText: t(msg => msg.item.operation.confirmMsg),
361+
cancelButtonText: t(msg => msg.item.operation.cancelMsg),
362362
title: deleteMsgRef.value,
363363
onConfirm: () => {
364364
if (mergeDateRef.value) {
@@ -385,50 +385,50 @@ export default defineComponent(() => {
385385
type: 'warning',
386386
onClick: () => changeDeleteConfirmUrl(row),
387387
icon: 'el-icon-delete'
388-
}, () => t('item.operation.delete'))
388+
}, () => t(msg => msg.item.operation.delete))
389389
}))
390390
// Add 2 the whitelist
391391
if (!whitelistRef.value.includes(host)) {
392392
operationButtons.push(h(ElPopconfirm, {
393-
confirmButtonText: t("item.operation.confirmMsg"),
394-
cancelButtonText: t('item.operation.cancelMsg'),
395-
title: t('setting.whitelist.addConfirmMsg', { url: host }),
393+
confirmButtonText: t(msg => msg.item.operation.confirmMsg),
394+
cancelButtonText: t(msg => msg.item.operation.cancelMsg),
395+
title: t(msg => msg.setting.whitelist.addConfirmMsg, { url: host }),
396396
icon: 'el-icon-info',
397397
iconColor: 'red',
398398
onConfirm: () => {
399399
whitelistService
400400
.add(host)
401401
.then(() => {
402402
queryWhiteList().then(queryData)
403-
ElMessage({ message: t('report.added2Whitelist'), type: 'success' })
403+
ElMessage({ message: t(msg => msg.report.added2Whitelist), type: 'success' })
404404
})
405405
}
406406
}, {
407-
reference: () => h(ElButton, { size: 'mini', type: 'danger', icon: 'el-icon-plus' }, () => t('item.operation.add2Whitelist'))
407+
reference: () => h(ElButton, { size: 'mini', type: 'danger', icon: 'el-icon-plus' }, () => t(msg => msg.item.operation.add2Whitelist))
408408
}))
409409
} else {
410410
operationButtons.push(h(ElPopconfirm, {
411-
confirmButtonText: t("item.operation.confirmMsg"),
412-
cancelButtonText: t('item.operation.cancelMsg'),
413-
title: t('setting.whitelist.removeConfirmMsg', { url: row.host }),
411+
confirmButtonText: t(msg => msg.item.operation.confirmMsg),
412+
cancelButtonText: t(msg => msg.item.operation.cancelMsg),
413+
title: t(msg => msg.setting.whitelist.removeConfirmMsg, { url: row.host }),
414414
icon: 'el-icon-info',
415415
iconColor: '#409eff',
416416
onConfirm: () => {
417417
whitelistService
418418
.remove(host)
419419
.then(() => {
420420
queryWhiteList()
421-
ElMessage({ message: t('report.removeFromWhitelist'), type: 'success' });
421+
ElMessage({ message: t(msg => msg.report.removeFromWhitelist), type: 'success' });
422422
})
423423
}
424424
}, {
425-
reference: () => h(ElButton, { size: 'mini', type: 'primary', icon: 'el-icon-open' }, () => t('item.operation.removeFromWhitelist'))
425+
reference: () => h(ElButton, { size: 'mini', type: 'primary', icon: 'el-icon-open' }, () => t(msg => msg.item.operation.removeFromWhitelist))
426426
}))
427427
}
428428
return operationButtons
429429
}
430430
result.push(h(ElTableColumn, {
431-
label: t('item.operation.label'),
431+
label: t(msg => msg.item.operation.label),
432432
minWidth: 240,
433433
align: 'center'
434434
}, {

0 commit comments

Comments
 (0)