feat: supports gradient background color

src/components/modules/layout/designBoard/index.vue

@@ -21,11 +21,11 @@
             height: dPage.height + 'px',
             transform: 'scale(' + dZoom / 100 + ')',
             transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
-            backgroundColor: dPage.backgroundColor,
-            backgroundImage: `url(${dPage?.backgroundImage})`,
-            backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
-            backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
-            backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
+            backgroundColor: dPage.backgroundGradient ? undefined : dPage.backgroundColor,
+            backgroundImage: dPage.backgroundImage ? `url(${dPage?.backgroundImage})` : dPage.backgroundGradient || undefined,
+            backgroundSize: dPage.backgroundTransform?.x ? 'auto' : 'cover',
+            backgroundPositionX: (dPage.backgroundTransform?.x || 0) + 'px',
+            backgroundPositionY: (dPage.backgroundTransform?.y || 0) + 'px',
             opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
           }"
           @mousemove="dropOver($event)"

src/components/modules/settings/colorSelect.vue

@@ -83,7 +83,6 @@ watch(
       first = false
       return
     }
-    // addHistory(value)
   },
 )
 
@@ -130,7 +129,6 @@ const hide = () => {
 
 
 const colorChange = (color: colorChangeData) => {
-  // console.log('color', color)
   emit('change', color)
 }
 

src/components/modules/widgets/pageStyle.vue

@@ -18,7 +18,7 @@
         <Tabs :value="state.mode" @update:value="onChangeMode">
           <TabPanel v-for="label in state.modes" :key="label" :label="label"></TabPanel>
         </Tabs>
-        <color-select v-show="state.mode === '颜色'" v-model="state.innerElement.backgroundColor" :modes="['纯色','渐变']" @change="colorChange" @finish="(value) => finish('backgroundColor', value)" />
+        <color-select v-show="state.mode === '颜色'" v-model="state.innerElement.backgroundColor" :modes="['纯色','渐变']" @change="colorChange" />
         <div v-if="state.mode === '图片' && state.innerElement.backgroundImage" style="margin-top: 1.2rem">
           <div class="backgroud-wrap">
             <el-image style="height: 100%" :src="state.innerElement.backgroundImage" fit="contain"></el-image>
@@ -123,13 +123,8 @@ onMounted(() => {
 
 function colorChange(e: colorChangeData) {
   if (e.mode === '渐变') {
-    console.log('渐变背景');
-    
-    // setTimeout(() => {
-    //   console.log(1, e)
-    //   this.finish('backgroundImage', e.color)
-    // }, 1000)
-  }
+    state.innerElement.backgroundGradient = e.color
+  } else state.innerElement.backgroundGradient = ''
 }
 function onChangeMode(value: string) {
   state.mode = value
@@ -169,6 +164,8 @@ function changeValue() {
 }
 
 function finish(key: keyof TPageState, value: string | number) {
+  console.log('111');
+  
   pageStore.updatePageData({
     key: key,
     value: value,

src/store/design/canvas/d.ts

@@ -1,3 +1,10 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-04-05 06:23:23
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-04-05 14:53:01
+ */
 export type TScreeData = {
   /** 记录编辑界面的宽度 */
   width: number
@@ -56,6 +63,8 @@ export type TPageState = {
   height: number
   /** 画布背景颜色 */
   backgroundColor: string
+  /** 画布背景颜色(兼容渐变色) */
+  backgroundGradient: string,
   /** 画布背景图片 */
   backgroundImage: string
   backgroundTransform: {

src/store/design/canvas/index.ts

@@ -3,8 +3,8 @@
  * @Author: Jeremy Yu
  * @Date: 2024-03-18 21:00:00
  * @Description: 画布全局配置
- * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-18 21:00:00
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-04-05 14:52:06
  */
 
 import { Store, defineStore } from 'pinia'
@@ -33,6 +33,7 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("
       width: 1920, // 画布宽度
       height: 1080, // 画布高度
       backgroundColor: '#ffffff', // 画布背景颜色
+      backgroundGradient: '', // 用于兼容渐变颜色
       backgroundImage: '', // 画布背景图片
       backgroundTransform: {},
       opacity: 1, // 透明度