Merge branch 'main' of https://github.com/sheepzh/timer

Author: sheepzh

CONTRIBUTING.md

@@ -6,7 +6,7 @@ The technology stack used is:
 
 -   [rspack](https://rspack.dev) + [TypeScript](https://github.com/microsoft/TypeScript)
 -   [Vue3 (Composition API + JSX)](<https://vuejs.org/api/#:~:text=defineCustomElement()-,Composition%20API,-setup()>)
--   [sass](https://github.com/sass/sass)
+-   [emotion](https://github.com/emotion-js/emotion)
 -   [Element Plus](https://element-plus.gitee.io/)
 -   [Echarts](https://github.com/apache/echarts)
 
@@ -44,7 +44,7 @@ Create a new branch for your changes
 # Chrome/Edge development
 npm run dev
 
-# Firefox development  
+# Firefox development
 npm run dev:firefox
 
 # Safari development
@@ -53,7 +53,7 @@ npm run dev:safari
 
 This will create output directories:
 - `dist_dev` - Chrome/Edge extension
-- `dist_dev_firefox` - Firefox extension  
+- `dist_dev_firefox` - Firefox extension
 - `dist_dev_safari` - Safari extension
 
 #### Mobile Development (Android)

package.json

@@ -29,15 +29,17 @@
     "license": "MIT",
     "devDependencies": {
         "@crowdin/crowdin-api-client": "^1.48.3",
-        "@rsdoctor/rspack-plugin": "^1.3.4",
-        "@rspack/cli": "^1.5.8",
-        "@rspack/core": "^1.5.8",
-        "@swc/core": "^1.13.21",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/css": "^11.13.5",
+        "@rsdoctor/rspack-plugin": "^1.3.7",
+        "@rspack/cli": "^1.6.0",
+        "@rspack/core": "^1.6.0",
+        "@swc/core": "^1.14.0",
         "@swc/jest": "^0.2.39",
-        "@types/chrome": "0.1.24",
+        "@types/chrome": "0.1.27",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^24.9.1",
+        "@types/node": "^24.9.2",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
@@ -52,9 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.26.1",
-        "sass": "^1.93.2",
-        "sass-loader": "^16.0.6",
+        "puppeteer": "^24.27.0",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
@@ -64,7 +64,7 @@
         "@element-plus/icons-vue": "^2.3.2",
         "countup.js": "^2.9.0",
         "echarts": "^6.0.0",
-        "element-plus": "2.11.5",
+        "element-plus": "2.11.7",
         "js-base64": "^3.7.8",
         "punycode": "^2.3.1",
         "vue": "^3.5.22",

rspack/rspack.common.ts

@@ -84,23 +84,21 @@ const staticOptions: Configuration = {
                         },
                         plugins: [
                             "@vue/babel-plugin-jsx",
+                            "@emotion/babel-plugin",
                         ],
                     },
                 }, 'ts-loader'],
             }, {
                 test: /\.css$/,
                 use: [CssExtractRspackPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF],
-            }, {
-                test: /\.s[ac]ss$/,
-                use: [CssExtractRspackPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF, 'sass-loader']
             }, {
                 test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
                 type: 'asset/resource'
             }
         ]
     },
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.css', '.scss', '.sass'],
+        extensions: ['.ts', '.tsx', '.js', '.css'],
         tsConfig: join(__dirname, '..', 'tsconfig.json'),
     },
     optimization: {

src/content-script/limit/modal/Main.tsx

@@ -1,9 +1,19 @@
+import "@pages/element-ui/dark-theme.css"
+import "element-plus/theme-chalk/el-button-group.css"
+import "element-plus/theme-chalk/el-button.css"
+import "element-plus/theme-chalk/el-descriptions-item.css"
+import "element-plus/theme-chalk/el-descriptions.css"
+import "element-plus/theme-chalk/el-input.css"
+import "element-plus/theme-chalk/el-message-box.css"
+import "element-plus/theme-chalk/el-message.css"
+import "element-plus/theme-chalk/el-tag.css"
 import { defineComponent } from "vue"
 import Alert from "./components/Alert"
 import Footer from "./components/Footer"
 import Reason from "./components/Reason"
 import { provideRule } from "./context"
-import "./style/index.sass"
+import "./style/element-base.css"
+import "./style/modal.css"
 
 const _default = defineComponent(() => {
     provideRule()

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

@@ -1,25 +1,36 @@
 import { getUrl } from "@api/chrome/runtime"
 import { t } from "@cs/locale"
 import { useRequest } from "@hooks/useRequest"
+import Box from '@pages/components/Box'
+import Flex from '@pages/components/Flex'
 import optionHolder from "@service/components/option-holder"
-import { defineComponent } from "vue"
+import { defineComponent, type StyleValue } from "vue"
 
 const ICON_URL = getUrl('static/images/icon.png')
 
+const IMG_STYLE: StyleValue = {
+    width: '1.4em',
+    height: '1.4em',
+    marginInlineEnd: '.4em',
+}
+
 const _default = defineComponent(() => {
     const defaultPrompt = t(msg => msg.modal.defaultPrompt)
     const { data: prompt } = useRequest(async () => {
         const option = await optionHolder.get()
         return option?.limitPrompt || defaultPrompt
     }, { defaultValue: defaultPrompt })
+
     return () => (
-        <div class='alert-container'>
-            <h2 class='name-line'>
-                <img src={ICON_URL} />
-                <span> {t(msg => msg.meta.name)?.toUpperCase()}</span>
-            </h2>
-            <h1>{prompt.value}</h1>
-        </div>
+        <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'>
+                {prompt.value}
+            </Box>
+        </Flex>
     )
 })
 

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

@@ -4,6 +4,7 @@ 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 Flex from '@pages/components/Flex'
 import optionHolder from "@service/components/option-holder"
 import { meetTimeLimit } from '@util/limit'
 import { ElButton } from "element-plus"
@@ -49,7 +50,7 @@ const _default = defineComponent(() => {
     const delayHandler = useDelayHandler()
 
     return () => (
-        <div class='footer-container'>
+        <Flex gap={10} marginBottom={60} justify='center'>
             <ElButton
                 round
                 icon={Trend}
@@ -74,7 +75,7 @@ const _default = defineComponent(() => {
             >
                 {t(msg => msg.modal.ruleDetail)}
             </ElButton>
-        </div>
+        </Flex>
     )
 })
 

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

@@ -4,9 +4,13 @@ import Flex from "@pages/components/Flex"
 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 { computed, defineComponent, type StyleValue } from "vue"
 import { useGlobalParam, useReason, useRule } from "../context"
 
+const DESCRIPTIONS_STYLE: StyleValue = {
+    width: '400px',
+}
+
 const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <>
     <ElDescriptionsItem label={t(msg => msg.limit.item.name)} labelAlign="right">
         {rule?.name ?? '-'}
@@ -36,7 +40,7 @@ const TimeDescriptions = defineComponent({
         const visitLimited = computed(() => meetLimit(props.count ?? 0, props.visit ?? 0))
 
         return () => (
-            <ElDescriptions border column={1} labelWidth={130}>
+            <ElDescriptions border column={1} labelWidth={130} style={DESCRIPTIONS_STYLE}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={props.ruleLabel} labelAlign="right">
                     <Flex gap={5} width={200}>
@@ -67,7 +71,7 @@ const TimeDescriptions = defineComponent({
                 >
                     {reason.value?.delayCount ?? 0}
                 </ElDescriptionsItem>
-            </ElDescriptions>
+            </ElDescriptions >
         )
     },
 })
@@ -87,7 +91,7 @@ const _default = defineComponent(() => {
     setInterval(refreshBrowsingTime, 1000)
 
     return () => (
-        <div class="reason-container">
+        <Flex justify='center' marginBottom={30}>
             <TimeDescriptions
                 v-show={type.value === 'DAILY'}
                 time={rule.value?.time}
@@ -106,7 +110,7 @@ const _default = defineComponent(() => {
                 ruleLabel={t(msg => msg.limit.item.weekly)}
                 dataLabel={t(msg => msg.calendar.range.thisWeek)}
             />
-            <ElDescriptions border column={1} v-show={type.value === 'VISIT'}>
+            <ElDescriptions v-show={type.value === 'VISIT'} border column={1} style={DESCRIPTIONS_STYLE}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)} labelAlign="right">
                     {formatPeriodCommon((rule.value?.visitTime ?? 0) * MILL_PER_SECOND) || '-'}
@@ -120,19 +124,18 @@ const _default = defineComponent(() => {
                     {reason.value?.delayCount ?? 0}
                 </ElDescriptionsItem>
             </ElDescriptions>
-            <ElDescriptions border column={1} v-show={type.value === 'PERIOD'}>
+            <ElDescriptions v-show={type.value === 'PERIOD'} border column={1} style={DESCRIPTIONS_STYLE}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.period)} labelAlign="right">
-                    {
-                        rule.value?.periods?.length
-                            ? <div>
-                                {rule.value?.periods.map(p => <span style={{ display: "block" }}>{period2Str(p)}</span>)}
-                            </div>
-                            : '-'
+                    {rule.value?.periods?.length
+                        ? <div>
+                            {rule.value.periods.map(p => <span style={{ display: "block" }}>{period2Str(p)}</span>)}
+                        </div>
+                        : '-'
                     }
                 </ElDescriptionsItem>
             </ElDescriptions>
-        </div>
+        </Flex>
     )
 })
 

src/content-script/limit/modal/style/index.sass

@@ -0,0 +1,26 @@
+#app {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    color: var(--el-text-color-primary);
+}
+
+body {
+    height: 100vh;
+    width: 100vw;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999999;
+    min-height: 600px;
+    background-color: var(--el-fill-color-blank);
+}
+
+html[data-theme=dark] body {
+    background-color: var(--el-fill-color-dark);
+}