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

style: 表格组件表头排序样式

This commit is contained in:
teukkk 2024-05-11 15:23:11 +08:00 committed by Craftsman
parent 26b054f96f
commit f49e05df1a
6 changed files with 47 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/svg/icons/chevronDown.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715338961374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13184" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M226.56 413.44l58.88-58.88L512 581.12l226.56-226.56 58.88 58.88L512 698.88 226.56 413.44z" p-id="13185" fill="#959598"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 464 B

1
frontend/src/assets/svg/icons/chevronDownActive.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715338961374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13184" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M226.56 413.44l58.88-58.88L512 581.12l226.56-226.56 58.88 58.88L512 698.88 226.56 413.44z" p-id="13185" fill="#9441B1"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 464 B

1
frontend/src/assets/svg/icons/chevronUp.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715339116611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13393" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M797.44 610.56l-58.88 58.88L512 442.88l-226.56 226.56-58.88-58.88L512 325.248l285.44 285.44z" p-id="13394" fill="#959598"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

1
frontend/src/assets/svg/icons/chevronUpActive.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715339116611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13393" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M797.44 610.56l-58.88 58.88L512 442.88l-226.56 226.56-58.88-58.88L512 325.248l285.44 285.44z" p-id="13394" fill="#9441B1"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

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

@ -82,15 +82,9 @@
<template #title>
<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="`${
item.filterConfig && isHighlightFilterBackground
? 'text-[rgb(var(--primary-5))]'
: 'text-[var(--color-text-3)]'
} pl-1`"
>{{ 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="
@ -812,23 +806,57 @@
&:hover {
@apply bg-white;
}
.arco-table-sorter-icon:not(.arco-table-sorter-icon-active) {
.arco-icon-caret-up {
color: var(--color-neutral-5);
.arco-table-sorter {
padding: 3px 4px 3px 0;
.arco-table-sorter-icon {
&::before {
content: '';
position: absolute;
z-index: 10;
width: 14px;
height: 8px;
}
&:nth-of-type(1) {
&::before {
background: url('@/assets/svg/icons/chevronUp.svg') center/cover;
}
&.arco-table-sorter-icon-active::before {
background: url('@/assets/svg/icons/chevronUpActive.svg') center/cover;
}
}
&:nth-of-type(2) {
&::before {
background: url('@/assets/svg/icons/chevronDown.svg') center/cover;
}
&.arco-table-sorter-icon-active::before {
background: url('@/assets/svg/icons/chevronDownActive.svg') center/cover;
}
}
svg {
display: none;
}
}
}
}
:deep(.arco-table-col-sorted) .arco-table-cell-with-sorter {
width: fit-content;
background: rgb(var(--primary-1)) content-box;
.arco-table-th-title .title-name {
color: rgb(var(--primary-5));
}
}
:deep(.header-cell-filter) {
.arco-table-cell-with-filter {
float: left;
border-radius: 4px;
.arco-table-th-title {
border-radius: 4px;
color: rgb(var(--primary-5));
background: rgb(var(--primary-1)) content-box;
.filter-icon {
color: rgb(var(--primary-5)) !important;
}
.title-name {
color: rgb(var(--primary-5));
}
}
}
}

2
frontend/src/views/test-plan/testPlan/components/planTable.vue
View File

@ -97,7 +97,7 @@
>
</template>
<template #[FilterSlotNameEnum.TEST_PLAN_STATUS_FILTER]="{ filterContent }">
<statusTag :status="filterContent.value" />
<MsStatusTag :status="filterContent.value" />
</template>
<template #status="{ record }">
<MsStatusTag :status="record.status" />