feat: support site blocking for mobile (#579)

Author: sheepzh

package.json

@@ -34,12 +34,12 @@
         "@rsdoctor/rspack-plugin": "^1.5.2",
         "@rspack/cli": "^1.7.6",
         "@rspack/core": "^1.7.6",
-        "@swc/core": "^1.15.13",
+        "@swc/core": "^1.15.17",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.37",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.3.1",
+        "@types/node": "^25.3.2",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
@@ -64,7 +64,7 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "echarts": "^6.0.0",
-        "element-plus": "2.13.2",
+        "element-plus": "2.13.3",
         "punycode": "^2.3.1",
         "typescript-guard": "^0.2.1",
         "vue": "^3.5.29",

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

@@ -1,5 +1,6 @@
 import { getUrl } from "@api/chrome/runtime"
 import { t } from "@cs/locale"
+import { useXsState } from '@hooks/useMediaSize'
 import { useRequest } from "@hooks/useRequest"
 import Box from '@pages/components/Box'
 import Flex from '@pages/components/Flex'
@@ -21,13 +22,19 @@ const _default = defineComponent(() => {
         return option?.limitPrompt || defaultPrompt
     }, { defaultValue: defaultPrompt })
 
+    const isXs = useXsState()
+
     return () => (
         <Flex marginBottom={80} column align='center'>
             <Flex as='h2' align='center' lineHeight='2em'>
                 <img src={ICON_URL} style={IMG_STYLE} />
                 <span>{t(msg => msg.meta.name)?.toUpperCase()}</span>
             </Flex>
-            <Box fontSize='2.7em' maxWidth='50vw' marginBlock='0.67em'>
+            <Box
+                fontSize={`${isXs.value ? 1 : 2.7}em`}
+                maxWidth={`${isXs.value ? 80 : 50}vw`}
+                marginBlock={`${isXs.value ? .3 : .67}em`}
+            >
                 {prompt.value}
             </Box>
         </Flex>

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

@@ -1,4 +1,5 @@
 import { t } from "@cs/locale"
+import { useXsState } from '@hooks/index'
 import { useRequest } from "@hooks/useRequest"
 import Flex from "@pages/components/Flex"
 import { matchCond, meetLimit, meetTimeLimit, period2Str } from "@util/limit"
@@ -7,8 +8,13 @@ import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
 import { computed, defineComponent, type StyleValue } from "vue"
 import { useGlobalParam, useReason, useRule } from "../context"
 
-const DESCRIPTIONS_STYLE: StyleValue = {
-    width: '400px',
+const useDescriptions = () => {
+    const isXs = useXsState()
+    const style = computed(() => ({
+        width: isXs.value ? '90vw' : '400px',
+    } satisfies StyleValue))
+    const size = computed(() => isXs.value ? 'small' : undefined)
+    return { style, size }
 }
 
 const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <>
@@ -35,12 +41,13 @@ const TimeDescriptions = defineComponent({
         const rule = useRule()
         const reason = useReason()
         const { url } = useGlobalParam()
+        const { style, size } = useDescriptions()
 
         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} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions border column={1} size={size.value} style={style.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={props.ruleLabel} labelAlign="right">
                     <Flex gap={5} width={200}>
@@ -90,6 +97,8 @@ const _default = defineComponent(() => {
 
     setInterval(refreshBrowsingTime, 1000)
 
+    const { style, size } = useDescriptions()
+
     return () => (
         <Flex justify='center' marginBottom={30}>
             <TimeDescriptions
@@ -110,7 +119,7 @@ const _default = defineComponent(() => {
                 ruleLabel={t(msg => msg.limit.item.weekly)}
                 dataLabel={t(msg => msg.calendar.range.thisWeek)}
             />
-            <ElDescriptions v-show={type.value === 'VISIT'} border column={1} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions v-show={type.value === 'VISIT'} border column={1} style={style.value} size={size.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)} labelAlign="right">
                     {formatPeriodCommon((rule.value?.visitTime ?? 0) * MILL_PER_SECOND) || '-'}
@@ -124,7 +133,7 @@ const _default = defineComponent(() => {
                     {reason.value?.delayCount ?? 0}
                 </ElDescriptionsItem>
             </ElDescriptions>
-            <ElDescriptions v-show={type.value === 'PERIOD'} border column={1} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions v-show={type.value === 'PERIOD'} border column={1} style={style.value} size={size.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.period)} labelAlign="right">
                     {rule.value?.periods?.length

src/pages/app/Layout/menu/item.ts

@@ -76,7 +76,8 @@ export const menuGroups = (): MenuGroup[] => [{
     }, {
         title: msg => msg.menu.limit,
         route: '/behavior/limit',
-        icon: Timer
+        icon: Timer,
+        mobile: true,
     }]
 }, {
     title: msg => msg.menu.additional,

src/pages/app/components/Dashboard/index.tsx

@@ -12,7 +12,7 @@ import Flex from "@pages/components/Flex"
 import { recommendRate, saveFlag } from "@service/meta-service"
 import { REVIEW_PAGE } from "@util/constant/url"
 import { ElRow, ElScrollbar } from "element-plus"
-import { computed, defineComponent, FunctionalComponent } from "vue"
+import { computed, defineComponent, type FunctionalComponent } from "vue"
 import { useRouter } from "vue-router"
 import ContentContainer from "../common/ContentContainer"
 import Calendar from "./components/Calendar"