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

frontend/src/assets/style/arco-reset.less

@@ -452,20 +452,21 @@
 
 /** 滚动条 **/
 .arco-scrollbar-track-direction-horizontal {
-  height: 8px;
+  margin-bottom: 4px;
+  height: 6px;
   .arco-scrollbar-thumb-bar {
     @apply m-0;
 
-    height: 8px;
+    height: 6px;
     background-color: var(--color-text-input-border);
   }
 }
 .arco-scrollbar-track-direction-vertical {
-  width: 8px;
+  width: 6px;
   .arco-scrollbar-thumb-bar {
     @apply m-0;
 
-    width: 8px;
+    width: 6px;
     background-color: var(--color-text-input-border);
   }
 }

frontend/src/components/bussiness/ms-batch-form/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a-form ref="formRef" :model="form" layout="vertical">
-    <div class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
+    <div class="mb-[16px] min-w-[732px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
       <a-scrollbar class="overflow-y-auto" :style="{ 'max-height': props.maxHeight }">
         <div class="flex flex-wrap items-start justify-between gap-[8px]">
           <template v-for="(item, i) of form.list" :key="`form-item-${i}`">

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

@@ -1,6 +1,6 @@
 <template>
   <a-spin class="block h-full" :loading="props.loading" :size="28">
-    <div class="relative h-full pr-[10px]">
+    <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 class="text-[var(--color-text-000)]">{{ props.title }}</div>
@@ -11,6 +11,7 @@
           class="pr-[10px]"
           :style="{
             overflowY: 'auto',
+            minWidth: 1000,
             height: `calc(100vh - ${256 + specialHeight}px)`,
           }"
         >
@@ -39,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from '@/hooks/useI18n';
   import { useRouter } from 'vue-router';
+  import { useI18n } from '@/hooks/useI18n';
 
   const props = withDefaults(
     defineProps<
@@ -78,20 +79,25 @@
 </script>
 
 <style lang="less" scoped>
-  .card-header {
-    @apply flex items-center;
-    .back-btn {
-      @apply flex cursor-pointer items-center rounded-full;
+  .ms-card {
+    .card-header {
+      @apply flex items-center;
+      .back-btn {
+        @apply flex cursor-pointer items-center rounded-full;
 
-      margin-right: 8px;
-      width: 20px;
-      height: 20px;
-      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%);
-      .arco-icon {
-        color: rgb(var(--primary-5));
+        margin-right: 8px;
+        width: 20px;
+        height: 20px;
+        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%);
+        .arco-icon {
+          color: rgb(var(--primary-5));
+        }
       }
     }
+    :deep(.arco-scrollbar-track-direction-vertical) {
+      right: -10px;
+    }
   }
 </style>

frontend/src/layout/default-layout.vue

@@ -38,7 +38,6 @@
             <a-scrollbar
               :style="{
                 overflow: 'auto',
-                width: `calc(100vw - ${menuWidth}px)`,
                 height: 'calc(100vh - 64px)',
               }"
             >
@@ -170,7 +169,6 @@
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     .arco-layout-content {
       padding: 16px 16px 16px 0;
-      min-width: 1000px;
       min-height: 500px;
     }
   }