From fd6aef2af7a1ae362296847c7a1ae4b49772c4cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Fri, 16 Jan 2026 04:35:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81URL=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/app/TemplateDeployModal.vue | 42 ++++++++++++++++++++++-
 web/src/views/app/types.ts                |  2 +-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/web/src/views/app/TemplateDeployModal.vue b/web/src/views/app/TemplateDeployModal.vue
index 6f1976e2..264669f7 100644
--- a/web/src/views/app/TemplateDeployModal.vue
+++ b/web/src/views/app/TemplateDeployModal.vue
@@ -2,6 +2,7 @@
 import templateApi from '@/api/panel/template'
 import PtyTerminalModal from '@/components/common/PtyTerminalModal.vue'
 import { useGettext } from 'vue3-gettext'
+import type { FormInst, FormRules, FormItemRule } from 'naive-ui'
 
 import type { Template, TemplateEnvironment } from './types'
 
@@ -19,6 +20,7 @@ const show = defineModel<boolean>('show', { type: Boolean, required: true })
 
 const doSubmit = ref(false)
 const currentTab = ref('basic')
+const formRef = ref<FormInst | null>(null)
 
 // 启动终端
 const upModal = ref(false)
@@ -50,6 +52,29 @@ const getSelectOptions = (env: TemplateEnvironment) => {
   }))
 }
 
+// 动态生成表单校验规则
+const formRules = computed<FormRules>(() => {
+  const rules: FormRules = {}
+  props.template?.environments?.forEach((env) => {
+    if (env.type === 'url') {
+      rules[`envs.${env.name}`] = {
+        trigger: ['input', 'blur'],
+        validator(_rule: FormItemRule, value: string) {
+          if (!value && env.default) return true
+          if (!value) return new Error($gettext('Please enter URL'))
+          try {
+            new URL(value)
+            return true
+          } catch {
+            return new Error($gettext('Please enter a valid URL'))
+          }
+        }
+      }
+    }
+  })
+  return rules
+})
+
 // 提交部署
 const handleSubmit = async () => {
   if (!props.template) return
@@ -59,6 +84,14 @@ const handleSubmit = async () => {
     return
   }
 
+  // 表单校验
+  try {
+    await formRef.value?.validate()
+  } catch {
+    currentTab.value = 'environment'
+    return
+  }
+
   doSubmit.value = true
 
   // 构建环境变量数组
@@ -176,10 +209,11 @@ watch(
         name="environment"
         :tab="$gettext('Environment Variables')"
       >
-        <n-form :model="deployModel" label-placement="left" label-width="160">
+        <n-form ref="formRef" :model="deployModel" :rules="formRules" label-placement="left" label-width="160">
           <n-form-item
             v-for="env in template.environments"
             :key="env.name"
+            :path="`envs.${env.name}`"
             :label="env.description"
             :required="env.default == ''"
           >
@@ -207,6 +241,12 @@ watch(
               show-password-on="click"
               :placeholder="env.default || ''"
             />
+            <!-- URL 类型 -->
+            <n-input
+              v-else-if="env.type === 'url'"
+              v-model:value="deployModel.envs[env.name]"
+              :placeholder="env.default || ''"
+            />
             <!-- Text 类型 (默认) -->
             <n-input
               v-else
diff --git a/web/src/views/app/types.ts b/web/src/views/app/types.ts
index 531d95ec..890aa6ac 100644
--- a/web/src/views/app/types.ts
+++ b/web/src/views/app/types.ts
@@ -21,7 +21,7 @@ export interface Channel {
 export interface TemplateEnvironment {
   name: string
   description: string
-  type: 'text' | 'password' | 'number' | 'port' | 'select'
+  type: 'text' | 'url' | 'password' | 'number' | 'port' | 'select'
   options?: Record<string, string>
   default: string
 }