perf: 优化首页样式

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -157,14 +157,12 @@ const props = defineProps({
   }
 })
 
-// 百分比格式化persen
+// 百分比格式化 person
 const sliderFormatTooltip = (v: string) => {
-  // @ts-ignore
   return `${(parseFloat(v) * 100).toFixed(0)}%`
 }
 // 角度格式化
 const degFormatTooltip = (v: string) => {
-  // @ts-ignore
   return `${v}deg`
 }
 </script>

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

@@ -30,17 +30,11 @@
         :onBeforeUpload="beforeUploadHandle"
       >
         <n-upload-dragger>
-          <img
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
-            v-if="canvasConfig.backgroundImage"
-            class="upload-show"
-            :src="canvasConfig.backgroundImage"
-            alt="背景"
-          />
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">
-              背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif
+              背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-              的文件
             </n-text>
           </div>
         </n-upload-dragger>
@@ -48,43 +42,52 @@
     </n-card>
     <n-space vertical :size="12">
       <n-space>
-        <n-text>背景色</n-text>
+        <n-text>背景颜色</n-text>
-        <n-color-picker
+        <div class="picker-height">
-          style="width: 326px;"
+          <n-color-picker
-          :showPreview="true"
+            v-if="!switchSelectColorLoading"
-          :swatches="swatchesColors"
+            size="small"
-          v-model:value="canvasConfig.background"
+            style="width: 250px"
-        ></n-color-picker>
+            v-model:value="canvasConfig.background"
+            :showPreview="true"
+            :swatches="swatchesColors"
+          ></n-color-picker>
+        </div>
       </n-space>
       <n-space>
-        <n-text>颜色应用</n-text>
+        <n-text>应用类型</n-text>
-        <n-switch
+        <n-select
           size="small"
-          v-model:value="canvasConfig.selectColor"
+          style="width: 250px"
-          :loading="switchSelectColorLoading"
+          v-model:value="selectColorValue"
-          :round="false"
           :disabled="!canvasConfig.backgroundImage"
-          :onUpdate="switchSelectColorHandle"
+          :options="selectColorOptions"
-        ></n-switch>
+          @update:value="selectColorValueHandle"
+        />
       </n-space>
       <n-space>
         <n-text>背景控制</n-text>
-        <n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
+        <n-button class="clear-btn" size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">
-        <n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
+          清除背景
+        </n-button>
+        <n-button class="clear-btn" size="small" :disabled="!canvasConfig.background" @click="clearColor">
+          清除颜色
+        </n-button>
       </n-space>
       <n-space>
         <n-text>预览方式</n-text>
         <n-button-group>
-          <n-button 
+          <n-button
-            ghost
             v-for="item in previewTypeList"
             :key="item.key"
             :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
+            ghost
             size="small"
-            @click="selectPreviewType(item.key)">
+            @click="selectPreviewType(item.key)"
+          >
             <n-tooltip :show-arrow="false" trigger="hover">
               <template #trigger>
-                <n-icon size="18">
+                <n-icon class="select-preview-icon" size="18">
                   <component :is="item.icon"></component>
                 </n-icon>
               </template>
@@ -97,7 +100,7 @@
 
     <!-- 滤镜 -->
     <styles-setting :isCanvas="true" :chartStyles="canvasConfig"></styles-setting>
-    <n-divider style="margin: 10px 0;"></n-divider>
+    <n-divider style="margin: 10px 0"></n-divider>
 
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
@@ -123,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -143,23 +146,25 @@ const editCanvas = chartEditStore.getEditCanvas
 
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
+const selectColorValue = ref(0)
 
-const ChartThemeColor = loadAsyncComponent(() =>
+const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
-  import('./components/ChartThemeColor/index.vue')
-)
 
-// 北京默认展示颜色列表
+// 默认应用类型
-const swatchesColors = [
+const selectColorOptions = [
-  '#232324',
+  {
-  '#2a2a2b',
+    label: '应用颜色',
-  '#313132',
+    value: 0
-  '#373739',
+  },
-  '#757575',
+  {
-  '#e0e0e0',
+    label: '应用背景',
-  '#eeeeee',
+    value: 1
-  '#fafafa'
+  }
 ]
 
+// 默认展示颜色列表
+const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
+
 const globalTabList = [
   {
     key: 'ChartTheme',
@@ -193,9 +198,19 @@ const previewTypeList = [
     title: '铺满',
     icon: FitToScreenIcon,
     desc: '强行拉伸画面，填充所有视图'
-  },
+  }
 ]
 
+watch(
+  () => canvasConfig.selectColor,
+  newValue => {
+    selectColorValue.value = newValue ? 0 : 1
+  },
+  {
+    immediate: true
+  }
+)
+
 // 画布尺寸规则
 const validator = (x: number) => x > 50
 
@@ -212,9 +227,7 @@ const beforeUploadHandle = async ({ file }) => {
   const size = file.file.size
 
   if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-      `图片超出 ${backgroundImageSize}M 限制，请重新上传！`
-    )
     return false
   }
   if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
@@ -224,38 +237,32 @@ const beforeUploadHandle = async ({ file }) => {
   return true
 }
 
+// 应用颜色
+const selectColorValueHandle = (value: number) => {
+  canvasConfig.selectColor = value == 0
+}
+
 // 清除背景
 const clearImage = () => {
-  chartEditStore.setEditCanvasConfig(
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
-    EditCanvasConfigEnum.BACKGROUND_IMAGE,
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
-    undefined
-  )
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.SELECT_COLOR,
-    true
-  )
 }
 
-// 清除颜色
+// 启用/关闭 颜色（强制更新）
-const clearColor = () => {
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND,
-    undefined
-  )
-  if (canvasConfig.backgroundImage) {
-    chartEditStore.setEditCanvasConfig(
-      EditCanvasConfigEnum.SELECT_COLOR,
-      false
-    )
-  }
-}
-
-// 启用/关闭 颜色
 const switchSelectColorHandle = () => {
   switchSelectColorLoading.value = true
   setTimeout(() => {
     switchSelectColorLoading.value = false
-  }, 1000)
+  })
+}
+
+// 清除颜色
+const clearColor = () => {
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, undefined)
+  if (canvasConfig.backgroundImage) {
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+  }
+  switchSelectColorHandle()
 }
 
 // 自定义上传操作
@@ -264,14 +271,8 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   nextTick(() => {
     if (file.file) {
       const ImageUrl = fileToUrl(file.file)
-      chartEditStore.setEditCanvasConfig(
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl)
-        EditCanvasConfigEnum.BACKGROUND_IMAGE,
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
-        ImageUrl
-      )
-      chartEditStore.setEditCanvasConfig(
-        EditCanvasConfigEnum.SELECT_COLOR,
-        false
-      )
     } else {
       window['$message'].error('添加图片失败，请稍后重试！')
     }
@@ -285,8 +286,8 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
 </script>
 
 <style lang="scss" scoped>
-$updloadWidth: 326px;
+$uploadWidth: 326px;
-$updloadHeight: 193px;
+$uploadHeight: 193px;
 @include go(canvas-setting) {
   padding-top: 20px;
   .upload-box {
@@ -299,12 +300,12 @@ $updloadHeight: 193px;
       }
       .n-upload-dragger {
         padding: 5px;
-        width: $updloadWidth;
+        width: $uploadWidth;
       }
     }
     .upload-show {
       width: -webkit-fill-available;
-      height: $updloadHeight;
+      height: $uploadHeight;
       border-radius: 5px;
     }
     .upload-img {
@@ -322,6 +323,17 @@ $updloadHeight: 193px;
   .icon-position {
     padding-top: 2px;
   }
+  .picker-height {
+    min-height: 35px;
+  }
+  .clear-btn {
+    padding-left: 2.25em;
+    padding-right: 2.25em;
+  }
+  .select-preview-icon {
+    padding-right: .68em;
+    padding-left: .68em;
+  }
   .tabs-box {
     margin-top: 20px;
   }

src/views/preview/utils/style.ts

@@ -33,7 +33,7 @@ export const getStatusStyle = (attr: StatusType) => {
 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
   // 背景
   const computedBackground = canvas.selectColor
-    ? { background: canvas.background || '#000000' }
+    ? { background: canvas.background }
     : {
         background: `url(${canvas.backgroundImage}) center center / cover no-repeat !important`
       }