add:fronted
This commit is contained in:
lan
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
import { Moon, Sunny, Upload, Back, TakeawayBox } from "@element-plus/icons-vue";
|
||||
import FileBox from "@/components/FileBox.vue";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tools">
|
||||
<div class="circle">
|
||||
<el-icon size="17" color="#212121" class="red box" @click="router.push({'name':route.name=='home'?'send':'home'})">
|
||||
<Back v-if="route.name=='send'"></Back>
|
||||
<Upload v-else></Upload>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<el-icon size="17" color="#212121" class="yellow box" @click="toggleDark(!isDark)">
|
||||
<Moon v-if="isDark"></Moon>
|
||||
<Sunny v-else></Sunny>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<el-icon size="17" color="#212121" class="green box" @click="fileBoxStore.showFileBox=true">
|
||||
<TakeawayBox></TakeawayBox>
|
||||
</el-icon>
|
||||
</div>
|
||||
<file-box></file-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { useFileDataStore } from "@/stores/fileData";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
|
||||
const fileStore = useFileDataStore();
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
import QrcodeVue from "qrcode.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const copyText = (text: any, style = 0) => {
|
||||
if (style === 1) {
|
||||
text = window.location.origin + '/#/?code=' + text;
|
||||
}
|
||||
const temp: any = document.createElement('textarea');
|
||||
temp.value = text;
|
||||
document.body.appendChild(temp);
|
||||
temp.select();
|
||||
if (document.execCommand('copy')) {
|
||||
document.execCommand('copy');
|
||||
}
|
||||
document.body.removeChild(temp);
|
||||
};
|
||||
const route = useRoute();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer append-to-body v-model="fileBoxStore.showFileBox" direction="btt" style="max-width: 1080px;margin: auto;"
|
||||
size="400">
|
||||
<template #header>
|
||||
<h4>文件箱</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<div v-if="route.name=='home'">
|
||||
<el-card v-for="i in fileStore.receiveData" :key="i">
|
||||
{{ i }}
|
||||
<template #header>
|
||||
<el-button type="danger" @click="fileStore.deleteReceiveData(i)">删除</el-button>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else style="display: flex;flex-wrap: wrap;justify-content: center">
|
||||
<el-card v-for="(value,index) in fileStore.shareData" :key="index" style="margin: 0.5rem">
|
||||
<template #header>
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<h4 style="width: 6rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ value.name }}</h4>
|
||||
<el-button size="small" type="danger" @click="fileStore.deleteShareData(index)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div style="width: 200px;">
|
||||
<el-progress v-if="value.status!='success'" striped :percentage="value.percentage" :text-inside="true"
|
||||
:stroke-width="20"></el-progress>
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<qrcode-vue :value="value.text" :size="100"></qrcode-vue>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-around">
|
||||
<el-tag size="large" style="cursor: pointer" @click="copyText(value.code)">{{ value.code }}</el-tag>
|
||||
<el-tag size="large" type="success" style="cursor: pointer" @click="copyText(value.code,1);">复制链接
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import { UploadFilled } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { request } from "@/utils/request";
|
||||
import { useFileDataStore } from "@/stores/fileData";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
const fileStore = useFileDataStore();
|
||||
const props = defineProps({
|
||||
shareData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
expireValue: 1,
|
||||
expireStyle: 'day',
|
||||
targetType: 'file',
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fileList: any = ref([])
|
||||
const uploadBox: any = ref(null)
|
||||
const handleOnChangeFileList = (file: any) => {
|
||||
fileStore.addShareData({
|
||||
'name': file.name,
|
||||
'text': '',
|
||||
'status': file.status,
|
||||
'percentage': 0,
|
||||
'size': file.size,
|
||||
'type': file.raw.type,
|
||||
'uid': file.uid,
|
||||
});
|
||||
};
|
||||
|
||||
const handleHttpRequest = (options: any) => {
|
||||
fileBoxStore.showFileBox = true;
|
||||
const formData = new FormData();
|
||||
formData.append('file', options.file);
|
||||
formData.append('expireValue', props.shareData.expireValue);
|
||||
formData.append('expireStyle', props.shareData.expireStyle);
|
||||
formData.append('targetType', props.shareData.targetType);
|
||||
request(
|
||||
{
|
||||
url: "share/file/",
|
||||
method: "post",
|
||||
data: formData,
|
||||
onUploadProgress: (event: any) => {
|
||||
const percentage = Math.round((event.loaded * 100) / event.total) || 0;
|
||||
fileStore.shareData.forEach((file: any) => {
|
||||
if (file.uid === options.file.uid) {
|
||||
file.percentage = percentage;
|
||||
fileStore.save();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
).then((res: any) => {
|
||||
const data = res.data.data;
|
||||
fileStore.shareData.forEach((file: any) => {
|
||||
if (file.uid === options.file.uid) {
|
||||
file.status = 'success';
|
||||
file.text = data.text;
|
||||
file.code = data.code;
|
||||
fileStore.save();
|
||||
}
|
||||
});
|
||||
}).catch((err: any) => {
|
||||
fileStore.shareData.forEach((file: any) => {
|
||||
if (file.uid === options.file.uid) {
|
||||
file.status = 'fail';
|
||||
file.text = err.message;
|
||||
fileStore.save();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
function pasteLister(event: any) {
|
||||
const items = event.clipboardData && event.clipboardData.items;
|
||||
if (items && items.length) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].kind === 'string') {
|
||||
if (items[i].type.match(/^text\/plain/)) {
|
||||
items[i].getAsString(function(str) {
|
||||
console.log(str);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const file: any = items[i].getAsFile();
|
||||
if (file) {
|
||||
console.log(file);
|
||||
const uid = Date.now();
|
||||
file.uid = uid;
|
||||
fileStore.addShareData({
|
||||
'name': file.name,
|
||||
'text': '',
|
||||
'status': 'ready',
|
||||
'percentage': 0,
|
||||
'size': file.size,
|
||||
'type': file.type,
|
||||
'uid': uid,
|
||||
});
|
||||
handleHttpRequest({
|
||||
file: file,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onUnmounted(()=>{
|
||||
// 清除剪切板事件
|
||||
document.removeEventListener('paste', pasteLister);
|
||||
})
|
||||
onMounted(()=>{
|
||||
document.addEventListener('paste', pasteLister);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="http://127.0.0.1:8000/share"
|
||||
multiple
|
||||
:show-file-list="false"
|
||||
ref="uploadBox"
|
||||
v-model:file-list="fileList"
|
||||
:on-change="handleOnChangeFileList"
|
||||
:http-request="handleHttpRequest"
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文字、文件拖、粘贴到此处，或 <em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__text" style="font-size: 10px;">天数<7或限制次数（24h后删除）</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.el-upload {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { request } from "@/utils/request";
|
||||
const shareText = ref('')
|
||||
import { useFileDataStore } from "@/stores/fileData";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
const fileStore = useFileDataStore();
|
||||
const props = defineProps({
|
||||
shareData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
expireValue: 1,
|
||||
expireStyle: 'day',
|
||||
targetType: 'text',
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const handleSubmitShareText = ()=>{
|
||||
const formData = new FormData();
|
||||
formData.append('text', shareText.value);
|
||||
formData.append('expireValue', props.shareData.expireValue);
|
||||
formData.append('expireStyle', props.shareData.expireStyle);
|
||||
formData.append('targetType', props.shareData.targetType);
|
||||
request({
|
||||
'url': 'share/text/',
|
||||
'method': 'post',
|
||||
'data': formData,
|
||||
}).then((res: any) => {
|
||||
const data = res.data.data;
|
||||
fileBoxStore.showFileBox = true;
|
||||
fileStore.addShareData({
|
||||
'name': '文本分享',
|
||||
'text': data.text,
|
||||
'code': data.code,
|
||||
'status': 'success',
|
||||
'percentage': 100,
|
||||
'size': shareText.value.length,
|
||||
'type': 'text',
|
||||
'uid': Date.now(),
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="position: relative">
|
||||
<el-input
|
||||
placeholder="请输入您要寄出的文本"
|
||||
v-model="shareText"
|
||||
type="textarea"
|
||||
:rows="9"
|
||||
:input-style="{'border-radius':'20px','border':'1px dashed var(--el-border-color)','box-shadow':'none'}"
|
||||
>
|
||||
</el-input>
|
||||
<el-button @click="handleSubmitShareText" style="position: absolute;right: 0;top: 0;border-radius: 0 20px 0 20px;margin: 1px;background: rgba(255,255,255,0.2)" size="large">发送</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user