From f428fda5dc97b10606c656ca132f3fd4dd84317b Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Wed, 26 Jul 2023 19:04:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4&?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/style/arco-reset.less     |  9 ++---
 .../bussiness/ms-batch-form/index.vue         |  2 +-
 .../src/components/pure/ms-card/index.vue     | 34 +++++++++++--------
 frontend/src/layout/default-layout.vue        |  2 --
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 39a8abfa16..8dd963884f 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/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);
   }
 }
diff --git a/frontend/src/components/bussiness/ms-batch-form/index.vue b/frontend/src/components/bussiness/ms-batch-form/index.vue
index 7de81f9b0c..fa6207659c 100644
--- a/frontend/src/components/bussiness/ms-batch-form/index.vue
+++ b/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}`">
diff --git a/frontend/src/components/pure/ms-card/index.vue b/frontend/src/components/pure/ms-card/index.vue
index e5b63f0d81..b33bb3c292 100644
--- a/frontend/src/components/pure/ms-card/index.vue
+++ b/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>
diff --git a/frontend/src/layout/default-layout.vue b/frontend/src/layout/default-layout.vue
index f806acfbcb..229583a28d 100644
--- a/frontend/src/layout/default-layout.vue
+++ b/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;
     }
   }