feat: Style optimization

Author: dataeaseShu

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;

frontend/src/style.less

@@ -104,5 +104,9 @@ body {
   }
 }
 
+.border-radius_8 {
+  border-radius: 8px !important;
+}
+
 
 

frontend/src/views/ds/DatasourceItemCard.vue

@@ -57,15 +57,14 @@ 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;
 }
 
 .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;

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 {