orion/filecodebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构index.html

Browse Source
This commit is contained in:
lan-air
2022-12-13 10:48:09 +08:00
parent f87ce94396
commit ef8160df99
5 changed files with 150 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.py
+8 -10
View File
@@ -76,7 +76,7 @@ async def admin():
async def admin_post(s: AsyncSession = Depends(get_session)): async def admin_post(s: AsyncSession = Depends(get_session)):
query = select(Codes) query = select(Codes)
codes = (await s.execute(query)).scalars().all() codes = (await s.execute(query)).scalars().all()
return {'msg': '查询成功', 'data': codes} return {'detail': '查询成功', 'data': codes}
@app.delete(f'/{settings.ADMIN_ADDRESS}', dependencies=[Depends(admin_required)]) @app.delete(f'/{settings.ADMIN_ADDRESS}', dependencies=[Depends(admin_required)])
@@ -86,7 +86,7 @@ async def admin_delete(code: str, s: AsyncSession = Depends(get_session)):
await storage.delete_file({'type': file.type, 'text': file.text}) await storage.delete_file({'type': file.type, 'text': file.text})
await s.delete(file) await s.delete(file)
await s.commit() await s.commit()
return {'msg': '删除成功'} return {'detail': '删除成功'}
@app.get('/') @app.get('/')
@@ -101,7 +101,7 @@ async def get_file(code: str, s: AsyncSession = Depends(get_session)):
if not info: if not info:
raise HTTPException(status_code=404, detail="口令不存在") raise HTTPException(status_code=404, detail="口令不存在")
if info.type == 'text': if info.type == 'text':
return {'msg': '查询成功', 'data': info.text} return {'detail': '查询成功', 'data': info.text}
else: else:
filepath = await storage.get_filepath(info.text) filepath = await storage.get_filepath(info.text)
return FileResponse(filepath, filename=info.name) return FileResponse(filepath, filename=info.name)
@@ -112,21 +112,19 @@ async def index(code: str, ip: str = Depends(ip_limit), s: AsyncSession = Depend
query = select(Codes).where(Codes.code == code) query = select(Codes).where(Codes.code == code)
info = (await s.execute(query)).scalars().first() info = (await s.execute(query)).scalars().first()
if not info: if not info:
error_count = ip_limit.add_ip(ip) error_count = settings.ERROR_COUNT - ip_limit.add_ip(ip)
raise HTTPException(status_code=404, detail=f"取件码错误，错误{settings.ERROR_COUNT - error_count}次将被禁止10分钟") raise HTTPException(status_code=404, detail=f"取件码错误，错误{error_count}次将被禁止10分钟")
if info.exp_time < datetime.datetime.now() or info.count == 0: if info.exp_time < datetime.datetime.now() or info.count == 0:
await storage.delete_file({'type': info.type, 'text': info.text}) await storage.delete_file({'type': info.type, 'text': info.text})
await s.delete(info) await s.delete(info)
await s.commit() await s.commit()
raise HTTPException(status_code=404, detail="取件码已过期，请联系寄件人") raise HTTPException(status_code=404, detail="取件码已过期，请联系寄件人")
count = info.count - 1 await s.execute(update(Codes).where(Codes.id == info.id).values(count=info.count - 1))
query = update(Codes).where(Codes.id == info.id).values(count=count)
await s.execute(query)
await s.commit() await s.commit()
if info.type != 'text': if info.type != 'text':
info.text = f'/select?code={code}' info.text = f'/select?code={code}'
return { return {
'msg': '取件成功，请点击"取"查看', 'detail': '取件成功，请点击"取"查看',
'data': {'type': info.type, 'text': info.text, 'name': info.name, 'code': info.code} 'data': {'type': info.type, 'text': info.text, 'name': info.name, 'code': info.code}
} }
@@ -170,7 +168,7 @@ async def share(text: str = Form(default=None), style: str = Form(default='2'),
s.add(info) s.add(info)
await s.commit() await s.commit()
return { return {
'msg': '分享成功，请点击文件箱查看取件码', 'detail': '分享成功，请点击文件箱查看取件码',
'data': {'code': code, 'key': key, 'name': name, 'text': _text} 'data': {'code': code, 'key': key, 'name': name, 'text': _text}
} }
static/assert/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

storage.py
+4 -2
View File
@@ -31,8 +31,10 @@ class FileSystemStorage:
return text return text
async def delete_file(self, file): async def delete_file(self, file):
filepath = self.DATA_ROOT / file['text'].lstrip(self.STATIC_URL + '/') # 是文件就删除
await asyncio.to_thread(os.remove, filepath) if file['type'] != 'text':
filepath = self.DATA_ROOT / file['text'].lstrip(self.STATIC_URL + '/')
await asyncio.to_thread(os.remove, filepath)
async def delete_files(self, files): async def delete_files(self, files):
for file in files: for file in files:
templates/admin.html
+4 -3
View File
@@ -6,11 +6,14 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/assert/index.css"> <link rel="stylesheet" href="/static/assert/index.css">
<link rel="shortcut icon" href="/static/assert/favicon.ico" type="image/x-icon"/>
<title>后台管理-{{title}}</title> <title>后台管理-{{title}}</title>
<meta name="description" content="{{description}}"/> <meta name="description" content="{{description}}"/>
<meta name="keywords" content="{{keywords}}"/> <meta name="keywords" content="{{keywords}}"/>
<meta name="generator" content="FileCodeBox"/> <meta name="generator" content="FileCodeBox"/>
<meta name="template" content="Lan"/> <meta name="template" content="Lan"/>
<script src="/static/assert/vue.min.js"></script>
<script src="/static/assert/index.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@@ -57,8 +60,6 @@
</div> </div>
</body> </body>
<script src="/static/assert/vue.min.js"></script>
<script src="/static/assert/index.js"></script>
<script src="/static/assert/axios.min.js"></script> <script src="/static/assert/axios.min.js"></script>
<script> <script>
new Vue({ new Vue({
@@ -99,7 +100,7 @@
axios.delete('?code=' + code, {'headers': {'pwd': this.pwd}}).then(res => { axios.delete('?code=' + code, {'headers': {'pwd': this.pwd}}).then(res => {
this.files = this.files.filter(item => item.code !== code) this.files = this.files.filter(item => item.code !== code)
this.$message({ this.$message({
message: res.data.msg, message: res.data.detail,
type: 'success' type: 'success'
}); });
}) })
templates/index.html
+134 -116
View File
@@ -6,11 +6,12 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/assert/index.css"> <link rel="stylesheet" href="/static/assert/index.css">
<link rel="shortcut icon" href="/static/assert/favicon.ico" type="image/x-icon"/>
<title>{{title}}</title> <title>{{title}}</title>
<meta name="description" content="{{description}}"/> <meta name="description" content="{{description}}"/>
<meta name="keywords" content="{{keywords}}"/> <meta name="keywords" content="{{keywords}}"/>
<meta name="generator" content="FileCodeBox"/> <meta name="generator" content="FileCodeBox"/>
<meta name="template" content="Lan-V1.5"/> <meta name="template" content="Lan-V1.5.1"/>
<style> <style>
.qu .el-button { .qu .el-button {
width: 100px; width: 100px;
@@ -27,48 +28,51 @@
font-weight: bold; font-weight: bold;
} }
</style> </style>
<script src="/static/assert/vue.min.js"></script>
<script src="/static/assert/index.js"></script>
</head> </head>
<body> <body>
<div id="app" style="text-align: center;"> <div id="app" style="text-align: center">
<el-row v-if="tool === 0" class="qu" style="width:400px;margin: 6vh auto 0 auto"> <el-row v-if="pageNum === 0" class="qu" style="width:400px;margin: 6vh auto 0 auto">
<el-card style="padding-bottom: 1rem"> <el-card style="padding-bottom: 1rem">
<el-col :span="24"> <el-col :span="24">
<el-input autofocus @input="inputing" clearable v-model:value="code" maxlength="5" <el-input autofocus @input="listenInput" clearable v-model:value="code" maxlength="5"
:disabled="inout_disable" :disabled="inputDisable" placeholder="请输入五位取件码">
placeholder="请输入取件码"></el-input> </el-input>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('1')">1</el-button> <el-button @click="listenInput('1')">1</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('2')">2</el-button> <el-button @click="listenInput('2')">2</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('3')">3</el-button> <el-button @click="listenInput('3')">3</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('4')">4</el-button> <el-button @click="listenInput('4')">4</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('5')">5</el-button> <el-button @click="listenInput('5')">5</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('6')">6</el-button> <el-button @click="listenInput('6')">6</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('7')">7</el-button> <el-button @click="listenInput('7')">7</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('8')">8</el-button> <el-button @click="listenInput('8')">8</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('9')">9</el-button> <el-button @click="listenInput('9')">9</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="tool=1">寄</el-button> <el-button @click="pageNum=1">寄</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="inputNumber('0')">0</el-button> <el-button @click="listenInput('0')">0</el-button>
</el-col> </el-col>
<el-col :span=8> <el-col :span=8>
<el-button @click="quDrawer=true">取</el-button> <el-button @click="quDrawer=true">取</el-button>
@@ -78,39 +82,49 @@
<el-row v-else style="width:400px;margin: 20vh auto 0 auto"> <el-row v-else style="width:400px;margin: 20vh auto 0 auto">
<el-col :span="24" style="margin: 1rem 0"> <el-col :span="24" style="margin: 1rem 0">
<el-card> <el-card>
<div style="margin-bottom: 1rem"> <el-input style="width: 200px" placeholder="数量" v-model="uploadData.value"
<el-radio-group v-model="destoryData.style"> class="input-with-select">
<el-radio label="1">次数</el-radio> <el-select style="width: 75px" v-model="uploadData.style" slot="prepend" placeholder="请选择">
<el-radio label="2">天数</el-radio> <el-option label="天数" value="2"></el-option>
</el-radio-group> <el-option label="次数" value="1"></el-option>
<el-input-number </el-select>
placeholder="输入数量，默认1" <el-button v-if="uploadData.style === '1'" slot="append" disabled>次</el-button>
style="margin-left: 1rem" v-model="destoryData.value" controls-position="right" :min="1"> <el-button v-else slot="append" disabled>天</el-button>
</el-input-number> </el-input>
</div> <el-radio-group v-model="uploadData.type" style="margin-left: 18px">
<el-radio label="1">文件</el-radio>
<el-radio label="2">文本</el-radio>
</el-radio-group>
<el-upload <el-upload
v-if="uploadData.type === '1'"
drag drag
action="/share" action="/share"
multiple multiple
:data="destoryData" style="margin: 1rem 0;"
:data="uploadData"
:on-success="successUpload" :on-success="successUpload"
:on-error="errorUpload" :on-error="errorUpload"
> >
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文字、文件拖、粘贴到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文字、文件拖、粘贴到此处，或<em>点击上传</em></div>
<div class="el-upload__text" style="font-size: 10px">天数<7或限制次数（24h后删除）</div> <div class="el-upload__text" style="font-size: 10px">天数<7或限制次数（24h后删除）</div>
<div class="el-upload__tip" slot="tip">
<el-button @click="tool=0">去取件</el-button>
<el-button @click="cunDrawer=true">取件码</el-button>
</div>
</el-upload> </el-upload>
<el-input
v-else
type="textarea"
:autosize="{ minRows: 8}"
style="margin: 1rem 0"
placeholder="请输入内容，完成之后点击下方寄出去"
v-model="uploadData.text">
</el-input>
<div class="el-upload__tip">
<el-button @click="pageNum=0">去取件</el-button>
<el-button @click="cunDrawer=true">取件码</el-button>
<el-button v-if="uploadData.type === '2'" @click="toUploadData">寄出去</el-button>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<div style="text-align: center; margin-top: 1rem;color: #606266">
<span> <a style="text-decoration: none;color: #606266" target="_blank"
href="https://github.com/vastsa/FileCodeBox">FileCodeBox</a></span>
</div>
<el-drawer <el-drawer
title="文件箱" title="文件箱"
:visible.sync="quDrawer" :visible.sync="quDrawer"
@@ -136,8 +150,8 @@
</el-drawer> </el-drawer>
<el-drawer <el-drawer
title="文件箱" title="文件箱"
:visible.sync="cunDrawer" :visible.sync="jiDrawer"
direction="btt" :direction="direction"
size="50%"> size="50%">
<el-card> <el-card>
<el-empty v-if="files.length===0" description="请上传文件"></el-empty> <el-empty v-if="files.length===0" description="请上传文件"></el-empty>
@@ -155,17 +169,17 @@
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<img style="width: 80px;height: 80px;" <img style="width: 80px;height: 80px;"
:src="qrcodeUrl(file)" :alt="file.code"> :src="qrcodeUrl(file)" alt="二维码" :alt="file.code">
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
</el-card> </el-card>
</el-drawer> </el-drawer>
<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</a>
</div>
</div> </div>
</body> </body>
<script src="/static/assert/vue.min.js"></script>
<script src="/static/assert/index.js"></script>
<script src="/static/assert/axios.min.js"></script> <script src="/static/assert/axios.min.js"></script>
<script> <script>
new Vue({ new Vue({
@@ -174,107 +188,114 @@
data: function () { data: function () {
return { return {
code: '', code: '',
inout_disable: false,
files: [],
quDrawer: false, quDrawer: false,
cunDrawer: false, jiDrawer: false,
direction: 'btt', direction: 'btt',
tool: 0, files: [],
destoryData: { pageNum: 0,
inputDisable: false,
uploadData: {
style: '2', style: '2',
value: 1 type: '1',
value: 1,
file: null,
text: ''
}, },
}; };
}, },
mounted: function () { mounted: function () {
this.code = window.location.search.substring('code=='.length) // 进入网站时，判断Get是否有code参数，有则直接进行取件操作
if (this.code) { let code = window.location.search.substring('code=='.length)
this.get_file(); if (code) {
this.code = code
this.getFile()
} }
// 剪切板监听
const that = this const that = this
document.addEventListener('paste', function (event) { document.addEventListener('paste', function (event) {
if (that.tool === 1) { if (that.pageNum === 1) {
const items = event.clipboardData && event.clipboardData.items; const items = event.clipboardData && event.clipboardData.items;
if (items && items.length) { if (items && items.length) {
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'string') { if (items[i].kind === 'string') {
if (items[i].type.match(/^text\/plain/)) { if (items[i].type.match(/^text\/plain/) && that.uploadData.type !== '2') {
const FileData = new FormData();
that.$message('剪切板文字正在上传，请稍等'); that.$message('剪切板文字正在上传，请稍等');
items[i].getAsString(function (str) { items[i].getAsString(function (str) {
FileData.append('text', str); that.uploadData.text = str;
FileData.append('style', that.destoryData.style); that.toUploadData();
FileData.append('value', that.destoryData.value);
axios.post('/share', FileData)
.then(res => {
that.$message({'message': res.data.msg, 'type': 'success'});
that.files.push(res.data.data)
})
.catch(e => {
that.$message({'message': e.response.data.detail, 'type': 'error'});
});
}); });
} }
} else { } else {
const file = items[i].getAsFile(); const file = items[i].getAsFile();
that.$message('剪切板文件正在上传，请稍等'); that.$message('剪切板文件正在上传，请稍等');
const FileData = new FormData(); that.uploadData.file = file
FileData.append('file', file || ''); that.toUploadData();
FileData.append('style', that.destoryData.style);
FileData.append('value', that.destoryData.value);
axios.post('/share', FileData)
.then(res => {
that.$message({'message': res.data.msg, 'type': 'success'});
that.files.push(res.data.data)
})
.catch(e => {
that.$message({'message': e.response.data.detail, 'type': 'error'});
});
} }
} }
} }
} }
}); });
}, },
methods: { methods: {
inputing: function (value) { http: function (method, url, data = {}, config = {}) {
if (value.length === 5) { return new Promise((resolve, reject) => {
this.inout_disable = true; axios({
this.get_file(); method: method,
} url: url,
data: data,
...config
}).then(res => {
this.$message({
message: res.data.detail,
type: 'success'
});
resolve(res.data)
}).catch(err => {
this.$message({
message: err.response.data.detail,
type: 'error'
});
})
})
}, },
get_file: function () { getFile: function () {
const that = this; const that = this;
axios.post('?code=' + this.code).then(response => { this.http('post', `?code=${that.code}`).then(res => {
that.files.push(response.data.data);
that.$message({
message: response.data.msg,
type: 'success'
});
that.quDrawer = true; that.quDrawer = true;
that.code = ''; that.files.unshift(res.data);
}).catch(e => { })
that.$message({ that.code = '';
message: e.response.data.detail, that.input_disable = false
type: 'error'
});
});
that.inout_disable = false
}, },
inputNumber: function (number) { qrcodeUrl(file) {
if (number === 'C') { return 'https://api.qrserver.com/v1/create-qr-code/?data=' + window.location.origin + '/?code=' + file.code
this.code = ''; },
} else if (number === 'X') { listenInput: function (value) {
this.code = this.code.substring(0, this.code.length - 1); if (this.code.length < 5) {
} else { this.code += value;
if (this.code.length < 5) {
this.code += number;
}
} }
if (this.code.length === 5) { if (this.code.length === 5) {
this.inout_disable = true this.inout_disable = true;
this.get_file() this.getFile();
}
},
toUploadData: function () {
if (this.uploadData.text === '' && this.uploadData.file === null) {
this.$message({
message: '请先粘贴文字或者上传文件',
type: 'error'
});
} else {
this.http('post', '/share', this.uploadData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
this.files.unshift(res.data);
this.jiDrawer = true;
this.uploadData.text = '';
this.uploadData.file = null;
});
} }
}, },
successUpload(response, file, fileList) { successUpload(response, file, fileList) {
@@ -282,18 +303,15 @@
message: response.msg, message: response.msg,
type: 'success' type: 'success'
}); });
this.files.push(response.data); this.files.unshift(response.data);
}, },
errorUpload(error, file, fileList){ errorUpload(error, file, fileList) {
e = JSON.parse(error.message) error = JSON.parse(error.message)
this.$message({ this.$message({
message: e.detail, message: error.detail,
type: 'error' type: 'error'
}); });
}, },
qrcodeUrl(file) {
return 'https://api.qrserver.com/v1/create-qr-code/?data=' + window.location.origin + '/?code=' + file.code
},
} }
}) })
</script> </script>