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

style: 调整页面整体布局 

https://www.tapd.cn/55049933/prong/tasks/view/1155049933001014958
This commit is contained in:
teukkk 2024-04-25 16:22:44 +08:00 committed by Craftsman
parent 86ad72b2c5
commit a4de1173bc
14 changed files with 51 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/business/ms-breadcrumb/index.vue
View File

@ -1,5 +1,5 @@
<template>
<a-breadcrumb v-if="appStore.breadcrumbList.length > 0" class="z-10 mb-[-8px]">
<a-breadcrumb v-if="appStore.breadcrumbList.length > 0" class="z-10">
<a-breadcrumb-item
v-for="(crumb, index) of appStore.breadcrumbList"
:key="crumb.name"

8
frontend/src/components/business/ms-menu/index.vue
View File

@ -512,7 +512,7 @@
.arco-menu-inner {
@apply flex flex-col justify-between;
padding: 16px 28px 16px 16px !important;
padding: 16px !important;
.arco-menu-inline {
&--bottom {
@apply mt-auto;
@ -586,7 +586,7 @@
min-width: 60px;
}
.arco-menu-collapsed {
width: 86px;
width: 72px;
.arco-avatar,
.arco-icon {
margin-right: 2px !important;
@ -601,8 +601,8 @@
.arco-menu-collapse-button {
@apply hidden rounded-full;
top: 22px;
right: 4px;
top: 24px;
right: -12px;
border: 1px solid #ffffff;
background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
box-shadow: 0 0 7px rgb(15 0 78 / 9%);

19
frontend/src/components/business/ms-top-menu/index.vue
View File

@ -140,9 +140,24 @@
<style lang="less" scoped>
:deep(.arco-menu-inner) {
overflow-y: hidden;
padding: 9px 0;
padding: 12px 16px 12px 8px;
.arco-menu-item {
@apply !bg-transparent;
&:not(:first-child) {
margin-left: 8px;
}
&:hover {
color: rgb(var(--primary-4));
}
}
.arco-menu-selected {
@apply !font-normal;
color: rgb(var(--primary-5));
background-color: var(--color-text-fff) !important;
}
.arco-menu-selected-label {
bottom: -8px !important;
display: none;
}
}
</style>

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

@ -127,9 +127,8 @@
const { t } = useI18n();
const appStore = useAppStore();
const collapsedWidth = 86;
const menuWidth = computed(() => {
return appStore.menuCollapse ? collapsedWidth : appStore.menuWidth;
return appStore.menuCollapse ? appStore.collapsedWidth : appStore.menuWidth;
});
// 用于全屏的容器 ref
@ -145,13 +144,19 @@
const _specialHeight = props.hasBreadcrumb ? 32 + props.specialHeight : props.specialHeight; // 有面包屑的话，默认面包屑高度32
// TODO：卡片高度调整，写上数值的注释
const cardOverHeight = computed(() => {
const contentPadding = 32; // 16+16 上下内容边距
const navbarHeight = 56; // 顶部导航高度
const layoutContentPaddingBottom = 16; // 卡片到底部距离
if (isFullScreen.value) {
return 106;
}
if (props.simple) {
// 简单模式没有标题、没有底部
return props.noContentPadding ? 66 + _specialHeight : 114 + _specialHeight;
return props.noContentPadding
? navbarHeight + layoutContentPaddingBottom + _specialHeight
: navbarHeight + layoutContentPaddingBottom + contentPadding + _specialHeight;
}
if (props.hideFooter) {
// 没有底部

32
frontend/src/components/pure/navbar/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="navbar">
<div class="left-side">
<div class="flex items-center px-[16px]">
<a-space>
<div class="one-line-text flex max-w-[145px] items-center">
<img :src="props.logo" class="mr-[4px] h-[34px] w-[32px]" />
@ -14,7 +14,6 @@
</div>
<div v-if="!props.isPreview" class="center-side">
<template v-if="showProjectSelect">
<a-divider direction="vertical" class="ml-0" />
<a-select
v-model:model-value="appStore.currentProjectId"
class="w-[200px] focus-within:!bg-[var(--color-text-n8)] hover:!bg-[var(--color-text-n8)]"
@ -40,7 +39,6 @@
</a-option>
</a-tooltip>
</a-select>
<a-divider direction="vertical" class="mr-0" />
</template>
<TopMenu />
</div>
@ -283,26 +281,19 @@
.navbar {
@apply flex h-full justify-between bg-transparent;
}
.left-side {
@apply flex items-center;
padding-left: 24px;
width: 185px;
}
.center-side {
@apply flex flex-1 items-center;
}
.right-side {
@apply flex list-none;
padding-right: 20px;
padding-right: 16px;
gap: 8px;
:deep(.locale-select) {
border-radius: 20px;
}
li {
@apply flex items-center;
padding-left: 10px;
.arco-btn-secondary {
@apply !bg-transparent;
@ -342,23 +333,6 @@
@apply mt-0;
}
}
.arco-menu-horizontal {
.arco-menu-inner {
.arco-menu-item,
.arco-menu-overflow-sub-menu {
@apply !bg-transparent;
}
.arco-menu-selected {
@apply !font-normal;
color: rgb(var(--primary-5)) !important;
.arco-menu-selected-label {
bottom: -11px;
background-color: rgb(var(--primary-5)) !important;
}
}
}
}
.arco-trigger-menu-vertical {
max-height: 500px;
.arco-trigger-menu-selected {

3
frontend/src/config/settings.json
View File

@ -7,7 +7,8 @@
"menuCollapse": false,
"footer": false,
"themeColor": "#5736E9",
"menuWidth": 212,
"menuWidth": 200,
"collapsedWidth": 72,
"globalSettings": false,
"device": "desktop",
"tabBar": false,

12
frontend/src/layout/default-layout.vue
View File

@ -19,7 +19,7 @@
:collapsed="collapsed"
:collapsible="true"
:width="menuWidth"
:collapsed-width="collapsedWidth"
:collapsed-width="appStore.collapsedWidth"
:style="{ paddingTop: navbar ? navbarHeight : '' }"
:hide-trigger="true"
@collapse="setCollapsed"
@ -113,9 +113,8 @@
const renderMenu = computed(() => appStore.menu);
const hideMenu = computed(() => appStore.hideMenu);
const footer = computed(() => appStore.footer);
const collapsedWidth = 86;
const menuWidth = computed(() => {
return appStore.menuCollapse ? collapsedWidth : appStore.menuWidth;
return appStore.menuCollapse ? appStore.collapsedWidth : appStore.menuWidth;
});
const collapsed = computed(() => {
return appStore.menuCollapse;
@ -163,11 +162,11 @@
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
> :deep(.arco-layout-sider-children) {
@apply overflow-y-hidden;
@apply overflow-visible; // 防止展开收起按钮显示不全
}
}
.menu-wrapper {
@apply h-full overflow-auto overflow-x-hidden;
@apply h-full overflow-visible; // 防止展开收起按钮显示不全
:deep(.arco-menu) {
::-webkit-scrollbar {
width: 12px;
@ -205,7 +204,8 @@
background-color: var(--color-bg-3);
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
.arco-layout-content {
padding: 8px 16px 0 0;
overflow: hidden;
padding: 0 16px 16px 0;
}
}
.arco-layout-sider-light {

1
frontend/src/store/modules/app/types.ts
View File

@ -15,6 +15,7 @@ export interface AppState {
menuCollapse: boolean;
footer: boolean;
menuWidth: number;
collapsedWidth: number;
globalSettings: boolean;
device: string;
tabBar: boolean;

3
frontend/src/views/case-management/caseReview/detail.vue
View File

@ -99,7 +99,8 @@
</a-tabs>
</div>
</MsCard>
<MsCard class="mt-[16px]" :special-height="180" simple has-breadcrumb no-content-padding>
<!-- special-height的170: 上面卡片高度154 + mt的16 -->
<MsCard class="mt-[16px]" :special-height="170" simple has-breadcrumb no-content-padding>
<MsSplitBox>
<template #first>
<div class="p-[16px]">

3
frontend/src/views/project-management/environmental/index.vue
View File

@ -753,9 +753,8 @@
<style lang="less" scoped>
.page {
@apply bg-white;
@apply h-full bg-white;
height: calc(100vh - 88px);
border-radius: var(--border-radius-large);
}
.env-item {

3
frontend/src/views/project-management/fileManagement/index.vue
View File

@ -254,10 +254,9 @@
<style lang="less" scoped>
.page {
@apply bg-white;
@apply h-full bg-white;
min-width: 1000px;
height: calc(100vh - 76px);
border-radius: var(--border-radius-large);
.folder {
@apply flex cursor-pointer items-center justify-between;

3
frontend/src/views/project-management/messageManagement/components/robotList.vue
View File

@ -1,6 +1,7 @@
<template>
<div>
<MsCard :min-width="1060" :special-height="127" simple>
<!-- special-height的119: 上面卡片高度103 +上面卡片高度mb的16 -->
<MsCard :min-width="1060" :special-height="119" simple>
<a-alert v-if="!getIsVisited()" :show-icon="false" class="mb-[16px]" closable @close="addVisited">
{{ t('project.messageManagement.botListTips') }}
<template #close-element>

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

@ -1,5 +1,4 @@
<template>
<!-- <div class="card"> -->
<MsCard simple no-content-padding>
<MsSplitBox v-model:width="leftWidth" @expand-change="handleCollapse">
<template #first>
@ -65,7 +64,6 @@
</template>
</MsSplitBox>
</MsCard>
<!-- </div> -->
</template>
<script lang="ts" setup>
@ -108,7 +106,7 @@
const leftCollapse = ref(true);
const leftWidth = ref('300px');
const bottomWidth = computed(() => {
const width = appStore.menuCollapse ? '86px' : `${appStore.menuWidth}px`;
const width = appStore.menuCollapse ? `${appStore.collapsedWidth}px` : `${appStore.menuWidth}px`;
if (leftCollapse.value) {
return `calc(100% - ${addPixelValues(width, leftWidth.value, '20px')})`;
}
@ -168,13 +166,4 @@
});
</script>
<style lang="less" 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%);
}
</style>
<style lang="less" scoped></style>

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

@ -374,9 +374,8 @@
const { t } = useI18n();
const { currentLocale } = useLocale();
const appStore = useAppStore();
const collapsedWidth = 86;
const menuWidth = computed(() => {
return appStore.menuCollapse ? collapsedWidth : appStore.menuWidth;
return appStore.menuCollapse ? appStore.collapsedWidth : appStore.menuWidth;
});
const pageLoading = ref(false);
const pageConfig = ref({ ...appStore.pageConfig, slogan: t(appStore.pageConfig.slogan) });