fix(项目管理): 修复环境管理离开页面时统一弹窗&弹窗两次

frontend/src/hooks/useLeaveUnSaveTip.ts

@@ -1,12 +1,26 @@
 import { onBeforeRouteLeave } from 'vue-router';
 
 import { useI18n } from '@/hooks/useI18n';
+import type { ModalType } from '@/hooks/useModal';
 import useModal from '@/hooks/useModal';
 
+export interface LeaveProps {
+  leaveTitle: string;
+  leaveContent: string;
+  tipType: ModalType;
+}
+
+const leaveProps: LeaveProps = {
+  leaveTitle: 'common.unSaveLeaveTitle',
+  leaveContent: 'common.unSaveLeaveContent',
+  tipType: 'error',
+};
+
 // 离开页面确认提示
-export default function useLeaveUnSaveTip() {
+export default function useLeaveUnSaveTip(leaveProp = leaveProps) {
   const { openModal } = useModal();
   const { t } = useI18n();
+  const { leaveTitle, leaveContent, tipType } = leaveProp;
 
   const isSave = ref(true);
 
@@ -21,11 +35,11 @@ export default function useLeaveUnSaveTip() {
 
     if (!isSave.value) {
       openModal({
-        type: 'error',
+        type: tipType,
-        title: t('common.unSaveLeaveTitle'),
+        title: t(leaveTitle),
-        content: t('common.unSaveLeaveContent'),
+        content: t(leaveContent),
         okText: t('common.leave'),
-        cancelText: t('common.cancel'),
+        cancelText: t('common.stay'),
         okButtonProps: {
           status: 'normal',
         },

frontend/src/views/project-management/environmental/components/EnvParamBox.vue

@@ -76,7 +76,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
-  import { cloneDeep } from 'lodash-es';
+  import { cloneDeep, isEqual } from 'lodash-es';
 
   import MsTab from '@/components/pure/ms-tab/index.vue';
   import TabSettingDrawer from './common/TabSettingDrawer.vue';
@@ -92,7 +92,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
   import { useAppStore } from '@/store';
-  import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
+  import useProjectEnvStore, { ALL_PARAM } from '@/store/modules/setting/useProjectEnvStore';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { ContentTabItem, EnvPluginListItem } from '@/models/projectManagement/environmental';
@@ -101,8 +101,15 @@
   import { defaultHeaderParamsItem } from '@/views/api-test/components/config';
   import { filterKeyValParams } from '@/views/api-test/components/utils';
 
-  const { setIsSave } = useLeaveUnSaveTip();
+  const leaveTitle = 'common.tip';
-  setIsSave(false);
+  const leaveContent = 'apiTestDebug.unsavedLeave';
+
+  const { setIsSave } = useLeaveUnSaveTip({
+    leaveTitle,
+    leaveContent,
+    tipType: 'warning',
+  });
+
   const emit = defineEmits<{
     (e: 'ok', envId: string | undefined): void;
     (e: 'resetEnv'): void;
@@ -189,6 +196,12 @@
     },
   ];
 
+  const isChangeEnvValue = computed(() => {
+    return store.currentId === ALL_PARAM
+      ? isEqual(store.allParamDetailInfo, store.backupAllParamDetailInfo)
+      : isEqual(store.currentEnvDetailInfo, store.backupEnvDetailInfo);
+  });
+
   // 初始化插件
   const initPlugin = async () => {
     try {
@@ -296,6 +309,14 @@
         return '';
     }
   }
+
+  watchEffect(() => {
+    if (isChangeEnvValue.value) {
+      setIsSave(true);
+    } else {
+      setIsSave(false);
+    }
+  });
 </script>
 
 <style lang="less" scoped>

frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue

@@ -113,6 +113,7 @@
       dataIndex: 'username',
       showDrag: true,
       showInTable: true,
+      showTooltip: true,
     },
     {
       title: 'project.environmental.database.poolMax',

frontend/src/views/project-management/environmental/index.vue

@@ -293,9 +293,6 @@
 
   const { openModal } = useModal();
 
-  const { setIsSave } = useLeaveUnSaveTip();
-  setIsSave(false);
-
   const { t } = useI18n();
   const store = useProjectEnvStore();