feat: 布局调整&卡片组件调整

frontend/src/components/pure/ms-card/index.vue

@@ -1,18 +1,26 @@
 <template>
   <a-spin class="block h-full" :loading="props.loading" :size="28">
-    <div class="ms-card relative h-full pr-[10px]">
+    <div
+      :class="[
+        'ms-card',
+        'relative',
+        'h-full',
+        props.autoHeight ? '' : 'min-h-[500px]',
+        props.noContentPadding ? 'ms-card--noContentPadding' : 'p-[24px]',
+      ]"
+    >
       <div v-if="!props.simple" class="card-header">
         <div v-if="!props.hideBack" class="back-btn" @click="back"><icon-arrow-left /></div>
         <div class="text-[var(--color-text-000)]">{{ props.title }}</div>
       </div>
       <a-divider v-if="!props.simple" class="mb-[16px]" />
-      <div class="mr-[-10px]">
+      <div class="ms-card-container">
         <a-scrollbar
-          class="pr-[10px]"
+          class="pr-[5px]"
           :style="{
             overflowY: 'auto',
             minWidth: 1000,
-            height: `calc(100vh - ${cardOverHeight}px)`,
+            height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`,
           }"
         >
           <slot></slot>
@@ -49,15 +57,18 @@
   const props = withDefaults(
     defineProps<
       Partial<{
-        simple: boolean;
+        simple: boolean; // 简单模式，没有标题和底部栏
-        title: string;
+        title: string; // 卡片标题
-        hideContinue: boolean;
+        hideContinue: boolean; // 隐藏保存并继续创建按钮
-        hideFooter: boolean;
+        hideFooter: boolean; // 隐藏底部栏
-        loading: boolean;
+        loading: boolean; // 卡片 loading 状态
-        isEdit: boolean;
+        isEdit: boolean; // 是否编辑状态
         specialHeight: number; // 特殊高度，例如某些页面有面包屑
-        hideBack: boolean;
+        hideBack: boolean; // 隐藏返回按钮
-        handleBack: () => void;
+        autoHeight: boolean; // 内容区域高度是否自适应
+        hasBreadcrumb: boolean; // 是否有面包屑，如果有面包屑，高度需要减去面包屑的高度
+        noContentPadding: boolean; // 内容区域是否有padding
+        handleBack: () => void; // 自定义返回按钮触发事件
       }>
     >(),
     {
@@ -67,6 +78,9 @@
       isEdit: false,
       specialHeight: 0,
       hideBack: false,
+      autoHeight: false,
+      hasBreadcrumb: false,
+      noContentPadding: false,
     }
   );
 
@@ -75,16 +89,18 @@
   const router = useRouter();
   const { t } = useI18n();
 
+  const _spcialHeight = props.hasBreadcrumb ? 31 + props.specialHeight : props.specialHeight; // 有面包屑的话，默认面包屑高度31
+
   const cardOverHeight = computed(() => {
     if (props.simple) {
       // 简单模式没有标题、没有底部
-      return 163;
+      return 136 + _spcialHeight;
     }
     if (props.hideFooter) {
       // 隐藏底部
       return 192;
     }
-    return 256 + props.specialHeight;
+    return 246 + _spcialHeight;
   });
 
   function back() {
@@ -98,6 +114,22 @@
 
 <style lang="less" scoped>
   .ms-card {
+    @apply overflow-hidden bg-white;
+
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 0 10px rgb(120 56 135 / 5%);
+    &--noContentPadding {
+      border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
+      .card-header {
+        padding: 24px 24px 0;
+      }
+      .arco-divider {
+        @apply mb-0;
+      }
+      .ms-card-container {
+        padding: 0;
+      }
+    }
     .card-header {
       @apply flex items-center;
       .back-btn {

frontend/src/layout/page-layout.vue

@@ -14,12 +14,4 @@
 
 <script lang="ts" setup></script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-  .page-content {
-    @apply overflow-hidden bg-white;
-
-    padding: 24px 14px 24px 24px;
-    border-radius: var(--border-radius-large);
-    box-shadow: 0 0 10px rgb(120 56 135 / 5%);
-  }
-</style>

frontend/src/views/setting/system/resourcePool/detail.vue

@@ -3,7 +3,7 @@
     :loading="loading"
     :title="title"
     :is-edit="isEdit"
-    :special-height="34"
+    has-breadcrumb
     @save="beforeSave"
     @save-and-continue="beforeSave(true)"
   >

frontend/src/views/setting/system/resourcePool/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <MsCard :loading="loading" simple>
+    <MsCard :loading="loading" has-breadcrumb simple>
       <div class="mb-4 flex items-center justify-between">
         <a-button type="primary" @click="addPool">
           {{ t('system.resourcePool.createPool') }}

frontend/src/views/setting/system/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <MsCard simple>
     <div class="mb-4 flex items-center justify-between">
       <div>
         <a-button class="mr-3" type="primary" @click="showUserModal('create')">
@@ -84,6 +84,7 @@
         </template>
       </template>
     </ms-base-table>
+  </MsCard>
   <a-modal
     v-model:visible="visible"
     :title="userFormMode === 'create' ? t('system.user.createUserModalTitle') : t('system.user.editUserModalTitle')"
@@ -128,9 +129,7 @@
         {{ t('system.user.editUserModalSaveAndContinue') }}
       </a-button>
       <a-button type="primary" :loading="loading" @click="beforeCreateUser">
-          {{
+        {{ t(userFormMode === 'create' ? 'system.user.editUserModalCreateUser' : 'system.user.editUserModalEditUser') }}
-            t(userFormMode === 'create' ? 'system.user.editUserModalCreateUser' : 'system.user.editUserModalEditUser')
-          }}
       </a-button>
     </template>
   </a-modal>
@@ -213,7 +212,6 @@
     :action="batchAction"
     :tree-data="treeData"
   ></batchModal>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -248,6 +246,7 @@
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
   import type { FormItemModel, MsBatchFormInstance } from '@/components/bussiness/ms-batch-form/types';
+  import MsCard from '@/components/pure/ms-card/index.vue';
 
   const { t } = useI18n();