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

style(系统设置): 调整UI样式 

--bug=1035327 --user=吕梦园
--bug=1035260 --user=吕梦园
--bug=1035252 --user=吕梦园
--bug=1035619 --user=吕梦园
--bug=1035633 --user=吕梦园
--bug=1035641 --user=吕梦园
This commit is contained in:
teukkk 2024-04-03 13:02:16 +08:00 committed by 刘瑞斌
parent 841a85a4c9
commit 05115b43ac
9 changed files with 78 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -292,6 +292,7 @@
.arco-select-view-inner, .arco-select-view-inner,
.arco-input-tag-inner { .arco-input-tag-inner {
.arco-tag { .arco-tag {
font-weight: 400;
background-color: var(--color-text-n8) !important; background-color: var(--color-text-n8) !important;
} }
} }

93
frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col px-[24px] pb-[24px]"> <div class="flex flex-col px-[24px] pb-[24px]">
<div class="sticky top-0 z-[999] bg-white pt-[24px]"> <div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[24px]">
<a-input-search <a-input-search
:placeholder="t('system.userGroup.searchHolder')" :placeholder="t('system.userGroup.searchHolder')"
allow-clear allow-clear
@ -51,8 +51,8 @@
<div <div
v-for="element in systemUserGroupList" v-for="element in systemUserGroupList"
:key="element.id" :key="element.id"
class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]" class="list-item"
:class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }" :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
@click="handleListItemClick(element)" @click="handleListItemClick(element)"
> >
<CreateUserGroupPopup <CreateUserGroupPopup
@ -64,22 +64,24 @@
<div class="flex max-w-[100%] grow flex-row items-center justify-between"> <div class="flex max-w-[100%] grow flex-row items-center justify-between">
<a-tooltip :content="element.name"> <a-tooltip :content="element.name">
<div <div
class="one-line-text text-[var(--color-text-1)]" class="list-item-name one-line-text text-[var(--color-text-1)]"
:class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }" :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
>{{ element.name }}</div >{{ element.name }}</div
> >
</a-tooltip> </a-tooltip>
<div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]"> <div
<MsMoreAction class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
v-if="element.type === systemType" :class="{ '!opacity-100': element.id === currentId }"
v-permission="props.updatePermission"
:list="addMemberActionItem"
@select="handleAddMember"
> >
<div class="icon-button"> <div class="icon-button">
<MsIcon type="icon-icon_add_outlined" size="16" /> <MsIcon
v-if="element.type === systemType"
v-permission="props.updatePermission"
type="icon-icon_add_outlined"
size="16"
@click="handleAddMember"
/>
</div> </div>
</MsMoreAction>
<MsMoreAction <MsMoreAction
v-if="isSystemShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)" v-if="isSystemShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
:list="systemMoreAction" :list="systemMoreAction"
@ -139,8 +141,8 @@
<div <div
v-for="element in orgUserGroupList" v-for="element in orgUserGroupList"
:key="element.id" :key="element.id"
class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]" class="list-item"
:class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }" :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
@click="handleListItemClick(element)" @click="handleListItemClick(element)"
> >
<CreateUserGroupPopup <CreateUserGroupPopup
@ -152,22 +154,24 @@
<div class="flex max-w-[100%] grow flex-row items-center justify-between"> <div class="flex max-w-[100%] grow flex-row items-center justify-between">
<a-tooltip :content="element.name"> <a-tooltip :content="element.name">
<div <div
class="one-line-text text-[var(--color-text-1)]" class="list-item-name one-line-text text-[var(--color-text-1)]"
:class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }" :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
>{{ element.name }}</div >{{ element.name }}</div
> >
</a-tooltip> </a-tooltip>
<div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]"> <div
<MsMoreAction class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
v-if="element.type === systemType" :class="{ '!opacity-100': element.id === currentId }"
v-permission="props.updatePermission"
:list="addMemberActionItem"
@select="handleAddMember"
> >
<div class="icon-button"> <div class="icon-button">
<MsIcon type="icon-icon_add_outlined" size="16" /> <MsIcon
v-if="element.type === systemType"
v-permission="props.updatePermission"
type="icon-icon_add_outlined"
size="16"
@click="handleAddMember"
/>
</div> </div>
</MsMoreAction>
<MsMoreAction <MsMoreAction
v-if="isOrdShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)" v-if="isOrdShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
:list="orgMoreAction" :list="orgMoreAction"
@ -227,8 +231,8 @@
<div <div
v-for="element in projectUserGroupList" v-for="element in projectUserGroupList"
:key="element.id" :key="element.id"
class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]" class="list-item"
:class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }" :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
@click="handleListItemClick(element)" @click="handleListItemClick(element)"
> >
<CreateUserGroupPopup <CreateUserGroupPopup
@ -240,22 +244,24 @@
<div class="flex max-w-[100%] grow flex-row items-center justify-between"> <div class="flex max-w-[100%] grow flex-row items-center justify-between">
<a-tooltip :content="element.name"> <a-tooltip :content="element.name">
<div <div
class="one-line-text text-[var(--color-text-1)]" class="list-item-name one-line-text text-[var(--color-text-1)]"
:class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }" :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
>{{ element.name }}</div >{{ element.name }}</div
> >
</a-tooltip> </a-tooltip>
<div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]"> <div
<MsMoreAction class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
:class="{ '!opacity-100': element.id === currentId }"
>
<div class="icon-button">
<MsIcon
v-if="element.type === systemType" v-if="element.type === systemType"
v-permission="props.updatePermission" v-permission="props.updatePermission"
:list="addMemberActionItem" type="icon-icon_add_outlined"
@select="handleAddMember" size="16"
> @click="handleAddMember"
<div v-permission="props.updatePermission" class="icon-button"> />
<MsIcon type="icon-icon_add_outlined" size="16" />
</div> </div>
</MsMoreAction>
<MsMoreAction <MsMoreAction
v-if="isProjectShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)" v-if="isProjectShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
:list="projectMoreAction" :list="projectMoreAction"
@ -363,10 +369,6 @@
return userGroupList.value.filter((ele) => ele.type === AuthScopeEnum.PROJECT); return userGroupList.value.filter((ele) => ele.type === AuthScopeEnum.PROJECT);
}); });
const addMemberActionItem: ActionsItem[] = [
{ label: 'system.userGroup.addMember', eventTag: 'addMember', permission: props.updatePermission },
];
const systemMoreAction: ActionsItem[] = [ const systemMoreAction: ActionsItem[] = [
{ {
label: 'system.userGroup.rename', label: 'system.userGroup.rename',
@ -594,4 +596,13 @@
.v-leave-to { .v-leave-to {
opacity: 0; opacity: 0;
} }
.list-item {
padding: 7px 4px 7px 20px;
height: 38px;
border-radius: var(--border-radius-small);
@apply flex cursor-pointer items-center hover:bg-[rgb(var(--primary-9))];
&:hover .list-item-action {
opacity: 1;
}
}
</style> </style>

10
frontend/src/views/setting/organization/project/components/addProjectModal.vue
View File

@ -8,9 +8,15 @@
@cancel="handleCancel(false)" @cancel="handleCancel(false)"
> >
<template #title> <template #title>
<span v-if="isEdit"> <span v-if="isEdit" class="flex">
{{ t('system.project.updateProject') }} {{ t('system.project.updateProject') }}
<span class="text-[var(--color-text-4)]">({{ props.currentProject?.name }})</span> <div class="ml-[4px] flex text-[var(--color-text-4)]">
(
<a-tooltip :content="props.currentProject?.name">
<div class="one-line-text max-w-[300px]">{{ props.currentProject?.name }}</div>
</a-tooltip>
)
</div>
</span> </span>
<span v-else> <span v-else>
{{ t('system.project.createProject') }} {{ t('system.project.createProject') }}

5
frontend/src/views/setting/organization/template/components/templateItem.vue
View File

@ -61,7 +61,7 @@
<span class="text-[rgb(var(--warning-6))]">{{ t('system.orgTemplate.enableWarningTip') }}</span> <span class="text-[rgb(var(--warning-6))]">{{ t('system.orgTemplate.enableWarningTip') }}</span>
<a-input <a-input
v-model="validateKeyWord" v-model="validateKeyWord"
:placeholder="t('system.orgTemplate.searchOrgPlaceholder', { name: orgName })" :placeholder="t('system.orgTemplate.searchOrgPlaceholder')"
allow-clear allow-clear
class="mb-4 mt-[8px]" class="mb-4 mt-[8px]"
:max-length="255" :max-length="255"
@ -228,7 +228,8 @@
.content { .content {
@apply flex; @apply flex;
.logo-img { .logo-img {
@apply mr-3 flex items-center bg-white; border-radius: var(--border-radius-small);
@apply mr-3 flex items-center justify-center bg-white;
} }
.template-operation { .template-operation {
.operation { .operation {

2
frontend/src/views/setting/organization/template/locale/en-US.ts
View File

@ -185,7 +185,7 @@ export default {
'system.orgTemplate.enableTip': 'Are you sure to enable the project template', 'system.orgTemplate.enableTip': 'Are you sure to enable the project template',
'system.orgTemplate.enableWarningTip': 'Enabled, irreversible for organization template, please careful operation.', 'system.orgTemplate.enableWarningTip': 'Enabled, irreversible for organization template, please careful operation.',
'system.orgTemplate.typeEmptyTip': 'The filed type cannot be empty', 'system.orgTemplate.typeEmptyTip': 'The filed type cannot be empty',
'system.orgTemplate.searchOrgPlaceholder': 'Please enter the organization name :{name}', 'system.orgTemplate.searchOrgPlaceholder': 'Please enter the organization name',
'system.orgTemplate.associatedField': 'Associated field ', 'system.orgTemplate.associatedField': 'Associated field ',
'system.orgTemplate.associatedHasField': 'Associate an added field', 'system.orgTemplate.associatedHasField': 'Associate an added field',
'system.orgTemplate.addFieldDesc': 'Adds a new field', 'system.orgTemplate.addFieldDesc': 'Adds a new field',

2
frontend/src/views/setting/organization/template/locale/zh-CN.ts
View File

@ -174,7 +174,7 @@ export default {
'system.orgTemplate.enableTip': '确认启用项目模版吗', 'system.orgTemplate.enableTip': '确认启用项目模版吗',
'system.orgTemplate.enableWarningTip': '启用后，不可恢复为组织模版，请谨慎操作！', 'system.orgTemplate.enableWarningTip': '启用后，不可恢复为组织模版，请谨慎操作！',
'system.orgTemplate.typeEmptyTip': '字段类型不能为空', 'system.orgTemplate.typeEmptyTip': '字段类型不能为空',
'system.orgTemplate.searchOrgPlaceholder': '请输入组织名称: {name} ', 'system.orgTemplate.searchOrgPlaceholder': '请输入组织名称',
'system.orgTemplate.associatedField': '关联字段 ', 'system.orgTemplate.associatedField': '关联字段 ',
'system.orgTemplate.associatedHasField': '关联已添加的字段', 'system.orgTemplate.associatedHasField': '关联已添加的字段',
'system.orgTemplate.addFieldDesc': '新增一个新的字段', 'system.orgTemplate.addFieldDesc': '新增一个新的字段',

2
frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
View File

@ -15,7 +15,7 @@
<div class="p-[24px]"> <div class="p-[24px]">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name"> <a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div> <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
</a-tooltip> </a-tooltip>
<div class="flex items-center"> <div class="flex items-center">
<a-input-search <a-input-search

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

@ -211,7 +211,7 @@
</a-form-item> </a-form-item>
</template> </template>
</MsCodeEditor> </MsCodeEditor>
<div class="mb-[24px] text-[12px] leading-[16px] text-[var(--color-text-4)]"> <div class="mb-[24px] mt-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
{{ t('system.resourcePool.nodeConfigEditorTip') }} {{ t('system.resourcePool.nodeConfigEditorTip') }}
</div> </div>
</div> </div>

2
frontend/src/views/setting/system/usergroup/systemUserGroup.vue
View File

@ -15,7 +15,7 @@
<div class="p-[24px]"> <div class="p-[24px]">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name"> <a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div> <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
</a-tooltip> </a-tooltip>
<div class="flex items-center"> <div class="flex items-center">
<a-input-search <a-input-search