fix(项目管理): 修复环境管理切换环境未提示保存&统一样式

frontend/src/components/pure/ms-tags-input/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-tooltip :content="allTagText" :disabled="innerModelValue.length === 0" :mouse-enter-delay="300">
+  <a-tooltip :content="allTagText" :disabled="(innerModelValue || []).length === 0" :mouse-enter-delay="300">
     <div :class="`flex w-full items-center ${props.class}`">
       <a-input-tag
         v-model:model-value="innerModelValue"

frontend/src/store/modules/setting/useProjectEnvStore.ts

@@ -72,7 +72,7 @@ const useProjectEnvStore = defineStore(
       projectId: '',
       name: '',
       description: '',
-      config: envParamsDefaultConfig,
+      config: cloneDeep(envParamsDefaultConfig),
     });
     const allParamDetailInfo = ref<GlobalParams>(); // 全局参数详情
     const httpNoWarning = ref(true);
@@ -115,7 +115,9 @@ const useProjectEnvStore = defineStore(
         } else if (id !== ALL_PARAM && id) {
           const tmpObj = await getDetailEnv(id);
           currentEnvDetailInfo.value = { ...tmpObj };
-          backupEnvDetailInfo.value = cloneDeep(tmpObj);
+          nextTick(() => {
+            backupEnvDetailInfo.value = cloneDeep(currentEnvDetailInfo.value);
+          });
         }
       } catch (e) {
         // eslint-disable-next-line no-console

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

@@ -67,7 +67,7 @@
 
   const defaultParamItem = {
     key: '',
-    paramType: '',
+    paramType: 'CONSTANT',
     value: '',
     description: '',
     tags: [],

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

@@ -1,16 +1,20 @@
 <template>
-  <div class="flex items-center justify-between">
+  <div class="grid grid-cols-4">
-    <a-button v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" type="outline" @click="handleAdd">{{
+    <div class="col-start-1">
-      t('project.environmental.database.addDatabase')
+      <a-button v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" type="outline" @click="handleAdd">{{
-    }}</a-button>
+        t('project.environmental.database.addDatabase')
-    <a-input-search
+      }}</a-button>
-      v-model="keyword"
+    </div>
-      class="w-[240px]"
+    <div class="col-end-5 text-right">
-      allow-clear
+      <a-input-search
-      :placeholder="t('project.menu.nameSearch')"
+        v-model="keyword"
-      @press-enter="fetchData"
+        class="w-[240px]"
-      @search="fetchData"
+        allow-clear
-    ></a-input-search>
+        :placeholder="t('project.menu.nameSearch')"
+        @press-enter="fetchData"
+        @search="fetchData"
+      ></a-input-search>
+    </div>
   </div>
   <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
     <template #driverId="{ record }">

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

@@ -5,15 +5,18 @@
       t('project.environmental.httpNoWarning')
     }}</span>
   </div>
-  <div class="flex items-center justify-between">
+  <div class="grid grid-cols-4">
-    <a-button
+    <div class="col-start-1">
-      v-if="!store.currentEnvDetailInfo.mock"
+      <a-button
-      v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
+        v-if="!store.currentEnvDetailInfo.mock"
-      type="outline"
+        v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
-      @click="handleAddHttp"
+        type="outline"
-      >{{ t('project.environmental.addHttp') }}</a-button
+        @click="handleAddHttp"
-    >
+        >{{ t('project.environmental.addHttp') }}</a-button
-    <div class="flex flex-row gap-[8px]">
+      >
+    </div>
+
+    <div class="col-end-5 flex flex-row gap-[8px]">
       <a-input-number
         v-model:model-value="form.requestTimeout"
         :min="0"
@@ -141,6 +144,7 @@
       title: 'project.environmental.http.desc',
       dataIndex: 'description',
       showDrag: true,
+      showTooltip: true,
     },
     {
       title: 'project.environmental.http.enableScope',

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

@@ -248,6 +248,7 @@
 
 <script lang="ts" setup>
   import { Message } from '@arco-design/web-vue';
+  import { isEqual } from 'lodash-es';
   import { VueDraggable } from 'vue-draggable-plus';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -274,6 +275,7 @@
     listEnv,
   } from '@/api/modules/project-management/envManagement';
   import { useI18n } from '@/hooks/useI18n';
+  import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
   import useModal from '@/hooks/useModal';
   import { useAppStore } from '@/store';
   import useProjectEnvStore, {
@@ -282,12 +284,18 @@
     NEW_ENV_PARAM,
   } from '@/store/modules/setting/useProjectEnvStore';
   import { downloadByteFile } from '@/utils';
+  import { hasAllPermission, hasAnyPermission } from '@/utils/permission';
 
   import { EnvListItem, PopVisible } from '@/models/projectManagement/environmental';
   import { EnvAuthScopeEnum, EnvAuthTypeEnum } from '@/enums/envEnum';
 
   import { SortableEvent } from 'sortablejs';
 
+  const { openModal } = useModal();
+
+  const { setState } = useLeaveUnSaveTip();
+  setState(false);
+
   const { t } = useI18n();
   const store = useProjectEnvStore();
 
@@ -530,7 +538,7 @@
   function searchData() {
     initData(keyword.value);
   }
-  const { openModal } = useModal();
+
   // 处理删除环境
   const handleDeleteEnv = async (id: string) => {
     if (store.currentId === NEW_ENV_PARAM) {
@@ -632,7 +640,29 @@
 
   const handleListItemClick = (element: EnvListItem) => {
     const { id } = element;
-    store.setCurrentId(id);
+    // 校验是否切换
+    if (store.currentId !== id) {
+      if (!hasAnyPermission(['PROJECT_ENVIRONMENT:READ+ADD', 'PROJECT_ENVIRONMENT:READ+UPDATE'])) {
+        store.setCurrentId(id);
+        return;
+      }
+      if (isEqual(store.currentEnvDetailInfo, store.backupEnvDetailInfo)) {
+        store.setCurrentId(id);
+      } else {
+        // 如果有未保存的tab则提示用户
+        openModal({
+          type: 'warning',
+          title: t('common.tip'),
+          content: t('apiTestDebug.unsavedLeave'),
+          hideCancel: false,
+          cancelText: t('common.stay'),
+          okText: t('common.leave'),
+          onBeforeOk: async () => {
+            store.setCurrentId(id);
+          },
+        });
+      }
+    }
   };
 
   const handleListItemClickGroup = (element: EnvListItem) => {
@@ -686,16 +716,21 @@
   };
 
   function resetHandler() {
-    const unSaveEnv = envList.value.filter((item) => item.id === NEW_ENV_PARAM).length < 2;
+    const unSaveEnv = envList.value.filter((item) => item.id === NEW_ENV_PARAM).length;
-    // 如果未保存环境存在环境为NEW_ENV_PARAM的id类型
+    // @desc: 未保存环境存在环境为 NEW_ENV_PARAM 类型初次新增
     if (unSaveEnv) {
       envList.value = envList.value.filter((item: any) => item.id !== NEW_ENV_PARAM);
       const excludeMock = envList.value.filter((item) => !item.mock);
+      // @desc: 如果没有MOCK环境默认为全局参数
       if (showType.value === 'PROJECT' && !excludeMock.length) {
         store.setCurrentId(ALL_PARAM);
+        // @desc: 如果没有MOCK环境默认为MOCK环境
       } else if (excludeMock.length) {
         store.setCurrentId(excludeMock[0].id);
       }
+      // @desc: 已经创建恢复最初数据
+    } else {
+      store.initEnvDetail();
     }
   }
 

frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue

@@ -19,10 +19,12 @@
           <span class="one-line-text mr-1 max-w-[300px] font-medium text-[var(--color-text-000)]">{{
             projectDetail?.name
           }}</span>
-          <span v-if="!projectDetail?.deleted && projectDetail?.enable" class="button enable-button mr-1">{{
+          <span
-            t('project.basicInfo.enable')
+            v-if="!projectDetail?.deleted && projectDetail?.enable"
-          }}</span>
+            class="button mr-1"
-          <span v-else class="button delete-button">{{ t('project.basicInfo.deleted') }}</span>
+            :class="[projectDetail?.enable ? 'enable-button' : 'delete-button']"
+            >{{ projectDetail?.enable ? t('project.basicInfo.enable') : t('project.basicInfo.enable') }}</span
+          >
         </div>
         <div class="one-line-text text-xs text-[--color-text-4]">{{ projectDetail?.description }}</div>
       </div>