feat(功能用例): 完善新增用例成功提示推荐页面

2023-11-27 16:39:14 +08:00 · 2023-11-27 16:39:14 +08:00 · 3c136048fe
parent 2dab26545d
commit 3c136048fe
12 changed files with 239 additions and 2 deletions
--- a/frontend/src/assets/svg/caseReview.svg
+++ b/frontend/src/assets/svg/caseReview.svg
@ -0,0 +1,38 @@
+<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" width="15" height="24" rx="2" fill="#3370FF"/>
+<g filter="url(#filter0_i_1884_9071)">
+<path d="M4 6.33333C4 5.59695 4.69396 5 5.55 5H32.45C33.306 5 34 5.59695 34 6.33333V25.6667C34 26.403 33.306 27 32.45 27H5.55C4.69396 27 4 26.403 4 25.6667V6.33333Z" fill="#F5F8FF"/>
+</g>
+<g filter="url(#filter1_f_1884_9071)">
+<path d="M5 8.375C5 7.06332 5.37702 6 5.84211 6H20.1579C20.623 6 21 7.06332 21 8.375V22.625C21 23.9367 20.623 25 20.1579 25H5.8421C5.37702 25 5 23.9367 5 22.625V8.375Z" fill="#3370FF"/>
+</g>
+<g filter="url(#filter2_d_1884_9071)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17.3333L8.00154 14.6809C8.00184 14.4969 8.15104 14.3477 8.33506 14.3475H11.669C11.9746 14.3475 11.9746 14.0779 11.9746 13.4366V13.4264C11.9746 13.2008 11.7769 12.9875 11.5191 12.7094C11.0356 12.1879 10.3407 11.4382 10.3407 9.95093C10.3407 7.6705 12.0333 7 13.44 7C14.8467 7 16.3789 7.6705 16.3789 9.95093C16.3789 11.3725 15.7473 12.0488 15.2716 12.5582C14.9841 12.866 14.7536 13.1129 14.7536 13.4264C14.7536 14.2588 14.7536 14.3475 15.0138 14.3475H18.3334C18.5175 14.3475 18.6668 14.4968 18.6668 14.6809V17.3333H8ZM23 17.5C23 16.6716 23.6716 16 24.5 16H29.5C30.3284 16 31 16.6716 31 17.5C31 18.3284 30.3284 19 29.5 19H24.5C23.6716 19 23 18.3284 23 17.5ZM8.5 21C7.67157 21 7 21.6716 7 22.5C7 23.3284 7.67157 24 8.5 24H30.5C31.3284 24 32 23.3284 32 22.5C32 21.6716 31.3284 21 30.5 21H8.5Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_i_1884_9071" x="4" y="5" width="30" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1884_9071"/>
+</filter>
+<filter id="filter1_f_1884_9071" x="0" y="1" width="26" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_1884_9071"/>
+</filter>
+<filter id="filter2_d_1884_9071" x="7" y="7" width="25" height="17.1" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00986111 0 0 0 0 0.0953724 0 0 0 0 0.295833 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1884_9071"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1884_9071" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/frontend/src/config/pathMap.ts
+++ b/frontend/src/config/pathMap.ts
@ -352,12 +352,19 @@ export const pathMap: PathMapItem[] = [
        level: MENU_LEVEL[2],
      },
      {
-        key: 'FEATURE_TEST_CASE_DETAIL', // 功能测试-功能用例
+        key: 'FEATURE_TEST_CASE_DETAIL', // 功能测试-功能用例详情
        locale: 'menu.featureTest.featureCaseDetail',
        route: RouteEnum.FEATURE_TEST_CASE_DETAIL,
        permission: [],
        level: MENU_LEVEL[2],
      },
+      {
+        key: 'FEATURE_TEST_CASE_CREATE_SUCCESS', // 功能测试-功能用例创建成功页面
+        locale: 'menu.featureTest.featureCaseCreateSuccess',
+        route: RouteEnum.FEATURE_TEST_CASE_CREATE_SUCCESS,
+        permission: [],
+        level: MENU_LEVEL[2],
+      },
      {
        key: 'FEATURE_TEST_CASE_RECYCLE', // 功能测试-功能用例-回收站
        locale: 'menu.featureTest.featureCaseRecycle',
--- a/frontend/src/enums/routeEnum.ts
+++ b/frontend/src/enums/routeEnum.ts
@ -9,6 +9,7 @@ export enum BugManagementRouteEnum {
 export enum FeatureTestRouteEnum {
  FEATURE_TEST = 'featureTest',
  FEATURE_TEST_CASE = 'featureTestCase',
+  FEATURE_TEST_CASE_CREATE_SUCCESS = 'featureTestCaseCreateSuccess',
  FEATURE_TEST_CASE_RECYCLE = 'featureTestCaseRecycle',
  FEATURE_TEST_CASE_DETAIL = 'featureTestCaseDetail',
 }
--- a/frontend/src/locale/en-US/index.ts
+++ b/frontend/src/locale/en-US/index.ts
@ -31,6 +31,10 @@ export default {
    'menu.projectManagement.messageManagement': 'Message Management',
    'menu.projectManagement.messageManagementEdit': 'Update Template',
    'menu.featureTest.featureCase': 'Feature Case',
+    'menu.featureTest.featureCaseRecycle': 'Recycle',
+    'menu.featureTest.featureCaseList': 'Case list',
+    'menu.featureTest.featureCaseDetail': 'Create Case',
+    'menu.featureTest.featureCaseCreateSuccess': 'Create Success',
    'meun.workstation': 'Workstation',
    'menu.loadTest': 'Performance Test',
    'menu.caseManagement': 'Feature Test',
--- a/frontend/src/locale/zh-CN/index.ts
+++ b/frontend/src/locale/zh-CN/index.ts
@ -38,6 +38,7 @@ export default {
    'menu.featureTest.featureCaseRecycle': '回收站',
    'menu.featureTest.featureCaseList': '用例列表',
    'menu.featureTest.featureCaseDetail': '创建用例',
+    'menu.featureTest.featureCaseCreateSuccess': '创建用例成功',
    'menu.projectManagement.projectPermission': '项目与权限',
    'menu.settings': '系统设置',
    'menu.settings.system': '系统',
--- a/frontend/src/router/routes/modules/caseManagement.ts
+++ b/frontend/src/router/routes/modules/caseManagement.ts
@ -47,6 +47,16 @@ const FeatureTest: AppRouteRecordRaw = {
        ],
      },
    },
+    // 创建用例成功
+    {
+      path: 'featureCaseCreateSuccess',
+      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_CREATE_SUCCESS,
+      component: () => import('@/views/case-management/caseManagementFeature/components/createSuccess.vue'),
+      meta: {
+        locale: 'menu.featureTest.featureCaseCreateSuccess',
+        roles: ['*'],
+      },
+    },
    // 功能用例回收站
    {
      path: 'featureCaseRecycle',
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetail.vue
@ -27,6 +27,7 @@

  import { createCaseRequest, updateCaseRequest } from '@/api/modules/case-management/featureCase';
  import { useI18n } from '@/hooks/useI18n';
+  import useVisit from '@/hooks/useVisit';
  import useFeatureCaseStore from '@/store/modules/case/featureCase';
  import { scrollIntoView } from '@/utils/dom';

@ -37,8 +38,12 @@
  const { t } = useI18n();
  const route = useRoute();
  const router = useRouter();
+
  const featureCaseStore = useFeatureCaseStore();

+  const visitedKey = 'doNotNextTipCreateCase';
+  const { getIsVisited } = useVisit(visitedKey);
+
  const caseDetailInfo = ref<Record<string, any>>({
    request: {},
    fileList: [],
@ -56,6 +61,7 @@
  const isEdit = computed(() => !!route.query.id);

  const isContinueFlag = ref(false);
+  const isShowTip = ref<boolean>(true);

  async function save() {
    try {
@ -69,6 +75,12 @@
      }
      router.push({ name: FeatureTestRouteEnum.FEATURE_TEST_CASE, query: { ...route.query } });
      featureCaseStore.setIsAlreadySuccess(true);
+      isShowTip.value = !getIsVisited();
+      if (isShowTip.value) {
+        router.push({
+          name: FeatureTestRouteEnum.FEATURE_TEST_CASE_CREATE_SUCCESS,
+        });
+      }
    } catch (error) {
      console.log(error);
    } finally {
--- a/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue
@ -0,0 +1,141 @@
+<template>
+  <MsCard simple>
+    <div class="h-full">
+      <div class="mt-8 text-center">
+        <div class="flex justify-center"><svg-icon :width="'60px'" :height="'60px'" :name="'success'" /></div>
+        <div class="mb-2 mt-6 text-[20px] font-medium"> {{ t('featureTest.featureCase.editSuccess') }} </div>
+        <div
+          ><span class="mr-1 text-[rgb(var(--primary-5))]">{{ countDown }}</span
+          ><span class="text-[var(--color-text-4)]">{{ t('featureTest.featureCase.countDownTip') }}</span></div
+        >
+        <div class="my-6">
+          <a-button type="primary"> {{ t('featureTest.featureCase.caseDetail') }} </a-button>
+          <a-button class="mx-3" type="outline" @click="continueCreate">
+            {{ t('featureTest.featureCase.addContinueCreate') }}
+          </a-button>
+          <a-button type="secondary" @click="backCaseList"> {{ t('featureTest.featureCase.backCaseList') }} </a-button>
+        </div>
+        <a-checkbox v-model="isNextTip" class="mb-6">{{ t('featureTest.featureCase.notNextTip') }}</a-checkbox>
+      </div>
+      <div>
+        <div class="mb-4 font-medium">{{ t('featureTest.featureCase.mightWantTo') }}</div>
+        <MsCardList
+          mode="static"
+          :card-min-width="569"
+          class="flex-1"
+          :shadow-limit="50"
+          :list="cardList"
+          :is-proportional="false"
+          :gap="16"
+          padding-bottom-space="16px"
+        >
+          <template #item="{ item }">
+            <div class="outerWrapper p-[3px]">
+              <div class="innerWrapper flex items-center justify-between">
+                <div class="flex items-center">
+                  <div class="logo-img flex h-[48px] w-[48px] items-center justify-center">
+                    <svg-icon width="36px" height="36px" :name="item.key"></svg-icon>
+                  </div>
+                  <div class="ml-2"> {{ item.name }} </div>
+                </div>
+
+                <a-button type="outline"> {{ t('featureTest.featureCase.addContinueCreate') }} </a-button>
+              </div>
+            </div>
+          </template>
+        </MsCardList>
+      </div>
+    </div>
+  </MsCard>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsCardList from '@/components/business/ms-card-list/index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+  import useVisit from '@/hooks/useVisit';
+
+  import { FeatureTestRouteEnum } from '@/enums/routeEnum';
+
+  const { t } = useI18n();
+
+  const visitedKey = 'doNotNextTipCreateCase';
+  const { addVisited } = useVisit(visitedKey);
+
+  const router = useRouter();
+  const cardList = ref([
+    {
+      key: 'testPlanTemplate',
+      name: t('featureTest.featureCase.createTestPlan'),
+    },
+    {
+      key: 'caseReview',
+      name: t('featureTest.featureCase.createCaseReview'),
+    },
+  ]);
+
+  const isNextTip = ref<boolean>(false);
+  const countDown = ref<number>(5);
+  const timer = ref<any>(null);
+  function setCountdown() {
+    timer.value = setInterval(() => {
+      if (countDown.value > 1) {
+        --countDown.value;
+      } else {
+        clearInterval(timer.value);
+        router.push({
+          name: FeatureTestRouteEnum.FEATURE_TEST_CASE,
+        });
+      }
+    }, 1000);
+  }
+
+  function isDoNotShowAgainChecked() {
+    if (isNextTip.value) {
+      addVisited();
+    }
+  }
+
+  // 返回用例列表
+  function backCaseList() {
+    router.push({
+      name: FeatureTestRouteEnum.FEATURE_TEST_CASE,
+    });
+  }
+
+  // 继续创建
+  function continueCreate() {
+    router.push({
+      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
+    });
+  }
+
+  watch(
+    () => isNextTip.value,
+    () => {
+      isDoNotShowAgainChecked();
+    }
+  );
+
+  onMounted(() => {
+    setCountdown();
+  });
+</script>
+
+<style scoped lang="less">
+  .outerWrapper {
+    box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
+    @apply rounded bg-white;
+    .innerWrapper {
+      background: var(--color-bg-3);
+      @apply rounded p-6;
+      .logo-img {
+        @apply mr-3 flex items-center bg-white;
+      }
+    }
+  }
+</style>
--- a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
@ -36,7 +36,7 @@
                :data="caseTree"
                :keyword="groupKeyword"
                :expand-all="isExpandAll"
-                :empty-text="t('featureTest.featureCase.caseEmptyContent')"
+                :empty-text="t('featureTest.featureCase.caseEmptyRecycle')"
                draggable
                :virtual-list-props="virtualListProps"
                block-node
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@ -234,6 +234,12 @@
    });
  }

+  function test() {
+    router.push({
+      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_CREATE_SUCCESS,
+    });
+  }
+
  // 设置默认选中状态
  router.beforeEach((to: any, from: any, next) => {
    const routeEnumValues = Object.values(FeatureTestRouteEnum);
--- a/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
@ -110,4 +110,12 @@ export default {
  'featureTest.featureCase.pleaseEnterInputTags': 'Please enter content Enter add label',
  'featureTest.featureCase.copy': 'Copy',
  'featureTest.featureCase.copyCase': 'Copy case',
+  'featureTest.featureCase.countDownTip': 'Seconds after back in case list, also can manually back in case list',
+  'featureTest.featureCase.caseDetail': 'Case details',
+  'featureTest.featureCase.addContinueCreate': 'Continue to create',
+  'featureTest.featureCase.backCaseList': 'Back',
+  'featureTest.featureCase.notNextTip': 'Next time no longer remind',
+  'featureTest.featureCase.mightWantTo': 'You might want to',
+  'featureTest.featureCase.createTestPlan': 'Create a test plan',
+  'featureTest.featureCase.createCaseReview': 'Create use case reviews',
 };
--- a/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
@ -7,6 +7,7 @@ export default {
  'featureTest.featureCase.allCase': '全部用例',
  'featureTest.featureCase.searchTip': '请输入分组名称',
  'featureTest.featureCase.caseEmptyContent': '暂无用例数据，请点击上方按钮创建或导入',
+  'featureTest.featureCase.caseEmptyRecycle': '暂无用例数据',
  'featureTest.featureCase.addSubModule': '添加子模块',
  'featureTest.featureCase.rename': '重命名',
  'featureTest.featureCase.recycle': '回收站',
@ -108,4 +109,12 @@ export default {
  'featureTest.featureCase.pleaseEnterInputTags': '请输入内容回车添加标签',
  'featureTest.featureCase.copy': '复制',
  'featureTest.featureCase.copyCase': '复制用例',
+  'featureTest.featureCase.countDownTip': '秒后回到用例列表，也可以手动回到用例列表',
+  'featureTest.featureCase.caseDetail': '用例详情',
+  'featureTest.featureCase.addContinueCreate': '继续创建',
+  'featureTest.featureCase.backCaseList': '回到用例列表',
+  'featureTest.featureCase.notNextTip': '下次不再提醒',
+  'featureTest.featureCase.mightWantTo': '你可能还想',
+  'featureTest.featureCase.createTestPlan': '创建测试计划',
+  'featureTest.featureCase.createCaseReview': '创建用例评审',
 };