feat: display restricted URL when page blocked

Author: sheepzh

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

@@ -1,11 +1,20 @@
 import { t } from "@cs/locale"
 import { useRequest } from "@hooks/useRequest"
 import Flex from "@pages/components/Flex"
-import { meetLimit, meetTimeLimit, period2Str } from "@util/limit"
+import { matchCond, meetLimit, meetTimeLimit, period2Str } from "@util/limit"
 import { formatPeriodCommon, MILL_PER_SECOND } from "@util/time"
 import { ElDescriptions, ElDescriptionsItem, ElTag } from "element-plus"
 import { computed, defineComponent } from "vue"
-import { useReason, useRule } from "../context"
+import { useGlobalParam, useReason, useRule } from "../context"
+
+const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <>
+    <ElDescriptionsItem label={t(msg => msg.limit.item.name)} labelAlign="right">
+        {rule?.name ?? '-'}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label={t(msg => msg.limit.item.condition)} labelAlign='right'>
+        {matchCond(rule?.cond ?? [], url)?.join(', ')}
+    </ElDescriptionsItem>
+</>
 
 const TimeDescriptions = defineComponent({
     props: {
@@ -21,15 +30,14 @@ const TimeDescriptions = defineComponent({
     setup(props) {
         const rule = useRule()
         const reason = useReason()
+        const { url } = useGlobalParam()
 
         const timeLimited = computed(() => meetTimeLimit(props.time ?? 0, props.waste ?? 0, !!reason.value?.allowDelay, reason.value?.delayCount ?? 0))
         const visitLimited = computed(() => meetLimit(props.count ?? 0, props.visit ?? 0))
 
         return () => (
             <ElDescriptions border column={1} labelWidth={130}>
-                <ElDescriptionsItem label={t(msg => msg.limit.item.name)} labelAlign="right">
-                    {rule.value?.name ?? '-'}
-                </ElDescriptionsItem>
+                {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={props.ruleLabel} labelAlign="right">
                     <Flex gap={5} width={200}>
                         <ElTag v-show={!!props.time}>{formatPeriodCommon((props.time ?? 0) * MILL_PER_SECOND)}</ElTag>
@@ -67,6 +75,7 @@ const TimeDescriptions = defineComponent({
 const _default = defineComponent(() => {
     const reason = useReason()
     const rule = useRule()
+    const { url } = useGlobalParam()
     const type = computed(() => reason.value?.type)
 
     const { data: browsingTime, refresh: refreshBrowsingTime } = useRequest(() => {
@@ -98,9 +107,7 @@ const _default = defineComponent(() => {
                 dataLabel={t(msg => msg.calendar.range.thisWeek)}
             />
             <ElDescriptions border column={1} v-show={type.value === 'VISIT'}>
-                <ElDescriptionsItem label={t(msg => msg.limit.item.name)} labelAlign="right">
-                    {rule.value?.name || '-'}
-                </ElDescriptionsItem>
+                {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)} labelAlign="right">
                     {formatPeriodCommon((rule.value?.visitTime ?? 0) * MILL_PER_SECOND) || '-'}
                 </ElDescriptionsItem>
@@ -114,9 +121,7 @@ const _default = defineComponent(() => {
                 </ElDescriptionsItem>
             </ElDescriptions>
             <ElDescriptions border column={1} v-show={type.value === 'PERIOD'}>
-                <ElDescriptionsItem label={t(msg => msg.limit.item.name)} labelAlign="right">
-                    {rule.value?.name || '-'}
-                </ElDescriptionsItem>
+                {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.period)} labelAlign="right">
                     {
                         rule.value?.periods?.length

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

@@ -6,8 +6,19 @@ import { type LimitReason } from "../common"
 
 const REASON_KEY = "display_reason"
 const RULE_KEY = "display_rule"
+const GLOBAL_KEY = "delay_global"
 const DELAY_HANDLER_KEY = 'delay_handler'
 
+type GlobalParam = {
+    url: string
+}
+
+export const provideGlobalParam = (app: App<Element>, gp: GlobalParam) => {
+    app.provide(GLOBAL_KEY, gp)
+}
+
+export const useGlobalParam = () => inject(GLOBAL_KEY) as GlobalParam
+
 export const provideReason = (app: App<Element>): Ref<LimitReason | undefined> => {
     const reason = ref<LimitReason>()
     app.provide(REASON_KEY, reason)

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

@@ -5,7 +5,7 @@ import { createApp, Ref, type App } from 'vue'
 import { exitFullscreen, isSameReason, type LimitReason, type MaskModal } from '../common'
 import { TAG_NAME, type RootElement } from '../element'
 import Main from './Main'
-import { provideDelayHandler, provideReason } from './context'
+import { provideDelayHandler, provideGlobalParam, provideReason } from './context'
 
 function pauseAllVideo(): void {
     const elements = document?.getElementsByTagName('video')
@@ -156,6 +156,7 @@ class ModalInstance implements MaskModal {
     private initApp() {
         this.app = createApp(Main)
         this.reason = provideReason(this.app)
+        provideGlobalParam(this.app, { url: this.url })
         provideDelayHandler(this.app, () => this.delayHandlers?.forEach(h => h?.()))
         this.body && this.app.mount(this.body)
     }

src/util/limit.ts

@@ -14,10 +14,16 @@ export const cleanCond = (origin: string | undefined): string | undefined => {
     return res || undefined
 }
 
+const matchUrl = (cond: string, url: string): boolean => {
+    return new RegExp(`^.*//${cond.split('*').join('.*')}`).test(url)
+}
+
 export function matches(cond: timer.limit.Item['cond'], url: string): boolean {
-    return cond?.some?.(
-        c => new RegExp(`^.*//${(c || '').split('*').join('.*')}`).test(url)
-    )
+    return cond.some(c => matchUrl(c, url))
+}
+
+export function matchCond(cond: timer.limit.Item['cond'], url: string): string[] {
+    return cond.filter(c => matchUrl(c, url))
 }
 
 export const meetLimit = (limit: number | undefined, value: number | undefined): boolean => {

test/util/limit.test.ts

@@ -1,4 +1,7 @@
-import { calcTimeState, cleanCond, dateMinute2Idx, hasLimited, hasWeeklyLimited, isEffective, isEnabledAndEffective, matches, meetLimit, meetTimeLimit, period2Str } from "@util/limit"
+import {
+    calcTimeState, cleanCond, dateMinute2Idx, hasLimited, hasWeeklyLimited, isEffective, isEnabledAndEffective,
+    matchCond, matches, meetLimit, meetTimeLimit, period2Str
+} from "@util/limit"
 
 describe('util/limit', () => {
     test('cleanCond', () => {
@@ -18,6 +21,13 @@ describe('util/limit', () => {
         expect(matches(cond, 'http://github.com')).toBe(false)
     })
 
+    test('matchCond', () => {
+        const cond = ['www.baidu.com', '*.google.com', 'github.com/sheepzh', 'github.com']
+        expect(matchCond(cond, 'http://www.baidu.com')).toEqual(['www.baidu.com'])
+        expect(matchCond(cond, 'https://github.com/sheepzh/time-tracker-for-browser')).toEqual(['github.com/sheepzh', 'github.com'])
+        expect(matchCond(cond, 'https://www.github.com')).toEqual([])
+    })
+
     test('meetLimit', () => {
         expect(meetLimit(undefined, undefined)).toBe(false)
         expect(meetLimit(1, undefined)).toBe(false)