chore: load mask by pix

src/pages/playground/components/image-edit.tsx

@@ -3,6 +3,7 @@ import AlertInfo from '@/components/alert-info';
 import SingleImage from '@/components/auto-image/single-image';
 import IconFont from '@/components/icon-font';
 import CanvasImageEditor from '@/components/image-editor';
+import { processImage } from '@/components/image-editor/extract-image-colors';
 import routeCachekey from '@/config/route-cachekey';
 import UploadImg from '@/pages/playground/components/upload-img';
 import { base64ToFile, generateRandomNumber } from '@/utils';
@@ -281,11 +282,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 
   const handleUpdateMaskList = useCallback(async (base64List: any) => {
-    setMaskUpload(base64List);
+    // setMaskUpload(base64List);
     const mask = _.get(base64List, '[0].dataUrl', '');
-    // const maskColors = await extractImageColors(mask);
-    // console.log('maskColors:', maskColors);
-    setMask(mask);
+    const maskColors = await processImage(mask);
+    console.log('maskColors:', maskColors);
+    imageEditorRef.current?.loadMaskPixs(maskColors || []);
+    // setMask(mask);
   }, []);
 
   const handleClearUploadMask = useCallback(() => {

src/pages/playground/embedding.tsx

@@ -22,7 +22,6 @@ const PlaygroundEmbedding: React.FC = () => {
   const handleViewCode = useCallback(() => {
     ref.current?.viewCode?.();
   }, [ref.current]);
-
   const handleToggleCollapse = useCallback(() => {
     ref.current?.setCollapse?.();
   }, [ref.current]);

src/pages/playground/style/content-item.less

@@ -77,7 +77,6 @@
 
   .message-content-input {
     flex: 1;
-    cursor: pointer;
 
     &.has-img {
       border: 1px solid var(--ant-color-fill-secondary);