fix(全局): 样式调整
This commit is contained in:
parent
d37f3fa99d
commit
e62728ad81
|
@ -279,7 +279,4 @@
|
||||||
:deep(.arco-table-cell) {
|
:deep(.arco-table-cell) {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
}
|
}
|
||||||
:deep(#ms-table-footer-wrapper) {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -90,7 +90,7 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,12 +27,11 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">
|
<div class="one-line-text w-full text-[var(--color-text-1)]">
|
||||||
<MsIcon type="icon-icon_folder_filled1" size="14" class="mr-1 text-[var(--color-text-4)]" />{{
|
<MsIcon type="icon-icon_folder_filled1" size="14" class="mr-1 text-[var(--color-text-4)]" />
|
||||||
nodeData.name
|
{{ nodeData.name }}
|
||||||
}}</div
|
</div>
|
||||||
>
|
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -215,7 +215,7 @@
|
||||||
<div
|
<div
|
||||||
v-if="showBatchAction || !!attrs.showPagination"
|
v-if="showBatchAction || !!attrs.showPagination"
|
||||||
id="ms-table-footer-wrapper"
|
id="ms-table-footer-wrapper"
|
||||||
class="mt-[16px] flex h-[32px] w-full flex-row flex-nowrap items-center overflow-hidden"
|
class="mt-[16px] flex w-full flex-row flex-nowrap items-center overflow-hidden"
|
||||||
:class="{ 'justify-between': showBatchAction }"
|
:class="{ 'justify-between': showBatchAction }"
|
||||||
>
|
>
|
||||||
<span v-if="props.actionConfig && selectedCount > 0 && !showBatchAction" class="title text-[var(--color-text-2)]">
|
<span v-if="props.actionConfig && selectedCount > 0 && !showBatchAction" class="title text-[var(--color-text-2)]">
|
||||||
|
|
|
@ -102,7 +102,7 @@
|
||||||
<apiMethodName :method="nodeData.attachInfo?.method || nodeData.attachInfo?.protocol" />
|
<apiMethodName :method="nodeData.attachInfo?.method || nodeData.attachInfo?.protocol" />
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="inline-flex w-full">
|
<div v-else class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
<apiMethodName :method="nodeData.attachInfo?.method || nodeData.attachInfo?.protocol" />
|
<apiMethodName :method="nodeData.attachInfo?.method || nodeData.attachInfo?.protocol" />
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else :id="nodeData.id" class="inline-flex w-full">
|
<div v-else :id="nodeData.id" class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
||||||
{{ modulesCount[nodeData.id] || 0 }}
|
{{ modulesCount[nodeData.id] || 0 }}
|
||||||
|
@ -286,7 +286,7 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
height: 'calc(100vh - 305px)',
|
height: 'calc(100vh - 298px)',
|
||||||
threshold: 200,
|
threshold: 200,
|
||||||
fixedSize: true,
|
fixedSize: true,
|
||||||
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
@select="handleNodeSelect"
|
@select="handleNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
|
||||||
>({{ moduleCountMap[nodeData.id] || 0 }})</div
|
>({{ moduleCountMap[nodeData.id] || 0 }})</div
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div :id="nodeData.id" class="inline-flex w-full">
|
<div :id="nodeData.id" class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
@drop="handleDrop"
|
@drop="handleDrop"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div :id="nodeData.id" class="inline-flex w-full">
|
<div :id="nodeData.id" class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="['p-[8px_16px]', props.class]">
|
<div :class="['p-[8px_16px]', props.class]">
|
||||||
<div class="mb-[16px] flex items-center justify-between">
|
<div class="mb-[8px] flex items-center justify-between">
|
||||||
<div class="flex items-center"> </div>
|
<div class="flex items-center"> </div>
|
||||||
<div class="items-right flex gap-[8px]">
|
<div class="items-right flex gap-[8px]">
|
||||||
<a-input-search
|
<a-input-search
|
||||||
|
@ -987,10 +987,6 @@
|
||||||
const statusFilters = ref<string[]>([]);
|
const statusFilters = ref<string[]>([]);
|
||||||
const tableStore = useTableStore();
|
const tableStore = useTableStore();
|
||||||
|
|
||||||
const activeModules = computed(() => {
|
|
||||||
return props.activeModule === 'all' ? [] : [props.activeModule];
|
|
||||||
});
|
|
||||||
|
|
||||||
async function loadScenarioList(refreshTreeCount?: boolean) {
|
async function loadScenarioList(refreshTreeCount?: boolean) {
|
||||||
let moduleIds: string[] = [];
|
let moduleIds: string[] = [];
|
||||||
if (props.activeModule && props.activeModule !== 'all') {
|
if (props.activeModule && props.activeModule !== 'all') {
|
||||||
|
|
|
@ -648,7 +648,7 @@
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.pageWrap {
|
.pageWrap {
|
||||||
height: calc(100% - 54px);
|
height: calc(100% - 50px);
|
||||||
border-radius: var(--border-radius-large);
|
border-radius: var(--border-radius-large);
|
||||||
@apply bg-white;
|
@apply bg-white;
|
||||||
.case {
|
.case {
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div :id="nodeData.id" class="inline-flex w-full">
|
<div :id="nodeData.id" class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
@drop="handleDrag"
|
@drop="handleDrag"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
||||||
{{ nodeData.count || 0 }}
|
{{ nodeData.count || 0 }}
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
@select="caseNodeSelect"
|
@select="caseNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full" @click="setFocusKey(nodeData)">
|
<div class="inline-flex w-full gap-[8px]" @click="setFocusKey(nodeData)">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
||||||
{{ nodeData.count || 0 }}
|
{{ nodeData.count || 0 }}
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
@select="caseNodeSelect"
|
@select="caseNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]" @click="setFocusKey(nodeData)">{{
|
<div class="one-line-text w-full text-[var(--color-text-1)]" @click="setFocusKey(nodeData)">{{
|
||||||
nodeData.name
|
nodeData.name
|
||||||
}}</div>
|
}}</div>
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
@select="folderNodeSelect"
|
@select="folderNodeSelect"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
<div class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">{{ nodeData.count || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -74,7 +74,7 @@
|
||||||
|
|
||||||
const virtualListProps = computed(() => {
|
const virtualListProps = computed(() => {
|
||||||
return {
|
return {
|
||||||
height: 'calc(100vh - 460px)',
|
height: 'calc(100vh - 408px)',
|
||||||
threshold: 200,
|
threshold: 200,
|
||||||
fixedSize: true,
|
fixedSize: true,
|
||||||
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
||||||
|
|
|
@ -68,7 +68,7 @@
|
||||||
@drop="handleDrop"
|
@drop="handleDrop"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
||||||
{{ nodeData.count || 0 }}
|
{{ nodeData.count || 0 }}
|
||||||
|
@ -148,7 +148,7 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
height: 'calc(100vh - 325px)',
|
height: 'calc(100vh - 218px)',
|
||||||
threshold: 200,
|
threshold: 200,
|
||||||
fixedSize: true,
|
fixedSize: true,
|
||||||
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
@drop="handleDrop"
|
@drop="handleDrop"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div v-if="!props.isModal" class="ms-tree-node-count ml-auto text-[var(--color-text-brand)]">
|
<div v-if="!props.isModal" class="ms-tree-node-count ml-auto text-[var(--color-text-brand)]">
|
||||||
{{ nodeData.count || 0 }}
|
{{ nodeData.count || 0 }}
|
||||||
|
@ -114,7 +114,7 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
height: 'calc(100vh - 325px)',
|
height: 'calc(100vh - 292px)',
|
||||||
threshold: 200,
|
threshold: 200,
|
||||||
fixedSize: true,
|
fixedSize: true,
|
||||||
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
buffer: 15, // 缓冲区默认 10 的时候,虚拟滚动的底部 padding 计算有问题
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
<MsList
|
<MsList
|
||||||
v-model:focus-item-key="focusItemKey"
|
v-model:focus-item-key="focusItemKey"
|
||||||
:virtual-list-props="{
|
:virtual-list-props="{
|
||||||
height: 'calc(100vh - 325px)',
|
height: 'calc(100vh - 275px)',
|
||||||
}"
|
}"
|
||||||
:data="storageList"
|
:data="storageList"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
@drop="handleDrag"
|
@drop="handleDrag"
|
||||||
>
|
>
|
||||||
<template #title="nodeData">
|
<template #title="nodeData">
|
||||||
<div class="inline-flex w-full">
|
<div class="inline-flex w-full gap-[8px]">
|
||||||
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
<div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
|
||||||
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
<div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-brand)]">
|
||||||
{{ nodeData.count || 0 }}
|
{{ nodeData.count || 0 }}
|
||||||
|
|
Loading…
Reference in New Issue