From b41b0285619676e46c7b854694bafa01772e5167 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Sat, 6 Dec 2025 19:55:17 +0800
Subject: [PATCH] chore: opt template code

---
 .../pages/messageTemplate/MessageTemplate.vue |  4 +-
 .../pages/messageTemplate/TemplateEditor.vue  | 43 ++++++++-----------
 .../TemplateInstanceConfig.vue                | 30 +++++++++++++
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/web/src/components/pages/messageTemplate/MessageTemplate.vue b/web/src/components/pages/messageTemplate/MessageTemplate.vue
index d5718a5..d15bf7d 100644
--- a/web/src/components/pages/messageTemplate/MessageTemplate.vue
+++ b/web/src/components/pages/messageTemplate/MessageTemplate.vue
@@ -314,7 +314,7 @@ onMounted(async () => {
           <div v-if="currentTemplate" class="space-y-2">
             <Label>填写占位符参数</Label>
             <div
-              v-for="(_, key) in previewData.params"
+              v-for="(_, key, index) in previewData.params"
               :key="key"
               class="flex gap-2 items-center"
             >
@@ -323,6 +323,8 @@ onMounted(async () => {
                 v-model="previewData.params[key]"
                 :placeholder="`请输入 ${key}`"
                 @input="refreshPreview"
+                :autofocus="false"
+                :tabindex="index + 1"
               />
             </div>
           </div>
diff --git a/web/src/components/pages/messageTemplate/TemplateEditor.vue b/web/src/components/pages/messageTemplate/TemplateEditor.vue
index 9727ca0..c12ef2a 100644
--- a/web/src/components/pages/messageTemplate/TemplateEditor.vue
+++ b/web/src/components/pages/messageTemplate/TemplateEditor.vue
@@ -263,37 +263,28 @@ watch(() => props.open, (newVal) => {
 
         <!-- @提醒配置 -->
         <div class="space-y-2">
-          <Label>@提醒配置</Label>
-          <div class="space-y-2">
-            <div class="flex items-center gap-2">
+          <Label>@提醒配置 <span class="text-xs text-muted-foreground font-normal">（适用于钉钉、企业微信）</span></Label>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+            <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
               <input 
                 type="checkbox" 
                 id="is_at_all" 
                 v-model="formData.is_at_all"
                 class="w-4 h-4 rounded border-gray-300"
               />
-              <Label for="is_at_all" class="cursor-pointer">@所有人</Label>
-            </div>
-            <div class="space-y-1">
-              <Label for="at_mobiles">@手机号（多个用逗号分隔）</Label>
-              <Input
-                id="at_mobiles"
-                v-model="formData.at_mobiles"
-                placeholder="例如：13800138000,13900139000"
-              />
-            </div>
-            <div class="space-y-1">
-              <Label for="at_user_ids">@用户ID（多个用逗号分隔）</Label>
-              <Input
-                id="at_user_ids"
-                v-model="formData.at_user_ids"
-                placeholder="例如：user001,user002"
-              />
+              <Label for="is_at_all" class="cursor-pointer text-sm">@所有人</Label>
             </div>
+            <Input
+              v-model="formData.at_mobiles"
+              placeholder="@手机号（逗号分隔）"
+              class="text-sm"
+            />
+            <Input
+              v-model="formData.at_user_ids"
+              placeholder="@用户ID（逗号分隔）"
+              class="text-sm"
+            />
           </div>
-          <p class="text-xs text-muted-foreground">
-            配置后，使用此模板发送消息时会自动@指定的用户（适用于支持@功能的渠道，如钉钉、企业微信等）
-          </p>
         </div>
 
         <!-- 模板内容 -->
@@ -326,7 +317,7 @@ watch(() => props.open, (newVal) => {
               ref="textTemplateRef"
               v-model="formData.text_template"
               placeholder="请输入纯文本模板内容，可使用 {{key}} 作为占位符"
-              rows="10"
+              rows="15"
             />
           </TabsContent>
           <TabsContent value="html" class="space-y-2">
@@ -352,7 +343,7 @@ watch(() => props.open, (newVal) => {
               ref="htmlTemplateRef"
               v-model="formData.html_template"
               placeholder="请输入HTML模板内容，可使用 {{key}} 作为占位符"
-              rows="10"
+              rows="15"
             />
           </TabsContent>
           <TabsContent value="markdown" class="space-y-2">
@@ -378,7 +369,7 @@ watch(() => props.open, (newVal) => {
               ref="markdownTemplateRef"
               v-model="formData.markdown_template"
               placeholder="请输入Markdown模板内容，可使用 {{key}} 作为占位符"
-              rows="10"
+              rows="15"
             />
           </TabsContent>
         </Tabs>
diff --git a/web/src/components/pages/messageTemplate/TemplateInstanceConfig.vue b/web/src/components/pages/messageTemplate/TemplateInstanceConfig.vue
index 84f6918..a3a6bc7 100644
--- a/web/src/components/pages/messageTemplate/TemplateInstanceConfig.vue
+++ b/web/src/components/pages/messageTemplate/TemplateInstanceConfig.vue
@@ -80,6 +80,36 @@ const handlechannelNameChange = () => {
 
 // 添加单条实例配置
 const handleAddSubmit = async () => {
+  // 验证是否选择了渠道
+  if (!channelName.value) {
+    toast.error('请选择发送渠道')
+    return
+  }
+
+  // 验证内容类型
+  const contentType = formData.value.templ_type
+  if (!contentType) {
+    toast.error('请选择消息格式')
+    return
+  }
+
+  // 验证模板对应格式的内容是否为空
+  const templateFieldMap: Record<string, string> = {
+    'text': 'text_template',
+    'html': 'html_template',
+    'markdown': 'markdown_template'
+  }
+  
+  const fieldName = templateFieldMap[contentType.toLowerCase()]
+  if (fieldName) {
+    const templateContent = props.templateData?.[fieldName] || ''
+    // 检查是否为空（去除所有空白字符后检查）
+    if (!templateContent.trim()) {
+      toast.error(`模板的 ${contentType} 格式内容为空，无法添加此类型的实例`)
+      return
+    }
+  }
+
   // 组建表单数据
   let postData = {
     "id": generateBizUniqueID('I'),