From 665adbd9d64b25c1dc8f509a78f9ad8c9a25abac Mon Sep 17 00:00:00 2001
From: Elihuso Quigley <Elihuso@outlook.com>
Date: Fri, 10 Nov 2023 08:45:05 +0800
Subject: [PATCH] [+] Add scroll button

---
 components.d.ts               |  1 +
 src/App.vue                   |  3 ++
 src/components/GoToTop.vue    | 35 ++++++++++++++++
 src/components/Navigation.vue |  9 ++--
 src/json/user.json            | 78 +++++++++++++++++++++++++++++++++++
 5 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 src/components/GoToTop.vue

diff --git a/components.d.ts b/components.d.ts
index 03da0cd..c1f6343 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    GoToTop: typeof import('./src/components/GoToTop.vue')['default']
     JSONTable: typeof import('./src/components/JSONTable.vue')['default']
     Navigation: typeof import('./src/components/Navigation.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/App.vue b/src/App.vue
index ba953dc..0b32b21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import Sidebar from "@/components/Sidebar.vue";
+import GoToTop from "./components/GoToTop.vue";
+import Navigation from "@/components/Navigation.vue";
 </script>
 
 <template>
     <Sidebar />
+    <GoToTop />
 </template>
 
 <style lang="sass">
diff --git a/src/components/GoToTop.vue b/src/components/GoToTop.vue
new file mode 100644
index 0000000..9d38074
--- /dev/null
+++ b/src/components/GoToTop.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="gotoTop" v-on:click="onClick()">↑</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+export default class GoToTop extends Vue {
+    onClick(): void {
+        window.scroll(0, 0);
+    }
+}
+</script>
+
+<style lang="sass">
+.gotoTop
+    position: fixed
+    bottom: 40px
+    right: 40px
+    z-index: 50
+    user-select: none
+    background-color: #efeff5
+    min-width: 50px
+    min-height: 50px
+    border-style: solid
+    border-color: #D9DADB
+    border-radius: 25px
+    font-size: 29px
+    text-align: center
+    box-shadow: 4px 4px 4px rgba(44, 45, 47, 0.2)
+
+.gotoTop:hover
+    border-color: #3052DD
+    box-shadow: 8px 8px 8px rgba(44, 45, 47, 0.6)
+</style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 2563319..c564db6 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -19,9 +19,12 @@ export default class Navigation extends Vue {}
 
 .nav
     display: block
-    width: 100vw
+    position: fixed
+    width: calc(100vw - 300px)
     height: 60px
-    background-color: #FEFEFE
+    right: 0px
+    top: 0px
+    background-color: #E0E1E2
 
 .user
     text-align: right
@@ -37,6 +40,6 @@ img
 
 p
     display: inline-block
-    font-size: xx-large
+    font-size: x-large
     font-family: 'Consolas'
 </style>
diff --git a/src/json/user.json b/src/json/user.json
index a8b78d1..56407f1 100644
--- a/src/json/user.json
+++ b/src/json/user.json
@@ -10,5 +10,83 @@
         "description": "user2",
         "button1": "编辑",
         "button2": "删除"
+    },
+    {
+        "title": "user3",
+        "description": "user3",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user4",
+        "description": "user4",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user5",
+        "description": "user5",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user6",
+        "description": "user6",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user7",
+        "description": "user7",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user8",
+        "description": "user8",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user9",
+        "description": "user9",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userA",
+        "description": "userA",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userB",
+        "description": "userB",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userC",
+        "description": "userC",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userD",
+        "description": "userD",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userE",
+        "description": "userE",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userF",
+        "description": "userF",
+        "button1": "编辑",
+        "button2": "删除"
     }
 ]