fix(全局): 样式调整

This commit is contained in:
baiqi 2024-04-26 14:13:59 +08:00 committed by Craftsman
parent d37f3fa99d
commit e62728ad81
21 changed files with 27 additions and 35 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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