feat(UI 走查): UI 走查调整&描述组件调整
This commit is contained in:
parent
92b2f6a2bb
commit
2405478616
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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; // 自定义返回按钮触发事件
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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')"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
Loading…
Reference in New Issue