Merge remote-tracking branch 'origin/dev'
This commit is contained in:
commit
430e1999bb
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<ImageUploader
|
||||
<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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 >
|
||||
}
|
||||
})
|
||||
|
|
@ -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} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
|
|
|
|||
Loading…
Reference in New Issue