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:
xinxin.wu 2023-09-06 15:41:05 +08:00 committed by 刘瑞斌
parent 3435390650
commit b77fd9e712
4 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/pure/ms-table/columnSelector.vue
View File

@ -9,11 +9,11 @@
@cancel="handleCancel"
>
<div class="ms-table-column-seletor">
<div>
<span>{{ t('msTable.columnSetting.mode') }}</span>
<icon-question-circle class="ml-1" />
<div class="mb-2">
<span class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.mode') }}</span>
<icon-question-circle class="ml-1 text-[var(--color-text-brand)]" />
</div>
<a-radio-group :model-value="currentMode" class="ml-[14px]" type="button" @change="handleModeChange">
<a-radio-group :model-value="currentMode" type="button" @change="handleModeChange">
<a-radio value="drawer">
<div class="mode-button">
<MsIcon :class="{ 'active-color': currentMode === 'drawer' }" type="icon-icon_drawer" />
@ -28,25 +28,27 @@
</a-radio>
</a-radio-group>
<a-divider />
<div class="flex items-center justify-between">
<div>{{ t('msTable.columnSetting.header') }}</div>
<div class="mb-2 flex items-center justify-between">
<div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
<MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
</div>
<div class="flex-col">
<div v-for="(item, idx) in nonSortColumn" :key="item.dataIndex" class="column-item">
<div>{{ t(item.title as string) }}</div>
<a-switch :model-value="item.showInTable" size="small" @change="handleFirstColumnChange(idx)" />
<a-switch size="small" :model-value="item.showInTable" @change="handleFirstColumnChange(idx)" />
</div>
</div>
<a-divider orientation="center" class="non-sort">{{ t('msTable.columnSetting.nonSort') }}</a-divider>
<Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex">
<a-divider orientation="center" class="non-sort"
><span class="text-xs text-[var(--color-text-4)]">{{ t('msTable.columnSetting.nonSort') }}</span></a-divider
>
<Draggable tag="div" :list="couldSortColumn" class="list-group" handle=".handle" item-key="dateIndex">
<template #item="{ element, index }">
<div class="column-drag-item">
<div class="flex items-center">
<icon-drag-dot-vertical />
<div class="ml-[8px]">{{ t(element.title as string) }}</div>
<div class="handle flex w-[90%] items-center">
<MsIcon type="icon-icon_drag" class="text-[16px] text-[var(--color-text-4)]" />
<span class="ml-[8px]">{{ t(element.title as string) }}</span>
</div>
<a-switch :model-value="element.showInTable" size="small" @change="handleSecondColumnChange(index)" />
<a-switch size="small" :model-value="element.showInTable" @change="handleSecondColumnChange(index)" />
</div>
</template>
</Draggable>
@ -137,6 +139,13 @@
</script>
<style lang="less" scoped>
:deep(.arco-divider-horizontal) {
margin: 16px 0;
border-bottom-color: var(--color-text-n8);
}
:deep(.arco-divider-text) {
padding: 0 8px;
}
.icon {
margin-left: 16px;
color: var(--color-text-4);
@ -163,6 +172,10 @@
justify-content: space-between;
align-items: center;
padding: 8px 12px 8px 36px;
&:hover {
border-radius: 6px;
background: var(--color-text-n9);
}
}
.column-drag-item {
display: flex;
@ -172,6 +185,7 @@
padding: 8px 12px;
cursor: move;
&:hover {
border-radius: 6px;
background-color: var(--color-text-n9);
}
}
@ -179,10 +193,6 @@
border: 1px dashed rgba(var(--primary-5));
background-color: rgba(var(--primary-1));
}
:deep(.arco-divider-text) {
padding: 0 8px;
color: var(--color-text-4);
}
.non-sort {
font-size: 12px;
}

28
frontend/src/utils/index.ts
View File

@ -233,27 +233,17 @@ export function findNodeByKey<T>(trees: TreeNode<T>[], targetKey: string, custom
}
/**
* 查找一个数组里边的每一项是否在另外一个数组里边，如果存在返回[],否则返回不存在项的新数组
* @param nameMap 目标项
* @param dataMap 查找项
* 找出俩数组之间的差异项并返回
* @param targetMap 目标项
* @param sourceMap 查找项
* @returns 返回不存在项的新数组
*/
export function filterItem(nameMap: Record<string, any>[], dataMap: Record<string, any>[]) {
// 对数组 nameMap 中的每一项进行判断
const isExist = nameMap.every((item) => {
return dataMap.some((otherItem) => {
return item.id === otherItem.id;
});
});
if (isExist) {
return [];
export function getFilterList(targetMap: Record<string, any>[], sourceMap: Record<string, any>[]) {
const filteredData: Record<string, any>[] = [];
targetMap.forEach((item) => {
if (!sourceMap.some((it) => it.id === item.id)) {
filteredData.push(item);
}
// 找出不在数组 dataMap 中的项放入新数组
const filterNotExistOptions = dataMap.filter((item) => {
return !nameMap.some((otherItem) => {
return item.id === otherItem.id;
});
});
return filterNotExistOptions;
return filteredData;
}

7
frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
View File

@ -456,4 +456,11 @@
:deep(.arco-table-content + .arco-scrollbar-track-direction-horizontal .arco-scrollbar-thumb-direction-horizontal) {
width: 0 !important;
}
:deep(.arco-table-hover) {
.arco-table-tr-expand:not(.arco-table-tr-empty):hover {
.arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
background: none !important;
}
}
}
</style>

5
frontend/src/views/setting/system/pluginManager/components/tableExpand.vue
View File

@ -9,7 +9,7 @@
<div class="ms-scroll">
<div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
><span class="circle text-xs leading-[16px]"> {{ index + 1 }} </span
><span class="cursor-pointer text-[rgb(var(--primary-6))]" @click="emit('MessageEvent', record, item)">{{
><span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="emit('MessageEvent', record, item)">{{
item.name
}}</span></div
>
@ -51,4 +51,7 @@
border-bottom: 1px solid var(--color-text-n8);
@apply flex items-center align-middle leading-6;
}
.ms-self:hover {
background: var(--color-fill-1);
}
</style>