test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/assets/style/arco-reset.less
View File

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

2
frontend/src/components/pure/menu/index.vue
View File

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

3
frontend/src/components/pure/ms-card/index.vue
View File

@ -19,7 +19,7 @@
class="pr-[5px]"
:style="{
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)`,
}"
>
@ -70,6 +70,7 @@
specialHeight: number; // 特殊高度，例如某些页面有面包屑
hideBack: boolean; // 隐藏返回按钮
autoHeight: boolean; // 内容区域高度是否自适应
width?: string; // 卡片宽度
hasBreadcrumb: boolean; // 是否有面包屑，如果有面包屑，高度需要减去面包屑的高度
noContentPadding: boolean; // 内容区域是否有padding
handleBack: () => void; // 自定义返回按钮触发事件

44
frontend/src/components/pure/ms-description/index.vue
View File

@ -7,11 +7,19 @@
<a-skeleton-line :rows="props.skeletonLine" :line-height="24" />
</a-space>
</a-skeleton>
<a-descriptions v-else :data="(props.descriptions as unknown as DescData[])" size="large" :column="props.column">
<template #title>
<div v-else class="ms-description" size="large">
<slot name="title"></slot>
</template>
<a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label">
<div
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">
<a-tag
v-for="tag of item.value"
@ -29,13 +37,13 @@
{{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
</slot>
</div>
</a-descriptions-item>
</a-descriptions>
</slot>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { DescData } from '@arco-design/web-vue';
export interface Description {
label: string;
value: (string | number) | (string | number)[];
@ -65,15 +73,23 @@
</script>
<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;
}
.arco-descriptions-item-label-block {
padding-right: 16px !important;
word-wrap: break-word;
padding-right: 16px;
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;
}
}
</style>

2
frontend/src/views/setting/system/config/components/authConfig.vue
View File

@ -8,7 +8,7 @@
</div>
<ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
<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 #action="{ record }">
<MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton>

2
frontend/src/views/setting/system/config/components/baseConfig.vue
View File

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

8
frontend/src/views/setting/system/config/components/pageConfig.vue
View File

@ -4,7 +4,7 @@
<MsCard class="mb-[16px]" :loading="pageloading" simple auto-height>
<div class="config-title">
{{ 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))]" />
</a-tooltip>
</div>
@ -667,3 +667,9 @@
}
}
</style>
<style>
.arco-tooltip-content {
max-width: 100%;
}
</style>

2
frontend/src/views/setting/system/resourcePool/detail.vue
View File

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

2
frontend/src/views/setting/system/resourcePool/index.vue
View File

@ -15,7 +15,7 @@
</div>
<ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
<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 #action="{ record }">
<MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton>

1
frontend/src/views/setting/system/user/index.vue
View File

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