From 4a7c42904856856a95fc99c4779feb92d3106734 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Tue, 20 Aug 2024 16:44:16 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E4=B8=BA=E7=A9=BA=E6=97=B6=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/style/arco-reset.less     |  5 +++
 .../api-test/components/treeFolderAll.vue     | 38 +++++++++++++------
 .../views/api-test/management/locale/en-US.ts |  2 +
 .../views/api-test/management/locale/zh-CN.ts |  2 +
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index ebd895a590..f919a36198 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/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;
diff --git a/frontend/src/views/api-test/components/treeFolderAll.vue b/frontend/src/views/api-test/components/treeFolderAll.vue
index 4bd1b8d765..579a235a47 100644
--- a/frontend/src/views/api-test/components/treeFolderAll.vue
+++ b/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')">
-          <MsButton
-            v-show="!props.notShowOperation"
-            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>
+        <a-popconfirm
+          :popup-visible="protocolIsEmptyVisible"
+          class="ms-pop-confirm--hidden-confirm"
+          :cancel-text="t('common.gotIt')"
+          position="bottom"
+          @cancel="protocolIsEmptyVisible = false"
+        >
+          <a-tooltip :content="t('ms.paramsInput.protocol')">
+            <MsButton
+              v-show="!props.notShowOperation"
+              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;
     }
   );
 
diff --git a/frontend/src/views/api-test/management/locale/en-US.ts b/frontend/src/views/api-test/management/locale/en-US.ts
index 24869f4271..b1f6abf0ee 100644
--- a/frontend/src/views/api-test/management/locale/en-US.ts
+++ b/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',
diff --git a/frontend/src/views/api-test/management/locale/zh-CN.ts b/frontend/src/views/api-test/management/locale/zh-CN.ts
index 498ab078aa..05e56f4ad5 100644
--- a/frontend/src/views/api-test/management/locale/zh-CN.ts
+++ b/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': '新环境',