From eca34957a23379f0d4863235cabe5ea17d9fec60 Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Fri, 15 Nov 2024 19:03:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=AA=E7=99=BB=E5=BD=95=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5=E4=B8=8B=EF=BC=8Cprofile=E6=8E=A5=E5=8F=A3=E6=AF=8F?= =?UTF-8?q?=E6=AC=A1=E5=88=B7=E6=96=B0=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/adder/AdderPage.tsx | 6 +- src/layout/header/search/SearchPage.tsx | 9 +- src/user/useUserStore.ts | 3 + src/utils/ImageUploader.tsx | 10 +- src/utils/UploadAndCut.tsx | 301 +++++++++++++----------- 5 files changed, 182 insertions(+), 147 deletions(-) diff --git a/src/layout/adder/AdderPage.tsx b/src/layout/adder/AdderPage.tsx index 530af8a..c2a9c79 100644 --- a/src/layout/adder/AdderPage.tsx +++ b/src/layout/adder/AdderPage.tsx @@ -83,9 +83,9 @@ export default defineComponent(() => { const addTo = ref(layout.state.currentPage) provide(AddToToken, addTo) - onUnmounted(() => { - store.type = 1 - }) + // onUnmounted(() => { + // store.type = 1 + // }) return () => (
import('./SearchAdder')) const SearchItem = defineComponent({ props: { @@ -157,7 +159,12 @@ export default defineComponent(() => { block icon={} onClick={() => { - showAdder.value = null + if (useUserStore().isLogin) { + showAdder.value = null + } else { + globalToast.warning('请先登录') + useRouterStore().go('global-login') + } }} > 添加自定义搜索引擎 diff --git a/src/user/useUserStore.ts b/src/user/useUserStore.ts index c33c792..9004ae9 100644 --- a/src/user/useUserStore.ts +++ b/src/user/useUserStore.ts @@ -79,6 +79,9 @@ export default defineStore('user', () => { localStorage.setItem('token', val) if (!val) return + if (!isLogin.value) { + return + } const res = await request('GET', '/api/profile') Object.assign(profile, res) }, diff --git a/src/utils/ImageUploader.tsx b/src/utils/ImageUploader.tsx index 20ee600..0c23f3d 100644 --- a/src/utils/ImageUploader.tsx +++ b/src/utils/ImageUploader.tsx @@ -5,6 +5,8 @@ import upload from './upload' import 'viewerjs/dist/viewer.css' import { api as showViewer } from 'v-viewer' import { globalToast } from '@/main' +import useUserStore from '@/user/useUserStore' +import useRouterStore from '@/useRouterStore' addIcons(MdUpload, FaEye) @@ -33,6 +35,7 @@ export default defineComponent({ }, setup(props, ctx) { let input: HTMLInputElement | null = null + return () => (
{ - input?.click() + if (useUserStore().isLogin) { + input?.click() + } else { + globalToast.warning('请先登录') + useRouterStore().go('global-login') + } }} > {props.value ? ( diff --git a/src/utils/UploadAndCut.tsx b/src/utils/UploadAndCut.tsx index bc6226e..03f419c 100644 --- a/src/utils/UploadAndCut.tsx +++ b/src/utils/UploadAndCut.tsx @@ -3,141 +3,149 @@ 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 { v4 as uuid } from 'uuid' +import { MdCroprotateRound, BiPlusLg } from 'oh-vue-icons/icons' +import { OhVueIcon, addIcons } from 'oh-vue-icons' import NativeColorPicker from './NativeColorPicker' +import useUserStore from '@/user/useUserStore' +import { globalToast } from '@/main' +import useRouterStore from '@/useRouterStore' addIcons(MdCroprotateRound, BiPlusLg) export default defineComponent({ + emits: { + 'update:value': (() => true) as (val: string) => boolean + }, + setup(props, ctx) { + const inputRef = ref(null) + const showCutModel = ref(false) + const originFile = ref('') + const fillColor = ref('transparent') + const cropper = ref(null) + const handleFile = (e: any) => { + const target = e.target as HTMLInputElement - emits: { - 'update:value': (() => true) as (val: string) => boolean - }, - setup(props, ctx) { - const inputRef = ref(null) - const showCutModel = ref(false) - const originFile = ref('') - const fillColor = ref('transparent') - const cropper = ref(null) - const handleFile = (e: any) => { - const target = e.target as HTMLInputElement + const file = target.files?.[0] + target.value = '' - const file = target.files?.[0] - target.value = '' + 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) => { + // 根据前几个字节推测文件类型（这里只考虑常见的图片类型） - 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 对象以验证 - // 使用 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 - 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 () => ( - <> - showCutModel.value = false} - onOk={() => { - cropper.value.getCropBlob((blob: any) => { - handleFinish(blob) - - }) - }} - > -
-
- -
-
- {/* { + const elements = document.querySelectorAll('.cropper-crop-box') + elements.forEach((element: any) => { + element.style.backgroundColor = e // 修改颜色为蓝色 + }) + }, + { + immediate: true + } + ) + return () => ( + <> + (showCutModel.value = false)} + onOk={() => { + cropper.value.getCropBlob((blob: any) => { + handleFinish(blob) + }) + }} + > +
+
+ +
+
+ {/* ($refs.cropper as any).rotateRight()} /> */} - { - cropper.value.rotateRight() - }}> - - - - - cropper.value?.changeScale(1)} - class="icon cursor-pointer" - viewBox="0 0 1024 1024" - width="2rem" - height="2rem" - > - - - cropper.value?.changeScale(-1)} - class="icon cursor-pointer" - viewBox="0 0 1024 1024" - width="2rem" - height="2rem" - > - - - -
- fillColor.value = e} transparent={true} /> - {/* {props.colorList && ( + { + cropper.value.rotateRight() + }} + > + + + + cropper.value?.changeScale(1)} + class="icon cursor-pointer" + viewBox="0 0 1024 1024" + width="2rem" + height="2rem" + > + + + cropper.value?.changeScale(-1)} + class="icon cursor-pointer" + viewBox="0 0 1024 1024" + width="2rem" + height="2rem" + > + + + +
+ (fillColor.value = e)} + transparent={true} + /> + {/* {props.colorList && (
)} */} - -
- -
{ - inputRef.value?.click?.() - }} - > - -
- - - ) - } - +
+ +
{ + if (useUserStore().isLogin) { + inputRef.value?.click?.() + } else { + globalToast.warning('请先登录') + useRouterStore().go('global-login') + // useAdderPageStore().type = 2 + } + }} + > + +
+ + + ) + } })