perf: 优化主题颜色UI

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue

@@ -17,12 +17,9 @@
           v-for="colorItem in fetchShowColors(value.color)"
           :key="colorItem"
           :style="{ backgroundColor: colorItem }"
-       ></span>
+        ></span>
       </div>
-      <div
-        class="theme-bottom"
-        :style="{ backgroundImage: chartColorsshow[key] }"
-      ></div>
+      <div class="theme-bottom" :style="{ backgroundImage: chartColorsshow[key] }"></div>
     </n-card>
   </div>
 </template>
@@ -31,12 +28,7 @@
 import { computed } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import {
-  chartColors,
-  chartColorsName,
-  chartColorsshow,
-  ChartColorsNameType
-} from '@/settings/chartThemes/index'
+import { chartColors, chartColorsName, chartColorsshow, ChartColorsNameType } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import cloneDeep from 'lodash/cloneDeep'
 import { icon } from '@/plugins'
@@ -69,6 +61,8 @@ const selectTheme = (theme: ChartColorsNameType) => {
 </script>
 
 <style lang="scss" scoped>
+$radius: 10px;
+
 @include go(chart-theme-color) {
   padding-top: 20px;
   .card-box {
@@ -76,14 +70,8 @@ const selectTheme = (theme: ChartColorsNameType) => {
     margin-top: 15px;
     padding: 0;
     @include fetch-bg-color('background-color4-shallow');
-    border-radius: 23px;
+    border-radius: $radius;
     overflow: hidden;
-    @include deep() {
-      .n-card__content {
-        padding-top: 5px;
-        padding-bottom: 10px;
-      }
-    }
     &.selected {
       border: 1px solid v-bind('themeColor');
       border-bottom: 1px solid rgba(0, 0, 0, 0);
@@ -93,12 +81,13 @@ const selectTheme = (theme: ChartColorsNameType) => {
     }
     .go-flex-items-center {
       justify-content: space-between;
+      margin-top: -4px;
     }
     .theme-color-item {
       display: inline-block;
       width: 20px;
       height: 20px;
-      border-radius: 50%;
+      border-radius: $radius;
     }
     .theme-bottom {
       position: absolute;

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -22,7 +22,7 @@
       </n-form-item>
     </n-form>
 
-    <n-card class="upload-box">
+    <div class="upload-box">
       <n-upload
         v-model:file-list="uploadFileListRef"
         :show-file-list="false"
@@ -39,7 +39,7 @@
           </div>
         </n-upload-dragger>
       </n-upload>
-    </n-card>
+    </div>
     <n-space vertical :size="12">
       <n-space>
         <n-text>背景颜色</n-text>
@@ -294,13 +294,10 @@ $uploadHeight: 193px;
     cursor: pointer;
     margin-bottom: 20px;
     @include deep() {
-      .n-card__content {
-        padding: 0;
-        overflow: hidden;
-      }
       .n-upload-dragger {
         padding: 5px;
         width: $uploadWidth;
+        background-color: rgba(0, 0, 0, 0);
       }
     }
     .upload-show {
@@ -331,8 +328,8 @@ $uploadHeight: 193px;
     padding-right: 2.25em;
   }
   .select-preview-icon {
-    padding-right: .68em;
-    padding-left: .68em;
+    padding-right: 0.68em;
+    padding-left: 0.68em;
   }
   .tabs-box {
     margin-top: 20px;

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="go-chart-data-pond-list">
-    <n-timeline style="width: 20px">
+    <n-timeline class="pond-item-timeline" style="width: 20px">
       <n-timeline-item type="info"> </n-timeline-item>
       <n-timeline-item type="success"></n-timeline-item>
     </n-timeline>
@@ -115,11 +115,9 @@ $textSize: 10px;
   padding-bottom: 5px;
   margin-right: 5px;
   display: flex;
-  @include deep() {
-    .n-timeline > .n-timeline-item {
-      &:first-child {
-        height: $height;
-      }
+  .pond-item-timeline > .n-timeline-item {
+    &:first-child {
+      height: $height;
     }
   }
   .pond-item-box {

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -5,7 +5,7 @@
     </n-icon>
     <n-text @click="handleFocus">
       工作空间 -
-      <n-button v-show="!focus" secondary round size="tiny">
+      <n-button v-show="!focus" secondary size="tiny">
         <span class="title">
           {{ comTitle }}
         </span>
@@ -19,7 +19,6 @@
       type="text"
       maxlength="16"
       show-count
-      round
       placeholder="请输入项目名称"
       v-model:value.trim="title"
       @keyup.enter="handleBlur"
@@ -74,6 +73,8 @@ const handleBlur = () => {
 </script>
 <style lang="scss" scoped>
 .title {
+  padding-left: 5px;
+  padding-right: 5px;
   font-size: 15px;
 }
 </style>