style(接口测试): 协议为空时弹出气泡

frontend/src/assets/style/arco-reset.less

@@ -182,6 +182,11 @@
     @apply hidden;
   }
 }
+.ms-pop-confirm--hidden-confirm {
+  .arco-btn-primary {
+    @apply hidden;
+  }
+}
 .ms-pop-confirm--hidden-icon {
   .arco-popconfirm-icon {
     @apply !hidden;

frontend/src/views/api-test/components/treeFolderAll.vue

@@ -21,17 +21,31 @@
       </a-tooltip>
       <!-- 协议icon -->
       <a-dropdown v-model:popup-visible="visible" :hide-on-select="false">
-        <a-tooltip :content="t('ms.paramsInput.protocol')">
+        <a-popconfirm
-          <MsButton
+          :popup-visible="protocolIsEmptyVisible"
-            v-show="!props.notShowOperation"
+          class="ms-pop-confirm--hidden-confirm"
-            type="icon"
+          :cancel-text="t('common.gotIt')"
-            status="secondary"
+          position="bottom"
-            :class="`!mr-[4px] p-[4px] ${visible ? 'bg-[rgb(var(--primary-1))] !text-[rgb(var(--primary-4))]' : ''}`"
+          @cancel="protocolIsEmptyVisible = false"
-            @click="visible = !visible"
+        >
-          >
+          <a-tooltip :content="t('ms.paramsInput.protocol')">
-            <MsIcon type="icon-icon_protocol" />
+            <MsButton
-          </MsButton>
+              v-show="!props.notShowOperation"
-        </a-tooltip>
+              type="icon"
+              status="secondary"
+              :class="`!mr-[4px] p-[4px] ${visible ? 'bg-[rgb(var(--primary-1))] !text-[rgb(var(--primary-4))]' : ''}`"
+              @click="visible = !visible"
+            >
+              <MsIcon type="icon-icon_protocol" />
+            </MsButton>
+          </a-tooltip>
+          <template #content>
+            <div class="flex flex-col gap-[8px]">
+              <div class="font-medium">{{ t('apiTestManagement.protocolIsEmpty') }}</div>
+              <div class="text-[var(--color-text-2)]">{{ t('apiTestManagement.protocolEmptyTip') }}</div>
+            </div>
+          </template>
+        </a-popconfirm>
         <template #content>
           <a-checkbox
             class="checkbox-all"
@@ -93,6 +107,7 @@
   const appStore = useAppStore();
 
   const visible = ref(false);
+  const protocolIsEmptyVisible = ref(false);
   const allProtocolList = ref<string[]>([]); // 全部
   const isCheckedAll = computed(() => {
     return selectedProtocols.value.length === allProtocolList.value.length;
@@ -134,6 +149,7 @@
     (val) => {
       setLocalStorage(props.protocolKey, val);
       emit('selectedProtocolsChange');
+      protocolIsEmptyVisible.value = !val.length;
     }
   );
 

frontend/src/views/api-test/management/locale/en-US.ts

@@ -166,6 +166,8 @@ export default {
   'apiTestManagement.requestTypeTip': 'Note: Batch request type changes apply only to HTTP requests.',
   'apiTestManagement.autoMake': 'Auto Generate',
   'apiTestManagement.pleaseInputJsonSchema': 'Please enter Schema first before automatically generating it.',
+  'apiTestManagement.protocolIsEmpty': 'The protocol is empty',
+  'apiTestManagement.protocolEmptyTip': 'List display data is empty, please select protocol',
   'case.execute.selectEnv': 'Select Environment',
   'case.execute.defaultEnv': 'Default Environment',
   'case.execute.newEnv': 'New Environment',

frontend/src/views/api-test/management/locale/zh-CN.ts

@@ -159,6 +159,8 @@ export default {
   'apiTestManagement.requestTypeTip': '注：批量修改请求类型仅对HTTP协议的请求生效',
   'apiTestManagement.autoMake': '自动生成',
   'apiTestManagement.pleaseInputJsonSchema': '请先输入 Schema 后再进行自动生成',
+  'apiTestManagement.protocolIsEmpty': '接口协议为空',
+  'apiTestManagement.protocolEmptyTip': '列表展示数据为空，请选择协议',
   'case.execute.selectEnv': '环境选择',
   'case.execute.defaultEnv': '默认环境',
   'case.execute.newEnv': '新环境',