feat: support to setup delay time

src/background/content-script-handler.ts

@@ -9,7 +9,7 @@ import { executeScript } from "@api/chrome/script"
 import { createTab } from "@api/chrome/tab"
 import { ANALYSIS_ROUTE, LIMIT_ROUTE } from "@app/router/constants"
 import optionHolder from "@service/components/option-holder"
-import limitService from "@service/limit-service"
+import { getLimited, getRelated } from "@service/limit-service"
 import siteService from "@service/site-service"
 import { saveTimelineEvent } from '@service/timeline-service'
 import whitelistHolder from "@service/whitelist/holder"
@@ -61,8 +61,8 @@ export default function init(dispatcher: MessageDispatcher) {
             const option = await optionHolder.get()
             return !!option.printInConsole
         })
-        .register<string, timer.limit.Item[]>('cs.getLimitedRules', url => limitService.getLimited(url))
-        .register<string, timer.limit.Item[]>('cs.getRelatedRules', url => limitService.getRelated(url))
+        .register<string, timer.limit.Item[]>('cs.getLimitedRules', url => getLimited(url))
+        .register<string, timer.limit.Item[]>('cs.getRelatedRules', url => getRelated(url))
         .register<void, void>('cs.openAnalysis', (_, sender) => handleOpenAnalysisPage(sender))
         .register<void, void>('cs.openLimit', (_, sender) => handleOpenLimitPage(sender))
         .register<void, void>('cs.onInjected', async (_, sender) => handleInjected(sender))

src/background/limit-processor.ts

@@ -7,7 +7,7 @@
 
 import { createTabAfterCurrent, getRightOf, listTabs, resetTabUrl, sendMsg2Tab } from "@api/chrome/tab"
 import { LIMIT_ROUTE } from "@app/router/constants"
-import limitService from "@service/limit-service"
+import { moreMinutes, noticeLimitChanged } from "@service/limit-service"
 import { getAppPageUrl } from "@util/constant/url"
 import { matches } from "@util/limit"
 import { isBrowserUrl } from "@util/pattern"
@@ -50,12 +50,13 @@ function initDailyBroadcast() {
             const startOfThisDay = getStartOfDay(new Date())
             return startOfThisDay.getTime() + MILL_PER_DAY
         },
-        () => limitService.broadcastRules(),
+        () => noticeLimitChanged(),
     )
 }
 
-const processMoreMinutes = async (url: string) => {
-    const rules = await limitService.moreMinutes(url)
+const processMoreMinutes = async (data: any) => {
+    const { url, duration } = (data as timer.mq.DelayMinutesData) ?? {}
+    const rules = await moreMinutes(url, duration)
 
     const tabs = await listTabs({ status: 'complete' })
     tabs.forEach(tab => processLimitWaking(rules, tab))
@@ -82,7 +83,7 @@ export default function init(dispatcher: MessageDispatcher) {
     dispatcher
         .register<string>('openLimitPage', processOpenPage)
         // More minutes
-        .register<string>('cs.moreMinutes', processMoreMinutes)
+        .register<string>('cs.delayMinutes', processMoreMinutes)
         // Judge any tag hit the time limit per visit
         .register<timer.limit.Item, boolean>("askHitVisit", processAskHitVisit)
 }

src/background/migrator/limit-rule-migrator.ts

@@ -1,4 +1,4 @@
-import limitService from "@service/limit-service"
+import { removeLimitItem, selectLimitItems, updateLimitItem } from "@service/limit-service"
 import { cleanCond } from "@util/limit"
 import type { Migrator } from "./common"
 
@@ -7,7 +7,7 @@ export default class LimitRuleMigrator implements Migrator {
     }
 
     async onUpdate(_version: string): Promise<void> {
-        const rules = await limitService.select()
+        const rules = await selectLimitItems()
         if (!rules?.length) return
         const needUpdate: timer.limit.Rule[] = []
         const needRemoved: timer.limit.Rule[] = []
@@ -29,7 +29,7 @@ export default class LimitRuleMigrator implements Migrator {
             }
 
         })
-        needRemoved.length && await limitService.remove(...needRemoved)
-        needUpdate.length && await limitService.update(...needUpdate)
+        needRemoved.length && await removeLimitItem(...needRemoved)
+        needUpdate.length && await updateLimitItem(...needUpdate)
     }
 }

src/background/track-server.ts

@@ -2,7 +2,7 @@ import { getTab, listTabs, sendMsg2Tab } from "@api/chrome/tab"
 import { getWindow } from "@api/chrome/window"
 import optionHolder from "@service/components/option-holder"
 import itemService, { type ItemIncContext } from "@service/item-service"
-import limitService from "@service/limit-service"
+import { incLimitFocus, incLimitVisit } from "@service/limit-service"
 import periodService from "@service/period-service"
 import whitelistHolder from "@service/whitelist/holder"
 import { IS_ANDROID } from "@util/constant/environment"
@@ -18,7 +18,7 @@ async function handleTime(context: ItemIncContext, timeRange: [number, number],
     // 1. Save async
     await itemService.addFocusTime(context, focusTime)
     // 2. Process limit
-    const { limited, reminder } = await limitService.addFocusTime(host, url, focusTime)
+    const { limited, reminder } = await incLimitFocus(host, url, focusTime)
     // If time limited after this operation, send messages
     limited?.length && sendLimitedMessage(limited)
     // If need to reminder, send messages
@@ -81,7 +81,7 @@ async function sendLimitedMessage(items: timer.limit.Item[]) {
 async function handleVisit(context: ItemIncContext) {
     await itemService.increaseVisit(context)
     const { host, url } = context
-    const metLimits = await limitService.incVisit(host, url)
+    const metLimits = await incLimitVisit(host, url)
     // If time limited after this operation, send messages
     metLimits?.length && sendLimitedMessage(metLimits)
 }

src/content-script/limit/modal/components/Footer.tsx

@@ -4,22 +4,35 @@ import { judgeVerificationRequired, processVerification } from "@app/util/limit"
 import { TAG_NAME } from "@cs/limit/element"
 import { t } from "@cs/locale"
 import { Plus, Timer } from "@element-plus/icons-vue"
+import { useRequest } from '@hooks/useRequest'
 import optionHolder from "@service/components/option-holder"
+import { defaultDailyLimit } from '@util/constant/option'
 import { meetTimeLimit } from '@util/limit'
 import { ElButton } from "element-plus"
 import { computed, defineComponent } from "vue"
 import { useDelayHandler, useReason, useRule } from "../context"
 
-async function handleMore5Minutes(rule: timer.limit.Item | null, callback: () => void) {
-    let promise: Promise<void> | undefined = undefined
-    const ele = document.querySelector(TAG_NAME)?.shadowRoot?.querySelector('body')
-    if (rule && await judgeVerificationRequired(rule)) {
-        const option = await optionHolder.get()
-        promise = processVerification(option, { appendTo: ele ?? undefined })
-        promise ? promise.then(callback).catch(() => { }) : callback()
-    } else {
-        callback()
+const useDelay = () => {
+    const delayHandler = useDelayHandler()
+    const { data: delayDuration } = useRequest(
+        () => optionHolder.get().then(o => o.delayDuration),
+        { defaultValue: defaultDailyLimit().delayDuration },
+    )
+    async function handleDelay(rule: timer.limit.Item | null) {
+        let promise: Promise<void> | undefined = undefined
+        const ele = document.querySelector(TAG_NAME)?.shadowRoot?.querySelector('body')
+        const callback = () => delayHandler(delayDuration.value)
+
+        if (rule && await judgeVerificationRequired(rule)) {
+            const option = await optionHolder.get()
+            promise = processVerification(option, { appendTo: ele ?? undefined })
+            promise ? promise.then(callback).catch(() => { }) : callback()
+        } else {
+            callback()
+        }
     }
+
+    return { handleDelay, delayDuration }
 }
 
 const _default = defineComponent(() => {
@@ -46,7 +59,7 @@ const _default = defineComponent(() => {
         return meetTimeLimit(realLimit, realWaste, allowDelay, delayCount)
     })
 
-    const delayHandler = useDelayHandler()
+    const { handleDelay, delayDuration } = useDelay()
 
     return () => (
         <div class='footer-container'>
@@ -61,11 +74,10 @@ const _default = defineComponent(() => {
             <ElButton
                 v-show={showDelay.value}
                 type="primary"
-                round
-                icon={Plus}
-                onClick={() => handleMore5Minutes(rule.value, delayHandler)}
+                round icon={Plus}
+                onClick={() => handleDelay(rule.value)}
             >
-                {t(msg => msg.modal.more5Minutes)}
+                {t(msg => msg.modal.delayButton, { n: delayDuration.value })}
             </ElButton>
             <ElButton
                 round

src/content-script/limit/modal/context.ts

@@ -1,6 +1,6 @@
 import { useRequest } from '@hooks/useRequest'
 import { useWindowFocus } from '@hooks/useWindowFocus'
-import limitService from "@service/limit-service"
+import { selectLimitItems } from "@service/limit-service"
 import { type App, inject, provide, type Ref, shallowRef, watch } from "vue"
 import { type LimitReason } from "../common"
 
@@ -35,7 +35,7 @@ export const provideRule = () => {
         if (!windowFocus.value) return null
         const reasonId = reason.value?.id
         if (!reasonId) return null
-        const rules = await limitService.select({ id: reasonId, filterDisabled: false })
+        const rules = await selectLimitItems({ id: reasonId, filterDisabled: false })
         return rules?.[0]
     })
 
@@ -46,8 +46,8 @@ export const provideRule = () => {
 
 export const useRule = () => inject(RULE_KEY) as Ref<timer.limit.Item | null>
 
-export const provideDelayHandler = (app: App<Element>, handlers: () => void) => {
+export const provideDelayHandler = (app: App<Element>, handlers: ArgCallback<number>) => {
     app?.provide(DELAY_HANDLER_KEY, handlers)
 }
 
-export const useDelayHandler = () => inject(DELAY_HANDLER_KEY) as () => void
+export const useDelayHandler = () => inject(DELAY_HANDLER_KEY) as ArgCallback<number>

src/content-script/limit/modal/index.ts

@@ -77,8 +77,11 @@ class ModalInstance implements MaskModal {
     url: string
     rootElement: RootElement | undefined
     body: HTMLBodyElement | undefined
-    delayHandlers: (() => void)[] = [
-        () => sendMsg2Runtime('cs.moreMinutes', this.url),
+    delayHandlers: ArgCallback<number>[] = [
+        duration => sendMsg2Runtime(
+            'cs.delayMinutes',
+            { url: this.url, duration, } satisfies timer.mq.DelayMinutesData,
+        ),
     ]
     reasons: LimitReason[] = []
     reason: Ref<LimitReason | undefined> | undefined
@@ -157,7 +160,7 @@ class ModalInstance implements MaskModal {
         this.app = createApp(Main)
         this.reason = provideReason(this.app)
         provideGlobalParam(this.app, { url: this.url })
-        provideDelayHandler(this.app, () => this.delayHandlers?.forEach(h => h?.()))
+        provideDelayHandler(this.app, duration => this.delayHandlers?.forEach(h => h?.(duration)))
         this.body && this.app.mount(this.body)
     }
 

src/content-script/limit/processor/visit-processor.ts

@@ -1,6 +1,5 @@
 import { sendMsg2Runtime } from "@api/chrome/runtime"
 import NormalTracker from "@cs/tracker/normal"
-import { DELAY_MILL } from "@util/limit"
 import { MILL_PER_SECOND } from "@util/time"
 import { type ModalContext, type Processor } from "../common"
 

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

@@ -55,6 +55,7 @@
         "dailyLimit": {
             "prompt": "受限时显示的提示文本 {input}",
             "reminder": "{input} 在到期前 {minInput} 分钟发送提醒",
+            "delayDuration": "每次延长 {input} 分钟",
             "level": {
                 "label": "受限时如何解锁 {input}",
                 "nothing": "允许在管理页面直接解锁",
@@ -324,6 +325,7 @@
         "dailyLimit": {
             "prompt": "Prompt displayed when restricted {input}",
             "reminder": "{input} Reminder {minInput} minutes before time is up",
+            "delayDuration": "Delay {input} minutes each time",
             "level": {
                 "label": "How to unlock while restricted {input}",
                 "nothing": "Allow direct unlocking on the admin page",

src/i18n/message/app/option.ts

@@ -60,6 +60,7 @@ export type OptionMessage = {
     dailyLimit: {
         prompt: string
         reminder: string
+        delayDuration: string
         level: {
             [level in timer.limit.RestrictionLevel]: string
         } & {

src/i18n/message/cs/modal-resource.json

@@ -1,67 +1,67 @@
 {
     "zh_CN": {
         "defaultPrompt": "古希腊时间与浏览器之神正在阻止您访问该页面",
-        "more5Minutes": "延长5分钟",
+        "delayButton": "延长{n}分钟",
         "browsingTime": "当前浏览时长",
         "ruleDetail": "规则详情"
     },
     "en": {
         "defaultPrompt": "This page was blocked!",
-        "more5Minutes": "5 more minutes",
+        "delayButton": "{n} more minutes",
         "browsingTime": "Browsing time",
         "ruleDetail": "Rule details"
     },
     "ja": {
         "defaultPrompt": "このページはブロックされました!",
-        "more5Minutes": "5分延長",
+        "delayButton": "{n}分延長",
         "browsingTime": "閲覧時間",
         "ruleDetail": "ルール詳細"
     },
     "zh_TW": {
         "defaultPrompt": "古希臘時間與瀏覽器之神暫時封鎖此頁面",
-        "more5Minutes": "延長5分鐘",
+        "delayButton": "延長{n}分鐘",
         "browsingTime": "目前瀏覽時長",
         "ruleDetail": "規則詳情"
     },
     "pt_PT": {
         "defaultPrompt": "Esta página foi bloqueada!",
-        "more5Minutes": "Mais 5 minutos",
+        "delayButton": "Mais {n} minutos",
         "browsingTime": "Tempo de Navegação",
         "ruleDetail": "Detalhes da Regra"
     },
     "uk": {
         "defaultPrompt": "Цю сторінку заблоковано!",
-        "more5Minutes": "Ще 5 хвилин",
+        "delayButton": "Ще {n} хвилин",
         "browsingTime": "Час перегляду",
         "ruleDetail": "Подробиці правила"
     },
     "fr": {
         "defaultPrompt": "Cette page a été bloquée!",
-        "more5Minutes": "5 minutes supplémentaires",
+        "delayButton": "{n} minutes supplémentaires",
         "browsingTime": "Temps de navigation",
         "ruleDetail": "Détails des règles"
     },
     "es": {
         "defaultPrompt": "¡Esta página fue bloqueada!",
-        "more5Minutes": "5 minutos más",
+        "delayButton": "{n} minutos más",
         "browsingTime": "Tiempo de navegación",
         "ruleDetail": "Detalles de la regla"
     },
     "de": {
         "defaultPrompt": "Diese Seite wurde gesperrt!",
-        "more5Minutes": "Noch 5 Minuten",
+        "delayButton": "Noch {n} Minuten",
         "browsingTime": "Browsing-Zeit",
         "ruleDetail": "Regeldetails"
     },
     "ru": {
         "defaultPrompt": "Эта страница заблокирована!",
-        "more5Minutes": "Ещё 5 минут",
+        "delayButton": "Ещё {n} минут",
         "browsingTime": "Время просмотра",
         "ruleDetail": "Подробности правила"
     },
     "ar": {
         "defaultPrompt": "تم حظر هذه الصفحة!",
-        "more5Minutes": "5 دقائق إضافية",
+        "delayButton": "{n} دقائق إضافية",
         "browsingTime": "وقت التصفح",
         "ruleDetail": "تفاصيل القاعدة"
     }

src/i18n/message/cs/modal.ts

@@ -2,7 +2,7 @@ import resource from './modal-resource.json'
 
 export type ModalMessage = {
     defaultPrompt: string
-    more5Minutes: string
+    delayButton: string
     browsingTime: string
     ruleDetail: string
 }

src/pages/app/components/HelpUs/MemberList.tsx

@@ -9,8 +9,7 @@ import { getMembers } from "@api/crowdin"
 import { t } from "@app/locale"
 import { useRequest } from "@hooks"
 import Box from "@pages/components/Box"
-import Flex from "@pages/components/Flex"
-import { ElDivider } from "element-plus"
+import { ElDivider, ElSpace } from "element-plus"
 import { defineComponent } from "vue"
 
 const _default = defineComponent(() => {
@@ -21,10 +20,7 @@ const _default = defineComponent(() => {
     return () => (
         <Box marginTop={10}>
             <ElDivider>{t(msg => msg.helpUs.contributors)}</ElDivider>
-            <Flex
-                wrap gap={15} justify="space-around"
-                marginInline="auto" paddingBlock={5}
-            >
+            <ElSpace wrap>
                 {list.value?.map(({ avatarUrl, username }, idx, arr) => (
                     <a
                         href={`https://crowdin.com/profile/${username}`}
@@ -39,7 +35,7 @@ const _default = defineComponent(() => {
                         />
                     </a>
                 ))}
-            </Flex>
+            </ElSpace>
         </Box>
     )
 })