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

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

@@ -1,38 +1,40 @@
 <template>
   <a-spin class="block h-full" :loading="props.loading" :size="28">
     <div class="ms-card relative h-full pr-[10px]">
-      <div v-if="!simple" class="card-header">
-        <div class="back-btn" @click="back"><icon-arrow-left /></div>
+      <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="!simple" class="mb-[16px]" />
+      <a-divider v-if="!props.simple" class="mb-[16px]" />
       <div class="mr-[-10px]">
         <a-scrollbar
           class="pr-[10px]"
           :style="{
             overflowY: 'auto',
             minWidth: 1000,
-            height: `calc(100vh - ${256 + specialHeight}px)`,
+            height: `calc(100vh - ${cardOverHeight}px)`,
           }"
         >
           <slot></slot>
         </a-scrollbar>
       </div>
       <div
-        v-if="!hideFooter && !simple"
-        class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
+        v-if="!props.hideFooter && !props.simple"
+        class="fixed bottom-0 right-[16px] z-10 w-full bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
       >
         <div class="ml-0 mr-auto">
           <slot name="footerLeft"></slot>
         </div>
         <slot name="footerRight">
-          <a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
-          <a-button v-if="!props.hideContinue && !props.isEdit" type="secondary" @click="emit('saveAndContinue')">
-            {{ t('mscard.defaultSaveAndContinueText') }}
-          </a-button>
-          <a-button type="primary" @click="emit('save')">
-            {{ t(props.isEdit ? 'mscard.defaultUpdate' : 'mscard.defaultConfirm') }}
-          </a-button>
+          <div class="flex justify-end gap-[16px]">
+            <a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
+            <a-button v-if="!props.hideContinue && !props.isEdit" type="secondary" @click="emit('saveAndContinue')">
+              {{ t('mscard.defaultSaveAndContinueText') }}
+            </a-button>
+            <a-button type="primary" @click="emit('save')">
+              {{ t(props.isEdit ? 'mscard.defaultUpdate' : 'mscard.defaultConfirm') }}
+            </a-button>
+          </div>
         </slot>
       </div>
     </div>
@@ -42,6 +44,7 @@
 <script setup lang="ts">
   import { useRouter } from 'vue-router';
   import { useI18n } from '@/hooks/useI18n';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<
@@ -53,6 +56,7 @@
         loading: boolean;
         isEdit: boolean;
         specialHeight: number; // 特殊高度，例如某些页面有面包屑
+        hideBack: boolean;
         handleBack: () => void;
       }>
     >(),
@@ -62,6 +66,7 @@
       hideFooter: false,
       isEdit: false,
       specialHeight: 0,
+      hideBack: false,
     }
   );
 
@@ -69,6 +74,19 @@
 
   const router = useRouter();
   const { t } = useI18n();
+
+  const cardOverHeight = computed(() => {
+    if (props.simple) {
+      // 简单模式没有标题、没有底部
+      return 163;
+    }
+    if (props.hideFooter) {
+      // 隐藏底部
+      return 192;
+    }
+    return 256 + props.specialHeight;
+  });
+
   function back() {
     if (typeof props.handleBack === 'function') {
       props.handleBack();

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

@@ -18,10 +18,11 @@
         >
           {{ tag }}
         </a-tag>
+        <span v-show="Array.isArray(item.value) && item.value.length === 0">-</span>
       </template>
       <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
       <div v-else>
-        {{ item.value }}
+        {{ item.value?.toString() === '' ? '-' : item.value }}
       </div>
     </a-descriptions-item>
   </a-descriptions>

frontend/src/layout/default-layout.vue

@@ -168,7 +168,7 @@
     background-color: var(--color-bg-3);
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     .arco-layout-content {
-      padding: 16px 16px 16px 0;
+      padding: 16px 16px 0 0;
       min-height: 500px;
     }
   }