feat(接口管理): 接口管理API模块树高度修改

This commit is contained in:
WangXu10 2024-03-13 10:46:19 +08:00 committed by 刘瑞斌
parent 3103ea6155
commit c29e0490c1
2 changed files with 4 additions and 22 deletions

View File

@ -75,7 +75,7 @@
class="mb-[16px]" class="mb-[16px]"
allow-clear allow-clear
/> />
<a-spin class="min-h-[400px] w-full" :loading="loading"> <a-spin class="w-full" :loading="loading">
<MsTree <MsTree
v-model:focus-node-key="focusNodeKey" v-model:focus-node-key="focusNodeKey"
v-model:selected-keys="selectedKeys" v-model:selected-keys="selectedKeys"
@ -620,29 +620,23 @@
padding: 8px 4px; padding: 8px 4px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
&:hover { &:hover {
background-color: rgb(var(--primary-1)); background-color: rgb(var(--primary-1));
} }
.folder-text { .folder-text {
@apply flex flex-1 cursor-pointer items-center; @apply flex flex-1 cursor-pointer items-center;
.folder-icon { .folder-icon {
margin-right: 4px; margin-right: 4px;
color: var(--color-text-4); color: var(--color-text-4);
} }
.folder-name { .folder-name {
color: var(--color-text-1); color: var(--color-text-1);
} }
.folder-count { .folder-count {
margin-left: 4px; margin-left: 4px;
color: var(--color-text-4); color: var(--color-text-4);
} }
} }
.folder-text--active { .folder-text--active {
.folder-icon, .folder-icon,
.folder-name, .folder-name,
@ -651,7 +645,6 @@
} }
} }
} }
:deep(#root ~ .arco-tree-node-drag-icon) { :deep(#root ~ .arco-tree-node-drag-icon) {
@apply hidden; @apply hidden;
} }

View File

@ -2,7 +2,7 @@
<MsCard :min-width="1180" simple no-content-padding> <MsCard :min-width="1180" simple no-content-padding>
<MsSplitBox :size="0.25" :max="0.5"> <MsSplitBox :size="0.25" :max="0.5">
<template #first> <template #first>
<div class="p-[24px]"> <div class="p-[9px]">
<moduleTree <moduleTree
ref="moduleTreeRef" ref="moduleTreeRef"
:active-node-id="activeApi?.id" :active-node-id="activeApi?.id"
@ -14,8 +14,8 @@
@change-protocol="handleProtocolChange" @change-protocol="handleProtocolChange"
/> />
</div> </div>
<div class="b-0 absolute w-full p-[24px]"> <div class="b-0 absolute w-full p-[9px]">
<a-divider class="!my-0 !mb-2" /> <a-divider class="!my-0 !mb-0" />
<div class="case h-[38px]"> <div class="case h-[38px]">
<div class="flex items-center" :class="getActiveClass('recycle')" @click="setActiveFolder('recycle')"> <div class="flex items-center" :class="getActiveClass('recycle')" @click="setActiveFolder('recycle')">
<MsIcon type="icon-icon_delete-trash_outlined" class="folder-icon" /> <MsIcon type="icon-icon_delete-trash_outlined" class="folder-icon" />
@ -148,25 +148,20 @@
padding: 8px 4px; padding: 8px 4px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
@apply flex cursor-pointer items-center justify-between; @apply flex cursor-pointer items-center justify-between;
&:hover { &:hover {
background-color: rgb(var(--primary-1)); background-color: rgb(var(--primary-1));
} }
.folder-icon { .folder-icon {
margin-right: 4px; margin-right: 4px;
color: var(--color-text-4); color: var(--color-text-4);
} }
.folder-name { .folder-name {
color: var(--color-text-1); color: var(--color-text-1);
} }
.folder-count { .folder-count {
margin-left: 4px; margin-left: 4px;
color: var(--color-text-4); color: var(--color-text-4);
} }
.case-active { .case-active {
.folder-icon, .folder-icon,
.folder-name, .folder-name,
@ -174,7 +169,6 @@
color: rgb(var(--primary-5)); color: rgb(var(--primary-5));
} }
} }
.back { .back {
margin-right: 8px; margin-right: 8px;
width: 20px; width: 20px;
@ -182,7 +176,6 @@
border: 1px solid #ffffff; border: 1px solid #ffffff;
background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%); background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
box-shadow: 0 0 7px rgb(15 0 78 / 9%); box-shadow: 0 0 7px rgb(15 0 78 / 9%);
.arco-icon { .arco-icon {
color: rgb(var(--primary-5)); color: rgb(var(--primary-5));
} }
@ -190,17 +183,13 @@
@apply flex cursor-pointer items-center rounded-full; @apply flex cursor-pointer items-center rounded-full;
} }
} }
.recycle { .recycle {
@apply absolute bottom-0 bg-white pb-4; @apply absolute bottom-0 bg-white pb-4;
:deep(.arco-divider-horizontal) { :deep(.arco-divider-horizontal) {
margin: 8px 0; margin: 8px 0;
} }
.recycle-bin { .recycle-bin {
@apply bottom-0 flex items-center bg-white; @apply bottom-0 flex items-center bg-white;
.recycle-count { .recycle-count {
margin-left: 4px; margin-left: 4px;
color: var(--color-text-4); color: var(--color-text-4);