color picker

src/assets/icons/components/IconCut.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconCut = createIcon(<svg viewBox="0 0 20 20"><g transform="translate(-191 -296)"><g transform="translate(26)"><rect fill="none" opacity="0.9" width="20" height="20" rx="3" transform="translate(165 296)"/></g><g transform="translate(189.975 293.609)"><path fill="#262626" opacity="0.3" d="M36.854,9v9.514H34V15.977h2.854v-4.44H34V9Z" transform="translate(-19.803 -1.366)"/><path fill="#262626" opacity="0.3" d="M5,11.537V9H7.854v2.537H5v4.44H7.854v2.537H5V11.537Z" transform="translate(0 -1.366)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" stroke-linejoin="round" d="M17.051,11.537V9H14.2m2.854,2.537v4.44m0-4.44H14.2m-9.2,0V9H7.854M5,11.537v4.44m0-4.44H7.854M5,15.977v2.537H7.854M5,15.977H7.854m9.2,0v2.537H14.2m2.854-2.537H14.2M14.2,9v2.537M14.2,9H12.928M14.2,18.514V15.977m0,2.537H12.928M7.854,9v2.537M7.854,9H9.123M7.854,18.514V15.977m0,2.537H9.123M7.854,11.537H9.123m5.074,0H12.928m1.269,4.44H12.928m-5.074,0H9.123" transform="translate(0 -1.366)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,7V8.269" transform="translate(-12.975)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,17v1.269" transform="translate(-12.975 -6.829)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,27v1.269" transform="translate(-12.975 -13.657)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,37v1.269" transform="translate(-12.975 -20.486)"/></g></g></svg>)

src/assets/icons/components/IconPalette.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPalette = createIcon(<svg viewBox="0 0 30 30"><g transform="translate(-1872 -333)"><rect fill="none" width="30" height="30" rx="4" transform="translate(1872 333)"/><g opacity="0.9" transform="translate(1872.471 218.464)"><path fill="currentColor" d="M140.693,549.657m-.454,0a.454.454,0,1,0,.454-.454A.454.454,0,0,0,140.239,549.657Z" transform="translate(-131.626 -419.329)"/><path fill="currentColor" d="M185.074,388.8m-.712,0a.712.712,0,1,0,.712-.712.712.712,0,0,0-.712.712Z" transform="translate(-174.841 -261.003)"/><path fill="currentColor" d="M351.334,258.042m-.841,0a.841.841,0,1,0,.841-.841A.841.841,0,0,0,350.493,258.042Z" transform="translate(-338.472 -131.874)"/><path fill="currentColor" d="M570.893,243.271m-.919,0a.919.919,0,1,0,.919-.919A.919.919,0,0,0,569.974,243.271Z" transform="translate(-554.319 -117.104)"/><path fill="currentColor" d="M547.758,237.414l-.012-.011a.406.406,0,0,0-.572.04l-6.116,7.042-.773,1.52,1.387-.966,6.127-7.055A.405.405,0,0,0,547.758,237.414Z" transform="translate(-525.334 -112.37)"/><path fill="currentColor" d="M21.375,128.96a.414.414,0,0,0-.412.381h0A7.823,7.823,0,0,1,17.891,134c-2.695,1.75-5.78.962-6.353-.049a9.818,9.818,0,0,0-1.068-1.719c-.733-.61-2.587.235-2.976-.689-.724-1.718.984-6.172,5.217-7.275a7.679,7.679,0,0,1,6.749,1.214h0a.4.4,0,1,0,.5-.63,8.087,8.087,0,0,0-8.587-.909c-5.126,2.3-5.45,7.1-4.379,8.3s2.637.251,2.984.649c.222.254.51.929.889,1.541.549.887,3.293,2.749,7.48.265,2.512-1.49,3.412-4.923,3.444-5.3h0c0-.011,0-.021,0-.032A.414.414,0,0,0,21.375,128.96Z" transform="translate(0)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -20,6 +20,7 @@ export * from "./components/IconCombination";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
+export * from "./components/IconCut";
 export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
@@ -33,6 +34,7 @@ export * from "./components/IconLineHeight";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
+export * from "./components/IconPalette";
 export * from "./components/IconPlay";
 export * from "./components/IconPlay2";
 export * from "./components/IconPreview";

src/assets/icons/svg/cut.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20"><g transform="translate(-191 -296)"><g transform="translate(26)"><rect fill="none" opacity="0.9" width="20" height="20" rx="3" transform="translate(165 296)"/></g><g transform="translate(189.975 293.609)"><path fill="#262626" opacity="0.3" d="M36.854,9v9.514H34V15.977h2.854v-4.44H34V9Z" transform="translate(-19.803 -1.366)"/><path fill="#262626" opacity="0.3" d="M5,11.537V9H7.854v2.537H5v4.44H7.854v2.537H5V11.537Z" transform="translate(0 -1.366)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" stroke-linejoin="round" d="M17.051,11.537V9H14.2m2.854,2.537v4.44m0-4.44H14.2m-9.2,0V9H7.854M5,11.537v4.44m0-4.44H7.854M5,15.977v2.537H7.854M5,15.977H7.854m9.2,0v2.537H14.2m2.854-2.537H14.2M14.2,9v2.537M14.2,9H12.928M14.2,18.514V15.977m0,2.537H12.928M7.854,9v2.537M7.854,9H9.123M7.854,18.514V15.977m0,2.537H9.123M7.854,11.537H9.123m5.074,0H12.928m1.269,4.44H12.928m-5.074,0H9.123" transform="translate(0 -1.366)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,7V8.269" transform="translate(-12.975)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,17v1.269" transform="translate(-12.975 -6.829)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,27v1.269" transform="translate(-12.975 -13.657)"/><path fill="none" stroke="#262626" stroke-linecap="round" stroke-width="0.8px" d="M24,37v1.269" transform="translate(-12.975 -20.486)"/></g></g></svg>

src/assets/icons/svg/palette.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 30 30"><g transform="translate(-1872 -333)"><rect fill="none" width="30" height="30" rx="4" transform="translate(1872 333)"/><g opacity="0.9" transform="translate(1872.471 218.464)"><path fill="currentColor" d="M140.693,549.657m-.454,0a.454.454,0,1,0,.454-.454A.454.454,0,0,0,140.239,549.657Z" transform="translate(-131.626 -419.329)"/><path fill="currentColor" d="M185.074,388.8m-.712,0a.712.712,0,1,0,.712-.712.712.712,0,0,0-.712.712Z" transform="translate(-174.841 -261.003)"/><path fill="currentColor" d="M351.334,258.042m-.841,0a.841.841,0,1,0,.841-.841A.841.841,0,0,0,350.493,258.042Z" transform="translate(-338.472 -131.874)"/><path fill="currentColor" d="M570.893,243.271m-.919,0a.919.919,0,1,0,.919-.919A.919.919,0,0,0,569.974,243.271Z" transform="translate(-554.319 -117.104)"/><path fill="currentColor" d="M547.758,237.414l-.012-.011a.406.406,0,0,0-.572.04l-6.116,7.042-.773,1.52,1.387-.966,6.127-7.055A.405.405,0,0,0,547.758,237.414Z" transform="translate(-525.334 -112.37)"/><path fill="currentColor" d="M21.375,128.96a.414.414,0,0,0-.412.381h0A7.823,7.823,0,0,1,17.891,134c-2.695,1.75-5.78.962-6.353-.049a9.818,9.818,0,0,0-1.068-1.719c-.733-.61-2.587.235-2.976-.689-.724-1.718.984-6.172,5.217-7.275a7.679,7.679,0,0,1,6.749,1.214h0a.4.4,0,1,0,.5-.63,8.087,8.087,0,0,0-8.587-.909c-5.126,2.3-5.45,7.1-4.379,8.3s2.637.251,2.984.649c.222.254.51.929.889,1.541.549.887,3.293,2.749,7.48.265,2.512-1.49,3.412-4.923,3.444-5.3h0c0-.011,0-.021,0-.032A.414.414,0,0,0,21.375,128.96Z" transform="translate(0)"/></g></g></svg>

src/modules/editor/components/CompUI/defines/formOpts/createColorOpts.ts

@@ -1,8 +1,8 @@
 import { ColumnItem } from "@queenjs/components/FormUI";
-import BaseColorPicker from "../../formItems/BaseColorPicker";
 import { colorToHex, hexToColor } from "@queenjs/utils";
+import NewColorPicker from "../../formItems/NewColorPicker";
 
-export function createColorOpts(): Pick<
+export function createColorOpts1(): Pick<
   ColumnItem,
   "getValue" | "changeExtra" | "component" | "itemProps"
 > {
@@ -22,14 +22,14 @@ export function createColorOpts(): Pick<
   };
 }
 
-export function createColorOpts2(): Pick<
+export function createColorOpts(): Pick<
   ColumnItem,
-  "getValue" | "changeExtra" | "component" | "itemProps"
+  "getValue" | "changeExtra" | "component" | "itemProps" | "props"
 > {
   return {
-    component: BaseColorPicker,
+    component: NewColorPicker,
     itemProps: {
-      style: { alignItems: "flex-start" },
+      style: { justifyContent: "space-between" },
     },
     getValue(v) {
       return v || "#ffffff";

src/modules/editor/components/CompUI/formItems/NewColorPicker/ColorLib.tsx

@@ -0,0 +1,109 @@
+import { Divider } from "ant-design-vue";
+import { defineComponent } from "vue";
+import ColorList, { gradientColorType } from "./ColorList";
+import { any } from "vue-types";
+
+const defaultColor = [
+  "#111111",
+  "#545454",
+  "#737373",
+  "#A6A6A6",
+  "#FFFFFF",
+  "#EC635D",
+  "#F5BF6A",
+  "#93D668",
+  "#5970F6",
+  "#8354F5",
+];
+
+const gradientColor: gradientColorType[] = [
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#212121", "#656565"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#AEAEAE", "#F0F0F0"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#FCEFBB", "#F4B8EA"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#CCF1E0", "#A5C3F4"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#EB995A", "#F8D86E"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#EB4F40", "#EF8E58"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#85C6BD", "#F0DD75"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#8367F3", "#82CFE6"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#ED7FB1", "#F8D378"],
+  },
+  {
+    deg: 90,
+    type: "linear",
+    colors: ["#935EDF", "#E69069"],
+  },
+];
+
+export default defineComponent({
+  props: {
+    value: any<string | gradientColorType>().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      return (
+        <div class="w-280px px-5px py-10px rounded">
+          <div class="flex items-center justify-between">
+            <span class="text-16px">色彩库</span>
+            {/* <IconClose class="text-18px" /> */}
+          </div>
+          <div class="mt-15px mb-10px">近期使用</div>
+          <ColorList
+            value={props.value}
+            data={[]}
+            onChange={(data) => emit("change", data)}
+          />
+          <Divider />
+          <div class="mb-10px">纯色库</div>
+          <ColorList
+            value={props.value}
+            data={defaultColor}
+            onChange={(data) => emit("change", data)}
+          />
+          <Divider />
+          <div class="mb-10px">渐变</div>
+          <ColorList
+            value={props.value}
+            data={gradientColor}
+            onChange={(data) => emit("change", data)}
+          />
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList.tsx

@@ -0,0 +1,102 @@
+import { css, cx } from "@linaria/core";
+import { IconAddLine, IconClose } from "@queenjs/icons";
+import { defineComponent } from "vue";
+import { any, array, bool, number } from "vue-types";
+
+export type gradientColorType = {
+  deg?: number;
+  type: "radial" | "linear";
+  colors: string[];
+};
+
+export function formatColor(item: string | gradientColorType) {
+  // radial-gradient(circle at 50% 50%, rgb(255, 255, 255), rgb(0, 253, 3) 100%);
+  // radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+  // linear-gradient(70deg, blue, pink);
+  if (typeof item == "string") {
+    return item;
+  } else if (item.type == "radial") {
+    return `radial-gradient( ${item.colors.join(",")}`;
+  } else if (item.type == "linear") {
+    return `linear-gradient(${item.deg}deg, ${item.colors?.join(",")})`;
+  } else return "#ffffff";
+}
+
+export default defineComponent({
+  props: {
+    value: any<string | gradientColorType>().isRequired,
+    data: array<string | gradientColorType>().isRequired,
+    columns: number().def(5),
+    showAdd: bool().def(false),
+    showDelete: bool().def(false),
+    min: number().def(2),
+  },
+  emits: ["change", "delete"],
+  setup(props, { emit }) {
+    return () => {
+      const { columns, value, showAdd, showDelete, min } = props;
+      const list = props.data;
+      const propsColor = formatColor(value);
+      return (
+        <div class={cx("grid gap-16px", `grid-cols-${columns}`)}>
+          {list.map((item: string | gradientColorType, index: number) => {
+            // const thisColor = Color(color).object();
+            const thisColor = formatColor(item);
+            const active = thisColor === propsColor ? true : false;
+
+            return (
+              <div class="relative" key={index}>
+                <div
+                  class={cx(
+                    itemStyles,
+                    "h-38px rounded cursor-pointer",
+                    columns == 4 ? "w-52px" : "w-38px",
+                    active && "active"
+                  )}
+                  style={{ background: thisColor }}
+                  onClick={() => emit("change", item)}
+                ></div>
+                {showDelete && list.length > min && (
+                  <IconClose
+                    class="absolute -right-8px -top-8px p-2px bg-dark-50 bg-opacity-80 rounded-1/2 text-light-50 cursor-pointer"
+                    onClick={() => emit("delete", index)}
+                  />
+                )}
+              </div>
+            );
+          })}
+          {showAdd && (
+            <div
+              class="w-38px h-38px rounded cursor-pointer bg-[#3b3b3b] flex items-center justify-center transition hover:opacity-70"
+              onClick={() => {
+                //
+              }}
+            >
+              <IconAddLine class="text-22px text-dark-300" />
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+const itemStyles = css`
+  position: relative;
+  &:before {
+    border-radius: 4px;
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: box-shadow 0.2s ease-in-out;
+  }
+  &:hover:before {
+    box-shadow: #fff 0px 0px 0px 1px inset, #000 0px 0px 0px 3px inset;
+  }
+  &.active:before {
+    box-shadow: #ea9e40 0px 0px 0px 1px inset, #000 0px 0px 0px 3px inset;
+  }
+`;

src/modules/editor/components/CompUI/formItems/NewColorPicker/Panel.tsx

@@ -0,0 +1,108 @@
+import { Divider, Tabs } from "ant-design-vue";
+import { computed, defineComponent, reactive } from "vue";
+import Picker from "./Picker";
+import ColorList, { formatColor, gradientColorType } from "./ColorList";
+import { css } from "@linaria/core";
+import { any } from "vue-types";
+
+export default defineComponent({
+  props: {
+    value: any<string | gradientColorType>().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      key: typeof props.value == "string" ? "0" : "1",
+    });
+
+    return () => {
+      return (
+        <div class="w-280px px-5px pb-10px ">
+          <Tabs
+            class={tabStyles}
+            centered
+            activeKey={state.key}
+            onChange={(v: any) => (state.key = v)}
+          >
+            <Tabs.TabPane tab="纯色" key={"0"}>
+              <Picker value="#f9c" />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="渐变" key={"1"}>
+              <MutiColor
+                value={props.value}
+                onChange={(data) => emit("change", data)}
+              />
+            </Tabs.TabPane>
+          </Tabs>
+        </div>
+      );
+    };
+  },
+});
+
+const MutiColor = defineComponent({
+  props: {
+    value: any<string | gradientColorType>().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    let colors: string[] = [];
+    if (typeof props.value == "string") {
+      colors = [props.value, "#fff"];
+    } else {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      colors = props.value.colors;
+    }
+
+    const state = reactive({
+      colors: colors,
+      gradientColors: computed(() => {
+        const list: any = [
+          { type: "linear", deg: 90 },
+          { type: "linear", deg: 180 },
+          { type: "linear", deg: 135 },
+          { type: "radial" },
+        ];
+        return list.map((d: any) => ({ ...d, colors: state.colors }));
+      }),
+    });
+    return () => {
+      return (
+        <div>
+          <div class="mb-10px">渐变色</div>
+          <ColorList
+            value={props.value}
+            data={state.colors}
+            showAdd
+            showDelete
+            min={2}
+            onDelete={(index) => {
+              state.colors.splice(index, 1);
+            }}
+          />
+          <Divider />
+          <div class="mb-10px">风格</div>
+          <ColorList
+            value={props.value}
+            data={state.gradientColors}
+            columns={4}
+            onChange={(data) => emit("change", data)}
+          />
+        </div>
+      );
+    };
+  },
+});
+
+const tabStyles = css`
+  .ant-tabs-nav-list {
+    flex: 1;
+  }
+  .ant-tabs-tab {
+    justify-content: center;
+    flex: 1;
+  }
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #fff;
+  }
+`;

src/modules/editor/components/CompUI/formItems/NewColorPicker/Picker.tsx

@@ -0,0 +1,75 @@
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import "@simonwep/pickr/dist/themes/nano.min.css"; // 'nano' theme
+import Pickr from "@simonwep/pickr";
+import { string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    value: string().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    let pickr: any = null;
+
+    onMounted(() => {
+      // initPicker();
+    });
+
+    onUnmounted(() => {
+      // pickr.destroyAndRemove();
+    });
+
+    function initPicker() {
+      pickr = Pickr.create({
+        el: ".color-picker",
+        container: ".color-container",
+        theme: "nano",
+        default: props.value,
+        i18n: {
+          "btn:save": "确定",
+        },
+        components: {
+          preview: true,
+          opacity: false,
+          hue: true,
+          interaction: {
+            hex: false,
+            rgba: false,
+            input: true,
+            save: true,
+          },
+        },
+      });
+
+      pickr.on("init", () => {
+        // console.log('Event: "init"', instance);
+        pickr.show();
+      });
+
+      pickr.on("change", (color: any) => {
+        // const hexa = color.toHEXA().toString();
+        // state.colorList[state.index] = hexa;
+        // emit("change", hexa);
+      });
+
+      pickr.on("save", (color: any) => {
+        // pickr.hide();
+        // const hexa = color.toHEXA().toString();
+        // state.colorList[state.index] = hexa;
+        // emit("change", hexa);
+      });
+    }
+
+    const show = () => {
+      pickr.show();
+    };
+    return () => {
+      return (
+        <div class="h-250px">
+          <div class="color-picker"></div>
+          <div class="color-container"></div>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/CompUI/formItems/NewColorPicker/index.tsx

@@ -0,0 +1,56 @@
+import { IconPalette } from "@/assets/icons";
+import { Popover } from "ant-design-vue";
+import { defineComponent, reactive } from "vue";
+import { any } from "vue-types";
+import ColorLib from "./ColorLib";
+import { formatColor, gradientColorType } from "./ColorList";
+import Panel from "./Panel";
+
+export default defineComponent({
+  props: {
+    value: any<string | gradientColorType>(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    // @ts-ignore
+    const state = reactive({
+      color: props.value || "#ffffffff",
+      libVisible: false,
+      pickerVisible: true,
+    });
+
+    function changeValue(data: any) {
+      console.log("data: ", data);
+      state.color = data;
+      emit("change", data);
+    }
+
+    return () => {
+      const { color, libVisible, pickerVisible } = state;
+
+      return (
+        <div class="space-x-10px flex">
+          <Popover
+            content={<ColorLib value={color} onChange={changeValue} />}
+            placement="bottomRight"
+            // visible={libVisible}
+            trigger="click"
+          >
+            <div
+              class="w-30px h-30px rounded cursor-pointer"
+              style={{ background: formatColor(color) }}
+            ></div>
+          </Popover>
+          <Popover
+            trigger="click"
+            content={<Panel value={color} onChange={changeValue} />}
+            placement="bottomRight"
+            // visible={pickerVisible}
+          >
+            <IconPalette class="rounded bg-[#303030] text-30px text-light-50 cursor-pointer" />
+          </Popover>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/SourceItem.tsx

@@ -1,7 +1,8 @@
+import { IconCut } from "@/assets/icons";
 import Thumbnail from "@/components/Thumbnail";
 import { css, cx } from "@linaria/core";
 import { useAuth } from "@queenjs-modules/auth";
-import { IconEdit, IconMore } from "@queenjs/icons";
+import { IconMore } from "@queenjs/icons";
 import { Dropdown, Menu, Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineUI, queenApi } from "queenjs";
@@ -38,8 +39,8 @@ const VideoItem = defineComponent({
           onMouseleave={() => (state.play = false)}
           onClick={() => emit("click", record.file.url)}
         >
-          <IconEdit
-            class="absolute right-5px top-5px z-2 p-4px rounded-4px text-14px text-light-50 bg-dark-600 bg-opacity-60 transition hover:(bg-opacity-70)"
+          <IconCut
+            class="absolute right-5px top-5px z-2 rounded-2px text-20px bg-light-50 transition hover:(bg-opacity-50)"
             onClick={(e: any) => {
               e.stopPropagation();
               showModal(record);

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -2,6 +2,7 @@ import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
 import { compMasks } from "./CompMasks";
 import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
+import { formatColor } from "@/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList";
 
 export function createCompStyle(module: EditorModule, layout: Layout) {
   const { designToNaturalSize } = module.helper;
@@ -92,7 +93,7 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
 
   if (layout.background) {
     if (layout.background.color) {
-      style.backgroundColor = layout.background.color;
+      style.background = formatColor(layout.background.color);
     }
   }