Merge remote-tracking branch 'origin/dev'

package.json

@@ -32,6 +32,7 @@
     "v-viewer": "^3.0.13",
     "viewerjs": "^1.11.6",
     "vue": "^3.4.29",
+    "vue-cropper": "^1.1.4",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-colorpicker": "^2.3.0"
   },

src/layout/adder/CustomAdder.tsx

@@ -11,6 +11,7 @@ import type { Block } from '../layout.types'
 import { ColorPicker } from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
 import { globalToast } from '@/main'
+import UploadAndCut from '@/utils/UploadAndCut'
 import { AddToToken } from './AdderPage'
 
 addIcons(MdUpload, MdImage, MdCheck)
@@ -77,7 +78,7 @@ const TypeSelector = defineComponent({
           <div
             class="w-[44px] relative h-[44px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
             style={{
-              backgroundColor: props.background
+              backgroundColor: props.background || 'transparent'
             }}
             onClick={() => {
               ctx.emit('update:value', 1)
@@ -106,13 +107,17 @@ const TypeSelector = defineComponent({
           <span class={'text-[12px]'}>文字</span>
         </div>
         <div class={'flex justify-center flex-col items-center gap-y-1'}>
-          <div class="w-[44px] h-[44px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
+          <div class="w-[44px] h-[44px] rounded-lg flex overflow-hidden justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
-            <ImageUploader
+            {/* <ImageUploader
               width={44}
               onUpdate:value={(e) => {
                 ctx.emit('update:icon', e)
               }}
-            ></ImageUploader>
+            ></ImageUploader> */}
+            <UploadAndCut onUpdate:value={(e)=> {
+                ctx.emit('update:icon', e)
+
+            }}></UploadAndCut>
           </div>
           <span class={'text-[12px]'}>自定义</span>
         </div>

src/utils/NativeColorPicker.tsx

@@ -0,0 +1,109 @@
+import clsx from "clsx";
+import { computed } from "vue";
+import { defineComponent } from "vue";
+import { MdCheck } from "oh-vue-icons/icons";
+import { addIcons, OhVueIcon } from "oh-vue-icons";
+addIcons(MdCheck)
+export default defineComponent({
+    name: "NativeColorPicker",
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        colorList: {
+            type: Array<string>
+        },
+        class: {
+            type: String,
+        },
+        transparent: {
+            type: Boolean,
+        },
+        firstColor: {
+            type: String,
+
+        }
+    },
+    emits: {
+        "update:value": (_value: string) => true,
+    },
+    setup(props, context) {
+        const firstColor = props.value
+        const colorList = computed(() => {
+            let list = [
+                '#ffffff',
+                '#000000',
+                '#FA9B3F',
+                '#333333',
+                '#6D7278',
+                '#D8D8D8',
+                '#0091FF',
+                '#B620E0',
+                '#F31260'
+            ]
+            if (props.colorList) {
+                list = props.colorList
+            }
+            if (props.transparent) {
+                list.push('transparent')
+            }
+            if (!list.includes(firstColor)) {
+                list.unshift(firstColor)
+            }
+            return list
+        })
+        return () => <div class={clsx("flex items-center gap-x-2 ", props.class)}>
+            {
+                colorList.value.map((item, index) => < div
+                    key={index}
+                    onClick={() => context.emit('update:value', item)}
+                    class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full"
+                    style={{
+                        backgroundColor: item === 'transparent' ? '' : item,
+                        backgroundImage:
+                            item === 'transparent'
+                                ? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
+            linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%)`
+                                : '',
+                        backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
+                        backgroundSize: item === 'transparent' ? '4px 4px' : ''
+                    }}
+                >
+                    {/* <Checkmark16Filled
+                class="text-[#888]"
+            : class="props.modelValue === item ? '' : 'hidden'"
+            : style="{
+                color: selectColor
+            }"
+                >
+        </Checkmark16Filled> */}
+                    {
+                        props.value === item &&
+                        <OhVueIcon class="text-[#888]" name={MdCheck.name} ></OhVueIcon>
+
+                    }
+                </div >)
+            }
+
+            <div
+                class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full relative"
+            >
+                <div
+                    class="w-full h-full rounded-full cursor-pointer"
+                    style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
+                >
+                    <input
+
+                        onInput={(e: any)=> {
+                            context.emit('update:value', e?.target.value)
+                        }}
+                        ref="inputRef"
+                        type="color"
+                        style="opacity: 0"
+                    />
+                </div>
+            </div>
+        </div >
+    }
+})

src/utils/UploadAndCut.tsx

@@ -0,0 +1,170 @@
+import { Modal } from 'ant-design-vue'
+import { defineComponent, ref, watch } from 'vue'
+import { VueCropper } from 'vue-cropper'
+import 'vue-cropper/dist/index.css'
+import upload from './upload'
+import { v4 as uuid } from "uuid"
+import { MdCroprotateRound, BiPlusLg } from "oh-vue-icons/icons";
+import { OhVueIcon, addIcons, } from 'oh-vue-icons'
+import NativeColorPicker from './NativeColorPicker'
+addIcons(MdCroprotateRound, BiPlusLg)
+
+export default defineComponent({
+
+    emits: {
+        'update:value': (() => true) as (val: string) => boolean
+    },
+    setup(props, ctx) {
+        const inputRef = ref<HTMLInputElement | null>(null)
+        const showCutModel = ref(false)
+        const originFile = ref('')
+        const fillColor = ref('transparent')
+        const cropper = ref<any>(null)
+        const handleFile = (e: any) => {
+            const target = e.target as HTMLInputElement
+
+            const file = target.files?.[0]
+            target.value = ''
+            console.log(file?.name);
+
+            if (!file) return
+            // upload(file).then(res => {
+            const reader = new FileReader()
+            reader.readAsDataURL(file)
+            reader.onload = (e: any) => {
+                originFile.value = e?.target.result // 显示原始图片
+                showCutModel.value = true
+            }
+            //   emit('update:icon', res || '')
+            // })
+        }
+        const handleFinish = (blob: any) => {
+            // 根据前几个字节推测文件类型（这里只考虑常见的图片类型）
+
+            // 使用 FileReader 对象读取 Blob 的前几个字节
+            const reader = new FileReader()
+            reader.onloadend = function () {
+                // 打印 File 对象以验证
+
+                const fileData = new File([blob], `${uuid()}.png`, {
+                    type: 'image/jpg',
+                    lastModified: Date.now()
+                })
+                upload(fileData, 'customIcon').then((res) => {
+                    showCutModel.value = false
+
+                    ctx.emit('update:value', res || '')
+                })
+            }
+            reader.readAsArrayBuffer(blob)
+        }
+        watch(
+            fillColor,
+            (e: string) => {
+                const elements = document.querySelectorAll('.cropper-crop-box')
+                elements.forEach((element: any) => {
+                    element.style.backgroundColor = e // 修改颜色为蓝色
+                })
+            },
+            {
+                immediate: true
+            }
+        )
+        return () => (
+            <>
+                <Modal
+                    open={showCutModel.value}
+                    onCancel={() => showCutModel.value = false}
+                    onOk={() => {
+                        cropper.value.getCropBlob((blob: any) => {
+                            handleFinish(blob)
+
+                        })
+                    }}
+                >
+                    <div class="w-full flex flex-col items-center gap-y-2">
+                        <div class="w-[250px] h-[250px]" style={{
+                            backgroundColor: fillColor.value || 'transparent',
+                        }}>
+                            <VueCropper
+                                ref={cropper}
+                                autoCropWidth="250px"
+                                autoCropHeight="250px"
+                                mode="contain"
+                                outputType="png"
+                                img={originFile.value}
+                                autoCrop={true}
+                                fillColor={fillColor.value}
+
+                            />
+                        </div>
+                        <div class="flex justify-between w-[250px]">
+                            {/* <ArrowRotateClockwise24Regular
+                                class="text-[10px] w-8 h-8 cursor-pointer"
+                                onClick={() => ($refs.cropper as any).rotateRight()}
+                            /> */}
+                            <span class="flex items-center cursor-pointer"
+                                onClick={() => {
+                                    cropper.value.rotateRight()
+                                }}>
+                                <OhVueIcon name="md-croprotate-round" scale={1} fill="#707070" ></OhVueIcon>
+
+                            </span>
+                            <span class="flex items-center gap-x-1">
+                                <svg
+                                    onClick={() => cropper.value?.changeScale(1)}
+                                    class="icon cursor-pointer"
+                                    viewBox="0 0 1024 1024"
+                                    width="2rem"
+                                    height="2rem"
+                                >
+                                    <path
+                                        d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-56.32 0 0 56.32c0 22.60992-18.35008 40.96-40.96 40.96s-40.96-18.35008-40.96-40.96l0-56.32-56.32 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l56.32 0 0-56.32c0-22.60992 18.35008-40.96 40.96-40.96s40.96 18.35008 40.96 40.96l0 56.32 56.32 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
+                                        fill="#707070"
+                                    />
+                                </svg>
+                                <svg
+                                    onClick={() => cropper.value?.changeScale(-1)}
+                                    class="icon cursor-pointer"
+                                    viewBox="0 0 1024 1024"
+                                    width="2rem"
+                                    height="2rem"
+                                >
+                                    <path
+                                        d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-194.56 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l194.56 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
+                                        fill="#707070"
+                                    />
+                                </svg>
+                            </span>
+                        </div>
+                        <NativeColorPicker value={fillColor.value} onUpdate:value={e => fillColor.value = e} transparent={true} />
+                        {/* {props.colorList && (
+                            <div class="w-[250px] flex justify-center">
+                                <NativeColorPicker
+                                    colorList={colorList}
+                                    v-model={fillColor}
+                                    onUpdate:modelValue={(e) => { }}
+                                    transparent={true}
+                                />
+                            </div>
+                        )} */}
+
+                    </div>
+                </Modal >
+                <div class="w-full h-full bg-white flex items-center justify-center"
+                    onClick={() => {
+                        inputRef.value?.click?.()
+                    }}
+                >
+                    <OhVueIcon name={BiPlusLg.name} fill='#666666' scale={2}></OhVueIcon>
+                </div>
+                <input
+                    ref={inputRef}
+                    style={{
+                        display: 'none'
+                    }} accept=".jpg,.jpeg,.png,.svg" type="file" onChange={handleFile} />
+            </>
+        )
+    }
+
+})

tsconfig.app.json

@@ -5,7 +5,6 @@
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]