fix(测试计划): 部分 bug 修复

2024-05-24 16:46:37 +08:00 · 2024-05-24 16:46:37 +08:00 · 5e170ed146
parent 8366bf33e3
commit 5e170ed146
20 changed files with 301 additions and 154 deletions
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@ -765,97 +765,6 @@
  }
 }

-/** 分页 **/
-.ms-pagination {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 16px;
-  &-list {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-  &-jumper {
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    border-radius: var(--border-radius-small);
-    background: var(--color-text-n9);
-    gap: 8px;
-    .ms-pagination-jumper-input {
-      padding: 3px 8px;
-      width: 57px;
-      border: 1px solid var(--color-text-input-border);
-      border-radius: var(--border-radius-small);
-      color: var(--color-text-1);
-      background: var(--color-text-10);
-      box-sizing: border-box;
-      input {
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        height: 22px;
-        text-align: center;
-      }
-    }
-    &-text-goto,
-    &-total-page {
-      color: var(--color-text-2);
-    }
-  }
-  &-total {
-    color: var(--color-text-2);
-  }
-  &-options {
-    margin-left: 14px;
-  }
-  &-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 5px 10px;
-    min-width: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    cursor: pointer;
-    &-previous {
-      margin-left: 14px;
-    }
-    &-ellipsis {
-      padding: 5px 0;
-    }
-    &-ellipsis:hover {
-      min-width: 32px;
-      height: 32px;
-    }
-    &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
-      border: 1px solid var(--color-text-input-border);
-      border-radius: 3px;
-    }
-    &-active {
-      border-color: rgb(var(--primary-5)) !important;
-      color: rgb(var(--primary-5)) !important;
-      background-color: rgb(var(--primary-1)) !important;
-    }
-  }
-  &-simple {
-    &-jumper {
-      display: flex;
-      align-items: center;
-    }
-  }
-  &-size-mini {
-    font-size: 12px;
-    line-height: 16px;
-    .ms-pagination-item {
-      height: 24px;
-    }
-    .ms-pagination-jumper-input {
-      padding: 0;
-    }
-  }
-}
-
 /** 折叠面板样式 **/
 .arco-collapse {
  padding: 0;
--- a/frontend/src/components/business/ms-case-associate/index.vue
+++ b/frontend/src/components/business/ms-case-associate/index.vue
@ -125,7 +125,16 @@
            </div>
          </template>
        </MsAdvanceFilter>
-        <ms-base-table v-bind="propsRes" no-disable class="mt-[16px]" v-on="propsEvent">
+        <ms-base-table
+          v-bind="propsRes"
+          :action-config="{
+            baseAction: [],
+            moreAction: [],
+          }"
+          no-disable
+          class="mt-[16px]"
+          v-on="propsEvent"
+        >
          <template #num="{ record }">
            <a-tooltip :content="`${record.num}`">
              <a-button type="text" class="px-0" @click="openDetail(record.id)">
@ -682,6 +691,7 @@
        innerProject.value = projectList.value[0].id;
      }
    } catch (error) {
+      // eslint-disable-next-line no-console
      console.log(error);
    }
  }
--- a/frontend/src/components/pure/ms-description/index.vue
+++ b/frontend/src/components/pure/ms-description/index.vue
@ -18,27 +18,41 @@
      <div class="ms-description-item-label" :style="{ width: props.labelWidth || '120px' }">
        <slot name="item-label">{{ item.label }}</slot>
      </div>
-      <div :class="item.isTag ? 'ms-description-item-value--tagline' : 'ms-description-item-value'">
+      <div :class="getValueClass(item)">
        <slot name="item-value" :item="item">
          <template v-if="item.isTag">
            <slot name="tag" :item="item">
-              <a-tooltip
-                v-for="tag of Array.isArray(item.value) ? item.value : [item.value]"
-                :key="`${tag}`"
-                :content="(tag as string)"
-              >
-                <MsTag
-                  :theme="item.tagTheme || 'outline'"
-                  :type="item.tagType || 'primary'"
-                  :max-width="item.tagMaxWidth"
-                  color="var(--color-text-n8)"
-                  :class="`mb-[8px] mr-[8px] font-normal !text-[var(--color-text-1)] ${item.tagClass || ''}`"
-                  :closable="item.closable"
-                  @close="emit('tagClose', tag, item)"
-                >
-                  {{ tag }}
-                </MsTag>
-              </a-tooltip>
+              <div class="w-[280px] overflow-hidden">
+                <a-overflow-list>
+                  <MsTag
+                    v-for="tag of Array.isArray(item.value) ? item.value : [item.value]"
+                    :key="`${tag}`"
+                    :theme="item.tagTheme || 'outline'"
+                    :type="item.tagType || 'primary'"
+                    :max-width="item.tagMaxWidth"
+                    color="var(--color-text-n8)"
+                    :class="`mr-[8px] font-normal !text-[var(--color-text-1)] ${item.tagClass || ''}`"
+                    :closable="item.closable"
+                    @close="emit('tagClose', tag, item)"
+                  >
+                    {{ tag }}
+                  </MsTag>
+                  <template #overflow="{ number }">
+                    <a-tooltip :content="(Array.isArray(item.value) ? item.value : [item.value]).join('，')">
+                      <MsTag
+                        :theme="item.tagTheme || 'outline'"
+                        :type="item.tagType || 'primary'"
+                        :max-width="item.tagMaxWidth"
+                        color="var(--color-text-n8)"
+                        :class="`font-normal !text-[var(--color-text-1)] ${item.tagClass || ''}`"
+                        tooltip-disabled
+                      >
+                        +{{ number }}
+                      </MsTag>
+                    </a-tooltip>
+                  </template>
+                </a-overflow-list>
+              </div>
              <span v-if="!item.showTagAdd" v-show="Array.isArray(item.value) && item.value.length === 0">-</span>
              <div v-else>
                <template v-if="showTagInput">
@ -81,7 +95,16 @@
          </MsButton>
          <template v-else>
            <slot name="value" :item="item">
-              {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
+              <a-tooltip
+                :content="`${item.value}`"
+                :disabled="item.value === undefined || item.value === null || item.value?.toString() === ''"
+              >
+                <div>
+                  {{
+                    item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value
+                  }}
+                </div>
+              </a-tooltip>
            </slot>
            <template v-if="item.showCopy">
              <MsButton
@ -144,6 +167,7 @@
      column?: number;
      descriptions: Description[];
      labelWidth?: string;
+      oneLineValue?: boolean;
      addTagFunc?: (val: string, item: Description) => Promise<void>;
    }>(),
    {
@ -158,6 +182,16 @@
  const { t } = useI18n();
  const { copy } = useClipboard();

+  function getValueClass(item: Description) {
+    if (item.isTag) {
+      return 'ms-description-item-value--tagline';
+    }
+    if (props.oneLineValue) {
+      return 'ms-description-item-value ms-description-item-value--one-line';
+    }
+    return 'ms-description-item-value';
+  }
+
  async function copyValue(item: Description) {
    try {
      await copy(Array.isArray(item.value) ? item.value.join(',') : item.value.toString());
@ -256,5 +290,8 @@
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
+    .ms-description-item-value--one-line {
+      -webkit-line-clamp: 1;
+    }
  }
 </style>
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/frontend/src/components/pure/ms-drawer/index.vue
@ -68,7 +68,16 @@
        >
          <template #value="{ item }">
            <slot name="descValue" :item="item">
-              {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
+              <a-tooltip
+                :content="`${item.value}`"
+                :disabled="item.value === undefined || item.value === null || item.value?.toString() === ''"
+              >
+                <div>
+                  {{
+                    item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value
+                  }}
+                </div>
+              </a-tooltip>
            </slot>
          </template>
        </MsDescription>
@ -312,7 +321,7 @@
      @apply h-full w-full overflow-auto;
      .ms-scroll-bar();

-      min-width: 650px;
+      min-width: 448px; // 480 - 左右边距 32
      min-height: 500px;
    }
    .arco-scrollbar-track-direction-vertical {
--- a/frontend/src/components/pure/ms-pagination/pagination.tsx
+++ b/frontend/src/components/pure/ms-pagination/pagination.tsx
@ -6,6 +6,7 @@ import PageOptions from './page-options.vue';

 import { useI18n } from '@/hooks/useI18n';

+import './style.less';
 import type { PageItemType } from './interface';
 import { Size } from './types';
 import useSize from './useSize';
@ -78,6 +79,14 @@ export default defineComponent({
      type: Boolean,
      default: false,
    },
+    /**
+     * @zh 是否为简单模式且无页码按钮只有页码跳转
+     * @en Whether it is simple mode
+     */
+    simpleOnlyJumper: {
+      type: Boolean,
+      default: false,
+    },
    /**
     * @zh 是否显示数据总数
     * @en Whether to display the total number of data
@ -329,13 +338,28 @@ export default defineComponent({
      return (
        <ul class={`${prefixCls}-list`}>
          {getPageItemElement('previous', { simple: true })}
-          {pageList.value}
-          {props.showMore &&
+          {!props.simpleOnlyJumper && pageList.value}
+          {props.simpleOnlyJumper ? (
+            <PageJumper
+              v-slots={{
+                'jumper-prepend': slots['jumper-prepend'],
+                'jumper-append': slots['jumper-append'],
+              }}
+              simple
+              disabled={props.disabled}
+              current={computedCurrent.value}
+              pages={pages.value}
+              size={mergedSize.value}
+              onChange={handleClick}
+            />
+          ) : (
+            props.showMore &&
            !props.simple &&
            getPageItemElement('more', {
              key: 'more',
              step: props.bufferSize * 2 + 1,
-            })}
+            })
+          )}
          {getPageItemElement('next', { simple: true })}
        </ul>
      );
@ -380,12 +404,12 @@ export default defineComponent({

      return (
        <div class={cls.value}>
-          {props.showTotal && !props.simple && (
+          {props.showTotal && !props.simple && !props.simpleOnlyJumper && (
            <span class={`${prefixCls}-total`}>
              {slots.total?.({ total: props.total }) ?? t('msPagination.total', { total: props.total })}
            </span>
          )}
-          {props.showPageSize && !props.simple && (
+          {props.showPageSize && !props.simple && !props.simpleOnlyJumper && (
            <PageOptions
              disabled={props.disabled}
              sizeOptions={props.pageSizeOptions}
@ -396,7 +420,7 @@ export default defineComponent({
            />
          )}
          {renderPager()}
-          {!props.simple && !props.simple && props.showJumper && (
+          {!props.simple && props.showJumper && !props.simpleOnlyJumper && (
            <PageJumper
              v-slots={{
                'jumper-prepend': slots['jumper-prepend'],
--- a/frontend/src/components/pure/ms-pagination/style.less
+++ b/frontend/src/components/pure/ms-pagination/style.less
@ -0,0 +1,89 @@
+/** 分页 **/
+.ms-pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  &-list {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+  &-jumper {
+    display: flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: var(--border-radius-small);
+    background: var(--color-text-n9);
+    gap: 8px;
+    .ms-pagination-jumper-input {
+      padding: 3px 8px;
+      width: 57px;
+      border: 1px solid var(--color-text-input-border);
+      border-radius: var(--border-radius-small);
+      color: var(--color-text-1);
+      background: var(--color-text-10);
+      box-sizing: border-box;
+      input {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        text-align: center;
+      }
+    }
+    &-text-goto,
+    &-total-page {
+      color: var(--color-text-2);
+    }
+  }
+  &-total {
+    color: var(--color-text-2);
+  }
+  &-options {
+    margin-left: 14px;
+  }
+  &-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    min-width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    &-previous {
+      margin-left: 14px;
+    }
+    &-ellipsis {
+      padding: 5px 0;
+    }
+    &-ellipsis:hover {
+      min-width: 32px;
+      height: 32px;
+    }
+    &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
+      border: 1px solid var(--color-text-input-border);
+      border-radius: 3px;
+    }
+    &-active {
+      border-color: rgb(var(--primary-5)) !important;
+      color: rgb(var(--primary-5)) !important;
+      background-color: rgb(var(--primary-1)) !important;
+    }
+  }
+  &-simple {
+    &-jumper {
+      display: flex;
+      align-items: center;
+    }
+  }
+  &-size-mini {
+    font-size: 12px;
+    line-height: 16px;
+    .ms-pagination-item {
+      height: 24px;
+    }
+    .ms-pagination-jumper-input {
+      padding: 0;
+    }
+  }
+}
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@ -90,7 +90,7 @@ export default function useTableProps<T>(
  const sortItem = ref<object>({});

  // 筛选
-  const filterItem = ref<object>({});
+  const filterItem = ref<Record<string, any>>({});

  // keyword
  const keyword = ref('');
@ -377,6 +377,7 @@ export default function useTableProps<T>(
        filterItem.value = { ...getTableQueryParams().filter, [dataIndex]: filteredValues };
      }
      propsRes.value.filter = cloneDeep(filterItem.value);
+      propsRes.value.draggable = (filterItem.value[dataIndex] || []).length > 0 ? undefined : props?.draggable;
      loadList();
    },
    // 分页触发
--- a/frontend/src/components/pure/ms-tag/ms-tag.vue
+++ b/frontend/src/components/pure/ms-tag/ms-tag.vue
@ -14,9 +14,14 @@
    @close="emit('close')"
  >
    <slot name="icon"></slot>
-    <div class="one-line-text">
-      <slot></slot>
-    </div>
+    <a-tooltip :disabled="props.tooltipDisabled">
+      <div class="one-line-text">
+        <slot></slot>
+      </div>
+      <template #content>
+        <slot></slot>
+      </template>
+    </a-tooltip>
  </a-tag>
 </template>

@ -39,6 +44,7 @@
      maxWidth?: string;
      noMargin?: boolean; // tag之间是否有间距
      closable?: boolean; // 是否可关闭
+      tooltipDisabled?: boolean; // 是否禁用tooltip
    }>(),
    {
      type: 'default',
--- a/frontend/src/views/api-test/management/components/management/api/index.vue
+++ b/frontend/src/views/api-test/management/components/management/api/index.vue
@ -103,6 +103,7 @@
            :api-detail="activeApiTab"
            :offspring-ids="props.offspringIds"
            :member-options="memberOptions"
+            :height-used="48"
          />
        </a-tab-pane>
        <a-tab-pane
@ -116,6 +117,7 @@
            :offspring-ids="props.offspringIds"
            :definition-detail="activeApiTab"
            :protocol="activeApiTab.protocol"
+            :height-used="48"
            is-api
            @debug="openApiTabAndDebugMock"
          />
--- a/frontend/src/views/api-test/management/components/management/case/caseTable.vue
+++ b/frontend/src/views/api-test/management/components/management/case/caseTable.vue
@ -336,6 +336,7 @@
    apiDetail?: RequestParam;
    offspringIds: string[];
    memberOptions: { label: string; value: string }[];
+    heightUsed?: number;
  }>();

  const caseExecute = ref(false);
@ -540,7 +541,7 @@
    draggable: hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ+UPDATE'])
      ? { type: 'handle', width: 32 }
      : undefined,
-    heightUsed: 282,
+    heightUsed: (props.heightUsed || 0) + 282,
    showSubdirectory: true,
    paginationSize: 'mini',
  });
--- a/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
+++ b/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
@ -199,7 +199,6 @@
 <script setup lang="ts">
  import { useClipboard } from '@vueuse/core';
  import { FormInstance, Message } from '@arco-design/web-vue';
-  import dayjs from 'dayjs';

  import MsButton from '@/components/pure/ms-button/index.vue';
  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@ -241,6 +240,7 @@
    definitionDetail: RequestParam;
    readOnly?: boolean; // 是否是只读模式
    protocol: string; // 查看的协议类型
+    heightUsed?: number;
  }>();
  const emit = defineEmits<{
    (e: 'init', params: any): void;
@ -332,23 +332,18 @@
      width: 200,
    },
  ];
-  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
-    getDefinitionMockPage,
-    {
-      columns: props.readOnly ? columns : [],
-      scroll: { x: '100%' },
-      tableKey: props.readOnly ? undefined : TableKeyEnum.API_TEST_MANAGEMENT_MOCK,
-      showSetting: !props.readOnly,
-      selectable: true,
-      showSelectAll: !props.readOnly,
-      draggable: props.readOnly ? undefined : { type: 'handle', width: 32 },
-      showSubdirectory: true,
-    },
-    (item) => ({
-      ...item,
-      updateTime: dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss'),
-    })
-  );
+  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(getDefinitionMockPage, {
+    columns: props.readOnly ? columns : [],
+    scroll: { x: '100%' },
+    tableKey: props.readOnly ? undefined : TableKeyEnum.API_TEST_MANAGEMENT_MOCK,
+    showSetting: !props.readOnly,
+    selectable: true,
+    heightUsed: (props.heightUsed || 0) + 282,
+    showSelectAll: !props.readOnly,
+    draggable: props.readOnly ? undefined : { type: 'handle', width: 32 },
+    showSubdirectory: true,
+    paginationSize: 'mini',
+  });
  const batchActions = {
    baseAction: [
      {
--- a/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue
@ -2,8 +2,8 @@
  <MsDrawer
    v-model:visible="visible"
    :width="680"
-    :title="t('apiScenario.quoteCsv')"
-    :ok-text="t('common.quote')"
+    :title="props.isSingle ? t('apiScenario.replaceCsv') : t('apiScenario.quoteCsv')"
+    :ok-text="props.isSingle ? t('common.replace') : t('common.quote')"
    :ok-disabled="propsRes.selectedKeys.size === 0 && !selectedKey"
    @confirm="handleConfirm"
    @close="handleClose"
@ -13,8 +13,8 @@
        {{ record.scope === 'SCENARIO' ? t('apiScenario.scenario') : t('apiScenario.step') }}
      </template>
      <template #file="{ record }">
-        <a-tooltip :content="record.file?.name">
-          <div>{{ record.file?.name || '-' }}</div>
+        <a-tooltip :content="record.file?.fileAlias">
+          <div>{{ record.file?.fileAlias || '-' }}</div>
        </a-tooltip>
      </template>
    </MsBaseTable>
--- a/frontend/src/views/api-test/scenario/components/step/stepTree.vue
+++ b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
@ -899,6 +899,7 @@
      } else if (realStep !== null) {
        realStep.csvIds = [...(realStep.csvIds || []), ...keys];
      }
+      scenario.value.unSaved = true;
    }
  }

--- a/frontend/src/views/api-test/scenario/locale/en-US.ts
+++ b/frontend/src/views/api-test/scenario/locale/en-US.ts
@ -280,6 +280,7 @@ export default {
  'apiScenario.confirmChange': 'Confirm changes',
  'apiScenario.changeScopeSuccess': 'Change successful',
  'apiScenario.quoteCsv': 'Quote CSV',
+  'apiScenario.replaceCsv': 'Replace CSV',
  'apiScenario.csvQuote': 'CSV quote',
  'apiScenario.csvNameNotNull': 'CSV name cannot be empty',
  'apiScenario.csvFileNotNull': 'CSV file cannot be empty',
--- a/frontend/src/views/api-test/scenario/locale/zh-CN.ts
+++ b/frontend/src/views/api-test/scenario/locale/zh-CN.ts
@ -274,6 +274,7 @@ export default {
  'apiScenario.confirmChange': '确认更改',
  'apiScenario.changeScopeSuccess': '已更改',
  'apiScenario.quoteCsv': '引用 CSV',
+  'apiScenario.replaceCsv': '替换 CSV',
  'apiScenario.csvQuote': 'CSV 引用',
  'apiScenario.csvNameNotNull': 'CSV 名称不能为空',
  'apiScenario.csvFileNotNull': 'CSV 文件不能为空',
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue
@ -28,7 +28,15 @@
      </div>
    </div>
    <div>
-      <ms-base-table ref="tableRef" v-bind="propsRes" v-on="propsEvent">
+      <ms-base-table
+        ref="tableRef"
+        v-bind="propsRes"
+        :action-config="{
+          baseAction: [],
+          moreAction: [],
+        }"
+        v-on="propsEvent"
+      >
        <template #name="{ record }">
          <span class="one-line-text max-w-[300px]"> {{ record.name }}</span>
          <a-popover title="" position="right" style="width: 480px">
--- a/frontend/src/views/case-management/caseReview/caseDetail.vue
+++ b/frontend/src/views/case-management/caseReview/caseDetail.vue
@ -78,7 +78,8 @@
            v-model:current="pageNation.current"
            :total="pageNation.total"
            size="mini"
-            simple
+            show-jumper
+            simple-only-jumper
            @change="loadCaseList"
            @page-size-change="loadCaseList"
          />
--- a/frontend/src/views/test-plan/report/component/reportList.vue
+++ b/frontend/src/views/test-plan/report/component/reportList.vue
@ -239,9 +239,9 @@
      showInTable: true,
      width: 150,
      showDrag: true,
-      filterConfig: {
-        options: triggerModeOptions.value,
-      },
+      // filterConfig: {
+      //   options: triggerModeOptions.value,
+      // },
    },
    {
      title: 'report.operator',
--- a/frontend/src/views/test-plan/testPlan/createAndEditPlanDrawer.vue
+++ b/frontend/src/views/test-plan/testPlan/createAndEditPlanDrawer.vue
@ -63,6 +63,8 @@
          :time-picker-props="{
            defaultValue: ['00:00:00', '00:00:00'],
          }"
+          :disabled-time="disabledTime"
+          @select="handleTimeSelect"
        />
      </a-form-item>
      <a-form-item field="tags" :label="t('common.tag')" class="w-[436px]">
@ -134,6 +136,7 @@
  import { ref } from 'vue';
  import { FormInstance, Message, TreeNodeData, ValidatedError } from '@arco-design/web-vue';
  import { cloneDeep } from 'lodash-es';
+  import dayjs from 'dayjs';

  import MsButton from '@/components/pure/ms-button/index.vue';
  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
@ -149,6 +152,8 @@
  import type { AddTestPlanParams, AssociateCaseRequest, SwitchListModel } from '@/models/testPlan/testPlan';
  import { testPlanTypeEnum } from '@/enums/testPlanEnum';

+  import { DisabledTimeProps } from '@arco-design/web-vue/es/date-picker/interface';
+
  const props = defineProps<{
    planId?: string;
    moduleTree?: ModuleTreeNode[];
@ -190,6 +195,53 @@
    return (nodeData as ModuleTreeNode).name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
  }

+  const tempRange = ref<(Date | string | number | undefined)[]>([]);
+
+  function makeLessNumbers(value: number) {
+    const res = [];
+    for (let i = 0; i < value; i++) {
+      res.push(i);
+    }
+    return res;
+  }
+
+  function disabledTime(current: Date, type: 'start' | 'end'): DisabledTimeProps {
+    if (type === 'end') {
+      const currentDate = dayjs(current);
+      const startDate = dayjs(tempRange.value[0]);
+      // 结束时间至少比开始时间多一秒
+      return {
+        disabledHours: () => {
+          if (currentDate.isSame(startDate, 'D')) {
+            return makeLessNumbers(startDate.get('h'));
+          }
+          return [];
+        },
+        disabledMinutes: () => {
+          if (currentDate.isSame(startDate, 'D') && currentDate.isSame(startDate, 'h')) {
+            return makeLessNumbers(startDate.get('m'));
+          }
+          return [];
+        },
+        disabledSeconds: () => {
+          if (
+            currentDate.isSame(startDate, 'D') &&
+            currentDate.isSame(startDate, 'h') &&
+            currentDate.isSame(startDate, 'm')
+          ) {
+            return makeLessNumbers(startDate.get('s'));
+          }
+          return [];
+        },
+      };
+    }
+    return {};
+  }
+
+  function handleTimeSelect(value: (Date | string | number | undefined)[]) {
+    tempRange.value = value;
+  }
+
  const switchList: SwitchListModel[] = [
    {
      key: 'repeatCase',
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
@ -50,7 +50,8 @@
            v-model:current="pageNation.current"
            :total="pageNation.total"
            size="mini"
-            simple
+            show-jumper
+            simple-only-jumper
            @change="loadCaseList"
            @page-size-change="loadCaseList"
          />
@ -84,7 +85,7 @@
          class="relative mx-[16px] border-b"
        />
        <div :class="[' flex-1', activeTab !== 'detail' ? 'tab-content' : 'overflow-hidden']">
-          <MsDescription v-if="activeTab === 'baseInfo'" :descriptions="descriptions" :column="2">
+          <MsDescription v-if="activeTab === 'baseInfo'" :descriptions="descriptions" :column="2" one-line-value>
            <template #value="{ item }">
              <template v-if="item.key === 'reviewStatus'">
                <MsIcon
@ -230,7 +231,6 @@
  import { getBugList } from '@/api/modules/bug-management';
  import {
    associateBugToPlan,
-    associatedBugPage,
    getCaseDetail,
    getPlanDetailFeatureCaseList,
    getTestPlanDetail,