除模版变量编辑外，变量管理页面完成对接

src/App.vue

@@ -4,7 +4,7 @@
     <LoginPage v-if="isLoginPage && !isAuthenticated" @login="handleLogin" />
 
     <!-- 主应用布局 -->
-    <div v-else class="flex flex-1 overflow-y-auto">
+    <div v-else class="flex flex-1 h-screen">
       <!-- 侧边导航 -->
       <Sidebar :current-page="currentPage" @logout="handleLogout" />
 
@@ -25,28 +25,30 @@
       />
 
       <!-- 主内容区域 -->
-      <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
-        <header class="mb-6">
-          <h2 class="text-2xl font-bold text-gray-800">
-            {{ pageTitles[currentPage] }}
-          </h2>
-        </header>
-
-        <!-- 使用router-view显示当前路由组件 -->
-        <router-view
-          :senders="senders"
-          :contacts="contacts"
-          :variables="variables"
-          :variable-templates="variableTemplates"
-          :emails="emails"
-          @save-email="saveEmail"
-          @update-contacts="updateContacts"
-          @update-senders="updateSenders"
-          @update-variables="updateVariables"
-          @update-variable-templates="updateVariableTemplates"
-          @reuse-email="reuseEmail"
-        />
-      </main>
+      <div class="flex-1 flex flex-col">
+        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
+          <header class="mb-6">
+            <h2 class="text-2xl font-bold text-gray-800">
+              {{ pageTitles[currentPage] }}
+            </h2>
+          </header>
+
+          <!-- 使用router-view显示当前路由组件 -->
+          <router-view
+            :senders="senders"
+            :contacts="contacts"
+            :variables="variables"
+            :variable-templates="variableTemplates"
+            :emails="emails"
+            @save-email="saveEmail"
+            @update-contacts="updateContacts"
+            @update-senders="updateSenders"
+            @update-variables="updateVariables"
+            @update-variable-templates="updateVariableTemplates"
+            @reuse-email="reuseEmail"
+          />
+        </main>
+      </div>
     </div>
   </div>
 </template>

src/api/api.ts

@@ -294,3 +294,12 @@ export const getEmailVariableGroupList = (params: {
 }) => {
   return request.post('/emailVariableGroup/page', params)
 }
+
+/**
+ * 获取变量分组详情
+ * @param id 变量分组id
+ * @returns
+ */
+export const getEmailVariableGroupDetail = (id: string) => {
+  return request.get('/emailVariableGroup/detail?variableGroupBizId=' + id)
+}

src/types/index.ts

@@ -34,6 +34,7 @@ export interface VariableTemplate {
   groupName?: string
   description?: string
   variableBizIdList?: string[]
+  variableNameEns?: string[]
 }
 
 // 邮件类型

src/views/VariableManagement.vue

@@ -66,7 +66,7 @@
         </button>
       </div>
     </div>
-
+    <!-- 变量模板列表 -->
     <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
       <div class="p-6 border-b border-gray-200">
         <div class="flex justify-between items-center">
@@ -82,20 +82,21 @@
       <div class="p-6">
         <div
           v-for="template in variableTemplates"
-          :key="template.id"
+          :key="template.variableGroupBizId"
           class="border border-gray-200 rounded-lg p-4 mb-4 hover:border-blue-300 transition-colors"
         >
           <div class="flex justify-between items-start mb-3">
-            <h4 class="font-medium">{{ template.name }}</h4>
+            <h4 class="font-medium">{{ template.groupName }}</h4>
             <div>
-              <button
+              <!-- 先不做编辑 -->
+              <!-- <button
                 @click="editVariableTemplate(template)"
                 class="text-blue-600 hover:text-blue-900 mr-3 text-sm"
               >
                 <i class="fas fa-edit"></i>
-              </button>
+              </button> -->
               <button
-                @click="deleteVariableTemplate(template.id)"
+                @click="deleteVariableTemplate(template.variableGroupBizId)"
                 class="text-red-600 hover:text-red-900 text-sm"
               >
                 <i class="fas fa-trash"></i>
@@ -105,11 +106,11 @@
           <p class="text-sm text-gray-600 mb-3">{{ template.description || '无描述' }}</p>
           <div class="flex flex-wrap gap-2">
             <span
-              v-for="variableId in template.variableBizIdList"
+              v-for="variableId in template.variableNameEns.split(';')"
               :key="variableId"
               class="px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs"
             >
-              {{ variablePrefix }}{{ getVariableKeyById(variableId) }}{{ variableNextfix }}
+              {{ variablePrefix }}{{ variableId }}{{ variableNextfix }}
             </span>
           </div>
           <div class="mt-3 flex justify-end">
@@ -128,7 +129,7 @@
         </div>
       </div>
     </div>
-
+    <!-- 变量列表 -->
     <div class="bg-white rounded-lg shadow-md overflow-hidden">
       <div class="p-6 border-b border-gray-200">
         <h3 class="text-lg font-semibold">变量列表</h3>
@@ -208,7 +209,7 @@
           <div class="mb-4">
             <label class="block text-gray-700 mb-1 text-sm">模板名称 *</label>
             <input
-              v-model="templateForm.name"
+              v-model="templateForm.groupName"
               type="text"
               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
@@ -239,10 +240,10 @@
                   @change="toggleTemplateVariable(variable.variableBizId || '')"
                 />
                 <label for="'template-var-' + variable.variableBizId">
+                  <div class="text-sm text-gray-500">{{ variable.variableNameCn }}</div>
                   <div class="font-medium font-mono text-sm">
                     {{ variablePrefix }}{{ variable.variableNameEn }}{{ variableNextfix }}
                   </div>
-                  <div class="text-xs text-gray-500">{{ variable.variableNameCn }}</div>
                 </label>
               </div>
             </div>
@@ -298,6 +299,7 @@ import {
   editEmailVariableGroup,
   deleteEmailVariableGroup,
   getEmailVariableGroupList,
+  getEmailVariableGroupDetail,
 } from '@/api/api'
 
 // 引入弹窗组件
@@ -328,6 +330,8 @@ const handleConfirm = (triggerKey: string) => {
   console.log('用户确认操作', triggerKey)
   if (triggerKey === 'deleteModal') {
     deleteVariable(editingVariableId.value, 'confirmDelete')
+  } else if (triggerKey === 'templeteDelete') {
+    deleteVariableTemplate(editingTemplateId.value, 'confirmDelete')
   }
 }
 
@@ -454,7 +458,6 @@ const editVariable = (variable: Variable) => {
 }
 
 const deleteVariable = (id: string, type?: string) => {
-  console.log(id, type)
   editingVariableId.value = id
   if (id && type === 'confirmDelete') {
     deleteEmailVariable(id)
@@ -557,11 +560,39 @@ const showCreateTemplateModal = (isNew: boolean) => {
     }
   }
 }
-
+// 方法 - 编辑变量模版
 const editVariableTemplate = (template: VariableTemplate) => {
-  editingTemplateId.value = template.id
-  templateForm.value = { ...template }
+  editingTemplateId.value = template.variableGroupBizId || ''
   showTemplateModal.value = true
+  // 详情查询
+  if (editingTemplateId.value) {
+    // 详情查询出来的 variableBizIdList 数组，需要和 variables 数组匹配，找到匹配的变量，然后把状态改为勾选状态，选中变量置顶
+    getEmailVariableGroupDetail(editingTemplateId.value).then((res) => {
+      templateForm.value = {
+        ...res.data,
+        variableBizIdList: res.data.emailVariableDtoList || [],
+      }
+
+      // 实现变量匹配逻辑：
+      // 1. 为每个变量对象添加selected属性
+      const selectedVariableIds =
+        res.data.emailVariableDtoList?.map((item) => item.variableBizId) || []
+      console.log(selectedVariableIds)
+
+      // 2. 更新variables数组，设置选中状态
+      variables.value = variables.value.map((variable) => ({
+        ...variable,
+        selected: selectedVariableIds.includes(variable.variableBizId),
+      }))
+
+      // 3. 将选中的变量置顶显示（按选中状态排序）
+      variables.value.sort((a, b) => {
+        if (a.selected && !b.selected) return -1
+        if (!a.selected && b.selected) return 1
+        return 0
+      })
+    })
+  }
 }
 
 const closeTemplateModal = () => {
@@ -596,44 +627,94 @@ const saveVariableTemplate = () => {
     return
 
   if (editingTemplateId.value) {
+    console.log('更新变量模版', templateForm.value)
     // 更新现有模板
-    const index = variableTemplates.value.findIndex(
-      (t) => t.variableGroupBizId === editingTemplateId.value,
-    )
-    if (index > -1) {
-      variableTemplates.value[index] = {
-        variableGroupBizId: editingTemplateId.value,
-        groupName: templateForm.value.groupName || '',
-        description: templateForm.value.description || '',
-        variableBizIdList: templateForm.value.variableBizIdList || [],
-      }
-      emits('update-variable-templates', [...variableTemplates.value])
-    }
+    editEmailVariableGroup({
+      variableGroupBizId: editingTemplateId.value,
+      groupName: templateForm.value.groupName || '',
+      description: templateForm.value.description || '',
+      variableBizIdList: templateForm.value.variableBizIdList || [],
+    })
+      .then(() => {
+        // 刷新变量模版列表
+        fetchVariableTemplates()
+        emits('update-variable-templates', [...variableTemplates.value])
+      })
+      .catch((error) => {
+        console.error('更新变量模版失败:', error)
+        if (error.response?.data?.message) {
+          openModal({
+            title: '错误',
+            message: error.response.data.message,
+          })
+        } else {
+          openModal({
+            title: '错误',
+            message: '更新变量模版失败',
+          })
+        }
+      })
   } else {
-    // 创建新模板
-    const newTemplate: VariableTemplate = {
+    // 调用变量组保存接口
+    addEmailVariableGroup({
       groupName: templateForm.value.groupName || '',
       description: templateForm.value.description || '',
       variableBizIdList: templateForm.value.variableBizIdList || [],
-    }
-
-    variableTemplates.value.push(newTemplate)
-    emits('update-variable-templates', [...variableTemplates.value])
+    })
+      .then(() => {
+        // 刷新变量模版列表
+        fetchVariableTemplates()
+        emits('update-variable-templates', [...variableTemplates.value])
+      })
+      .catch((error) => {
+        console.error('创建变量模版失败:', error)
+        if (error.response?.data?.message) {
+          openModal({
+            title: '错误',
+            message: error.response.data.message,
+          })
+        } else {
+          openModal({
+            title: '错误',
+            message: '创建变量模版失败',
+          })
+        }
+      })
   }
 
   closeTemplateModal()
-  openModal({
-    title: '成功',
-    message: editingTemplateId.value ? '模板更新成功' : '模板创建成功',
-  })
 }
 
-const deleteVariableTemplate = (id: string) => {
-  if (confirm('确定要删除这个模板吗？')) {
-    variableTemplates.value = variableTemplates.value.filter(
-      (template) => template.variableGroupBizId !== id,
-    )
-    emits('update-variable-templates', [...variableTemplates.value])
+const deleteVariableTemplate = (id: string, type?: string) => {
+  editingTemplateId.value = id
+  if (type === 'confirmDelete') {
+    deleteEmailVariableGroup(editingTemplateId.value)
+      .then(() => {
+        // 刷新变量模版列表
+        fetchVariableTemplates()
+        emits('update-variable-templates', [...variableTemplates.value])
+      })
+      .catch((error) => {
+        console.error('删除变量模版失败:', error)
+        if (error.response?.data?.message) {
+          openModal({
+            title: '错误',
+            message: error.response.data.message,
+          })
+        } else {
+          openModal({
+            title: '错误',
+            message: '删除变量模版失败',
+          })
+        }
+      })
+  } else {
+    openModal({
+      showClose: true,
+      title: '确认删除',
+      message: '确定删除此变量模版吗？',
+      triggerKey: 'templeteDelete',
+    })
   }
 }