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> <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 <a-breadcrumb-item
v-for="(crumb, index) of appStore.breadcrumbList" v-for="(crumb, index) of appStore.breadcrumbList"
:key="crumb.name" :key="crumb.name"

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -99,7 +99,8 @@
</a-tabs> </a-tabs>
</div> </div>
</MsCard> </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> <MsSplitBox>
<template #first> <template #first>
<div class="p-[16px]"> <div class="p-[16px]">

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

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

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

@ -254,10 +254,9 @@
<style lang="less" scoped> <style lang="less" scoped>
.page { .page {
@apply bg-white; @apply h-full bg-white;
min-width: 1000px; min-width: 1000px;
height: calc(100vh - 76px);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
.folder { .folder {
@apply flex cursor-pointer items-center justify-between; @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> <template>
<div> <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"> <a-alert v-if="!getIsVisited()" :show-icon="false" class="mb-[16px]" closable @close="addVisited">
{{ t('project.messageManagement.botListTips') }} {{ t('project.messageManagement.botListTips') }}
<template #close-element> <template #close-element>

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

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

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

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