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

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 {

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%);

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)]">{{
+                <div v-if="item.title" class="title-name pl-1 text-[var(--color-text-3)]">
-                  t(item.title as string)
+                  {{ t(item.title as string) }}
-                }}</div>
+                </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 {
+    .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;

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>

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="overflow-hidden p-[16px_22px]">
-    <div :class="['mb-[8px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
+    <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>

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)"
             >

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="['p-[16px_22px]', props.class]">
-    <div :class="['mb-[8px]', 'flex', 'items-center', props.isApi ? 'justify-between' : 'justify-end']">
+    <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>

frontend/src/views/api-test/scenario/components/scenarioTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="['p-[8px_16px]', props.class]">
+  <div :class="['p-[16px]', props.class]">
-    <div class="mb-[8px] flex items-center justify-between">
+    <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)">{{
+          <MsButton type="text" class="float-left" style="margin-right: 4px" @click="openScenarioTab(record)">
-            record.num
+            {{ record.num }}
-          }}</MsButton>
+          </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,13 +142,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(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
@@ -158,7 +156,6 @@
           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>

frontend/src/views/bug-management/index.vue

@@ -27,7 +27,7 @@
         </template>
       </MsAdvanceFilter>
       <MsBaseTable
-        class="mt-[8px]"
+        class="mt-[16px]"
         v-bind="propsRes"
         :action-config="tableBatchActions"
         v-on="propsEvent"
@@ -36,12 +36,7 @@
       >
         <!-- ID -->
         <template #num="{ record, rowIndex }">
-          <a-button
+          <a-button type="text" class="px-0 text-[14px] leading-[22px]" @click="handleShowDetail(record.id, rowIndex)">
-            type="text"
-            class="px-0 text-[14px] leading-[22px]"
-            size="mini"
-            @click="handleShowDetail(record.id, rowIndex)"
-          >
             {{ record.num }}
           </a-button>
         </template>
@@ -67,9 +62,8 @@
             />
           </div>
         </template>
-
         <template #relationCaseCount="{ record, rowIndex }">
-          <a-button type="text" class="px-0" size="mini" @click="showDetail(record.id, rowIndex, 'case')">
+          <a-button type="text" class="px-0" @click="showDetail(record.id, rowIndex, 'case')">
             {{ record.relationCaseCount }}
           </a-button>
         </template>
@@ -501,7 +495,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
-      width: 130,
+      width: 140,
     },
   ];
 
@@ -513,7 +507,7 @@
         selectable: true,
         noDisable: false,
         showSetting: true,
-        heightUsed: 128,
+        heightUsed: 106,
         paginationSize: 'mini',
       },
       (record: TableData) => ({
@@ -644,6 +638,7 @@
       const { complete } = await getSyncStatus(appStore.currentProjectId);
       isComplete.value = complete;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   };
@@ -890,6 +885,7 @@
         }
       });
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }
@@ -923,5 +919,4 @@
   :deep(.arco-divider-vertical) {
     margin: 0 8px;
   }
-  .ms-table--special-small();
 </style>

frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue

@@ -40,7 +40,7 @@
     v-bind="propsRes"
     ref="tableRef"
     filter-icon-align-left
-    class="mt-[8px]"
+    class="mt-[16px]"
     :action-config="tableBatchActions"
     @selected-change="handleTableSelect"
     v-on="propsEvent"
@@ -60,7 +60,6 @@
         v-model:model-value="record.caseLevel"
         :placeholder="t('common.pleaseSelect')"
         class="param-input w-full"
-        size="mini"
         @click.stop
         @change="() => handleStatusChange(record)"
       >
@@ -222,7 +221,6 @@
           key: 'id',
           children: 'children',
         }"
-        size="mini"
         :tree-props="{
           virtualListProps: {
             height: 200,
@@ -238,9 +236,9 @@
         </template>
       </a-tree-select>
       <a-tooltip v-else :content="getModules(record.moduleId)" position="top">
-        <span class="one-line-text inline-block" @click.stop="record.showModuleTree = true">{{
+        <span class="one-line-text inline-block" @click.stop="record.showModuleTree = true">
-          getModules(record.moduleId)
+          {{ getModules(record.moduleId) }}
-        }}</span>
+        </span>
       </a-tooltip>
     </template>
     <!-- 渲染自定义字段开始TODO -->
@@ -258,18 +256,18 @@
     </template>
     <!-- 渲染自定义字段结束 -->
     <template #operation="{ record }">
-      <MsButton v-permission="['FUNCTIONAL_CASE:READ+UPDATE']" class="!mr-0" @click="operateCase(record, 'edit')">{{
+      <MsButton v-permission="['FUNCTIONAL_CASE:READ+UPDATE']" class="!mr-0" @click="operateCase(record, 'edit')">
-        t('common.edit')
+        {{ t('common.edit') }}
-      }}</MsButton>
+      </MsButton>
       <a-divider
         v-permission="['FUNCTIONAL_CASE:READ+UPDATE']"
         class="!mx-2 h-[12px]"
         direction="vertical"
         :margin="8"
       ></a-divider>
-      <MsButton v-permission="['FUNCTIONAL_CASE:READ+ADD']" class="!mr-0" @click="operateCase(record, 'copy')">{{
+      <MsButton v-permission="['FUNCTIONAL_CASE:READ+ADD']" class="!mr-0" @click="operateCase(record, 'copy')">
-        t('caseManagement.featureCase.copy')
+        {{ t('caseManagement.featureCase.copy') }}
-      }}</MsButton>
+      </MsButton>
       <a-divider
         v-permission="['FUNCTIONAL_CASE:READ+ADD']"
         class="!mx-2 h-[12px]"
@@ -451,7 +449,6 @@
   } from '@/models/caseManagement/featureCase';
   import type { TableQueryParams } from '@/models/common';
   import { ModuleTreeNode } from '@/models/common';
-  import { LastExecuteResults } from '@/enums/caseEnum';
   import { CaseManagementRouteEnum } from '@/enums/routeEnum';
   import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
 
@@ -699,7 +696,7 @@
       fixed: 'right',
       showInTable: true,
       showDrag: false,
-      width: hasOperationPermission.value ? 130 : 50,
+      width: hasOperationPermission.value ? 140 : 50,
     },
   ];
   const platformInfo = ref<Record<string, any>>({});
@@ -907,7 +904,7 @@
       tableKey: TableKeyEnum.CASE_MANAGEMENT_TABLE,
       selectable: true,
       showSetting: true,
-      heightUsed: 256,
+      heightUsed: 236,
       enableDrag: true,
       showSubdirectory: true,
       paginationSize: 'mini',
@@ -1732,7 +1729,6 @@
     flex-direction: row;
     justify-content: space-between;
   }
-  .ms-table--special-small();
   .tree-dropdown {
     .arco-tree-select-tree-wrapper {
       width: 200px !important;

frontend/src/views/case-management/caseReview/components/detail/caseTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="px-[24px] py-[8px]">
+  <div class="px-[24px] py-[16px]">
-    <div class="mb-[8px] flex flex-wrap items-center justify-end">
+    <div class="mb-[16px] flex flex-wrap items-center justify-end">
       <MsAdvanceFilter
         v-model:keyword="keyword"
         :filter-config-list="filterConfigList"
@@ -69,7 +69,7 @@
       </template>
       <template #num="{ record }">
         <a-tooltip :content="record.num">
-          <a-button type="text" class="px-0 !text-[14px] !leading-[22px]" size="mini" @click="review(record)">
+          <a-button type="text" class="px-0 !text-[14px] !leading-[22px]" @click="review(record)">
             <div class="one-line-text max-w-[168px]">{{ record.num }}</div>
           </a-button>
         </a-tooltip>
@@ -97,7 +97,6 @@
           :tag-list="record.reviewNames"
           is-string-tag
           :show-num="1"
-          size="small"
           theme="outline"
           @click="record.showModuleTree = false"
         />
@@ -110,7 +109,6 @@
           :options="reviewersOptions"
           :search-keys="['label']"
           allow-search
-          size="mini"
           :multiple="true"
           :placeholder="t('project.messageManagement.receiverPlaceholder')"
           @click.stop="record.showModuleTree = true"
@@ -455,7 +453,7 @@
     {
       scroll: { x: '100%' },
       tableKey: TableKeyEnum.CASE_MANAGEMENT_REVIEW_CASE,
-      heightUsed: 375,
+      heightUsed: 399,
       showSetting: true,
       selectable: true,
       showSelectAll: true,
@@ -943,5 +941,4 @@
       }
     }
   }
-  .ms-table--special-small();
 </style>

frontend/src/views/case-management/caseReview/components/index/reviewTable.vue

@@ -102,19 +102,18 @@
       </template>
       <template #num="{ record }">
         <a-tooltip :content="`${record.num}`">
-          <a-button type="text" class="px-0 !text-[14px] !leading-[22px]" size="mini" @click="openDetail(record.id)">
+          <a-button type="text" class="px-0 !text-[14px] !leading-[22px]" @click="openDetail(record.id)">
             <div class="one-line-text max-w-[168px]">{{ record.num }}</div>
           </a-button>
         </a-tooltip>
       </template>
       <template #status="{ record }">
-        <MsStatusTag :status="record.status" size="small" />
+        <MsStatusTag :status="record.status" />
       </template>
       <template #reviewPassRule="{ record }">
         <a-tag
           :color="record.reviewPassRule === 'SINGLE' ? 'rgb(var(--success-2))' : 'rgb(var(--link-2))'"
           :class="record.reviewPassRule === 'SINGLE' ? '!text-[rgb(var(--success-6))]' : '!text-[rgb(var(--link-6))]'"
-          size="small"
         >
           {{
             record.reviewPassRule === 'SINGLE'
@@ -442,7 +441,7 @@
       title: 'caseManagement.caseReview.caseCount',
       dataIndex: 'caseCount',
       showDrag: true,
-      width: 90,
+      width: 100,
     },
     {
       title: 'caseManagement.caseReview.status',
@@ -464,7 +463,7 @@
       slotName: 'reviewPassRule',
       dataIndex: 'reviewPassRule',
       showDrag: true,
-      width: 90,
+      width: 100,
     },
     {
       title: 'caseManagement.caseReview.reviewer',
@@ -526,7 +525,7 @@
       showSetting: true,
       selectable: true,
       showSelectAll: true,
-      heightUsed: 256,
+      heightUsed: 232,
       showSubdirectory: true,
       paginationSize: 'mini',
     },
@@ -801,6 +800,4 @@
   }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-  .ms-table--special-small();
-</style>

frontend/src/views/project-management/fileManagement/components/rightBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-[calc(100vh-88px)] flex-col p-[16px]">
+  <div class="flex h-full flex-col p-[16px]">
     <div class="header">
       <a-button v-permission="['PROJECT_FILE_MANAGEMENT:READ+ADD']" type="primary" @click="handleAddClick">
         {{ t('project.fileManagement.addFile') }}
@@ -554,7 +554,7 @@
       title: 'project.fileManagement.type',
       slotName: 'fileType',
       dataIndex: 'fileType',
-      width: 90,
+      width: 100,
     },
     {
       title: 'project.fileManagement.size',
@@ -609,6 +609,7 @@
         'PROJECT_FILE_MANAGEMENT:READ+UPDATE',
         'PROJECT_FILE_MANAGEMENT:READ+DELETE',
       ]),
+      heightUsed: 242,
       showSelectAll: true,
       showSubdirectory: true,
     },

frontend/src/views/setting/system/user/index.vue

@@ -394,7 +394,7 @@
       columns,
       selectable: !!hasAnyPermission(['SYSTEM_USER:READ+UPDATE', 'SYSTEM_USER:READ+DELETE']),
       showSetting: true,
-      heightUsed: 288,
+      heightUsed: 238,
     },
     (record) => ({
       ...record,