From f3d27b1fc3d1913bd972380e3947fa2c81ec8dd9 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 4 Jun 2025 16:52:43 +0800
Subject: [PATCH] feat: Style optimization

---
 frontend/src/components/layout/index.vue     | 12 +++++++++---
 frontend/src/style.less                      |  4 ++++
 frontend/src/views/ds/DatasourceItemCard.vue |  5 ++---
 frontend/src/views/ds/index.vue              |  8 ++++++--
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/layout/index.vue b/frontend/src/components/layout/index.vue
index 5a8e2bc2..0d50c449 100644
--- a/frontend/src/components/layout/index.vue
+++ b/frontend/src/components/layout/index.vue
@@ -9,7 +9,6 @@
             v-model="workspace"
             placeholder="Select"
             class="workspace-select"
-            size="large"
             style="width: 240px"
         >
           <template #label="{ label }">
@@ -242,7 +241,7 @@ onMounted(() => {
         width: 100% !important;
 
         :deep(.ed-select__wrapper) {
-          border-radius: 10px;
+          border-radius: 8px;
           box-shadow: none !important;
           background-color: #f1f3f4;
           line-height: 32px;
@@ -287,6 +286,9 @@ onMounted(() => {
     border-right: 1px solid #e6e6e6;
     display: flex;
     flex-direction: column;
+    .ed-menu--vertical {
+      padding: 0 16px;
+    }
   }
 
   .main-menu-topbar {
@@ -362,7 +364,7 @@ onMounted(() => {
         width: 100% !important;
 
         :deep(.ed-select__wrapper) {
-          border-radius: 10px;
+          border-radius: 8px;
           box-shadow: none !important;
           background-color: #f1f3f4;
           line-height: 24px;
@@ -407,6 +409,10 @@ onMounted(() => {
     background-color: #f5f7fa;
     box-sizing: border-box;
 
+    &:not(.main-conntent-withba) {
+      padding: 16px 24px;
+    }
+
     .header-container {
       box-sizing: border-box;
       margin: 0;
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 57d36638..5b837fc3 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -104,5 +104,9 @@ body {
   }
 }
 
+.border-radius_8 {
+  border-radius: 8px !important;
+}
+
 
 
diff --git a/frontend/src/views/ds/DatasourceItemCard.vue b/frontend/src/views/ds/DatasourceItemCard.vue
index a74a49a0..5cd48d9c 100644
--- a/frontend/src/views/ds/DatasourceItemCard.vue
+++ b/frontend/src/views/ds/DatasourceItemCard.vue
@@ -57,7 +57,6 @@ const getStatus = (status: string) => {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   display: flex;
   position: relative;
-  border: 1px solid #dadce0;
   transition: all 0.2s ease;
   align-items: center;
 }
@@ -65,7 +64,7 @@ const getStatus = (status: string) => {
 .connection-icon {
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: 8px;
   background-color: #e8f0fe;
   color: var(--primary-color);
   display: flex;
@@ -119,7 +118,7 @@ const getStatus = (status: string) => {
   right: 20px;
   top: 18px;
   padding: 3px 8px;
-  border-radius: 12px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
   display: flex;
diff --git a/frontend/src/views/ds/index.vue b/frontend/src/views/ds/index.vue
index c6d6ad6c..5a2537f8 100644
--- a/frontend/src/views/ds/index.vue
+++ b/frontend/src/views/ds/index.vue
@@ -18,7 +18,7 @@
         </el-input>
       </div>
 
-      <el-button type="primary" :icon="IconOpeAdd" @click="editDs(undefined)">Add Datasource</el-button>
+      <el-button class="border-radius_8" type="primary" :icon="IconOpeAdd" @click="editDs(undefined)">Add Datasource</el-button>
     </div>
 
     <div class="connections-container">
@@ -131,11 +131,15 @@ onMounted(() => {
 .header {
   background-color: white;
   padding: 16px 20px;
-  border-radius: 8px;
+  border-radius: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
+  .input-with-select {
+    --ed-input-border-radius: 8px;
+    --ed-border-radius-base: 8px;
+  }
 }
 
 .connections-container {