From c633476e6966da2d29bab9f42dd1f57bf01a62c2 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 1 Apr 2023 21:25:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(backTop):=20=E6=B7=BB=E5=8A=A0=E5=9B=9E?=
 =?UTF-8?q?=E9=A1=B6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  2 +
 src/assets/icons/arrow-top.svg | 17 ++++++++
 src/components/t-backTop.vue   | 79 ++++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+)
 create mode 100644 src/assets/icons/arrow-top.svg
 create mode 100644 src/components/t-backTop.vue

diff --git a/src/App.vue b/src/App.vue
index a4a45462..b831741c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,12 +21,14 @@
 			</v-main>
 		</v-layout>
 	</div>
+	<t-back-top />
 </template>
 
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
 import TSidebar from "./components/t-sidebar.vue";
+import TBackTop from "./components/t-backTop.vue";
 // tauri
 import { fs, window } from "@tauri-apps/api";
 // store
diff --git a/src/assets/icons/arrow-top.svg b/src/assets/icons/arrow-top.svg
new file mode 100644
index 00000000..63b9483f
--- /dev/null
+++ b/src/assets/icons/arrow-top.svg
@@ -0,0 +1,17 @@
+<svg width="256.000000" height="256.000000" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<g clip-path="url(#clip5_8)">
+		<circle id="椭圆 1" cx="128.000000" cy="128.000000" r="128.000000" fill="#E0DBCE"/>
+		<ellipse id="椭圆 2" cx="128.000015" cy="128.000000" rx="115.000015" ry="114.999985" fill="#E0DBCE"/>
+		<ellipse id="椭圆 2" cx="128.000015" cy="128.000000" rx="119.000015" ry="118.999985" stroke="#4B5366" stroke-width="8.000000"/>
+		<path id="矢量 1" d="M156.494 164.75L132.303 123.865C130.367 120.593 125.633 120.593 123.697 123.865L99.5064 164.75C98.5774 166.32 98.5774 168.272 99.5064 169.842L123.697 210.727C125.633 213.999 130.367 213.999 132.303 210.727L156.494 169.842C157.423 168.272 157.423 166.32 156.494 164.75ZM141.494 164.75L132.303 149.217C130.367 145.945 125.633 145.945 123.697 149.217L114.506 164.75C113.577 166.32 113.577 168.272 114.506 169.842L123.697 185.375C125.633 188.647 130.367 188.647 132.303 185.375L141.494 169.842C142.423 168.272 142.423 166.32 141.494 164.75Z" fill-rule="evenodd" fill="#96979A"/>
+		<path id="矢量 2" d="M168.352 164.761L194.232 164.76C198.105 164.76 200.507 160.548 198.535 157.214L132.304 45.273C130.368 42.0011 125.633 42.0011 123.697 45.273L57.4648 157.214C55.4927 160.547 57.8952 164.761 61.768 164.761L87.6494 164.761C89.4167 164.761 91.0527 163.828 91.9526 162.307L123.697 108.653C125.633 105.381 130.368 105.381 132.304 108.653L164.048 162.307C164.948 163.828 166.584 164.761 168.352 164.761Z" fill-rule="evenodd" fill="#4B5366"/>
+	</g>
+	<defs>
+		<clipPath id="clip5_8">
+			<rect id="top" width="256.000000" height="256.000000" fill="white"/>
+		</clipPath>
+	</defs>
+</svg>
diff --git a/src/components/t-backTop.vue b/src/components/t-backTop.vue
new file mode 100644
index 00000000..1f0b1ef0
--- /dev/null
+++ b/src/components/t-backTop.vue
@@ -0,0 +1,79 @@
+<template>
+	<transition name="fade">
+		<div class="back-top" v-show="canTop" @click="handleScrollTop">
+			<img src="../assets/icons/arrow-top.svg" class="back-icon" alt="back-icon" />
+		</div>
+	</transition>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, onMounted } from "vue";
+
+const scrollTop = ref(0); //滚动条距离顶部的距离
+const canTop = ref(false); //默认不显示
+
+// 监听滚动事件
+function handleScroll() {
+	scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
+	canTop.value = scrollTop.value > 500;
+}
+
+// 点击回到顶部
+function handleScrollTop() {
+	let timer = 0;
+	cancelAnimationFrame(timer);
+	timer = requestAnimationFrame(function fn() {
+		if (scrollTop.value > 0) {
+			scrollTop.value -= 50;
+			document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
+			timer = requestAnimationFrame(fn);
+		} else {
+			cancelAnimationFrame(timer);
+			canTop.value = false;
+		}
+	});
+}
+
+// 监听滚动事件
+// @ts-ignore
+onMounted(() => {
+	window.addEventListener("scroll", handleScroll);
+});
+</script>
+
+<style scoped>
+.back-top {
+	position: fixed;
+	right: 0.4rem;
+	bottom: 1rem;
+	width: 60px;
+	height: 60px;
+	border-radius: 50%;
+	border: 0;
+	transition: all 0.3s;
+}
+
+.back-top :hover {
+	border: 5px solid #4b5366;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: all 0.3s;
+}
+
+.back-icon {
+	transition: all 0.3s;
+	width: 60px;
+	height: 60px;
+}
+
+/* 动画 */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>