color picker

src/assets/icons/components/IconArrowUp.tsx

@@ -3,6 +3,6 @@ import { createIcon } from '@queenjs/icons';
 export const IconArrowUp = createIcon(<svg viewBox="0 0 13 13">
     <g transform="translate(0 0)">
         <path fill='currentColor' d="M4.152,1.357a1,1,0,0,1,1.7,0l3.2,5.113A1,1,0,0,1,8.2,8H1.8A1,1,0,0,1,.956,6.47Z"
-            transform="translate(1 1) rotate(0)" />
+            transform="translate(1 2) rotate(0)" />
     </g>
 </svg>)

src/assets/icons/index.ts

@@ -1,3 +1,4 @@
+
 export * from "./components/Icon3D";
 export * from "./components/IconAdd";
 export * from "./components/IconAi";

src/assets/icons/svg/arrowUp.svg

@@ -1,6 +1,6 @@
 <svg viewBox="0 0 13 13">
     <g transform="translate(0 0)">
         <path fill='currentColor' d="M4.152,1.357a1,1,0,0,1,1.7,0l3.2,5.113A1,1,0,0,1,8.2,8H1.8A1,1,0,0,1,.956,6.47Z"
-            transform="translate(1 1) rotate(0)" />
+            transform="translate(1 2) rotate(0)" />
     </g>
 </svg>

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

@@ -173,7 +173,7 @@ export const Component = defineComponent({
 });
 
 const iconStyles = css`
-  animation: arrow 2.5s ease-in-out infinite;
+  animation: arrow 1.5s ease-in-out infinite;
 `;
 
 const pageRootStyles = css`

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

@@ -1,74 +1,66 @@
+import { cx } from "@linaria/core";
 import { Divider } from "ant-design-vue";
 import { defineComponent, onMounted, reactive } from "vue";
 import { any, bool } from "vue-types";
 import ColorList, { gradientColorType } from "./ColorList";
 
 const pureColors = [
-  "#111111",
-  "#545454",
-  "#737373",
-  "#A6A6A6",
   "#FFFFFF",
-  "#EC635D",
-  "#F5BF6A",
-  "#93D668",
-  "#5970F6",
-  "#8354F5",
+  "#D5D5D5",
+  "#929292",
+  "#5E5E5E",
+  "#333333",
+  "#222222",
+  "#000000",
+  "#47A2F8",
+  "#6BE3CF",
+  "#81D453",
+  "#F9D958",
+  "#ED6D57",
+  "#EB559F",
+  "#A055EB",
 ];
 
 const gradientColors: gradientColorType[] = [
   {
     deg: 90,
     type: "linear",
-    colors: ["#212121", "#656565"],
+    colors: ["#47A2F8", "#73C0F9"],
   },
   {
     deg: 90,
     type: "linear",
-    colors: ["#AEAEAE", "#F0F0F0"],
+    colors: ["#6BE3CF", "#98F9EA"],
   },
   {
     deg: 90,
     type: "linear",
-    colors: ["#FCEFBB", "#F4B8EA"],
+    colors: ["#81D453", "#A4F56A"],
   },
   {
     deg: 90,
     type: "linear",
-    colors: ["#CCF1E0", "#A5C3F4"],
+    colors: ["#F9D958", "#FDE582"],
   },
   {
     deg: 90,
     type: "linear",
-    colors: ["#EB995A", "#F8D86E"],
+    colors: ["#ED6D57", "#F19B91"],
   },
   {
     deg: 90,
     type: "linear",
-    colors: ["#EB4F40", "#EF8E58"],
+    colors: ["#EB559F", "#F19BC8"],
   },
   {
     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"],
+    colors: ["#A055EB", "#C99BF1"],
   },
 ];
 
+const tabs = ["近期使用", "色彩库"];
+
 export default defineComponent({
   props: {
     value: any<string | gradientColorType>().isRequired,
@@ -78,6 +70,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const state = reactive({
       latestColors: [],
+      activeKey: 0,
     }) as any;
 
     const selectColor = (data: any) => {
@@ -90,7 +83,7 @@ export default defineComponent({
       if (!props.showGradient) {
         colors = colors.filter((d: any) => typeof d == "string");
       }
-      colors.splice(10);
+      colors.splice(14);
       state.latestColors = colors;
     });
 
@@ -98,32 +91,45 @@ export default defineComponent({
       const { showGradient } = props;
       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={state.latestColors}
-            onChange={(data) => emit("change", data)}
-          />
           <Divider />
-          <div class="mb-10px">纯色库</div>
-          <ColorList
-            value={props.value}
-            data={pureColors}
-            onChange={selectColor}
-          />
-          {showGradient && (
+          <div class="mb-15px space-x-15px">
+            {tabs.map((d, i) => (
+              <span
+                key={i}
+                onClick={() => (state.activeKey = i)}
+                class={cx(
+                  "mt-15px mb-10px hover:opacity-80 transition cursor-pointer",
+                  state.activeKey == i ? "text-light-50" : "text-gray"
+                )}
+              >
+                {d}
+              </span>
+            ))}
+          </div>
+          {state.activeKey == 0 ? (
+            <ColorList
+              columns={7}
+              value={props.value}
+              data={state.latestColors}
+              onChange={(data) => emit("change", data)}
+            />
+          ) : (
             <>
-              <Divider />
-              <div class="mb-10px">渐变</div>
               <ColorList
+                columns={7}
                 value={props.value}
-                data={gradientColors}
+                data={pureColors}
                 onChange={selectColor}
               />
+              {showGradient && (
+                <ColorList
+                  columns={7}
+                  class="mt-16px"
+                  value={props.value}
+                  data={gradientColors}
+                  onChange={selectColor}
+                />
+              )}
             </>
           )}
         </div>

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

@@ -1,7 +1,7 @@
 import { css, cx } from "@linaria/core";
 import { IconClose } from "@queenjs/icons";
 import { defineComponent } from "vue";
-import { any, array, bool, number, string } from "vue-types";
+import { any, array, bool, number } from "vue-types";
 
 // radial-gradient(circle at 50% 50%, rgb(255, 255, 255), rgb(0, 253, 3) 100%);
 // radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
@@ -13,6 +13,16 @@ export type gradientColorType = {
   colors: string[];
 };
 
+export function getColorCover(item: string | gradientColorType) {
+  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[0]} 0%, ${item.colors[0]} 50%,${item.colors[1]} 50%,${item.colors[1]})`;
+  } else return "#ffffff";
+}
+
 export function formatColor(item: string | gradientColorType) {
   if (typeof item == "string") {
     return item;
@@ -45,7 +55,7 @@ export default defineComponent({
             return (
               <ColorItem
                 key={index}
-                color={thisColor}
+                color={item}
                 columns={columns}
                 active={active}
                 onDelete={() => emit("delete", index)}
@@ -62,7 +72,7 @@ export default defineComponent({
 
 export const ColorItem = defineComponent({
   props: {
-    color: string(),
+    color: any<string | gradientColorType>().isRequired,
     active: bool(),
     columns: number().def(5),
     showDelete: bool().def(false),
@@ -70,20 +80,46 @@ export const ColorItem = defineComponent({
   },
   emits: ["change", "delete"],
   setup(props, { emit }) {
+    function getItemsBg() {
+      const { columns } = props;
+      switch (columns) {
+        case 4:
+        case 5:
+          return formatColor(props.color);
+        case 7:
+          return getColorCover(props.color);
+      }
+    }
+
+    function getItemsSize() {
+      const { columns } = props;
+
+      switch (columns) {
+        case 4:
+          return "w-52px h-38px";
+        case 5:
+          return "w-38px h-38px";
+        case 7:
+          return "w-24px h-24px";
+      }
+    }
+
     return () => {
-      const { active, color, columns, showDelete } = props;
+      const { active, color, showDelete } = props;
+      const size = getItemsSize();
+      const bg = getItemsBg();
       return (
         <div class="relative group">
           <div
             class={cx(
-              "h-38px rounded-2px cursor-pointer overflow-hidden",
+              "rounded-2px cursor-pointer overflow-hidden",
               itemStyles,
               active && "active",
-              columns == 4 ? "w-52px" : "w-38px"
+              size
             )}
             onClick={() => emit("change")}
           >
-            <div class="h-full w-full" style={{ background: color }}></div>
+            <div class="h-full w-full" style={{ background: bg }}></div>
           </div>
           {showDelete && (
             <IconClose

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

@@ -1,8 +1,10 @@
 import { css } from "@linaria/core";
 import { IconAddLine } from "@queenjs/icons";
 import { Divider, Popover, Tabs } from "ant-design-vue";
-import { computed, defineComponent, onMounted, reactive, watch , ref, nextTick} from "vue";
+import Color from "color";
+import { computed, defineComponent, onMounted, reactive, watch } from "vue";
 import { any, bool } from "vue-types";
+import ColorLib from "./ColorLib";
 import ColorList, { ColorItem, gradientColorType } from "./ColorList";
 import Picker from "./Picker";
 
@@ -17,20 +19,29 @@ export default defineComponent({
       key: typeof props.value == "string" ? "0" : "1",
     });
 
-
     return () => {
       const { showGradient } = props;
       if (!showGradient) {
         return (
-          <PureColor
-            value={props.value}
-            onChange={(data) =>{
-              emit("change", data)
-            }}
-            onChangeEnd={()=>{
-              emit("changeEnd")
-            }}
-          />
+          <>
+            <PureColor
+              value={props.value}
+              onChange={(data) => {
+                emit("change", data);
+              }}
+              onChangeEnd={() => {
+                emit("changeEnd");
+              }}
+            />
+            <ColorLib
+              showGradient={props.showGradient}
+              value={props.value}
+              onChange={(data) => {
+                emit("change", data);
+                emit("changeEnd");
+              }}
+            />
+          </>
         );
       }
       return (
@@ -46,10 +57,10 @@ export default defineComponent({
               <PureColor
                 value={props.value}
                 onChange={(data) => {
-                  emit("change", data)
+                  emit("change", data);
                 }}
-                onChangeEnd={()=>{
-                  emit("changeEnd")
+                onChangeEnd={() => {
+                  emit("changeEnd");
                 }}
               />
             </Tabs.TabPane>
@@ -57,12 +68,20 @@ export default defineComponent({
               <GradientColor
                 value={props.value}
                 onChange={(data) => {
-                  emit("change", data)
-                  emit("changeEnd")
+                  emit("change", data);
+                  emit("changeEnd");
                 }}
               />
             </Tabs.TabPane>
           </Tabs>
+          <ColorLib
+            showGradient={props.showGradient}
+            value={props.value}
+            onChange={(data) => {
+              emit("change", data);
+              emit("changeEnd");
+            }}
+          />
         </div>
       );
     };
@@ -83,9 +102,15 @@ const PureColor = defineComponent({
     return () => {
       const color =
         typeof props.value == "string" ? props.value : props.value.colors[0];
-      return <Picker value={color} onChange={(data) => emit("change", data)}  onChangeEnd={()=>{
-        emit("changeEnd");
-      }} />;
+      return (
+        <Picker
+          value={color}
+          onChange={(data) => emit("change", data)}
+          onChangeEnd={() => {
+            emit("changeEnd");
+          }}
+        />
+      );
     };
   },
 });
@@ -112,7 +137,8 @@ const GradientColor = defineComponent({
     function getColors() {
       let colors: string[] = [];
       if (typeof props.value == "string") {
-        colors = [props.value, "#fff"];
+        const color2 = Color(props.value).darken(0.5);
+        colors = [props.value, color2.toString()];
       } else {
         colors = props.value.colors;
       }

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

@@ -3,7 +3,14 @@ import iro from "@jaames/iro";
 import { css, cx } from "@linaria/core";
 import { Input, InputNumber } from "ant-design-vue";
 import Color from "color";
-import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import { string } from "vue-types";
 
 declare global {
@@ -148,6 +155,11 @@ export default defineComponent({
       });
     });
 
+    watch(
+      () => props.value,
+      () => pickr.value?.color.set(props.value)
+    );
+
     return () => {
       const { opacity, hex } = state;
 
@@ -161,8 +173,8 @@ export default defineComponent({
               maxlength={7}
               class="flex-1 bg-[#3B3B3B] h-36px text-center cursor-pointer hover:bg-[#3B3B3B] focus:bg-[#3B3B3B]"
               onChange={changeColor}
-              onPressEnter={(e)=>{
-                changeColor(e)
+              onPressEnter={(e) => {
+                changeColor(e);
                 emit("changeEnd");
               }}
               onBlur={colorBlur}
@@ -174,9 +186,9 @@ export default defineComponent({
               max={100}
               formatter={(v) => v + "%"}
               onChange={changeOpacity}
-              onPressEnter={(e)=>{
+              onPressEnter={(e) => {
                 changeOpacity(e);
-                emit("changeEnd")
+                emit("changeEnd");
               }}
               controls={false}
               class={cx(

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

@@ -1,12 +1,10 @@
-import { IconPalette } from "@/assets/icons";
 import { css } from "@linaria/core";
 import { Popover } from "ant-design-vue";
+import Color from "color";
 import { defineComponent, reactive, watch } from "vue";
 import { any, bool } from "vue-types";
-import ColorLib from "./ColorLib";
-import { formatColor, gradientColorType } from "./ColorList";
+import { formatColor, getColorCover, gradientColorType } from "./ColorList";
 import Panel from "./Panel";
-import Color from "color";
 
 export default defineComponent({
   props: {
@@ -66,18 +64,18 @@ export default defineComponent({
           <Popover
             // visible={true}
             color="#303030"
-            overlayClassName={"editor_text_color"}
             destroyTooltipOnHide
             trigger="click"
             placement="bottomRight"
+            overlayClassName={"editor_text_color"}
             content={
-              <ColorLib
+              <Panel
                 showGradient={props.showGradient}
-                value={color}
-                onChange={(data)=>{
+                onChange={(data) => {
                   changeValue(data);
-                  changeValueEnd();
                 }}
+                onChangeEnd={() => changeValueEnd()}
+                value={color}
               />
             }
             onVisibleChange={(v) => {
@@ -87,34 +85,10 @@ export default defineComponent({
             <div class={colorItem}>
               <div
                 class="w-30px h-30px cursor-pointer"
-                style={{ background: formatColor(color) }}
+                style={{ background: getColorCover(color) }}
               ></div>
             </div>
           </Popover>
-          <Popover
-            // visible={true}
-            color="#303030"
-            destroyTooltipOnHide
-            trigger="click"
-            placement="bottomRight"
-            overlayClassName={"editor_text_color"}
-            content={
-              <Panel
-                showGradient={props.showGradient}
-                onChange={(data)=>{
-                  changeValue(data);
-                }}
-                onChangeEnd={()=>changeValueEnd()}
-                
-                value={color}
-              />
-            }
-            onVisibleChange={(v) => {
-              if (!v) storeColors();
-            }}
-          >
-            <IconPalette class="rounded bg-[#303030] text-30px !leading-0 text-light-50 cursor-pointer" />
-          </Popover>
         </div>
       );
     };

src/modules/editor/components/Viewport/Header/index.tsx

@@ -37,7 +37,7 @@ export default defineUI({
           </div>
         </div>
         <aside class="space-x-16px flex items-center">
-          <IconArrowUp class="text-20px text-light-50 bg-dark-50 p-6px hidden" />
+          <IconArrowUp class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:opacity-80 !hidden" />
           {store.isEditPage && (
             <Dropdown
               overlay={<ShareBox />}