feat(settings): support drop file on avatar&header

This commit is contained in:
三咲智子 Kevin Deng 2023-01-20 00:33:17 +08:00
parent eb966976db
commit 0f5476c190
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E

View file

@ -1,7 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { ofetch } from 'ofetch'
import { useForm } from 'slimeform' import { useForm } from 'slimeform'
import { parse } from 'ultrahtml' import { parse } from 'ultrahtml'
import type { Component } from 'vue'
definePageMeta({ definePageMeta({
middleware: 'auth', middleware: 'auth',
@ -15,6 +17,9 @@ useHeadFixed({
const { client } = $(useMasto()) const { client } = $(useMasto())
const avatarInput = ref<any>()
const headerInput = ref<any>()
const account = $computed(() => currentUser.value?.account) const account = $computed(() => currentUser.value?.account)
const onlineSrc = $computed(() => ({ const onlineSrc = $computed(() => ({
@ -81,6 +86,15 @@ const refreshInfo = async () => {
reset() reset()
} }
useDropZone(avatarInput, (files) => {
if (files?.[0])
form.avatar = files[0]
})
useDropZone(headerInput, (files) => {
if (files?.[0])
form.header = files[0]
})
onHydrated(refreshInfo) onHydrated(refreshInfo)
onReactivated(refreshInfo) onReactivated(refreshInfo)
</script> </script>
@ -98,6 +112,7 @@ onReactivated(refreshInfo)
<!-- banner --> <!-- banner -->
<div of-hidden bg="gray-500/20" aspect="3"> <div of-hidden bg="gray-500/20" aspect="3">
<CommonInputImage <CommonInputImage
ref="headerInput"
v-model="form.header" v-model="form.header"
:original="onlineSrc.header" :original="onlineSrc.header"
w-full h-full w-full h-full
@ -108,6 +123,7 @@ onReactivated(refreshInfo)
<!-- avatar --> <!-- avatar -->
<div px-4 flex="~ gap4"> <div px-4 flex="~ gap4">
<CommonInputImage <CommonInputImage
ref="avatarInput"
v-model="form.avatar" v-model="form.avatar"
:original="onlineSrc.avatar" :original="onlineSrc.avatar"
mt--10 mt--10