Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -13,7 +13,7 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     {
       label: "背景颜色",
       dataIndex: "layout.background.color",
-      ...createColorOpts(),
+      ...createColorOpts(true),
     },
     {
       label: "背景音乐",

src/modules/editor/components/CompUI/basicUI/Text/TextToolComp.tsx

@@ -16,7 +16,7 @@ import { Button, InputNumber, Tooltip, Checkbox } from "ant-design-vue";
 
 import { useEditor } from "@/modules/editor";
 import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
-import "@simonwep/pickr/dist/themes/nano.min.css";
+// import "@simonwep/pickr/dist/themes/nano.min.css";
 import _ from "lodash";
 import { queenApi } from "queenjs";
 import {

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -141,7 +141,7 @@ export const bgColumns: ColumnItem[] = [
   {
     label: "背景颜色",
     dataIndex: "layout.background.color",
-    ...createColorOpts(),
+    ...createColorOpts(true),
   },
   {
     label: "透明度",

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

@@ -22,12 +22,17 @@ export function createColorOpts1(): Pick<
   };
 }
 
-export function createColorOpts(): Pick<
+export function createColorOpts(
+  showGradient = false
+): Pick<
   ColumnItem,
   "getValue" | "changeExtra" | "component" | "itemProps" | "props"
 > {
   return {
     component: NewColorPicker,
+    props: {
+      showGradient,
+    },
     itemProps: {
       style: { justifyContent: "space-between" },
     },

src/modules/editor/components/CompUI/formItems/BaseColorPicker.tsx

@@ -1,216 +0,0 @@
-import { css, cx } from "@linaria/core";
-import Pickr from "@simonwep/pickr";
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  reactive,
-  watch,
-} from "vue";
-import Color from "color";
-
-import "@simonwep/pickr/dist/themes/nano.min.css"; // 'nano' theme
-import { bool, string } from "vue-types";
-
-const defaultColor = [
-  "rgba(255, 255, 255, 0)",
-  // "rgba(233, 30, 99, 1)",
-  // "rgba(156, 39, 176, 1)",
-  // "rgba(103, 58, 183, 1)",
-  // "rgba(63, 81, 181, 1)",
-  // "#2196F3",
-  // "rgba(3, 169, 244, 1)",
-  // "rgba(0, 188, 212, 1)",
-  // "rgba(0, 150, 136, 1)",
-  // "rgba(76, 175, 80, 1)",
-  // "rgba(139, 195, 74, 1)",
-  // "rgba(205, 220, 57, 1)",
-  // "#FFEB3B",
-  // "rgba(255, 193, 7, 1)",
-];
-
-export default defineComponent({
-  props: {
-    value: string().isRequired,
-    disabled: bool(),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    let pickr: any = null;
-
-    // @ts-ignore
-    const state = reactive({
-      index: 0,
-      colorList: [props.value, ...defaultColor],
-      color: computed(() => state.colorList[state.index]),
-    });
-
-    onMounted(() => {
-      initPicker();
-    });
-
-    onUnmounted(() => {
-      pickr.destroyAndRemove();
-    });
-
-    function initPicker() {
-      pickr = Pickr.create({
-        el: ".color-picker",
-        theme: "nano",
-        default: props.value,
-        i18n: {
-          "btn:save": "确定",
-        },
-        swatches: defaultColor,
-        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.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();
-    };
-
-    watch(
-      () => props.value,
-      () => {
-        if (props.value) {
-          state.colorList[state.index] = props.value;
-        }
-      }
-    );
-
-    return () => {
-      const { disabled = false } = props;
-
-      return (
-        <div
-          class={[
-            ColorPiackerView,
-            "overflow-hidden flex-1",
-            { "picker-disabled": disabled },
-          ]}
-        >
-          <div class="color_view flex items-center">
-            <div
-              class="color_icon color_item"
-              onClick={() => (disabled ? null : show())}
-            ></div>
-
-            {state.colorList.map((color: string, index: number) => {
-              const thisColor = Color(color).object();
-              return (
-                <div
-                  class={cx(
-                    index == state.index && "item_active",
-                    thisColor.alpha == 0 && "item_empty",
-                    "color_item"
-                  )}
-                  style={{ backgroundColor: color }}
-                  key={index}
-                  onClick={() => {
-                    state.index = index;
-                    emit("change", color);
-                  }}
-                ></div>
-              );
-            })}
-          </div>
-          <div class="color-picker"></div>
-        </div>
-      );
-    };
-  },
-});
-
-const ColorPiackerView = css`
-  margin: 0 -5px;
-  position: relative;
-  &.picker-disabled {
-    cursor: not-allowed;
-  }
-  .pickr {
-    font-size: 0;
-    line-height: 0;
-  }
-  .pickr .pcr-button {
-    height: 0;
-    padding: 0;
-  }
-  .color_view {
-    flex-wrap: wrap;
-    .color_item {
-      position: relative;
-      width: 36px;
-      height: 36px;
-      margin: 2px 5px 6px;
-      border-radius: 4px;
-      cursor: pointer;
-      &::after {
-        border-radius: 4px;
-        content: "";
-        position: absolute;
-        right: 0;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        transition: box-shadow 0.2s ease-in-out;
-      }
-      &.item_active::after {
-        box-shadow: 0 0 0 1px @inf-primary-color,
-          inset 0 0 0 1px @inf-primary-color, inset 0 0 0 3px #fff;
-      }
-      &.item_empty {
-        background: url("@/assets/imgs/bgBlank.svg") repeat;
-        background-color: #fff !important;
-      }
-      &:hover::after {
-        box-shadow: 0 0 0 1px @inf-primary-color,
-          inset 0 0 0 1px @inf-primary-color, inset 0 0 0 3px #fff;
-      }
-    }
-    .color_icon {
-      background-image: url("@/assets/imgs/bgColor.png");
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  }
-  .color_input,
-  .pickr {
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 0;
-    padding: 0;
-    border: none;
-    visibility: hidden;
-  }
-`;

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

@@ -1,23 +1,41 @@
 import { IconPalette } from "@/assets/icons";
 import { css } from "@linaria/core";
 import { Popover } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
+import { defineComponent, reactive, watch } from "vue";
 import { any, bool } from "vue-types";
 import ColorLib from "./ColorLib";
 import { formatColor, gradientColorType } from "./ColorList";
 import Panel from "./Panel";
+import Color from "color";
 
 export default defineComponent({
   props: {
     value: any<string | gradientColorType>(),
-    showGradient: bool().def(true),
+    showGradient: bool().def(false),
   },
   emits: ["change"],
   setup(props, { emit }) {
+    const color = getColor();
+
     // @ts-ignore
     const state = reactive({
-      color: props.value || "#ffffff",
+      color: color || "#ffffff",
     });
+    watch(
+      () => props.value,
+      () => {
+        const color = getColor();
+        state.color = color;
+      }
+    );
+    function getColor() {
+      if (typeof props.value == "string") {
+        const colorObj = Color(props.value);
+        return colorObj.hex();
+      } else {
+        return props.value || "#ffffff";
+      }
+    }
 
     function changeValue(data: any) {
       state.color = data;