Beautify the limit modal (sheepzh#270)

Author: sheepzh

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.idea
 dist*
 
 Timer_Safari_DEV

.vscode/settings.json

@@ -17,6 +17,7 @@
         "Qihu",
         "sheepzh",
         "vueuse",
+        "webcomponents",
         "webstore",
         "webtime",
         "zrender"

src/api/chrome/runtime.ts

@@ -26,7 +26,7 @@ export function onRuntimeMessage<T = any, R = any>(handler: ChromeMessageHandler
     // Can't use await/async in callback parameter
     chrome.runtime.onMessage.addListener((message: timer.mq.Request<T>, sender: chrome.runtime.MessageSender, sendResponse: timer.mq.Callback<R>) => {
         handler(message, sender).then((response: timer.mq.Response<R>) => sendResponse(response))
-        // 'return ture' will force chrome to wait for the response processed in the above promise.
+        // 'return true' will force chrome to wait for the response processed in the above promise.
         // @see https://github.com/mozilla/webextension-polyfill/issues/130
         return true
     })

src/app/components/Analysis/index.tsx

@@ -51,21 +51,20 @@ const _default = defineComponent(() => {
     const { data: rows, loading } = useRequest(() => query(site.value), { deps: site })
 
     initProvider(site, timeFormat, rows)
-    return () => (
-        <ContentContainer v-slots={{
+    return () => <ContentContainer
+        v-slots={{
             filter: () => <Filter
                 site={site.value}
                 timeFormat={timeFormat.value}
                 onSiteChange={setSite}
                 onTimeFormatChange={setTimeFormat}
-            />
-        }}>
-            <div v-loading={loading.value}>
+            />,
+            default: () => <div v-loading={loading.value}>
                 <Summary />
                 <Trend />
             </div>
-        </ContentContainer>
-    )
+        }}
+    />
 })
 
 export default _default

src/app/components/Limit/LimitModify/index.tsx

@@ -35,7 +35,7 @@ const _default = defineComponent({
             const { cond, enabled, name, time, visitTime, periods } = rule
             const toSave: timer.limit.Rule = {
                 ...modifyingItem || {},
-                cond, enabled, name, time, visitTime, periods, allowDelay: false,
+                cond, enabled, name, time, visitTime, periods
             }
             if (mode.value === 'modify') {
                 await limitService.update(toSave)

src/app/components/Limit/index.tsx

@@ -32,7 +32,7 @@ const _default = defineComponent(() => {
         { defaultValue: [], deps: filterOption },
     )
     // Query data if the window become visible
-    useWindowVisible(refresh)
+    useWindowVisible({ onVisible: refresh })
 
     const handleDelete = async (row: timer.limit.Item) => {
         await limitService.remove(row)

src/app/components/Option/components/LimitOption/index.tsx

@@ -16,11 +16,6 @@ import "./limit-option.sass"
 import { judgeVerificationRequired, processVerification } from "@app/util/limit"
 import limitService from "@service/limit-service"
 
-const ALL_FILTER: timer.limit.FilterType[] = [
-    'translucent',
-    'groundGlass',
-]
-
 const ALL_LEVEL: timer.limit.RestrictionLevel[] = [
     'nothing',
     'verification',
@@ -48,7 +43,7 @@ const verifyTriggered = async (option: timer.option.DailyLimitOption, verified:
 }
 
 function copy(target: timer.option.DailyLimitOption, source: timer.option.DailyLimitOption) {
-    target.limitFilter = source.limitFilter
+    target.limitPrompt = source.limitPrompt
     target.limitLevel = source.limitLevel
     target.limitPassword = source.limitPassword
     target.limitVerifyDifficulty = source.limitVerifyDifficulty
@@ -83,22 +78,10 @@ const _default = defineComponent((_, ctx) => {
     ctx.expose({ reset: () => reset(option) } satisfies OptionInstance)
 
     return () => <>
-        <OptionItem
-            label={msg => msg.option.dailyLimit.filter.label}
-            defaultValue={t(msg => msg.option.dailyLimit.filter[defaultDailyLimit().limitFilter])}
-            hideDivider
-        >
-            <ElSelect
-                modelValue={option.limitFilter}
-                size="small"
-                onChange={val => option.limitFilter = val}
-            >
-                {ALL_FILTER.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.filter[item])} />)}
-            </ElSelect>
-        </OptionItem>
         <OptionItem
             label={msg => msg.option.dailyLimit.level.label}
             defaultValue={t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel])}
+            hideDivider
         >
             <ElSelect
                 modelValue={option.limitLevel}
@@ -145,6 +128,15 @@ const _default = defineComponent((_, ctx) => {
                 {ALL_DIFF.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level.verificationDifficulty[item])} />)}
             </ElSelect>
         </OptionItem>
+        <OptionItem label={msg => msg.option.dailyLimit.prompt}>
+            <ElInput
+                modelValue={option.limitPrompt}
+                size="small"
+                onInput={val => option.limitPrompt = val}
+                placeholder={t(msg => msg.limitModal.defaultPrompt)}
+                style={{ width: "250px" }}
+            />
+        </OptionItem>
     </>
 })
 

src/app/components/Option/style/index.sass

@@ -52,6 +52,8 @@
                 height: 28px
                 .el-select__wrapper
                     width: 120px
+            .el-input
+                margin-left: 10px
             .el-date-editor--time
                 width: 100px
                 .el-input__prefix

src/app/components/Report/index.tsx

@@ -187,7 +187,7 @@ const _default = defineComponent(() => {
     )
 
     // Query data if window become visible
-    useWindowVisible(refresh)
+    useWindowVisible({ onVisible: refresh })
 
     const handleDownload = async (format: FileFormat) => {
         const rows = await statService.select(queryParam.value, true)

src/app/util/limit.tsx

@@ -4,7 +4,7 @@ import { locale } from "@i18n"
 import { VerificationPair } from "@service/limit-service/verification/common"
 import verificationProcessor from "@service/limit-service/verification/processor"
 import { getCssVariable } from "@util/style"
-import { ElMessageBox, ElMessage } from "element-plus"
+import { ElMessageBox, ElMessage, type ElMessageBoxOptions } from "element-plus"
 import { defineComponent, onMounted, ref, VNode } from "vue"
 import { sendMsg2Runtime } from "@api/chrome/runtime"
 import { hasLimited, dateMinute2Idx } from "@util/limit"
@@ -76,19 +76,21 @@ const AnswerCanvas = defineComponent({
     })
 })
 
-/** 
+/**
  * NOT TO return Promise.resolve()
- * 
- * NOT USE async
- * 
+ *
+ * NOT TO use async
+ *
  * @returns null if verification not required,
  *          or promise with resolve invoked only if verification code or password correct
  */
-export function processVerification(option: timer.option.DailyLimitOption): Promise<void> {
+export function processVerification(option: timer.option.DailyLimitOption, context?: Pick<ElMessageBoxOptions, 'appendTo'>): Promise<void> {
     const { limitLevel, limitPassword, limitVerifyDifficulty } = option
+    const { appendTo } = context || {}
     if (limitLevel === "strict") {
         return new Promise(
             (_, reject) => ElMessageBox({
+                appendTo,
                 boxType: 'alert',
                 type: 'warning',
                 title: '',
@@ -134,6 +136,7 @@ export function processVerification(option: timer.option.DailyLimitOption): Prom
 
     return new Promise(resolve => {
         ElMessageBox({
+            appendTo,
             boxType: 'prompt',
             type: 'warning',
             title: '',
@@ -144,7 +147,7 @@ export function processVerification(option: timer.option.DailyLimitOption): Prom
         }).then(data => {
             const { value } = data
             if (value === answerValue) return resolve()
-            ElMessage.error(incorrectMessage)
+            ElMessage.error({ appendTo, message: incorrectMessage })
         }).catch(() => { })
     })
 }