UI

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

@@ -1,10 +1,30 @@
 import { ColumnItem } from "@queenjs/components/FormUI";
 import BaseColorPicker from "../../formItems/BaseColorPicker";
-// import { colorToHex, hexToColor } from "@queenjs/utils";
+import { colorToHex, hexToColor } from "@queenjs/utils";
 
 export function createColorOpts(): Pick<
   ColumnItem,
   "getValue" | "changeExtra" | "component" | "itemProps"
+> {
+  return {
+    component: "ColorPicker",
+    getValue(v) {
+      try {
+        return hexToColor(v);
+      } catch (error) {
+        return [0, 0, 0];
+      }
+    },
+    changeExtra(data) {
+      data.value = colorToHex(data.value);
+      return data;
+    },
+  };
+}
+
+export function createColorOpts2(): Pick<
+  ColumnItem,
+  "getValue" | "changeExtra" | "component" | "itemProps"
 > {
   return {
     component: BaseColorPicker,
@@ -13,16 +33,9 @@ export function createColorOpts(): Pick<
     },
     getValue(v) {
       return v || "#ffffff";
-      // try {
-      //   return hexToColor(v);
-      // } catch (error) {
-      //   return [0, 0, 0];
-      // }
     },
     changeExtra(data) {
       return data || "#ffffff";
-      //   data.value = colorToHex(data.value);
-      //   return data;
     },
   };
 }

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

@@ -19,14 +19,14 @@ const defaultColor = [
   // "rgba(156, 39, 176, 1)",
   // "rgba(103, 58, 183, 1)",
   // "rgba(63, 81, 181, 1)",
-  "rgba(33, 150, 243, 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)",
-  "rgba(255, 235, 59, 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)",
 ];
 

src/modules/editor/components/Viewport/Slider/SliderLeft/CompList.tsx

@@ -38,7 +38,7 @@ export const CompList = defineComponent({
                 <div
                   key={comp._id}
                   title={comp.title}
-                  class="draggable-item h-1/1 bg-light-50 rounded-2px cursor-pointer transition overflow-hidden hover:(opacity-80)"
+                  class="draggable-item h-1/1 bg-light-50 rounded-4px cursor-pointer transition overflow-hidden hover:(opacity-80)"
                 >
                   <Image
                     class="w-full h-1/1 !object-contain"

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -35,7 +35,7 @@ export default defineUI({
       return (
         <div>
           <Comp components={state.currComps} taggable={false} />
-          <CompList dataSource={dataSource} isSys={true} />
+          <CompList dataSource={dataSource} isSys={true} class="mt-10px" />
           {dataSource.length == 0 ? null : (
             <Loadmore
               class="mt-20px"