This commit is contained in:
Silent YANG 2024-05-27 01:04:34 +08:00
parent 44b79d3845
commit e6480e7eab
7 changed files with 317 additions and 113 deletions

View file

@ -40,7 +40,7 @@ axios.interceptors.response.use(
(response: AxiosResponse<HttpResponse>) => { (response: AxiosResponse<HttpResponse>) => {
const res = response.data; const res = response.data;
// if the custom code is not 20000, it is judged as an error. // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) { if (res.code !== 200) {
Message.error({ Message.error({
content: res.msg || 'Error', content: res.msg || 'Error',
duration: 5 * 1000, duration: 5 * 1000,

View file

@ -3,14 +3,14 @@
<t-dialog <t-dialog
v-model:visible="userStore.showLogin" v-model:visible="userStore.showLogin"
attach="body" attach="body"
header="登录" :header="$t('global.login')"
destroy-on-close destroy-on-close
:footer="false" :footer="false"
> >
<template #body> <template #body>
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onLogin"> <t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onLogin">
<t-form-item name="account"> <t-form-item name="account">
<t-input v-model="formData.account" clearable placeholder="请输入账户名"> <t-input v-model="formData.account" clearable :placeholder="$t('global.username')">
<template #prefix-icon> <template #prefix-icon>
<desktop-icon /> <desktop-icon />
</template> </template>
@ -18,7 +18,7 @@
</t-form-item> </t-form-item>
<t-form-item name="password"> <t-form-item name="password">
<t-input v-model="formData.password" type="password" clearable placeholder="请输入密码"> <t-input v-model="formData.password" type="password" clearable :placeholder="$t('global.password')">
<template #prefix-icon> <template #prefix-icon>
<lock-on-icon /> <lock-on-icon />
</template> </template>
@ -26,7 +26,7 @@
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button> <t-button theme="primary" type="submit" block>{{$t('global.login')}}</t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
</template> </template>
@ -34,14 +34,14 @@
<t-dialog <t-dialog
v-model:visible="userStore.showRegister" v-model:visible="userStore.showRegister"
attach="body" attach="body"
header="注册" :header="$t('global.register')"
destroy-on-close destroy-on-close
:footer="false" :footer="false"
> >
<template #body> <template #body>
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onRegister"> <t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onRegister">
<t-form-item name="account"> <t-form-item name="account">
<t-input v-model="formData.account" clearable placeholder="请输入账户名"> <t-input v-model="formData.account" clearable :placeholder="$t('global.username')">
<template #prefix-icon> <template #prefix-icon>
<desktop-icon /> <desktop-icon />
</template> </template>
@ -49,7 +49,7 @@
</t-form-item> </t-form-item>
<t-form-item name="password"> <t-form-item name="password">
<t-input v-model="formData.password" type="password" clearable placeholder="请输入密码"> <t-input v-model="formData.password" type="password" clearable :placeholder="$t('global.password')">
<template #prefix-icon> <template #prefix-icon>
<lock-on-icon /> <lock-on-icon />
</template> </template>
@ -57,7 +57,7 @@
</t-form-item> </t-form-item>
<t-form-item name="password2"> <t-form-item name="password2">
<t-input v-model="formData.password2" type="password" clearable placeholder="请再次输入密码"> <t-input v-model="formData.password2" type="password" clearable :placeholder="$t('global.password2')">
<template #prefix-icon> <template #prefix-icon>
<lock-on-icon /> <lock-on-icon />
</template> </template>
@ -65,7 +65,7 @@
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button> <t-button theme="primary" type="submit" block>{{$t('global.register')}}</t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
</template> </template>
@ -126,6 +126,8 @@
import usePermission from '@/hooks/permission'; import usePermission from '@/hooks/permission';
import useResponsive from '@/hooks/responsive'; import useResponsive from '@/hooks/responsive';
import PageLayout from './page-layout.vue'; import PageLayout from './page-layout.vue';
import axios from 'axios';
import { Message } from '@arco-design/web-vue';
const formData = reactive({ const formData = reactive({
account: '', account: '',
@ -133,16 +135,45 @@
password2: '' password2: ''
}); });
const onLogin = () => { const onLogin = async () => {
console.log(formData) const resp : any = await axios.post("https://k5.vicicode.com/wsapi/login", {
userStore.setInfo({ 'username': formData.account,
showLogin: false, 'password': formData.password
name: '开发中'
}) })
if(resp.code == 200){
userStore.setInfo({
showLogin: false,
name: formData.account,
accountId: resp.token
})
}
} }
const onRegister = () => { const onRegister = async () => {
console.log(formData) if(formData.password == '' || formData.account == ''){
Message.error({
content: '用户名及密码不能为空',
duration: 5 * 1000,
});
return;
}
if(formData.password != formData.password2){
Message.error({
content: '两次输入密码不一致',
duration: 5 * 1000,
});
return;
}
const resp : any = await axios.post("https://k5.vicicode.com/wsapi/register", {
'username': formData.account,
'password': formData.password
})
if(resp.code == 200){
userStore.setInfo({
showRegister: false,
showLogin: true
})
}
} }
const isInit = ref(false); const isInit = ref(false);

View file

@ -141,6 +141,12 @@ export default {
'global.use': 'Use', 'global.use': 'Use',
'tool.ssbpatch': 'LOSEHU S Firmware SI4732 SSB Patch', 'tool.ssbpatch': 'LOSEHU S Firmware SI4732 SSB Patch',
'tool.writessbpatch': 'SSB Patch Write', 'tool.writessbpatch': 'SSB Patch Write',
'global.login': 'Login',
'global.register': 'Register',
'global.logout': 'Logout',
'global.username': 'Username',
'global.password': 'Password',
'global.password2': 'Retype password ',
...localeSettings, ...localeSettings,
...localeMessageBox, ...localeMessageBox,
...localeLogin, ...localeLogin,

View file

@ -141,6 +141,12 @@ export default {
'global.use': '使用', 'global.use': '使用',
'tool.ssbpatch': 'LOSEHU S 版固件 SI4732 单边带补丁', 'tool.ssbpatch': 'LOSEHU S 版固件 SI4732 单边带补丁',
'tool.writessbpatch': '写入单边带补丁', 'tool.writessbpatch': '写入单边带补丁',
'global.login': '登录',
'global.register': '注册',
'global.logout': '退出',
'global.username': '请输入用户名',
'global.password': '请输入密码',
'global.password2': '请再次输入密码',
...localeSettings, ...localeSettings,
...localeMessageBox, ...localeMessageBox,
...localeLogin, ...localeLogin,

View file

@ -8,67 +8,28 @@
<div style="margin-right: 20px;"> <div style="margin-right: 20px;">
<template v-if="userStore.name"> <template v-if="userStore.name">
<a-link @click="showPanel">&nbsp;&nbsp;{{ userStore.name }}&nbsp;&nbsp;</a-link> <a-link @click="showPanel">&nbsp;&nbsp;{{ userStore.name }}&nbsp;&nbsp;</a-link>
<a-link @click="userStore.logout()">&nbsp;&nbsp;退出&nbsp;&nbsp;</a-link> <a-link @click="userStore.logout()">&nbsp;&nbsp;{{ $t('global.logout') }}&nbsp;&nbsp;</a-link>
</template> </template>
<template v-else> <template v-else>
<a-link @click="userStore.setInfo({ showLogin: true })">&nbsp;&nbsp;登录&nbsp;&nbsp;</a-link> <a-link @click="userStore.setInfo({ showLogin: true })">&nbsp;&nbsp;{{ $t('global.login') }}&nbsp;&nbsp;</a-link>
<a-link @click="userStore.setInfo({ showRegister: true })">&nbsp;&nbsp;注册&nbsp;&nbsp;</a-link> <a-link @click="userStore.setInfo({ showRegister: true })">&nbsp;&nbsp;{{ $t('global.register') }}&nbsp;&nbsp;</a-link>
</template> </template>
</div> </div>
</template> </template>
<a-list> <a-list>
<a-list-item style="width: 100%;"> <a-list-item style="width: 100%;" v-for="item in state.nowpage">
<a-list-item-meta <a-list-item-meta
title="LOSEHU126.bin" :title="item.title"
description="https://github.com/losehu/uv-k5-firmware-custom" :description="item.desc"
> >
</a-list-item-meta> </a-list-item-meta>
<template #actions> <template #actions>
<a-link @click="useFirmware('/LOSEHU126.bin')">{{$t('global.use')}}</a-link> <a-link @click="onStar(item.id)">👍</a-link>
</template> <a-link @click="useFirmware('https://k5.vicicode.com/wsapi/download?id=' + item.id)">{{$t('global.use')}}</a-link>
</a-list-item>
<a-list-item style="width: 100%;">
<a-list-item-meta
title="LOSEHU126K.bin"
description="https://github.com/losehu/uv-k5-firmware-custom"
>
</a-list-item-meta>
<template #actions>
<a-link @click="useFirmware('/LOSEHU126K.bin')">{{$t('global.use')}}</a-link>
</template>
</a-list-item>
<a-list-item style="width: 100%;">
<a-list-item-meta
title="LOSEHU126H.bin"
description="https://github.com/losehu/uv-k5-firmware-custom"
>
</a-list-item-meta>
<template #actions>
<a-link @click="useFirmware('/LOSEHU126H.bin')">{{$t('global.use')}}</a-link>
</template>
</a-list-item>
<a-list-item style="width: 100%;">
<a-list-item-meta
title="LOSEHU117P6我基于 LOSEHU117 修改的固件)"
description="https://github.com/silenty4ng/uv-k5-firmware-chinese-lts"
>
</a-list-item-meta>
<template #actions>
<a-link @click="useFirmware('/LOSEHU117P6.bin')">{{$t('global.use')}}</a-link>
</template>
</a-list-item>
<a-list-item style="width: 100%;">
<a-list-item-meta
title="LOSEHU117P6K我基于 LOSEHU117K 修改的固件)"
description="https://github.com/silenty4ng/uv-k5-firmware-chinese-lts"
>
</a-list-item-meta>
<template #actions>
<a-link @click="useFirmware('/LOSEHU117P6K.bin')">{{$t('global.use')}}</a-link>
</template> </template>
</a-list-item> </a-list-item>
</a-list> </a-list>
<t-pagination style="margin: 10px;" :total="5" showPageNumber :showPageSize="false" /> <t-pagination style="margin: 10px;" :total="state.total" :current="state.page" showPageNumber :showPageSize="false" />
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -80,16 +41,16 @@
</t-button> </t-button>
</div> </div>
<t-list :split="true"> <t-list :split="true">
<t-list-item v-for="item in 20"> <t-list-item v-for="item in state.myList">
<div style="display: flex; width: 100%;"> <div style="display: flex; width: 100%;">
<div style="width: 90%;"> <div style="width: 90%;">
<t-tag theme="primary" variant="outline">审核中</t-tag> <t-tag theme="primary" variant="outline">{{ item.audit ? '已审核' : '审核中' }}</t-tag>
固件名称 {{ item.title }}
<br> <br>
固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述 {{ item.desc }}
</div> </div>
<div style="width: 10%; margin: auto; text-align: center;"> <div style="width: 10%; margin: auto; text-align: center;">
<t-link theme="primary" hover="color">删除</t-link> <t-link theme="primary" hover="color" @click="onDT(item.id)">删除</t-link>
</div> </div>
</div> </div>
</t-list-item> </t-list-item>
@ -111,7 +72,7 @@
<t-form-item label="固件文件" name="firmware" label-align="top"> <t-form-item label="固件文件" name="firmware" label-align="top">
<t-upload <t-upload
v-model="formData.firmware" v-model="formData.firmware"
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" action="https://k5.vicicode.com/wsapi/base64"
:abridge-name="[8, 6]" :abridge-name="[8, 6]"
theme="file-input" theme="file-input"
placeholder="未选择文件" placeholder="未选择文件"
@ -126,10 +87,12 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, nextTick } from 'vue'; import { reactive, nextTick, onMounted, watch } from 'vue';
import { useAppStore, useUserStore } from '@/store'; import { useAppStore, useUserStore } from '@/store';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { RefreshIcon } from 'tdesign-icons-vue-next'; import { RefreshIcon } from 'tdesign-icons-vue-next';
import axios from 'axios';
import { Message } from '@arco-design/web-vue';
const appStore = useAppStore(); const appStore = useAppStore();
const userStore = useUserStore(); const userStore = useUserStore();
@ -141,13 +104,21 @@
loading: boolean, loading: boolean,
showPanel: boolean, showPanel: boolean,
showUpload: boolean, showUpload: boolean,
refLoading: boolean refLoading: boolean,
myList: any,
total: number,
page: number,
nowpage: any
} = reactive({ } = reactive({
binaryFile: undefined, binaryFile: undefined,
loading: false, loading: false,
showPanel: false, showPanel: false,
showUpload: false, showUpload: false,
refLoading: false refLoading: false,
myList: [],
total: 0,
page: 1,
nowpage: []
}) })
const formData = reactive({ const formData = reactive({
@ -156,8 +127,29 @@
firmware: [] firmware: []
}) })
const showPanel = () => { onMounted(async ()=>{
const resp : any = await axios.get("https://k5.vicicode.com/wsapi/list?type=0&page=" + state.page + "&t=" + Date.now())
state.total = resp.total
state.nowpage = resp.data
})
watch(state, async (n, o)=>{
if(n.page != o.page){
const resp : any = await axios.get("https://k5.vicicode.com/wsapi/list?type=0&page=" + state.page + "&t=" + Date.now())
state.total = resp.total
state.nowpage = resp.data
}
})
const showPanel = async () => {
state.refLoading = true;
state.showPanel = true state.showPanel = true
const resp : any = await axios.post("https://k5.vicicode.com/wsapi/my_list", {
'type': 0,
'token': userStore.accountId
})
state.myList = resp.data
state.refLoading = false;
} }
const showUpload = () => { const showUpload = () => {
@ -167,16 +159,45 @@
state.showUpload = true state.showUpload = true
} }
const onUF = () => { const onUF = async () => {
console.log(formData) if(formData.title == "" || formData.firmware.length == 0){
Message.error({
content: '未填写名称及上传文件',
duration: 5 * 1000,
});
return;
}
await axios.post("https://k5.vicicode.com/wsapi/upload", {
'type': 0,
'token': userStore.accountId,
'title': formData.title,
'desc': formData.desc,
'data': formData.firmware[0].url
})
state.showUpload = false; state.showUpload = false;
showPanel()
}
const onDT = async (id: any) => {
await axios.post("https://k5.vicicode.com/wsapi/delete", {
'id': id,
'token': userStore.accountId,
})
showPanel()
}
const onStar = async (id: any) => {
await axios.post("https://k5.vicicode.com/wsapi/star", {
'id': id
})
Message.success({
content: '点赞成功',
duration: 5 * 1000,
});
} }
const refit = () => { const refit = () => {
state.refLoading = true; showPanel()
setTimeout(() => {
state.refLoading = false;
}, 1000);
} }
const useFirmware = (url: string) => { const useFirmware = (url: string) => {

View file

@ -5,39 +5,32 @@
<a-col :span="24"> <a-col :span="24">
<a-card class="general-card" :title="$t('menu.image')"> <a-card class="general-card" :title="$t('menu.image')">
<template #extra> <template #extra>
<div style="margin-right: 20px;"> <div style="margin-right: 20px;">
<template v-if="userStore.name"> <template v-if="userStore.name">
<a-link>&nbsp;&nbsp;{{ userStore.name }}&nbsp;&nbsp;</a-link> <a-link @click="showPanel">&nbsp;&nbsp;{{ userStore.name }}&nbsp;&nbsp;</a-link>
<a-link @click="userStore.logout()">&nbsp;&nbsp;退出&nbsp;&nbsp;</a-link> <a-link @click="userStore.logout()">&nbsp;&nbsp;{{ $t('global.logout') }}&nbsp;&nbsp;</a-link>
</template> </template>
<template v-else> <template v-else>
<a-link @click="userStore.setInfo({ showLogin: true })">&nbsp;&nbsp;登录&nbsp;&nbsp;</a-link> <a-link @click="userStore.setInfo({ showLogin: true })">&nbsp;&nbsp;{{ $t('global.login') }}&nbsp;&nbsp;</a-link>
<a-link @click="userStore.setInfo({ showRegister: true })">&nbsp;&nbsp;注册&nbsp;&nbsp;</a-link> <a-link @click="userStore.setInfo({ showRegister: true })">&nbsp;&nbsp;{{ $t('global.register') }}&nbsp;&nbsp;</a-link>
</template> </template>
</div> </div>
</template> </template>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="4" v-for="i in [ <a-col :span="4" v-for="i in state.nowpage">
{ name: '罗狮虎', url: '/img1.png'},
{ name: '离线小恐龙', url: '/img2.png'},
{ name: '不忘初心牢记使命', url: '/img3.png'},
{ name: '为人民服务', url: '/img4.png'},
{ name: '严禁收听敌台广播', url: '/img5.png'},
{ name: '爱因斯坦', url: '/img6.png'},
]">
<t-card :style="{ width: '100%', marginBottom: '10px' }"> <t-card :style="{ width: '100%', marginBottom: '10px' }">
<template #cover> <template #cover>
<img :title="i.name" :src="i.url"> <img :title="i.title" :src="'https://k5.vicicode.com/wsapi/download?id=' + i.id">
</template> </template>
<template #footer> <template #footer>
<t-row :align="'middle'" justify="center" style="gap: 24px"> <t-row :align="'middle'" justify="center" style="gap: 24px">
<t-col flex="auto" style="display: inline-flex; justify-content: center"> <t-col flex="auto" style="display: inline-flex; justify-content: center">
<t-button variant="text" shape="square" @click="upImg(i)"> <t-button variant="text" shape="square" @click="onStar(i.id)">
<thumb-up-icon /> <thumb-up-icon />
</t-button> </t-button>
</t-col> </t-col>
<t-col flex="auto" style="display: inline-flex; justify-content: center"> <t-col flex="auto" style="display: inline-flex; justify-content: center">
<t-button variant="text" shape="square" @click="useImg(i)"> <t-button variant="text" shape="square" @click="useImg('https://k5.vicicode.com/wsapi/download?id=' + i.id)">
<check-double-icon /> <check-double-icon />
</t-button> </t-button>
</t-col> </t-col>
@ -50,14 +43,67 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<t-drawer v-model:visible="state.showPanel" size="50%" header="我的图片" :footer="false">
<div style="display: flex; align-items: center; justify-content: space-between;">
<t-button style="margin: 10px" @click="showUpload">上传新图片</t-button>
<t-button :loading="state.refLoading" shape="circle" theme="outline" @click="refit">
<template #icon> <RefreshIcon /> </template>
</t-button>
</div>
<t-list :split="true">
<t-list-item v-for="item in state.myList">
<div style="display: flex; width: 100%;">
<div style="width: 90%;">
<t-tag theme="primary" variant="outline">{{ item.audit ? '已审核' : '审核中' }}</t-tag>
{{ item.title }}
<br>
{{ item.desc }}
</div>
<div style="width: 10%; margin: auto; text-align: center;">
<t-link theme="primary" hover="color" @click="onDT(item.id)">删除</t-link>
</div>
</div>
</t-list-item>
</t-list>
</t-drawer>
<t-drawer v-model:visible="state.showUpload" size="25%" header="上传新图片" :footer="false">
<t-form
:data="formData"
reset-type="initial"
colon
@submit="onUF"
>
<t-form-item label="图片名称" name="title" label-align="top">
<t-input v-model="formData.title"></t-input>
</t-form-item>
<t-form-item label="图片描述" name="desc" label-align="top">
<t-textarea :autosize="{ minRows: 5, maxRows: 10 }" v-model="formData.desc" placeholder="请输入" clearable />
</t-form-item>
<t-form-item label="图片文件" name="firmware" label-align="top">
<t-upload
v-model="formData.firmware"
action="https://k5.vicicode.com/wsapi/base64"
:abridge-name="[8, 6]"
theme="file-input"
placeholder="未选择文件"
></t-upload>
</t-form-item>
<t-form-item label-align="top">
<t-button theme="primary" type="submit" block>提交审核</t-button>
</t-form-item>
</t-form>
</t-drawer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next'; import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next';
import { reactive, nextTick } from 'vue'; import { reactive, nextTick, onMounted, watch } from 'vue';
import { useAppStore, useUserStore } from '@/store'; import { useAppStore, useUserStore } from '@/store';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import axios from 'axios';
import { Message } from '@arco-design/web-vue';
import { RefreshIcon } from 'tdesign-icons-vue-next';
const appStore = useAppStore(); const appStore = useAppStore();
const userStore = useUserStore(); const userStore = useUserStore();
@ -66,21 +112,112 @@
const state : { const state : {
binaryFile: any, binaryFile: any,
loading: boolean loading: boolean,
showPanel: boolean,
showUpload: boolean,
refLoading: boolean,
myList: any,
total: number,
page: number,
nowpage: any
} = reactive({ } = reactive({
binaryFile: undefined, binaryFile: undefined,
loading: false loading: false,
showPanel: false,
showUpload: false,
refLoading: false,
myList: [],
total: 0,
page: 1,
nowpage: []
}) })
const upImg = (i:any) => {
alert('图片工坊即将推出'); const formData = reactive({
title: '',
desc: '',
firmware: []
})
onMounted(async ()=>{
const resp : any = await axios.get("https://k5.vicicode.com/wsapi/list?type=1&page=" + state.page + "&t=" + Date.now())
state.total = resp.total
state.nowpage = resp.data
})
const showPanel = async () => {
state.refLoading = true;
state.showPanel = true
const resp : any = await axios.post("https://k5.vicicode.com/wsapi/my_list", {
'type': 1,
'token': userStore.accountId
})
state.myList = resp.data
state.refLoading = false;
} }
const useImg = (i:any) => { const showUpload = () => {
formData.title = ''
formData.desc = ''
formData.firmware = []
state.showUpload = true
}
const onUF = async () => {
if(formData.title == "" || formData.firmware.length == 0){
Message.error({
content: '未填写名称及上传文件',
duration: 5 * 1000,
});
return;
}
await axios.post("https://k5.vicicode.com/wsapi/upload", {
'type': 1,
'token': userStore.accountId,
'title': formData.title,
'desc': formData.desc,
'data': formData.firmware[0].url
})
state.showUpload = false;
showPanel()
}
const onDT = async (id: any) => {
await axios.post("https://k5.vicicode.com/wsapi/delete", {
'id': id,
'token': userStore.accountId,
})
showPanel()
}
const onStar = async (id: any) => {
await axios.post("https://k5.vicicode.com/wsapi/star", {
'id': id
})
Message.success({
content: '点赞成功',
duration: 5 * 1000,
});
}
const refit = () => {
showPanel()
}
watch(state, async (n, o)=>{
if(n.page != o.page){
const resp : any = await axios.get("https://k5.vicicode.com/wsapi/list?type=1&page=" + state.page + "&t=" + Date.now())
state.total = resp.total
state.nowpage = resp.data
}
})
const useImg = (url:any) => {
router.push({ router.push({
path: '/tool/image', path: '/tool/image',
query: { query: {
url: i.url url
} }
}); });
} }

View file

@ -47,9 +47,12 @@ const state : {
const route = useRoute(); const route = useRoute();
onMounted(()=>{ onMounted(async ()=>{
if(route.query.url){ if(route.query.url){
useImg(route.query.url) const img = await fetch(route.query.url, {
responseType: 'blob'
});
useImg(window.URL.createObjectURL(await img.blob()))
} }
}) })