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

style(系统设置): 样式修改

This commit is contained in:
RubyLiu 2023-09-18 18:26:44 +08:00 committed by fit2-zhao
parent 71c4ba10f8
commit 387460f4e5
13 changed files with 424 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -589,6 +589,9 @@
background: var(--color-text-10);
box-sizing: border-box;
input {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 22px;
text-align: center;
}
}

17
frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
View File

@ -1,5 +1,11 @@
<template>
<a-popover :popup-visible="currentVisible" position="bl" trigger="click" class="w-[276px]">
<a-popover
:popup-visible="currentVisible"
position="bl"
trigger="click"
class="w-[277px]"
:content-class="props.id ? 'move-left' : ''"
>
<template #content>
<div class="form">
<a-form
@ -18,7 +24,7 @@
<a-form-item field="name" :rules="[{ validator: validateName }]">
<a-input
v-model="form.name"
class="w-[228px]"
class="w-[243px]"
:placeholder="t('system.userGroup.pleaseInputUserGroupName')"
@press-enter="handleBeforeOk"
@keyup.esc="handleCancel"
@ -146,3 +152,10 @@
form.name = props.defaultName || '';
});
</script>
<style lang="less">
.move-left {
position: relative;
right: 22px;
}
</style>

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

@ -1,11 +1,13 @@
<template>
<div class="flex h-full flex-col overflow-auto px-[24px] py-[24px]">
<div class="sticky top-0 z-[999] w-[252px] bg-white">
<a-input-search
class="w-[252px]"
:placeholder="t('system.userGroup.searchHolder')"
allow-clear
@press-enter="enterData"
@search="searchData"
/>
</div>
<div v-if="showSystem" class="mt-2 w-[252px]">
<CreateUserGroupPopup
:list="systemUserGroupList"
@ -63,7 +65,11 @@
>
</a-tooltip>
<div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
<MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
<MsMoreAction
v-if="element.type === systemType"
:list="addMemberActionItem"
@select="handleAddMember"
>
<div class="icon-button">
<MsIcon type="icon-icon_add_outlined" size="16" />
</div>
@ -141,7 +147,11 @@
>
</a-tooltip>
<div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
<MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
<MsMoreAction
v-if="element.type === systemType"
:list="addMemberActionItem"
@select="handleAddMember"
>
<div class="icon-button">
<MsIcon type="icon-icon_add_outlined" size="16" />
</div>
@ -219,7 +229,11 @@
>
</a-tooltip>
<div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
<MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
<MsMoreAction
v-if="element.type === systemType"
:list="addMemberActionItem"
@select="handleAddMember"
>
<div class="icon-button">
<MsIcon type="icon-icon_add_outlined" size="16" />
</div>
@ -239,7 +253,7 @@
</div>
</Transition>
</div>
</div>
<AddUserModal :visible="userModalVisible" :current-id="currentItem.id" @cancel="userModalVisible = false" />
</template>
@ -256,7 +270,7 @@
getProjectUserGroupList,
deleteOrgUserGroup,
} from '@/api/modules/setting/usergroup';
import { computed, onMounted, ref, inject } from 'vue';
import { computed, ref, inject } from 'vue';
import CreateUserGroupPopup from './createOrUpdateUserGroup.vue';
import AddUserModal from './addUserModal.vue';
import { Message } from '@arco-design/web-vue';
@ -268,7 +282,7 @@
const { t } = useI18n();
const emit = defineEmits<{
(e: 'onSelect', element: UserGroupItem): void;
(e: 'handleSelect', element: UserGroupItem): void;
}>();
const appStore = useAppStore();
const { openModal } = useModal();
@ -283,7 +297,7 @@
const userGroupList = ref<UserGroupItem[]>([]);
const currentItem = ref<CurrentUserGroupItem>({ id: '', name: '', internal: false, type: AuthScopeEnum.SYSTEM });
const currentId = computed(() => currentItem.value.id);
const currentId = ref('');
const currentName = computed(() => currentItem.value.name);
const userModalVisible = ref(false);
@ -349,11 +363,12 @@
const handleListItemClick = (element: UserGroupItem) => {
const { id, name, type, internal } = element;
currentItem.value = { id, name, type, internal };
emit('onSelect', element);
currentId.value = id;
emit('handleSelect', element);
};
// 用户组数据初始化
const initData = async (id?: string) => {
const initData = async (id?: string, isSelect = true) => {
try {
let res: UserGroupItem[] = [];
if (systemType === AuthScopeEnum.SYSTEM) {
@ -369,7 +384,13 @@
if (id) {
tmpItem = res.find((i) => i.id === id) || res[0];
}
if (isSelect) {
// leftCollapse 切换时不重复数据请求
handleListItemClick(tmpItem);
} else {
// leftCollapse 切换时调用
currentId.value = id || '';
}
// 弹窗赋值
const tmpObj: PopVisible = {};
res.forEach((element) => {
@ -449,12 +470,12 @@
};
const handleRenameCancel = (element: UserGroupItem, id?: string) => {
if (id) {
initData(id);
initData(id, true);
}
popVisible.value[element.id].visible = false;
};
onMounted(() => {
initData();
defineExpose({
initData,
});
</script>

3
frontend/src/components/business/ms-user-group-comp/userTable.vue
View File

@ -72,7 +72,6 @@
}
return postOrgUserByUserGroup;
// TODO: 项目
};
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(getRequestBySystemType(), {
@ -81,7 +80,7 @@
selectable: false,
noDisable: true,
showSetting: false,
heightUsed: 340,
heightUsed: 380,
});
const fetchData = async () => {

6
frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
View File

@ -34,14 +34,13 @@
</div>
</template>
</MsBaseTable>
<a-drawer
<MsDrawer
:width="928"
:visible="authVisible"
unmount-on-close
:footer="!currentItem.internal"
:title="currentItem.name"
:mask="false"
class="ms-drawer-no-mask"
@cancel="authVisible = false"
>
<AuthTable ref="authRef" :current="currentItem" />
@ -55,7 +54,7 @@
}}</a-button>
</div>
</template>
</a-drawer>
</MsDrawer>
<UserDrawer
:visible="userVisible"
:project-id="currentProjectId"
@ -114,6 +113,7 @@
import MsButton from '@/components/pure/ms-button/not-mr.vue';
import useModal from '@/hooks/useModal';
import { Message, ValidatedError } from '@arco-design/web-vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
provide('systemType', AuthScopeEnum.PROJECT);

5
frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
View File

@ -1,5 +1,5 @@
<template>
<a-drawer
<MsDrawer
:width="680"
:visible="currentVisible"
unmount-on-close
@ -39,7 +39,7 @@
</template>
</ms-base-table>
</div>
</a-drawer>
</MsDrawer>
<AddUserModal
:project-id="props.projectId"
:user-role-id="props.userRoleId"
@ -58,6 +58,7 @@
import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue';
import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
export interface projectDrawerProps {
visible: boolean;

6
frontend/src/views/setting/organization/project/components/userDrawer.vue
View File

@ -1,12 +1,11 @@
<template>
<a-drawer
<MsDrawer
:width="680"
:visible="currentVisible"
unmount-on-close
:footer="false"
:title="t('system.organization.addMember')"
:mask="false"
class="ms-drawer-no-mask"
@cancel="handleCancel"
>
<div>
@ -39,7 +38,7 @@
</template>
</ms-base-table>
</div>
</a-drawer>
</MsDrawer>
<AddUserModal
:project-id="props.projectId"
:organization-id="props.organizationId"
@ -58,6 +57,7 @@
import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue';
import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
export interface projectDrawerProps {
visible: boolean;

1
frontend/src/views/setting/organization/project/orgProject.vue
View File

@ -151,6 +151,7 @@
slotName: 'operation',
dataIndex: 'operation',
fixed: 'right',
width: 230,
},
];

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

@ -1,14 +1,18 @@
<template>
<MsCard simple>
<div class="flex flex-row">
<div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
<UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
<div class="usergroup-collapse" @click="handleCollapse">
<MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
<MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
<div class="card">
<div class="flex h-full flex-row">
<Transition>
<div v-if="leftCollapse" class="user-group-left">
<UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
</div>
</Transition>
<Transition>
<div class="usergroup-collapse" :style="leftCollapse ? 'left: 300px' : 'left: 0'" @click="handleCollapse">
<icon-double-left v-if="leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
<icon-double-right v-else class="text-[12px] text-[var(--color-text-brand)]" />
</div>
<div class="relative w-[100%] overflow-x-scroll p-[24px]">
</Transition>
<div class="w-[100%] p-[24px]">
<div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div>
@ -39,7 +43,7 @@
</div>
</div>
</div>
</MsCard>
</div>
<div
v-if="currentTable === 'auth'"
class="fixed bottom-[16px] right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
@ -53,13 +57,11 @@
</template>
<script lang="ts" setup>
import { ref, computed, watchEffect, nextTick, provide } from 'vue';
import { ref, computed, watchEffect, nextTick, provide, onMounted } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsCard from '@/components/pure/ms-card/index.vue';
import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.vue';
import UserTable from '@/components/business/ms-user-group-comp//userTable.vue';
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import { useAppStore } from '@/store';
import { AuthScopeEnum } from '@/enums/commonEnum';
@ -72,6 +74,7 @@
const { t } = useI18n();
const currentKeyword = ref('');
const ugLeftRef = ref();
const currentUserGroupItem = ref<CurrentUserGroupItem>({
id: '',
name: '',
@ -114,13 +117,18 @@
const handleCollapse = () => {
leftCollapse.value = !leftCollapse.value;
if (leftCollapse.value) {
nextTick(() => {
ugLeftRef.value?.initData(currentUserGroupItem.value.id, false);
});
}
};
const menuWidth = computed(() => {
const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
if (leftCollapse.value) {
return width + 300;
}
return width + 24;
return width;
});
const handleReset = () => {
@ -144,40 +152,48 @@
currentTable.value = 'auth';
}
});
onMounted(() => {
ugLeftRef.value?.initData();
});
</script>
<style lang="scss" scoped>
.title {
color: var(--color-text-1);
}
.user-group {
height: calc(100vh - 72px);
.card {
@apply overflow-hidden bg-white;
position: relative;
height: calc(100vh - 88px);
border-radius: var(--border-radius-large);
box-shadow: 0 0 10px rgb(120 56 135 / 5%);
}
.user-group-left {
position: relative;
overflow: hidden;
width: 300px;
height: calc(100vh - 125px);
border-right: 1px solid var(--color-border);
min-width: 300px;
height: 100%;
border-right: 1px solid var(--color-border-1);
}
.usergroup-collapse {
position: absolute;
top: 50%;
right: -16px;
z-index: 100;
left: 300px;
z-index: 101;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 36px;
background-color: var(--color-text-n8);
opacity: 0;
flex-shrink: 0;
cursor: pointer;
&:hover {
opacity: 1;
}
.icon {
font-size: 12px;
color: var(--color-text-brand);
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

5
frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue
View File

@ -1,5 +1,5 @@
<template>
<a-drawer
<ms-drawer
:mask="false"
:width="680"
:visible="currentVisible"
@ -22,7 +22,7 @@
</div>
<ms-base-table v-bind="propsRes" v-on="propsEvent" />
</div>
</a-drawer>
</ms-drawer>
</template>
<script lang="ts" setup>
@ -32,6 +32,7 @@
import { useI18n } from '@/hooks/useI18n';
import { watch, ref } from 'vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
export interface projectDrawerProps {
visible: boolean;

8
frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
View File

@ -99,7 +99,6 @@
revokeDeletedSlot: 'revokeDelete',
editType: ColumnEditTypeEnum.INPUT,
showTooltip: true,
width: 300,
},
{
title: 'system.organization.member',
@ -122,6 +121,7 @@
sorter: true,
sortDirections: ['ascend', 'descend'],
},
width: 200,
},
{
title: 'system.organization.creator',
@ -151,16 +151,18 @@
}
};
tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
// tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
const { propsRes, propsEvent, loadList, setKeyword } = useTable(
postProjectTable,
{
columns: organizationColumns,
tableKey: TableKeyEnum.SYSTEM_PROJECT,
scroll: { x: '1600px' },
selectable: false,
noDisable: false,
size: 'default',
showSetting: true,
// showSetting: true,
editKey: 'name',
},
undefined,

5
frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
View File

@ -1,5 +1,5 @@
<template>
<a-drawer
<ms-drawer
:mask="false"
:width="680"
:visible="currentVisible"
@ -39,7 +39,7 @@
</template>
</ms-base-table>
</div>
</a-drawer>
</ms-drawer>
<AddUserModal
:project-id="props.projectId"
:organization-id="props.organizationId"
@ -62,6 +62,7 @@
import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue';
import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
export interface projectDrawerProps {
visible: boolean;

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

@ -1,14 +1,18 @@
<template>
<MsCard auto-height simple>
<div class="flex flex-row">
<div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
<UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
<div class="usergroup-collapse" @click="handleCollapse">
<MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
<MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
<div class="card">
<div class="flex h-full flex-row">
<Transition>
<div v-if="leftCollapse" class="user-group-left">
<UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
</div>
</Transition>
<Transition>
<div class="usergroup-collapse" :style="leftCollapse ? 'left: 300px' : 'left: 0'" @click="handleCollapse">
<icon-double-left v-if="leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
<icon-double-right v-if="!leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
</div>
<div class="relative w-[100%] overflow-x-scroll p-[24px]">
</Transition>
<div class="w-[100%] p-[24px]">
<div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div>
@ -39,7 +43,7 @@
</div>
</div>
</div>
</MsCard>
</div>
<div
v-if="currentTable === 'auth'"
class="fixed bottom-[16px] right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
@ -53,13 +57,11 @@
</template>
<script lang="ts" setup>
import { ref, computed, watchEffect, nextTick, provide } from 'vue';
import { ref, computed, watchEffect, nextTick, provide, onMounted } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsCard from '@/components/pure/ms-card/index.vue';
import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.vue';
import UserTable from '@/components/business/ms-user-group-comp/userTable.vue';
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import { useAppStore } from '@/store';
import { AuthScopeEnum } from '@/enums/commonEnum';
@ -70,6 +72,7 @@
const { t } = useI18n();
const currentKeyword = ref('');
const ugLeftRef = ref();
const currentUserGroupItem = ref<CurrentUserGroupItem>({
id: '',
name: '',
@ -114,13 +117,18 @@
const couldShowAuth = computed(() => currentUserGroupItem.value.id !== 'admin');
const handleCollapse = () => {
leftCollapse.value = !leftCollapse.value;
if (leftCollapse.value) {
nextTick(() => {
ugLeftRef.value?.initData(currentUserGroupItem.value.id, false);
});
}
};
const menuWidth = computed(() => {
const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
if (leftCollapse.value) {
return width + 300;
}
return width + 24;
return width;
});
const handleReset = () => {
@ -144,35 +152,48 @@
currentTable.value = 'auth';
}
});
onMounted(() => {
ugLeftRef.value?.initData();
});
</script>
<style lang="scss" scoped>
.card {
@apply overflow-hidden bg-white;
position: relative;
height: calc(100vh - 88px);
border-radius: var(--border-radius-large);
box-shadow: 0 0 10px rgb(120 56 135 / 5%);
}
.user-group-left {
position: relative;
overflow-y: scroll;
overflow: hidden;
width: 300px;
height: calc(100vh - 125px);
min-width: 300px;
height: 100%;
border-right: 1px solid var(--color-border-1);
}
.usergroup-collapse {
position: absolute;
top: 50%;
right: -16px;
z-index: 100;
left: 300px;
z-index: 101;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 36px;
background-color: var(--color-text-8);
opacity: 1;
background-color: var(--color-text-n8);
flex-shrink: 0;
cursor: pointer;
&:hover {
opacity: 1;
}
.icon {
font-size: 12px;
color: var(--color-text-brand);
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>