From c4a469b440f038b4526d472db310c5eb36280d24 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Sun, 15 Jun 2025 17:16:32 +0800
Subject: [PATCH] feat: enhance SystemDetail layout and improve customization
 form with scrollbar

---
 .../src/views/system/detail/SystemDetail.vue  |   2 +-
 .../detail/tabs/SystemDetailTabCustomize.vue  | 163 +++++++++---------
 2 files changed, 86 insertions(+), 79 deletions(-)

diff --git a/frontend/crawlab-ui/src/views/system/detail/SystemDetail.vue b/frontend/crawlab-ui/src/views/system/detail/SystemDetail.vue
index f020fa5c..37b3cba1 100644
--- a/frontend/crawlab-ui/src/views/system/detail/SystemDetail.vue
+++ b/frontend/crawlab-ui/src/views/system/detail/SystemDetail.vue
@@ -77,7 +77,7 @@ defineOptions({ name: 'ClSystemDetail' });
 <style scoped>
 .system-detail {
   background-color: #ffffff;
-  min-height: 100%;
+  height: calc(100vh - var(--cl-header-height) - var(--cl-tabs-view-height));
   display: flex;
   overflow: hidden;
 
diff --git a/frontend/crawlab-ui/src/views/system/detail/tabs/SystemDetailTabCustomize.vue b/frontend/crawlab-ui/src/views/system/detail/tabs/SystemDetailTabCustomize.vue
index e761c933..3eedf007 100644
--- a/frontend/crawlab-ui/src/views/system/detail/tabs/SystemDetailTabCustomize.vue
+++ b/frontend/crawlab-ui/src/views/system/detail/tabs/SystemDetailTabCustomize.vue
@@ -80,94 +80,101 @@ defineOptions({ name: 'ClSystemDetailTabCustomize' });
 </script>
 
 <template>
-  <cl-form v-if="form?.value" ref="formRef" :model="form.value" label-width="200px">
-    <cl-form-item
-      :span="4"
-      :label="t('views.system.customize.showCustomTitle')"
-      prop="show_custom_title"
+  <el-scrollbar>
+    <cl-form
+      v-if="form?.value"
+      ref="formRef"
+      :model="form.value"
+      label-width="200px"
     >
-      <cl-switch v-model="form.value.show_custom_title" @change="onSave" />
-    </cl-form-item>
-    <cl-form-item
-      :span="4"
-      :label="t('views.system.customize.customTitle')"
-      prop="custom_title"
-      :required="form.value.show_custom_title"
-    >
-      <cl-edit-input
-        v-model="form.value.custom_title"
-        :disabled="!form.value.show_custom_title"
-        :placeholder="t('views.system.customize.customTitle')"
-        @change="onSave"
-      />
-    </cl-form-item>
-
-    <el-divider />
-
-    <cl-form-item
-      :span="4"
-      :label="t('views.system.customize.showCustomLogo')"
-      prop="show_custom_logo"
-    >
-      <cl-switch v-model="form.value.show_custom_logo" @change="onSave" />
-    </cl-form-item>
-    <cl-form-item
-      :span="4"
-      :label="t('views.system.customize.customLogo')"
-      prop="custom_logo"
-      :required="form.value.show_custom_logo"
-    >
-      <div
-        class="site-logo"
-        :class="!form.value.show_custom_logo ? 'disabled' : ''"
+      <cl-form-item
+        :span="4"
+        :label="t('views.system.customize.showCustomTitle')"
+        prop="show_custom_title"
       >
-        <el-upload
-          ref="customLogoUploadRef"
-          :auto-upload="false"
-          :show-file-list="false"
-          :disabled="!form.value.show_custom_logo"
-          :on-change="onUploadCustomLogo"
-          :on-remove="
+        <cl-switch v-model="form.value.show_custom_title" @change="onSave" />
+      </cl-form-item>
+      <cl-form-item
+        :span="4"
+        :label="t('views.system.customize.customTitle')"
+        prop="custom_title"
+        :required="form.value.show_custom_title"
+      >
+        <cl-edit-input
+          v-model="form.value.custom_title"
+          :disabled="!form.value.show_custom_title"
+          :placeholder="t('views.system.customize.customTitle')"
+          @change="onSave"
+        />
+      </cl-form-item>
+
+      <el-divider />
+
+      <cl-form-item
+        :span="4"
+        :label="t('views.system.customize.showCustomLogo')"
+        prop="show_custom_logo"
+      >
+        <cl-switch v-model="form.value.show_custom_logo" @change="onSave" />
+      </cl-form-item>
+      <cl-form-item
+        :span="4"
+        :label="t('views.system.customize.customLogo')"
+        prop="custom_logo"
+        :required="form.value.show_custom_logo"
+      >
+        <div
+          class="site-logo"
+          :class="!form.value.show_custom_logo ? 'disabled' : ''"
+        >
+          <el-upload
+            ref="customLogoUploadRef"
+            :auto-upload="false"
+            :show-file-list="false"
+            :disabled="!form.value.show_custom_logo"
+            :on-change="onUploadCustomLogo"
+            :on-remove="
             async () => {
               form.value.custom_logo = '';
               await save();
             }
           "
-        >
-          <div v-if="form.value.custom_logo" class="site-logo-img-wrapper">
-            <img
-              :src="form.value.custom_logo"
-              class="site-logo-img"
-              alt="logo"
-            />
-            <div class="actions">
-              <el-icon class="remove-button" @click.stop="onCustomLogoRemove">
-                <Delete />
-              </el-icon>
+          >
+            <div v-if="form.value.custom_logo" class="site-logo-img-wrapper">
+              <img
+                :src="form.value.custom_logo"
+                class="site-logo-img"
+                alt="logo"
+              />
+              <div class="actions">
+                <el-icon class="remove-button" @click.stop="onCustomLogoRemove">
+                  <Delete />
+                </el-icon>
+              </div>
             </div>
-          </div>
-          <el-icon v-else class="site-logo-uploader-icon">
-            <Plus />
-          </el-icon>
-          <template #tip>
-            <div class="el-upload__tip">
-              {{ t('views.system.customize.uploadLogoTip') }}
-            </div>
-          </template>
-        </el-upload>
-      </div>
-    </cl-form-item>
+            <el-icon v-else class="site-logo-uploader-icon">
+              <Plus />
+            </el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                {{ t('views.system.customize.uploadLogoTip') }}
+              </div>
+            </template>
+          </el-upload>
+        </div>
+      </cl-form-item>
 
-    <el-divider />
+      <el-divider />
 
-    <cl-form-item
-      :span="4"
-      :label="t('views.system.customize.hidePlatformVersion')"
-      prop="hide_platform_version"
-    >
-      <cl-switch v-model="form.value.hide_platform_version" @change="onSave" />
-    </cl-form-item>
-  </cl-form>
+      <cl-form-item
+        :span="4"
+        :label="t('views.system.customize.hidePlatformVersion')"
+        prop="hide_platform_version"
+      >
+        <cl-switch v-model="form.value.hide_platform_version" @change="onSave" />
+      </cl-form-item>
+    </cl-form>
+  </el-scrollbar>
 </template>
 
 <style scoped>