对接变量接口完成

58f9725e · Sweet Zhang · 2f5bf954 · 58f9725e · 58f9725e · 58f9725e
Commit 58f9725e authored Sep 24, 2025 by Sweet Zhang
Showing with 94 additions and 40 deletions

src/App.vue
+1 -1

src/components/CommonModal.vue
+19 -20

src/types/index.ts
+1 -1

src/views/MobileSidebar.vue
+34 -1

src/views/Sidebar.vue
+2 -2

src/views/VariableManagement.vue
+37 -15

No files found.
--- a/src/App.vue
+++ b/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" />

--- a/src/components/CommonModal.vue
+++ b/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({
  },
 })
-// 定义事件
+// 定义事件 - 事件参数包含triggerKey
-const emit = defineEmits([
+const emit = defineEmits<{
-  'confirm',
+  (e: 'confirm', triggerKey: string): void
-  'cancel',
+  (e: 'cancel', triggerKey: string): void
-  'close',
+  (e: 'close', triggerKey: string): void
-  'update:visible',
+  (e: 'update:visible', value: boolean): void
-  'update:confirmLoading',
+}>()
-  'update:cancelLoading',
-])
 // 内部状态管理
 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')
+  emit('confirm', props.triggerKey)
-  // 不自动关闭，由父组件控制
+  handleClose()
-  if (!props.confirmLoading) {
-    handleClose()
-  }
 }
-// 处理取消事件
+// 处理取消事件 - 传递triggerKey
 const handleCancel = () => {
-  emit('cancel')
+  emit('cancel', props.triggerKey)
  handleClose()
 }

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

--- a/src/views/MobileSidebar.vue
+++ b/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>
--- a/src/views/Sidebar.vue
+++ b/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>

--- a/src/views/VariableManagement.vue
+++ b/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) => {
+const deleteVariable = (id: string, type?: string) => {
-  if (confirm('确定要删除这个变量吗？这可能会影响使用该变量的模板。')) {
+  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 || '' : ''
  })