test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
baiqi 2024-05-11 19:48:49 +08:00 committed by Craftsman
parent af684b2b8e
commit 65f04379dc
14 changed files with 89 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/assets/style/arco-reset.less
View File

@ -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 {

1
frontend/src/components/business/ms-menu/index.vue
View File

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

29
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -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 {
.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;

21
frontend/src/views/api-test/management/components/management/api/apiTable.vue
View File

@ -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>

15
frontend/src/views/api-test/management/components/management/case/caseTable.vue
View File

@ -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>

2
frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue
View File

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

5
frontend/src/views/api-test/management/components/management/mock/mockTable.vue
View File

@ -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>

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

@ -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,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>

19
frontend/src/views/bug-management/index.vue
View File

@ -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
type="text"
class="px-0 text-[14px] leading-[22px]"
size="mini"
@click="handleShowDetail(record.id, rowIndex)"
>
<a-button type="text" class="px-0 text-[14px] leading-[22px]" @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>

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

@ -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">{{
getModules(record.moduleId)
}}</span>
<span class="one-line-text inline-block" @click.stop="record.showModuleTree = true">
{{ getModules(record.moduleId) }}
</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')">{{
t('common.edit')
}}</MsButton>
<MsButton v-permission="['FUNCTIONAL_CASE:READ+UPDATE']" class="!mr-0" @click="operateCase(record, 'edit')">
{{ t('common.edit') }}
</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')">{{
t('caseManagement.featureCase.copy')
}}</MsButton>
<MsButton v-permission="['FUNCTIONAL_CASE:READ+ADD']" class="!mr-0" @click="operateCase(record, 'copy')">
{{ t('caseManagement.featureCase.copy') }}
</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;

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

@ -1,6 +1,6 @@
<template>
<div class="px-[24px] py-[8px]">
<div class="mb-[8px] flex flex-wrap items-center justify-end">
<div class="px-[24px] py-[16px]">
<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>

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

@ -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>
.ms-table--special-small();
</style>
<style lang="less" scoped></style>

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

@ -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,
},

2
frontend/src/views/setting/system/user/index.vue
View File

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