From 49d8c357474d48e2c05cbb5feffa9c669720f7b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 24 Feb 2023 21:42:27 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChartThemeColor/index.vue      | 27 ++++++-------------
 .../chart/ContentHeader/headerTitle/index.vue |  5 ++--
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
index 8313bda2..fdca3b4a 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/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;
diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue
index 3b8efb71..d41541ce 100644
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
+++ b/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>