feat(UI 走查): UI 走查调整&描述组件调整

This commit is contained in:
baiqi 2023-08-25 19:06:41 +08:00 committed by 刘瑞斌
parent 92b2f6a2bb
commit 2405478616
10 changed files with 77 additions and 41 deletions

View File

@ -620,9 +620,21 @@
.arco-icon { .arco-icon {
font-size: 14px; font-size: 14px;
} }
.arco-tag-close-btn {
.arco-icon {
color: var(--color-text-brand);
}
}
} }
/** 虚拟列表 **/ /** 虚拟列表 **/
.arco-virtual-list { .arco-virtual-list {
.ms-scroll-bar(); .ms-scroll-bar();
} }
/** 日期选择器 **/
.arco-picker-suffix-icon {
.arco-icon {
color: var(--color-text-brand);
}
}

View File

@ -252,7 +252,7 @@
.arco-menu-inner { .arco-menu-inner {
@apply flex flex-col; @apply flex flex-col;
padding: 16px 32px 16px 16px !important; padding: 16px 28px 16px 16px !important;
.arco-menu-inline { .arco-menu-inline {
&--bottom { &--bottom {
@apply mt-auto; @apply mt-auto;

View File

@ -19,7 +19,7 @@
class="pr-[5px]" class="pr-[5px]"
:style="{ :style="{
overflow: 'auto', overflow: 'auto',
width: `calc(100vw - ${menuWidth}px - 58px)`, width: props.width ? props.width : `calc(100vw - ${menuWidth}px - 58px)`,
height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`, height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`,
}" }"
> >
@ -70,6 +70,7 @@
specialHeight: number; // specialHeight: number; //
hideBack: boolean; // hideBack: boolean; //
autoHeight: boolean; // autoHeight: boolean; //
width?: string; //
hasBreadcrumb: boolean; // hasBreadcrumb: boolean; //
noContentPadding: boolean; // padding noContentPadding: boolean; // padding
handleBack: () => void; // handleBack: () => void; //

View File

@ -7,11 +7,19 @@
<a-skeleton-line :rows="props.skeletonLine" :line-height="24" /> <a-skeleton-line :rows="props.skeletonLine" :line-height="24" />
</a-space> </a-space>
</a-skeleton> </a-skeleton>
<a-descriptions v-else :data="(props.descriptions as unknown as DescData[])" size="large" :column="props.column"> <div v-else class="ms-description" size="large">
<template #title>
<slot name="title"></slot> <slot name="title"></slot>
</template> <div
<a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label"> v-for="(item, index) of props.descriptions"
:key="item.label"
class="ms-description-item"
:style="{ marginBottom: props.descriptions.length - index <= props.column ? '' : '16px' }"
>
<div class="ms-description-item-label">
<slot name="item-label">{{ item.label }}</slot>
</div>
<div class="ms-description-item-value">
<slot name="item-value">
<template v-if="item.isTag"> <template v-if="item.isTag">
<a-tag <a-tag
v-for="tag of item.value" v-for="tag of item.value"
@ -29,13 +37,13 @@
{{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }} {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
</slot> </slot>
</div> </div>
</a-descriptions-item> </slot>
</a-descriptions> </div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { DescData } from '@arco-design/web-vue';
export interface Description { export interface Description {
label: string; label: string;
value: (string | number) | (string | number)[]; value: (string | number) | (string | number)[];
@ -65,15 +73,23 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.arco-descriptions-item-label { .ms-description {
@apply flex flex-wrap;
.ms-description-item {
@apply flex items-center;
width: calc(100% / v-bind(column));
}
.ms-description-item-label {
@apply whitespace-pre-wrap font-normal; @apply whitespace-pre-wrap font-normal;
}
.arco-descriptions-item-label-block { padding-right: 16px;
padding-right: 16px !important;
word-wrap: break-word;
width: 120px; width: 120px;
color: var(--color-text-3);
word-wrap: break-word;
} }
.arco-descriptions-item-value-block { .ms-description-item-value {
@apply !pr-0 align-top; @apply !pr-0 align-top;
} }
}
</style> </style>

View File

@ -8,7 +8,7 @@
</div> </div>
<ms-base-table v-bind="propsRes" no-disable v-on="propsEvent"> <ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
<template #name="{ record }"> <template #name="{ record }">
<a-button type="text" @click="openAuthDetail(record.id)">{{ record.name }}</a-button> <a-button type="text" class="px-0" @click="openAuthDetail(record.id)">{{ record.name }}</a-button>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton> <MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton>

View File

@ -49,7 +49,7 @@
v-if="emailConfigForm.host !== null" v-if="emailConfigForm.host !== null"
type="outline" type="outline"
size="mini" size="mini"
class="arco-btn-outline--secondary" class="arco-btn-outline--secondary mt-[16px]"
:loading="testLoading" :loading="testLoading"
@click="testLink('page')" @click="testLink('page')"
> >

View File

@ -4,7 +4,7 @@
<MsCard class="mb-[16px]" :loading="pageloading" simple auto-height> <MsCard class="mb-[16px]" :loading="pageloading" simple auto-height>
<div class="config-title"> <div class="config-title">
{{ t('system.config.page.theme') }} {{ t('system.config.page.theme') }}
<a-tooltip :content="t('system.config.page.themeTip')" position="tl" mini> <a-tooltip :content="t('system.config.page.themeTip')" position="tl" class="themeTip">
<icon-question-circle class="ml-[4px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-6))]" /> <icon-question-circle class="ml-[4px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-6))]" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -667,3 +667,9 @@
} }
} }
</style> </style>
<style>
.arco-tooltip-content {
max-width: 100%;
}
</style>

View File

@ -230,7 +230,7 @@
<a-input-password <a-input-password
v-model:model-value="form.testResourceDTO.token" v-model:model-value="form.testResourceDTO.token"
:placeholder="t('system.resourcePool.testResourceDTO.tokenPlaceholder')" :placeholder="t('system.resourcePool.testResourceDTO.tokenPlaceholder')"
:max-length="250" :max-length="1500"
autocomplete="new-password" autocomplete="new-password"
/> />
</a-form-item> </a-form-item>

View File

@ -15,7 +15,7 @@
</div> </div>
<ms-base-table v-bind="propsRes" no-disable v-on="propsEvent"> <ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
<template #name="{ record }"> <template #name="{ record }">
<a-button type="text" @click="showPoolDetail(record.id)">{{ record.name }}</a-button> <a-button type="text" class="px-0" @click="showPoolDetail(record.id)">{{ record.name }}</a-button>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton> <MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton>

View File

@ -284,6 +284,7 @@
title: 'system.user.tableColumnActions', title: 'system.user.tableColumnActions',
slotName: 'action', slotName: 'action',
fixed: 'right', fixed: 'right',
width: 80,
showInTable: true, showInTable: true,
}, },
]; ];