refactor(表格组件): 行高调整&排序圆角

metersphere · May 11, 2024 · 65f0437 · 65f0437
1 parent af684b2
commit 65f0437
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 95 deletions.
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
@@ -417,7 +417,7 @@
   .arco-checkbox-icon-check {
     @apply text-white;
 
-    background-color: rgb(var(--primary-5));
+    background-color: rgb(var(--primary-6));
   }
 }
 .arco-checkbox {

diff --git a/frontend/src/components/business/ms-menu/index.vue b/frontend/src/components/business/ms-menu/index.vue
@@ -608,6 +608,7 @@
 
       top: 24px;
       right: -12px;
+      z-index: 101;
       border: 1px solid #ffffff;
       background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
       box-shadow: 0 0 7px rgb(15 0 78 / 9%);

diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
@@ -80,11 +80,15 @@
           :title="item.slotName"
         >
           <template #title>
-            <div :class="{ 'flex w-full flex-row flex-nowrap items-center gap-[4px]': !item.align }">
+            <div
+              :class="{
+                'flex w-full flex-row flex-nowrap items-center gap-[4px]': !item.align,
+              }"
+            >
               <slot :name="item.titleSlotName" :column-config="item">
-                <div v-if="item.title" class="title-name pl-1 text-[var(--color-text-3)]">{{
-                  t(item.title as string)
-                }}</div>
+                <div v-if="item.title" class="title-name pl-1 text-[var(--color-text-3)]">
+                  {{ t(item.title as string) }}
+                </div>
               </slot>
               <columnSelectorIcon
                 v-if="
@@ -662,6 +666,13 @@
       color: rgb(var(--primary-7));
       opacity: 0;
     }
+    :deep(.arco-table-cell) {
+      padding: 8px 16px;
+    }
+    :deep(.arco-table-td) {
+      line-height: normal;
+      height: 48px;
+    }
     :deep(.arco-table-cell-align-left) {
       .arco-table-td-content {
         @apply flex items-center;
@@ -803,11 +814,13 @@
     @apply bg-white;
   }
   :deep(.arco-table-cell-with-sorter) {
+    @apply !p-0;
+
+    margin: 8px 16px;
     &:hover {
       @apply bg-white;
     }
     .arco-table-sorter {
-      padding: 3px 4px 3px 0;
       .arco-table-sorter-icon {
         &::before {
           content: '';
@@ -840,16 +853,18 @@
   }
   :deep(.arco-table-col-sorted) .arco-table-cell-with-sorter {
     width: fit-content;
+    border-radius: var(--border-radius-small);
     background: rgb(var(--primary-1)) content-box;
-    .arco-table-th-title .title-name {
-      color: rgb(var(--primary-5));
+    .arco-table-th-title {
+      .title-name {
+        color: rgb(var(--primary-5));
+      }
     }
   }
   :deep(.header-cell-filter) {
     .arco-table-cell-with-filter {
       float: left;
       .arco-table-th-title {
-        border-radius: 4px;
         background: rgb(var(--primary-1)) content-box;
         .filter-icon {
           color: rgb(var(--primary-5)) !important;

diff --git a/frontend/src/views/api-test/management/components/management/api/apiTable.vue b/frontend/src/views/api-test/management/components/management/api/apiTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="['p-[0_16px_8px_16px]', props.class]">
-    <div class="mb-[8px] flex items-center justify-end">
+    <div class="mb-[16px] flex items-center justify-end">
       <div class="flex items-center gap-[8px]">
         <a-input-search
           v-model:model-value="keyword"
@@ -43,7 +43,7 @@
           <template #content>
             <div class="arco-table-filters-content">
               <div class="ml-[6px] flex items-center justify-start px-[6px] py-[2px]">
-                <a-checkbox-group v-model:model-value="methodFilters" direction="vertical" size="small">
+                <a-checkbox-group v-model:model-value="methodFilters" direction="vertical">
                   <a-checkbox v-for="key of RequestMethods" :key="key" :value="key">
                     <apiMethodName :method="key" />
                   </a-checkbox>
@@ -74,7 +74,7 @@
           <template #content>
             <div class="arco-table-filters-content">
               <div class="ml-[6px] flex items-center justify-start px-[6px] py-[2px]">
-                <a-checkbox-group v-model:model-value="statusFilters" direction="vertical" size="small">
+                <a-checkbox-group v-model:model-value="statusFilters" direction="vertical">
                   <a-checkbox v-for="val of Object.values(RequestDefinitionStatus)" :key="val" :value="val">
                     <apiStatus :status="val" />
                   </a-checkbox>
@@ -104,13 +104,13 @@
           @change="() => handleMethodChange(record)"
         >
           <template #label>
-            <apiMethodName :method="record.method" tag-size="small" is-tag />
+            <apiMethodName :method="record.method" is-tag />
           </template>
           <a-option v-for="item of Object.values(RequestMethods)" :key="item" :value="item">
-            <apiMethodName :method="item" tag-size="small" is-tag />
+            <apiMethodName :method="item" is-tag />
           </a-option>
         </a-select>
-        <apiMethodName v-else :method="record.method" tag-size="small" is-tag />
+        <apiMethodName v-else :method="record.method" is-tag />
       </template>
       <template #status="{ record }">
         <a-select
@@ -121,13 +121,13 @@
           @change="() => handleStatusChange(record)"
         >
           <template #label>
-            <apiStatus :status="record.status" size="small" />
+            <apiStatus :status="record.status" />
           </template>
           <a-option v-for="item of Object.values(RequestDefinitionStatus)" :key="item" :value="item">
-            <apiStatus :status="item" size="small" />
+            <apiStatus :status="item" />
           </a-option>
         </a-select>
-        <apiStatus v-else :status="record.status" size="small" />
+        <apiStatus v-else :status="record.status" />
       </template>
       <template #createUserFilter="{ columnConfig }">
         <TableFilter
@@ -517,7 +517,7 @@
       ]),
       showSelectAll: !props.readOnly,
       draggable: hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE']) ? { type: 'handle', width: 32 } : undefined,
-      heightUsed: 256,
+      heightUsed: 272,
       paginationSize: 'mini',
       showSubdirectory: true,
     },
@@ -1012,5 +1012,4 @@
       }
     }
   }
-  .ms-table--special-small();
 </style>
diff --git a/frontend/src/views/api-test/management/components/management/case/caseTable.vue b/frontend/src/views/api-test/management/components/management/case/caseTable.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="overflow-hidden p-[8px_22px]">
-    <div :class="['mb-[8px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
+  <div class="overflow-hidden p-[16px_22px]">
+    <div :class="['mb-[16px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
       <a-button
         v-show="props.isApi"
         v-permission="['PROJECT_API_DEFINITION_CASE:READ+ADD']"
@@ -57,7 +57,6 @@
           v-model:model-value="record.priority"
           :placeholder="t('common.pleaseSelect')"
           class="param-input w-full"
-          size="mini"
           @change="() => handleCaseLevelChange(record)"
         >
           <template #label>
@@ -102,17 +101,16 @@
           v-model:model-value="record.status"
           :placeholder="t('common.pleaseSelect')"
           class="param-input w-full"
-          size="mini"
           @change="() => handleStatusChange(record)"
         >
           <template #label>
-            <apiStatus :status="record.status" size="small" />
+            <apiStatus :status="record.status" />
           </template>
           <a-option v-for="item of Object.values(RequestCaseStatus)" :key="item" :value="item">
-            <apiStatus :status="item" size="small" />
+            <apiStatus :status="item" />
           </a-option>
         </a-select>
-        <apiStatus v-else :status="record.status" size="small" />
+        <apiStatus v-else :status="record.status" />
       </template>
       <template #statusFilter="{ columnConfig }">
         <a-trigger
@@ -605,7 +603,7 @@
     draggable: hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ+UPDATE'])
       ? { type: 'handle', width: 32 }
       : undefined,
-    heightUsed: 256,
+    heightUsed: 282,
     showSubdirectory: true,
     paginationSize: 'mini',
   });
@@ -1045,5 +1043,4 @@
       }
     }
   }
-  .ms-table--special-small();
 </style>
diff --git a/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue b/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue
@@ -89,7 +89,7 @@
             </a-form-item>
           </div> -->
             <div
-              v-if="matchRules.length > 1 && !props.disabled"
+              v-if="matchRules.length > 1 && !props.disabled && idx !== matchRules.length - 1"
               class="mt-[8px] flex h-full cursor-pointer items-start justify-center text-[var(--color-text-4)]"
               @click="handleDeleteItem(idx)"
             >

diff --git a/frontend/src/views/api-test/management/components/management/mock/mockTable.vue b/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="['p-[8px_22px]', props.class]">
-    <div :class="['mb-[8px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
+  <div :class="['p-[16px_22px]', props.class]">
+    <div :class="['mb-[16px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
       <a-button
         v-show="props.isApi"
         v-permission="['PROJECT_API_DEFINITION_MOCK:READ+ADD']"
@@ -44,7 +44,6 @@
       <template #enable="{ record }">
         <a-switch
           v-model="record.enable"
-          size="small"
           type="line"
           :before-change="() => handleBeforeEnableChange(record)"
         ></a-switch>

diff --git a/frontend/src/views/api-test/scenario/components/scenarioTable.vue b/frontend/src/views/api-test/scenario/components/scenarioTable.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="['p-[8px_16px]', props.class]">
-    <div class="mb-[8px] flex items-center justify-between">
+  <div :class="['p-[16px]', props.class]">
+    <div class="mb-[16px] flex items-center justify-between">
       <div class="flex items-center"> </div>
       <div class="items-right flex gap-[8px]">
         <a-input-search
@@ -44,7 +44,7 @@
           <template #content>
             <div class="arco-table-filters-content">
               <div class="ml-[6px] flex items-center justify-start px-[6px] py-[2px]">
-                <a-checkbox-group v-model:model-value="statusFilters" direction="vertical" size="small">
+                <a-checkbox-group v-model:model-value="statusFilters" direction="vertical">
                   <a-checkbox v-for="val of Object.values(ApiScenarioStatus)" :key="val" :value="val">
                     <apiStatus :status="val" />
                   </a-checkbox>
@@ -95,9 +95,9 @@
       </template>
       <template #num="{ record }">
         <div>
-          <MsButton type="text" class="float-left" style="margin-right: 4px" @click="openScenarioTab(record)">{{
-            record.num
-          }}</MsButton>
+          <MsButton type="text" class="float-left" style="margin-right: 4px" @click="openScenarioTab(record)">
+            {{ record.num }}
+          </MsButton>
           <div v-if="record.scheduleConfig && record.scheduleConfig.enable" class="float-right">
             <a-tooltip position="top">
               <template #content>
@@ -114,7 +114,6 @@
                 </span>
               </template>
               <a-tag
-                size="small"
                 style="border-color: #00c261; color: #00c261; background-color: transparent"
                 bordered
                 @click="openScheduleModal(record)"
@@ -125,7 +124,6 @@
           <div v-if="record.scheduleConfig && !record.scheduleConfig.enable" class="float-right">
             <a-tooltip :content="t('apiScenario.schedule.table.tooltip.disable')" position="top">
               <a-tag
-                size="small"
                 style="border-color: #d4d4d8; color: #323233; background-color: transparent"
                 bordered
                 @click="openScheduleModal(record)"
@@ -144,21 +142,20 @@
           @change="() => handleStatusChange(record)"
         >
           <template #label>
-            <apiStatus :status="record.status" size="small" />
+            <apiStatus :status="record.status" />
           </template>
           <a-option v-for="item of Object.values(ApiScenarioStatus)" :key="item" :value="item">
-            <apiStatus :status="item" size="small" />
+            <apiStatus :status="item" />
           </a-option>
         </a-select>
-        <apiStatus v-else :status="record.status" size="small" />
+        <apiStatus v-else :status="record.status" />
       </template>
       <template #priority="{ record }">
         <a-select
           v-if="hasAnyPermission(['PROJECT_API_SCENARIO:READ+UPDATE'])"
           v-model:model-value="record.priority"
           :placeholder="t('common.pleaseSelect')"
           class="param-input w-full"
-          size="mini"
           @change="() => handlePriorityStatusChange(record)"
         >
           <template #label>
@@ -647,7 +644,7 @@
     ApiScenarioTableItem,
     ApiScenarioUpdateDTO,
   } from '@/models/apiTest/scenario';
-  import { DragSortParams, type TableQueryParams } from '@/models/common';
+  import { DragSortParams } from '@/models/common';
   import { ResourcePoolItem } from '@/models/setting/resourcePool';
   import { ApiScenarioStatus } from '@/enums/apiEnum';
   import { ReportEnum, ReportStatus } from '@/enums/reportEnum';
@@ -900,7 +897,7 @@
       ]),
       showSelectAll: !props.readOnly,
       draggable: hasAnyPermission(['PROJECT_API_SCENARIO:READ+UPDATE']) ? { type: 'handle', width: 32 } : undefined,
-      heightUsed: 256,
+      heightUsed: 282,
       showSubdirectory: true,
       paginationSize: 'mini',
     },
@@ -1551,6 +1548,7 @@
       Message.success(t('caseManagement.featureCase.sortSuccess'));
       loadScenarioList();
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -1588,5 +1586,4 @@
       }
     }
   }
-  .ms-table--special-small();
 </style>