feat(功能测试): 调整功能用例气泡确认框

frontend/src/components/pure/ms-popconfirm/index.vue

@@ -1,12 +1,12 @@
 <template>
   <a-popover
     v-bind="attrs"
+    v-model:popup-visible="currentVisible"
     :type="props.type"
-    :popup-visible="currentVisible"
     :class="props.isDelete ? 'w-[352px]' : ''"
     trigger="click"
     :popup-container="props.popupContainer || 'body'"
-    :position="props.isDelete ? 'bottom' : 'rb'"
+    :position="props.isDelete ? 'rb' : 'bottom'"
     @popup-visible-change="reset"
   >
     <template #content>

frontend/src/views/feature-test/featureCase/components/actionPopConfirm.vue

@@ -1,125 +0,0 @@
-<template>
-  <a-popconfirm
-    v-model:popup-visible="isVisible"
-    class="ms-pop-confirm--hidden-icon"
-    position="bottom"
-    :ok-loading="loading"
-    :on-before-ok="beforeConfirm"
-    :popup-container="props.popupContainer || 'body'"
-    @popup-visible-change="visibleChange"
-  >
-    <template #content>
-      <div class="mb-[8px] font-medium">
-        {{ props.title || '' }}
-      </div>
-      <a-form ref="formRef" :model="form" layout="vertical">
-        <a-form-item
-          class="hidden-item"
-          field="name"
-          :rules="[{ required: true, message: t('featureTest.featureCase.nameNotNullTip') }]"
-        >
-          <a-input
-            v-model:model-value="form.name"
-            :max-length="50"
-            :placeholder="props.placeholder || ''"
-            class="w-[245px]"
-            @press-enter="beforeConfirm(undefined)"
-          />
-        </a-form-item>
-      </a-form>
-    </template>
-    <slot></slot>
-  </a-popconfirm>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import { useI18n } from '@/hooks/useI18n';
-  import type { FormInstance } from '@arco-design/web-vue';
-  import { Message } from '@arco-design/web-vue';
-
-  const { t } = useI18n();
-
-  export type OperationType = 'add' | 'rename';
-
-  const isVisible = ref<boolean>(false);
-
-  const loading = ref<boolean>(false);
-
-  const props = defineProps<{
-    operationType: OperationType;
-    title: string;
-    nodeName?: string;
-    visible?: boolean;
-    popupContainer?: string;
-    placeholder?: string;
-  }>();
-
-  const emits = defineEmits<{
-    (e: 'update:visible', visible: boolean): void;
-    (e: 'close'): void;
-  }>();
-
-  const form = ref({
-    name: props.title || '',
-  });
-
-  const formRef = ref<FormInstance>();
-
-  const visibleChange = () => {
-    form.value.name = '';
-    formRef.value?.resetFields();
-  };
-
-  const beforeConfirm = (done?: (closed: boolean) => void) => {
-    formRef.value?.validate(async (errors) => {
-      if (!errors) {
-        try {
-          loading.value = true;
-          Message.success(
-            props.operationType === 'add'
-              ? t('featureTest.featureCase.addSubModuleSuccess')
-              : t('featureTest.featureCase.renameSuccess')
-          );
-          if (done) {
-            done(true);
-          } else {
-            isVisible.value = false;
-          }
-        } catch (error) {
-          console.log(error);
-        } finally {
-          loading.value = false;
-        }
-      } else if (done) {
-        done(false);
-      }
-    });
-  };
-
-  watch(
-    () => props.nodeName,
-    (val) => {
-      form.value.name = val || '';
-    }
-  );
-
-  watch(
-    () => props.visible,
-    (val) => {
-      isVisible.value = val;
-    }
-  );
-
-  watch(
-    () => isVisible.value,
-    (val) => {
-      if (!val) {
-        emits('close');
-      }
-      emits('update:visible', val);
-    }
-  );
-</script>
-
-<style scoped></style>

frontend/src/views/feature-test/featureCase/components/caseTable.vue

@@ -18,7 +18,7 @@
         :type="isExpandFilter ? 'primary' : 'default'"
         :theme="isExpandFilter ? 'lightOutLine' : 'outline'"
         size="large"
-        class="-mt-[3px] cursor-pointer"
+        class="-mt-[3px] min-w-[64px] cursor-pointer"
       >
         <span :class="!isExpandFilter ? 'text-[var(--color-text-4)]' : ''" @click="isExpandFilterHandler"
           ><icon-filter class="mr-[4px]" :style="{ 'font-size': '16px' }" />{{

frontend/src/views/feature-test/featureCase/components/featureCaseTree.vue

@@ -8,6 +8,7 @@
     :expand-all="props.isExpandAll"
     :empty-text="t('featureTest.featureCase.caseEmptyContent')"
     draggable
+    :virtual-list-props="virtualListProps"
     block-node
     @select="caseNodeSelect"
     @more-action-select="handleCaseMoreSelect"
@@ -18,25 +19,25 @@
       <span class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count }})</span>
     </template>
     <template #extra="nodeData">
-      <ActionPopConfirm
+      <MsPopConfirm
-        operation-type="add"
+        :is-delete="false"
         :all-names="[]"
         :title="t('featureTest.featureCase.addSubModule')"
-        @close="resetFocusNodeKey"
+        @cancel="resetFocusNodeKey"
       >
         <MsButton type="icon" size="mini" class="ms-tree-node-extra__btn !mr-0" @click="setFocusKey(nodeData)">
           <MsIcon type="icon-icon_add_outlined" size="14" class="text-[var(--color-text-4)]" />
         </MsButton>
-      </ActionPopConfirm>
+      </MsPopConfirm>
-      <ActionPopConfirm
+      <MsPopConfirm
-        operation-type="rename"
         :title="t('featureTest.featureCase.rename')"
-        :node-name="renameCaseName"
         :all-names="[]"
-        @close="resetFocusNodeKey"
+        :is-delete="false"
+        :field-config="{ field: renameCaseName }"
+        @cancel="resetFocusNodeKey"
       >
         <span :id="`renameSpan${nodeData.key}`" class="relative"></span>
-      </ActionPopConfirm>
+      </MsPopConfirm>
     </template>
   </MsTree>
   <div class="recycle w-[88%]">
@@ -50,15 +51,18 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import MsTree from '@/components/business/ms-tree/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
+  import { Message } from '@arco-design/web-vue';
+  import MsPopConfirm from '@/components/pure/ms-popconfirm/index.vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import type { MsTreeNodeData } from '@/components/business/ms-tree/types';
-  import ActionPopConfirm from './actionPopConfirm.vue';
 
   const { t } = useI18n();
+  const { openModal } = useModal();
 
   const focusNodeKey = ref<string | number>('');
 
@@ -82,6 +86,36 @@
           key: 'node2',
           count: 28,
         },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
       ],
     },
     {
@@ -99,6 +133,36 @@
           key: 'node5',
           count: 108,
         },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
+        {
+          title: 'Leaf',
+          key: 'node4',
+          count: 138,
+        },
+        {
+          title: 'Leaf',
+          key: 'node5',
+          count: 108,
+        },
       ],
     },
     {
@@ -132,13 +196,34 @@
     emits('caseNodeSelect', selectedKeys);
   };
 
-  const deleteHandler = (node: MsTreeNodeData) => {};
+  // 删除节点
+  const deleteHandler = (node: MsTreeNodeData) => {
+    openModal({
+      type: 'error',
+      title: t('featureTest.featureCase.deleteTipTitle', { name: node.title }),
+      content: t('featureTest.featureCase.deleteCaseTipContent'),
+      okText: t('featureTest.featureCase.deleteConfirm'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      maskClosable: false,
+      onBeforeOk: async () => {
+        try {
+          Message.success(t('featureTest.featureCase.deleteSuccess'));
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
+  };
 
   function resetFocusNodeKey() {
     focusNodeKey.value = '';
     renamePopVisible.value = false;
     renameCaseName.value = '';
   }
+
   // 用例树节点更多事件
   const handleCaseMoreSelect = (item: ActionsItem, node: MsTreeNodeData) => {
     switch (item.eventTag) {
@@ -168,6 +253,12 @@
 
   const recycleCount = ref<number>(100);
 
+  const virtualListProps = computed(() => {
+    return {
+      height: 'calc(100vh - 376px)',
+    };
+  });
+
   watch(
     () => props.selectedKeys,
     (val) => {

frontend/src/views/feature-test/featureCase/index.vue

@@ -34,10 +34,12 @@
                     <MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
                   </MsButton>
                 </a-tooltip>
-                <ActionPopConfirm
+                <MsPopConfirm
-                  operation-type="add"
+                  :is-delete="false"
                   :title="t('featureTest.featureCase.addSubModule')"
                   :all-names="[]"
+                  :loading="confirmLoading"
+                  @confirm="confirmHandler"
                 >
                   <MsButton type="icon" class="!mr-0 p-[2px]">
                     <MsIcon
@@ -46,7 +48,7 @@
                       class="text-[rgb(var(--primary-5))] hover:text-[rgb(var(--primary-4))]"
                     />
                   </MsButton>
-                </ActionPopConfirm>
+                </MsPopConfirm>
               </div>
             </div>
             <a-divider class="my-[8px]" />
@@ -76,7 +78,7 @@
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import FeatureCaseTree from './components/featureCaseTree.vue';
-  import ActionPopConfirm from './components/actionPopConfirm.vue';
+  import MsPopConfirm from '@/components/pure/ms-popconfirm/index.vue';
   import CaseTable from './components/caseTable.vue';
   import { useI18n } from '@/hooks/useI18n';
 
@@ -112,6 +114,18 @@
   function caseNodeSelect(keys: (string | number)[]) {
     [activeCase.value] = keys;
   }
+
+  const confirmLoading = ref(false);
+
+  const confirmHandler = () => {
+    try {
+      confirmLoading.value = true;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      confirmLoading.value = false;
+    }
+  };
 </script>
 
 <style scoped lang="less">

frontend/src/views/feature-test/featureCase/locale/en-US.ts

@@ -18,4 +18,9 @@ export default {
   'featureTest.featureCase.addSubModuleSuccess': 'Add submodule successfully',
   'featureTest.featureCase.renameSuccess': 'Rename successful',
   'featureTest.featureCase.nameNotNullTip': 'The name can not be null',
+  'featureTest.featureCase.deleteTipTitle': 'Do you want to delete: {name} use case?',
+  'featureTest.featureCase.deleteCaseTipContent':
+    'After the node is deleted, all resources under the node will be deleted. Exercise caution when performing this operation.',
+  'featureTest.featureCase.deleteConfirm': 'Confirm',
+  'featureTest.featureCase.deleteSuccess': 'Delete Successfully',
 };

frontend/src/views/feature-test/featureCase/locale/zh-CN.ts

@@ -18,4 +18,8 @@ export default {
   'featureTest.featureCase.addSubModuleSuccess': '添加子模块成功',
   'featureTest.featureCase.renameSuccess': '重命名成功',
   'featureTest.featureCase.nameNotNullTip': '名称不能为空',
+  'featureTest.featureCase.deleteTipTitle': '是否删除：{name} 用例？',
+  'featureTest.featureCase.deleteCaseTipContent': '删除后，此节点下的所有资源都会被删除，请谨慎操作。',
+  'featureTest.featureCase.deleteConfirm': '确认删除',
+  'featureTest.featureCase.deleteSuccess': '删除成功',
 };