add:fronted
This commit is contained in:
lan
@@ -0,0 +1,15 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-typescript',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
.git
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
Vendored
+9
@@ -0,0 +1,9 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||||
|
}
|
||||||
Vendored
+32
@@ -0,0 +1,32 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
CardTools: typeof import('./src/components/CardTools.vue')['default']
|
||||||
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
|
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||||
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
|
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||||
|
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||||
|
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||||
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
|
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||||
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
|
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||||
|
FileBox: typeof import('./src/components/FileBox.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
UploadFile: typeof import('./src/components/UploadFile.vue')['default']
|
||||||
|
UploadText: typeof import('./src/components/UploadText.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/logo_small.png">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>FileCodeBox</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "fcb-fronted",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check build-only",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"element-plus": "^2.3.9",
|
||||||
|
"pinia": "^2.1.4",
|
||||||
|
"qrcode.vue": "^3.4.1",
|
||||||
|
"sass": "^1.64.2",
|
||||||
|
"unplugin-auto-import": "^0.16.6",
|
||||||
|
"unplugin-vue-components": "^0.25.1",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-router": "^4.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.2",
|
||||||
|
"@tsconfig/node18": "^18.2.0",
|
||||||
|
"@types/node": "^18.17.0",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^11.0.3",
|
||||||
|
"@vue/tsconfig": "^0.4.0",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-plugin-vue": "^9.15.1",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^3.0.0",
|
||||||
|
"typescript": "~5.1.6",
|
||||||
|
"vite": "^4.4.6",
|
||||||
|
"vue-tsc": "^1.8.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<RouterView />
|
||||||
|
<div style="text-align: center; margin-top: 1rem;color: #606266">
|
||||||
|
<a style="text-decoration: none;color: #606266" target="_blank" href="https://github.com/vastsa/FileCodeBox">FileCodeBox V2.0 Beta</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f5f5f5;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #212121;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
background: var(--vt-c-white-soft);
|
||||||
|
}
|
||||||
|
html.dark{
|
||||||
|
background: var(--vt-c-black-soft);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
color: var(--color-text);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family: Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1,55 @@
|
|||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
max-width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #F8FBFE;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||||
|
border-radius: 20px !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: inline-block;
|
||||||
|
align-items: center;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.circle {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
padding: 3px;
|
||||||
|
background-color: #ff605c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
padding: 3px;
|
||||||
|
background-color: #ffbd44;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: #00ca4e;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: () => import('@/views/HomeView.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/send',
|
||||||
|
name: 'send',
|
||||||
|
component: () => import('@/views/SendView.vue'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
export const useFileBoxStore = defineStore('fileBox', () => {
|
||||||
|
const showFileBox = ref(false);
|
||||||
|
return { showFileBox };
|
||||||
|
});
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import {reactive} from "vue";
|
||||||
|
|
||||||
|
export const useFileDataStore = defineStore('fileData', () => {
|
||||||
|
const receiveData = reactive(JSON.parse(localStorage.getItem('receiveData')||'') || []); // 接收的数据
|
||||||
|
const shareData = reactive(JSON.parse(localStorage.getItem('shareData')||'') || []); // 接收的数据
|
||||||
|
function save() {
|
||||||
|
localStorage.setItem('receiveData', JSON.stringify(receiveData));
|
||||||
|
localStorage.setItem('shareData', JSON.stringify(shareData));
|
||||||
|
}
|
||||||
|
function addReceiveData(data:any) {
|
||||||
|
receiveData.push(data);
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addShareData(data:any) {
|
||||||
|
shareData.push(data);
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteReceiveData(index: number) {
|
||||||
|
receiveData.splice(index, 1);
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteShareData(index: number) {
|
||||||
|
shareData.splice(index, 1);
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
return { receiveData, shareData, save, addShareData, addReceiveData, deleteReceiveData, deleteShareData };
|
||||||
|
});
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
// @ts-ignore
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL: "",
|
||||||
|
timeout: 6000000,
|
||||||
|
headers:{
|
||||||
|
'Authorization':localStorage.getItem('auth')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const Request = axios.create({
|
||||||
|
baseURL: "http://localhost:8000",
|
||||||
|
timeout: 6000000,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const request = Request;
|
||||||
|
export const http = instance;
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Upload, TakeawayBox } from '@element-plus/icons-vue';
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import CardTools from "@/components/CardTools.vue";
|
||||||
|
import { useFileBoxStore } from "@/stores/fileBox";
|
||||||
|
const fileBoxStore = useFileBoxStore();
|
||||||
|
const router = useRouter()
|
||||||
|
const code = ref('')
|
||||||
|
const listenInput = (num: number) => {
|
||||||
|
console.log('listenInput',num)
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<el-card class="card" style="padding-bottom: 1rem">
|
||||||
|
<CardTools/>
|
||||||
|
<el-row style="text-align: center">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-input v-model="code" class="code-input" round autofocus clearable maxlength="5" placeholder="请输入五位取件码"/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span=8 v-for="i in 9" :key="i">
|
||||||
|
<el-button class="key-button" round @click="listenInput(i)">{{ i }}</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span=8>
|
||||||
|
<el-button @click="router.push({'name':'send'})" class="key-button" :icon="Upload" round>
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span=8>
|
||||||
|
<el-button class="key-button" round @click="listenInput(0)">0</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span=8>
|
||||||
|
<el-button class="key-button" round :icon="TakeawayBox" @click="fileBoxStore.showFileBox=true">
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
<style lang='scss'>
|
||||||
|
.key-button{
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
margin: 0.2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-input {
|
||||||
|
height: 100px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 1rem 0;
|
||||||
|
.el-input__wrapper{
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import CardTools from "@/components/CardTools.vue";
|
||||||
|
import UploadFile from "@/components/UploadFile.vue";
|
||||||
|
import UploadText from "@/components/UploadText.vue";
|
||||||
|
const shareData = ref({
|
||||||
|
expireValue: 1,
|
||||||
|
expireStyle: 'day',
|
||||||
|
targetType: 'file',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<el-card class="card" style="padding: 1rem;position: relative" :body-style="{ padding: '0px 0px 20px 0px' }">
|
||||||
|
<card-tools/>
|
||||||
|
<div style="display: flex;margin-top: 1rem">
|
||||||
|
<div>
|
||||||
|
<el-input
|
||||||
|
v-model="shareData.expireValue"
|
||||||
|
style="width: 200px"
|
||||||
|
placeholder="请输入值"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<el-select v-model="shareData.expireStyle" placeholder="过期方式" style="width: 75px">
|
||||||
|
<el-option label="天数" value="day" />
|
||||||
|
<el-option label="小时" value="hour" />
|
||||||
|
<el-option label="分钟" value="minute" />
|
||||||
|
<el-option label="永久" value="forever" />
|
||||||
|
<el-option label="次数" value="count" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<span v-if="shareData.expireStyle=='day'">天</span>
|
||||||
|
<span v-else-if="shareData.expireStyle=='hour'">时</span>
|
||||||
|
<span v-else-if="shareData.expireStyle=='minute'">分</span>
|
||||||
|
<span v-else-if="shareData.expireStyle=='forever'">👌</span>
|
||||||
|
<span v-else-if="shareData.expireStyle=='count'">次</span>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<el-radio-group v-model="shareData.targetType" style="margin-left: 1rem;">
|
||||||
|
<el-radio label="file">文件</el-radio>
|
||||||
|
<el-radio label="text">文本</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1rem">
|
||||||
|
<upload-file :shareData="shareData" v-if="shareData.targetType=='file'"/>
|
||||||
|
<upload-text :shareData="shareData" v-else-if="shareData.targetType=='text'"/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node18/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,44 @@
|
|||||||
|
# @Time : 2023/8/9 23:23
|
||||||
|
# @Author : Lan
|
||||||
|
# @File : main.py
|
||||||
|
# @Software: PyCharm
|
||||||
|
import random
|
||||||
|
|
||||||
|
from fastapi import FastAPI, UploadFile, File, Form
|
||||||
|
from starlette.middleware.cors import CORSMiddleware
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
|
||||||
|
app.add_middleware(
|
||||||
|
CORSMiddleware,
|
||||||
|
allow_origins=["*"],
|
||||||
|
allow_credentials=True,
|
||||||
|
allow_methods=["*"],
|
||||||
|
allow_headers=["*"],
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
@app.post('/share/text/')
|
||||||
|
async def share_text(text: str = Form(...), expireValue: int = Form(...), expireStyle: str = Form(...), targetType: str = Form(...)):
|
||||||
|
return {
|
||||||
|
'code': 200,
|
||||||
|
'msg': 'success',
|
||||||
|
'data': {
|
||||||
|
'code': random.randint(100000, 999999),
|
||||||
|
'text': text,
|
||||||
|
'name': '文本分享',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@app.post('/share/file/')
|
||||||
|
async def share_file(file: UploadFile = File(default=None)):
|
||||||
|
return {
|
||||||
|
'code': 200,
|
||||||
|
'msg': 'success',
|
||||||
|
'data': {
|
||||||
|
'code': random.randint(100000, 999999),
|
||||||
|
'text': '/share/{}'.format(random.randint(100000, 999999)),
|
||||||
|
'name': file.filename,
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user