feat: optimize the error message when setting limit rules (#590)

Author: sheepzh

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

@@ -31,7 +31,7 @@
             "option": "全局设置"
         },
         "message": {
-            "noUrl": "未配置限制网址",
+            "noUrl": "未添加任何限制网址",
             "noRule": "未填写任何规则",
             "deleteConfirm": "是否要删除规则 [{name}]？",
             "lockConfirm": "锁定后，即使未触发此规则，所有操作也需要验证",
@@ -138,7 +138,7 @@
             "test": "Test URL"
         },
         "message": {
-            "noUrl": "No restriction URLs configured",
+            "noUrl": "No URL added",
             "noRule": "No rules filled in",
             "deleteConfirm": "Do you want to delete the rule [{name}]?",
             "lockConfirm": "If locked, all operations will require verification even if the rule is not triggered.",

src/pages/app/components/Limit/LimitModify/Sop/Step2.tsx

@@ -11,22 +11,35 @@ import { useState } from "@hooks"
 import Flex from "@pages/components/Flex"
 import { EXCLUDING_PREFIX } from '@util/constant/remain-host'
 import { cleanCond } from "@util/limit"
-import { ElButton, ElDivider, ElIcon, ElInput, ElLink, ElMessage, ElScrollbar, ElText, type ScrollbarInstance } from "element-plus"
-import { type StyleValue, defineComponent, ref } from "vue"
-import { useSopData } from "./context"
+import {
+    ElButton, ElDivider, ElIcon, ElInput, ElLink, ElMessage, ElScrollbar, ElText,
+    type InputInstance, type ScrollbarInstance,
+} from "element-plus"
+import { type StyleValue, defineComponent, ref, watch } from "vue"
+import { useSopData, useUrlMiss } from "./context"
 
 const _default = defineComponent(() => {
     const data = useSopData()
+    const urlMiss = useUrlMiss()
     const scrollbar = ref<ScrollbarInstance>()
 
+    const inputEl = ref<InputInstance>()
+    watch(urlMiss, v => v && inputEl.value?.focus())
+    const warnAndFocus = (msg: string) => {
+        ElMessage.warning(msg)
+        inputEl.value?.focus()
+    }
+
     const handleAdd = () => {
         let url: string | undefined = inputting.value?.trim?.()?.toLowerCase?.()
-        if (!url) return ElMessage.warning('URL is blank')
+        if (!url) return warnAndFocus('URL is blank')
         url = cleanCond(url)
-        if (!url) return ElMessage.warning('URL is invalid')
+        if (!url) return warnAndFocus('URL is invalid')
         const urls = data.cond
-        if (urls.includes(url)) return ElMessage.warning('Duplicated URL')
+        if (urls.includes(url)) return warnAndFocus('Duplicated URL')
         urls.unshift(url)
+
+        urlMiss.value = false
         scrollbar.value?.scrollTo(0)
 
         clearInputting()
@@ -40,19 +53,18 @@ const _default = defineComponent(() => {
         <Flex column width="100%">
             <Flex width="100%" column gap={5}>
                 <ElInput
+                    ref={inputEl}
                     modelValue={inputting.value}
                     onInput={setInputting}
                     clearable
                     onClear={clearInputting}
                     onKeydown={ev => (ev as KeyboardEvent)?.code === "Enter" && handleAdd()}
+                    // change the color of append button
+                    style={{ '--el-color-info': `var(--el-color-${urlMiss.value ? 'danger' : 'primary'}` }}
+                    placeholder="www.demo.com, *.demo.com, demo.com/blog/*, demo.com/**, +www.demo.com/blog/list"
                     v-slots={{
-                        append: () => (
-                            <ElButton onClick={handleAdd} style={{ display: 'flex' } satisfies StyleValue}>
-                                {t(msg => msg.button.add)}
-                            </ElButton>
-                        )
+                        append: () => <ElButton onClick={handleAdd}>{t(msg => msg.button.add)}</ElButton>
                     }}
-                    placeholder="www.demo.com, *.demo.com, demo.com/blog/*, demo.com/**, +www.demo.com/blog/list"
                 />
                 <ElText style={{ textAlign: 'start', width: '100%', paddingInlineStart: '10px' } satisfies StyleValue}>
                     {t(msg => msg.limit.wildcardTip)}

src/pages/app/components/Limit/LimitModify/Sop/context.ts

@@ -2,14 +2,15 @@ import { t } from "@app/locale"
 import { useProvide, useProvider } from "@hooks"
 import { range } from "@util/array"
 import { ElMessage } from "element-plus"
-import { type Reactive, reactive, ref, toRaw } from "vue"
+import { type Reactive, reactive, type Ref, ref, toRaw } from "vue"
 
 type Step = 0 | 1 | 2
 
 type SopData = Required<Omit<timer.limit.Rule, 'id'>>
 
 type Context = {
     data: Reactive<SopData>
+    urlMiss: Ref<boolean>
 }
 
 const createInitial = (): SopData => ({
@@ -36,6 +37,7 @@ const NAMESPACE = 'limit_sop_model'
 export const initSop = ({ onSave }: Options) => {
     const step = ref<Step>(0)
     const data = reactive<SopData>(createInitial())
+    const urlMiss = ref(false)
 
     const validator: Record<Step, () => Promise<boolean>> = {
         0: async () => {
@@ -53,8 +55,10 @@ export const initSop = ({ onSave }: Options) => {
         1: async () => {
             if (!data.cond?.length) {
                 ElMessage.error(t(msg => msg.limit.message.noUrl))
+                urlMiss.value = true
                 return false
             }
+            urlMiss.value = false
             return true
         },
         2: async () => {
@@ -85,11 +89,13 @@ export const initSop = ({ onSave }: Options) => {
         }
     }
 
-    useProvide<Context>(NAMESPACE, { data })
+    useProvide<Context>(NAMESPACE, { data, urlMiss })
 
     return {
         step, reset, handleNext
     }
 }
 
-export const useSopData = () => useProvider<Context, 'data'>(NAMESPACE, 'data').data
+export const useSopData = () => useProvider<Context, 'data'>(NAMESPACE, 'data').data
+
+export const useUrlMiss = () => useProvider<Context, 'urlMiss'>(NAMESPACE, 'urlMiss').urlMiss

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

@@ -21,45 +21,41 @@ export type SopInstance = {
     reset: (rule?: timer.limit.Rule) => void
 }
 
-const _default = defineComponent({
-    props: {
-        condDisabled: Boolean,
-    },
-    emits: {
-        cancel: () => true,
-        save: (_rule: MakeOptional<timer.limit.Rule, 'id'>) => true,
-    },
-    setup(_, ctx) {
-        const { reset, step, handleNext } = initSop({ onSave: data => ctx.emit('save', data) })
-        const last = computed(() => step.value === 2)
-        const first = computed(() => step.value === 0)
-        ctx.expose({ reset } satisfies SopInstance)
+type Props = {
+    onCancel?: NoArgCallback
+    onSave?: ArgCallback<MakeOptional<timer.limit.Rule, 'id'>>
+}
+
+const _default = defineComponent<Props>(({ onSave, onCancel }, ctx) => {
+    const { reset, step, handleNext } = initSop({ onSave })
+    const last = computed(() => step.value === 2)
+    const first = computed(() => step.value === 0)
+    ctx.expose({ reset } satisfies SopInstance)
 
-        return () => (
-            <DialogSop
-                last={last.value}
-                first={first.value}
-                onBack={() => step.value--}
-                onCancel={() => ctx.emit('cancel')}
-                onNext={handleNext}
-                onFinish={handleNext}
-                v-slots={{
-                    steps: () => (
-                        <ElSteps space={200} finishStatus="success" active={step.value} alignCenter>
-                            <ElStep title={t(msg => msg.limit.step.base)} />
-                            <ElStep title={t(msg => msg.limit.step.url)} />
-                            <ElStep title={t(msg => msg.limit.step.rule)} />
-                        </ElSteps>
-                    ),
-                    content: () => <>
-                        <Step1 v-show={step.value === 0} />
-                        <Step2 v-show={step.value === 1} />
-                        <Step3 v-show={step.value === 2} />
-                    </>
-                }}
-            />
-        )
-    }
-})
+    return () => (
+        <DialogSop
+            last={last.value}
+            first={first.value}
+            onBack={() => step.value--}
+            onCancel={onCancel}
+            onNext={handleNext}
+            onFinish={handleNext}
+            v-slots={{
+                steps: () => (
+                    <ElSteps space={200} finishStatus="success" active={step.value} alignCenter>
+                        <ElStep title={t(msg => msg.limit.step.base)} />
+                        <ElStep title={t(msg => msg.limit.step.url)} />
+                        <ElStep title={t(msg => msg.limit.step.rule)} />
+                    </ElSteps>
+                ),
+                content: () => <>
+                    <Step1 v-show={step.value === 0} />
+                    <Step2 v-show={step.value === 1} />
+                    <Step3 v-show={step.value === 2} />
+                </>
+            }}
+        />
+    )
+}, { props: ['onCancel', 'onSave'] })
 
 export default _default