对接变量接口完成

src/App.vue

@@ -4,7 +4,7 @@
     <LoginPage v-if="isLoginPage && !isAuthenticated" @login="handleLogin" />
 
     <!-- 主应用布局 -->
-    <div v-else class="flex flex-1 overflow-hidden">
+    <div v-else class="flex flex-1 overflow-y-auto">
       <!-- 侧边导航 -->
       <Sidebar :current-page="currentPage" @logout="handleLogout" />
 

src/components/CommonModal.vue

@@ -82,6 +82,11 @@ type ModalType = 'success' | 'warning' | 'error' | 'info' | 'confirm' | ''
 
 // 定义属性
 const props = defineProps({
+  /** 触发源标识 - 用于区分是哪个方法触发的弹窗 */
+  triggerKey: {
+    type: String,
+    default: '',
+  },
   /** 控制弹窗显示/隐藏 */
   visible: {
     type: Boolean,
@@ -189,15 +194,13 @@ const props = defineProps({
   },
 })
 
-// 定义事件
-const emit = defineEmits([
-  'confirm',
-  'cancel',
-  'close',
-  'update:visible',
-  'update:confirmLoading',
-  'update:cancelLoading',
-])
+// 定义事件 - 事件参数包含triggerKey
+const emit = defineEmits<{
+  (e: 'confirm', triggerKey: string): void
+  (e: 'cancel', triggerKey: string): void
+  (e: 'close', triggerKey: string): void
+  (e: 'update:visible', value: boolean): void
+}>()
 
 // 内部状态管理
 const dialogVisible = ref(props.visible)
@@ -210,7 +213,6 @@ watch(
     dialogVisible.value = newVal
   },
 )
-
 // 监听dialogVisible变化
 watch(
   () => dialogVisible.value,
@@ -294,24 +296,21 @@ const iconContainerClass = computed(() => {
   }
 })
 
-// 处理关闭事件
+// 处理关闭事件 - 传递triggerKey
 const handleClose = () => {
   dialogVisible.value = false
-  emit('close')
+  emit('close', props.triggerKey)
 }
 
-// 处理确认事件
+// 处理确认事件 - 传递triggerKey
 const handleConfirm = () => {
-  emit('confirm')
-  // 不自动关闭，由父组件控制
-  if (!props.confirmLoading) {
+  emit('confirm', props.triggerKey)
   handleClose()
-  }
 }
 
-// 处理取消事件
+// 处理取消事件 - 传递triggerKey
 const handleCancel = () => {
-  emit('cancel')
+  emit('cancel', props.triggerKey)
   handleClose()
 }
 

src/types/index.ts

@@ -30,7 +30,7 @@ export interface Variable {
 
 // 变量模板类型
 export interface VariableTemplate {
-  id: string
+  variableGroupBizId?: string
   groupName?: string
   description?: string
   variableBizIdList?: string[]

src/views/MobileSidebar.vue

@@ -19,7 +19,26 @@
               <i class="fas fa-pen mr-2"></i>写邮件
             </router-link>
           </li>
-          <!-- 其他路由链接类似修改 -->
+          <li class="mb-2">
+            <router-link
+              to="/variables"
+              class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
+              :class="{ 'bg-blue-500': currentPage === 'variables' }"
+              @click="$emit('close-menu')"
+            >
+              <i class="fas fa-file-excel mr-2"></i>变量管理
+            </router-link>
+          </li>
+          <li class="mb-2">
+            <router-link
+              to="/emails"
+              class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
+              :class="{ 'bg-blue-500': currentPage === 'emails' }"
+              @click="$emit('close-menu')"
+            >
+              <i class="fas fa-history mr-2"></i>邮件记录
+            </router-link>
+          </li>
         </ul>
       </nav>
       <div class="absolute bottom-4 left-0 right-0 px-4">
@@ -33,3 +52,17 @@
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const currentPage = ref(router.currentRoute.value.name as string)
+
+watch(
+  () => router.currentRoute.value.name,
+  (name) => {
+    currentPage.value = name as string
+  },
+)
+</script>

src/views/Sidebar.vue

@@ -40,7 +40,7 @@
             class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
             :class="{ 'bg-blue-500': currentPage === 'variables' }"
           >
-            <i class="fas fa-variable mr-2"></i>变量管理
+            <i class="fas fa-file-excel mr-2"></i>变量管理
           </router-link>
         </li>
         <li class="mb-2">
@@ -57,7 +57,7 @@
     <div class="absolute bottom-4 left-0 right-0 px-4">
       <button
         @click="$emit('logout')"
-        class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center text-sm"
+        class="text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center text-sm"
       >
         <i class="fas fa-sign-out-alt mr-2"></i>退出登录
       </button>

src/views/VariableManagement.vue

@@ -275,6 +275,7 @@
   </div>
   <CommonModal
     v-model:visible="modalVisible"
+    :trigger-key="modalConfig.triggerKey"
     :title="modalConfig.title"
     type="confirm"
     :message="modalConfig.message"
@@ -307,25 +308,32 @@ const modalConfig = ref({
   showCancel: false,
   title: '操作确认',
   message: '确定要执行此操作吗？',
+  triggerKey: 'templateModal',
 })
 
-const openModal = (config: { showCancel?: boolean; title?: string; message?: string } = {}) => {
+const openModal = (
+  config: { triggerKey?: string; showCancel?: boolean; title?: string; message?: string } = {},
+) => {
   modalConfig.value = {
-    showCancel: config.showCancel ?? true,
+    showCancel: config.showCancel ?? false,
     title: config.title ?? '操作确认',
     message: config.message ?? '确定要执行此操作吗？',
+    triggerKey: config.triggerKey ?? modalConfig.value.triggerKey,
   }
   modalVisible.value = true
 }
 
-const handleConfirm = () => {
+const handleConfirm = (triggerKey: string) => {
   modalVisible.value = false
-  console.log('用户确认操作')
+  console.log('用户确认操作', triggerKey)
+  if (triggerKey === 'deleteModal') {
+    deleteVariable(editingVariableId.value, 'confirmDelete')
+  }
 }
 
-const handleCancel = () => {
+const handleCancel = (triggerKey: string) => {
   modalVisible.value = false
-  console.log('用户取消操作')
+  console.log('用户取消操作', triggerKey)
 }
 
 const props = defineProps({
@@ -445,14 +453,16 @@ const editVariable = (variable: Variable) => {
   variableForm.value = { ...variable }
 }
 
-const deleteVariable = (id: string) => {
-  if (confirm('确定要删除这个变量吗？这可能会影响使用该变量的模板。')) {
-    // 删除接口
+const deleteVariable = (id: string, type?: string) => {
+  console.log(id, type)
+  editingVariableId.value = id
+  if (id && type === 'confirmDelete') {
     deleteEmailVariable(id)
       .then(() => {
         // 刷新变量列表
         fetchVariables()
         openModal({
+          triggerKey: '',
           title: '成功',
           message: '变量删除成功',
         })
@@ -461,16 +471,25 @@ const deleteVariable = (id: string) => {
         console.error('删除变量失败:', error)
         if (error.response?.data?.message) {
           openModal({
+            triggerKey: '',
             title: '错误',
             message: error.response.data.message,
           })
         } else {
           openModal({
+            triggerKey: '',
             title: '错误',
             message: '删除变量失败',
           })
         }
       })
+  } else {
+    openModal({
+      triggerKey: 'deleteModal',
+      showCancel: true,
+      title: '删除确认',
+      message: '确定要删除这个变量吗？这可能会影响使用该变量的模板。',
+    })
   }
 }
 
@@ -578,10 +597,12 @@ const saveVariableTemplate = () => {
 
   if (editingTemplateId.value) {
     // 更新现有模板
-    const index = variableTemplates.value.findIndex((t) => t.id === editingTemplateId.value)
+    const index = variableTemplates.value.findIndex(
+      (t) => t.variableGroupBizId === editingTemplateId.value,
+    )
     if (index > -1) {
       variableTemplates.value[index] = {
-        id: editingTemplateId.value,
+        variableGroupBizId: editingTemplateId.value,
         groupName: templateForm.value.groupName || '',
         description: templateForm.value.description || '',
         variableBizIdList: templateForm.value.variableBizIdList || [],
@@ -591,7 +612,6 @@ const saveVariableTemplate = () => {
   } else {
     // 创建新模板
     const newTemplate: VariableTemplate = {
-      id: Date.now().toString(),
       groupName: templateForm.value.groupName || '',
       description: templateForm.value.description || '',
       variableBizIdList: templateForm.value.variableBizIdList || [],
@@ -610,20 +630,22 @@ const saveVariableTemplate = () => {
 
 const deleteVariableTemplate = (id: string) => {
   if (confirm('确定要删除这个模板吗？')) {
-    variableTemplates.value = variableTemplates.value.filter((template) => template.id !== id)
+    variableTemplates.value = variableTemplates.value.filter(
+      (template) => template.variableGroupBizId !== id,
+    )
     emits('update-variable-templates', [...variableTemplates.value])
   }
 }
 
 const getVariableKeyById = (id: string) => {
-  const variable = variables.value.find((v) => v.id === id)
+  const variable = variables.value.find((v) => v.variableBizId === id)
   return variable?.variableNameEn || ''
 }
 
 const generateExcelTemplate = (template: VariableTemplate) => {
   // 模拟生成Excel模板
   const variableNames = (template.variableBizIdList || []).map((id) => {
-    const variable = variables.value.find((v) => v.id === id)
+    const variable = variables.value.find((v) => v.variableBizId === id)
     return variable ? variable.variableNameEn || '' : ''
   })