init project

src/views/Home.vue

@@ -0,0 +1,87 @@
+<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">10 GB</strong>
+						<span>容量</span>
+					</li>
+				</ul>
+			</template>
+		</t-alert>
+		<div class="content">
+			<div class="panel left">
+				<file-upload />
+			</div>
+			<div class="panel right">
+				<file-download />
+				<file-history-list />
+			</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 { useFileHistoryStore } from "@/store/fileHistory.ts";
+import { 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);
+
+		.panel {
+			flex: 1;
+
+			&:first-child {
+				border-right: var(--tui-border);
+			}
+		}
+	}
+}
+
+@media (max-width: 45rem) {
+	.home .content {
+		flex-direction: column;
+
+		.panel:first-child {
+			border-right: none;
+			border-bottom: var(--tui-border);
+		}
+	}
+}
+</style>