Ver código fonte

新增跳转链接验证功能,用户可以通过点击“Validate”按钮验证输入的URL格式,并在界面中提供相应的提示信息。优化了输入框和按钮的布局,提升用户体验。

wuyi 4 semanas atrás
pai
commit
8fa217b307
1 arquivos alterados com 38 adições e 3 exclusões
  1. 38 3
      src/views/ScanView.vue

+ 38 - 3
src/views/ScanView.vue

@@ -339,6 +339,31 @@ const isValidUrl = (url) => {
   }
 }
 
+const testJumpUrl = () => {
+  const url = formData.value.jumpUrl?.trim()
+  if (!url) {
+    toast.add({ severity: 'warn', summary: 'Notice', detail: 'Please enter a URL first.', life: 2400 })
+    return
+  }
+
+  // 验证 URL 格式
+  if (isValidUrl(url)) {
+    toast.add({ 
+      severity: 'success', 
+      summary: 'URL Format Valid', 
+      detail: 'The URL format is correct and ready to save.', 
+      life: 3000 
+    })
+  } else {
+    toast.add({ 
+      severity: 'error', 
+      summary: 'Invalid URL Format', 
+      detail: 'Please check the URL format (must start with http:// or https://).', 
+      life: 3200 
+    })
+  }
+}
+
 const buildProfilePayload = () => {
   const payload = {
     qrCode: qrCode.value
@@ -1126,11 +1151,21 @@ onMounted(() => {
                 <label class="block text-sm font-medium text-slate-700">
                   Jump URL
                 </label>
-                <input v-model="formData.jumpUrl" type="url" placeholder="https://example.com"
-                  maxlength="2000"
-                  class="w-full rounded-2xl border border-slate-300 bg-white px-5 py-3.5 text-base text-slate-900 placeholder:text-slate-400 transition-all duration-200 focus:border-cyan-400 focus:outline-none focus:ring-2 focus:ring-cyan-400/30" />
+                <div class="flex gap-2">
+                  <input v-model="formData.jumpUrl" type="url" placeholder="https://example.com"
+                    maxlength="2000"
+                    class="flex-1 rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 transition-all duration-200 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20" />
+                  <button v-if="isFirstFill" type="button"
+                    class="flex-shrink-0 rounded-lg border border-cyan-500 bg-cyan-500 px-3 py-2 text-xs font-medium text-white shadow-sm transition-all duration-200 hover:bg-cyan-600 hover:border-cyan-600 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-cyan-500 disabled:hover:shadow-sm whitespace-nowrap"
+                    :disabled="!formData.jumpUrl?.trim()"
+                    @click="testJumpUrl">
+                    <i class="pi pi-check-circle mr-1 text-xs" />
+                    Validate
+                  </button>
+                </div>
                 <p class="text-xs text-slate-500">
                   Optional, max 2000 characters, must be a valid URL (must start with http:// or https://)
+                  <span v-if="isFirstFill" class="text-cyan-600"> • Click "Validate" to verify the URL format</span>
                 </p>
               </div>