98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<div class="home">
|
|
<h1 class="title">文件中转站</h1>
|
|
<t-alert theme="info" class="tips">
|
|
<template #message>
|
|
<h3 class="title">使用须知</h3>
|
|
<ul class="list">
|
|
<li v-text="'已上传文件仅自己可见，分享 ID 可直接下载'"></li>
|
|
<li>
|
|
<span>每个 IP 限制缓存</span>
|
|
<strong class="word-space pink" v-text="SettingMapper.getValue('TEMP_FILE_LIMIT')"></strong>
|
|
<span>容量</span>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</t-alert>
|
|
<div class="content">
|
|
<shared-clipboard />
|
|
<div class="file">
|
|
<div class="panel left">
|
|
<file-upload />
|
|
</div>
|
|
<div class="panel right">
|
|
<file-download />
|
|
<file-history-list />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import FileUpload from "@/components/FileUpload.vue";
|
|
import FileDownload from "@/components/FileDownload.vue";
|
|
import FileHistoryList from "@/components/FileHistoryList.vue";
|
|
import SharedClipboard from "@/components/SharedClipboard.vue";
|
|
import { useFileHistoryStore } from "@/store/fileHistory.ts";
|
|
import { SettingMapper, Time } from "../../../timi-web";
|
|
|
|
const fileHistoryStore = useFileHistoryStore();
|
|
onMounted(() => setInterval(fileHistoryStore.cleanExpiredFiles, Time.S));
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.home {
|
|
width: 100%;
|
|
|
|
> .title {
|
|
text-align: center;
|
|
margin-bottom: 1.875rem;
|
|
}
|
|
|
|
.tips {
|
|
margin: 0 2rem 1.25rem 2rem;
|
|
|
|
.title {
|
|
margin: 0 0 .5rem 0;
|
|
}
|
|
|
|
.list {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
border-top: var(--tui-border);
|
|
border-bottom: var(--tui-border);
|
|
flex-direction: column;
|
|
|
|
.file {
|
|
display: flex;
|
|
border-top: var(--tui-border);
|
|
|
|
.panel {
|
|
flex: 1;
|
|
|
|
&:first-child {
|
|
border-right: var(--tui-border);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.home .content .file {
|
|
flex-direction: column;
|
|
|
|
.panel:first-child {
|
|
border-right: none;
|
|
border-bottom: var(--tui-border);
|
|
}
|
|
}
|
|
}
|
|
</style>
|