From a4de1173bc5d6bdd8eb7bc296b2ebb7be8461b42 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Thu, 25 Apr 2024 16:22:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://www.tapd.cn/55049933/prong/tasks/view/1155049933001014958
---
 .../business/ms-breadcrumb/index.vue          |  2 +-
 .../src/components/business/ms-menu/index.vue |  8 ++---
 .../components/business/ms-top-menu/index.vue | 19 +++++++++--
 .../src/components/pure/ms-card/index.vue     | 11 +++++--
 frontend/src/components/pure/navbar/index.vue | 32 ++-----------------
 frontend/src/config/settings.json             |  3 +-
 frontend/src/layout/default-layout.vue        | 12 +++----
 frontend/src/store/modules/app/types.ts       |  1 +
 .../case-management/caseReview/detail.vue     |  3 +-
 .../environmental/index.vue                   |  3 +-
 .../fileManagement/index.vue                  |  3 +-
 .../components/robotList.vue                  |  3 +-
 .../organization/usergroup/orgUserGroup.vue   | 15 ++-------
 .../system/config/components/pageConfig.vue   |  3 +-
 14 files changed, 51 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/business/ms-breadcrumb/index.vue b/frontend/src/components/business/ms-breadcrumb/index.vue
index 82e1bc65c0..64082098f5 100644
--- a/frontend/src/components/business/ms-breadcrumb/index.vue
+++ b/frontend/src/components/business/ms-breadcrumb/index.vue
@@ -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"
diff --git a/frontend/src/components/business/ms-menu/index.vue b/frontend/src/components/business/ms-menu/index.vue
index c16fe60605..cead8549d8 100644
--- a/frontend/src/components/business/ms-menu/index.vue
+++ b/frontend/src/components/business/ms-menu/index.vue
@@ -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%);
diff --git a/frontend/src/components/business/ms-top-menu/index.vue b/frontend/src/components/business/ms-top-menu/index.vue
index c3ec55d11e..4e4ab48d99 100644
--- a/frontend/src/components/business/ms-top-menu/index.vue
+++ b/frontend/src/components/business/ms-top-menu/index.vue
@@ -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>
diff --git a/frontend/src/components/pure/ms-card/index.vue b/frontend/src/components/pure/ms-card/index.vue
index 3fe33a7896..c559f45719 100644
--- a/frontend/src/components/pure/ms-card/index.vue
+++ b/frontend/src/components/pure/ms-card/index.vue
@@ -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) {
       // 没有底部
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index 0b12cd5407..c6ef17d3ae 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -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 {
diff --git a/frontend/src/config/settings.json b/frontend/src/config/settings.json
index 611859dd48..c4cca775ed 100644
--- a/frontend/src/config/settings.json
+++ b/frontend/src/config/settings.json
@@ -7,7 +7,8 @@
   "menuCollapse": false,
   "footer": false,
   "themeColor": "#5736E9",
-  "menuWidth": 212,
+  "menuWidth": 200,
+  "collapsedWidth": 72,
   "globalSettings": false,
   "device": "desktop",
   "tabBar": false,
diff --git a/frontend/src/layout/default-layout.vue b/frontend/src/layout/default-layout.vue
index f435b53ee8..b3f9f2187d 100644
--- a/frontend/src/layout/default-layout.vue
+++ b/frontend/src/layout/default-layout.vue
@@ -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 {
diff --git a/frontend/src/store/modules/app/types.ts b/frontend/src/store/modules/app/types.ts
index 6817e1282e..da712a2985 100644
--- a/frontend/src/store/modules/app/types.ts
+++ b/frontend/src/store/modules/app/types.ts
@@ -15,6 +15,7 @@ export interface AppState {
   menuCollapse: boolean;
   footer: boolean;
   menuWidth: number;
+  collapsedWidth: number;
   globalSettings: boolean;
   device: string;
   tabBar: boolean;
diff --git a/frontend/src/views/case-management/caseReview/detail.vue b/frontend/src/views/case-management/caseReview/detail.vue
index 75fd900af4..f2d86524eb 100644
--- a/frontend/src/views/case-management/caseReview/detail.vue
+++ b/frontend/src/views/case-management/caseReview/detail.vue
@@ -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]">
diff --git a/frontend/src/views/project-management/environmental/index.vue b/frontend/src/views/project-management/environmental/index.vue
index 5a80f84f2d..ec01234ea2 100644
--- a/frontend/src/views/project-management/environmental/index.vue
+++ b/frontend/src/views/project-management/environmental/index.vue
@@ -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 {
diff --git a/frontend/src/views/project-management/fileManagement/index.vue b/frontend/src/views/project-management/fileManagement/index.vue
index 2b8487ff1e..7f6aff2b04 100644
--- a/frontend/src/views/project-management/fileManagement/index.vue
+++ b/frontend/src/views/project-management/fileManagement/index.vue
@@ -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;
diff --git a/frontend/src/views/project-management/messageManagement/components/robotList.vue b/frontend/src/views/project-management/messageManagement/components/robotList.vue
index 63b9741643..34358a2fa0 100644
--- a/frontend/src/views/project-management/messageManagement/components/robotList.vue
+++ b/frontend/src/views/project-management/messageManagement/components/robotList.vue
@@ -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>
diff --git a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
index 5dd5db1d9a..6f6f57643f 100644
--- a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
+++ b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
@@ -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>
diff --git a/frontend/src/views/setting/system/config/components/pageConfig.vue b/frontend/src/views/setting/system/config/components/pageConfig.vue
index 52ef0d0374..fed913fac6 100644
--- a/frontend/src/views/setting/system/config/components/pageConfig.vue
+++ b/frontend/src/views/setting/system/config/components/pageConfig.vue
@@ -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) });