From e8bcfe147e0de24d57aef63b27f1e4baed85ba11 Mon Sep 17 00:00:00 2001
From: satori <huan0016@gmail.com>
Date: Mon, 7 Feb 2022 23:56:33 +0800
Subject: [PATCH] anime

---
 assets/sass/default.sass |   4 ++
 components/Drawer.vue    | 127 +++++++++++++++++++++++++++++++++++++++
 layouts/default.vue      |   6 --
 nuxt.config.js           |  31 +++++++++-
 package.json             |   5 +-
 pages/index.vue          |  37 +++---------
 pages/thread.vue         |   3 +
 pages/thread/_id.vue     |  54 ++++++++---------
 yarn.lock                |  12 ++++
 9 files changed, 216 insertions(+), 63 deletions(-)
 create mode 100644 components/Drawer.vue
 create mode 100644 pages/thread.vue

diff --git a/assets/sass/default.sass b/assets/sass/default.sass
index 14c52ba..47612bd 100644
--- a/assets/sass/default.sass
+++ b/assets/sass/default.sass
@@ -16,6 +16,10 @@ html, body
   background-color: var(--background-default)
   min-height: 100vh
 
+html::-webkit-scrollbar,
+body::-webkit-scrollbar
+  display: none
+
 button
   background: #cc1414
   color: #ffffff
diff --git a/components/Drawer.vue b/components/Drawer.vue
new file mode 100644
index 0000000..88dd812
--- /dev/null
+++ b/components/Drawer.vue
@@ -0,0 +1,127 @@
+<template lang="pug">
+.drawwer-background(
+  :class="{ show: show, hidden: !show }",
+  @click="exit()",
+  @keyup.esc="exit()",
+  v-focus,
+  tabindex="0"
+)
+  .container.circumscription(
+    :class="{ show: show, hidden: !show }",
+    @click.stop
+  )
+    slot
+</template>
+
+<script>
+export default {
+  data: () => ({
+    show: true,
+  }),
+  mounted() {
+    this.stop();
+  },
+  methods: {
+    exit() {
+      this.show = false;
+      document.referrer === "" ? this.$router.push(".") : this.$router.go(-1);
+      this.move();
+    },
+    /***滑动限制***/
+    stop() {
+      var mo = function (e) {
+        e.preventDefault();
+      };
+      document.body.style.overflow = "hidden";
+      document.addEventListener("touchmove", mo, false); //禁止页面滑动
+    },
+    /***取消滑动限制***/
+    move() {
+      var mo = function (e) {
+        e.preventDefault();
+      };
+      document.body.style.overflow = ""; //出现滚动条
+      document.removeEventListener("touchmove", mo, false);
+    },
+  },
+  beforeDestroy() {
+    this.move();
+  },
+  directives: {
+    focus: {
+      inserted: function (el) {
+        el.focus();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.drawwer-background
+  outline: 0
+  position: fixed
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 9999
+  background: rgba(0, 0, 0, 0.8)
+.container
+  color: #333333
+  background: #ffffff
+  position: absolute
+  left: 0
+  top: 3rem
+  right: 0
+  bottom: 0
+  border-radius: 2rem 2rem 0 0
+  overflow: auto
+  scrollbar-width: none
+  -ms-overflow-style: none
+  //padding: 2rem 4rem
+  //max-width: 1280px
+  //margin: 0 auto
+
+.container::-webkit-scrollbar
+  display: none // Chrome Safari
+
+/* show element */
+.drawwer-background.show
+  animation: showbackground 0.75s
+
+.drawwer-background.hidden
+  animation: hiddenbackground 0.75s
+
+.container.show
+  animation: showcontainer 0.75s
+
+.container.hidden
+  animation: hiddencontainer 0.75s
+
+@keyframes showbackground
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+@keyframes hiddenbackground
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+@keyframes showcontainer
+  0%
+    opacity: 0
+    transform: translate(0, 64px)
+  100%
+    opacity: 1
+    transform: translate(0, 0)
+@keyframes hiddencontainer
+  0%
+    opacity: 1
+    transform: translate(0, 0)
+  100%
+    opacity: 0
+    transform: translate(0, 64px)
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 7bd3f1b..1016a4e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -18,12 +18,6 @@
           NuxtLink.button(to="/account/create") Login
       .websocket(:class="{ on: websocket }")
   Nuxt
-  footer.footer
-    p
-      b Kana
-    .github
-      a(href="https://github.com/InvisibleFuture/kana")
-        span.fab.fa-github
 </template>
 
 <script>
diff --git a/nuxt.config.js b/nuxt.config.js
index c7c5087..29c7f6c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,6 @@
 export default {
   components: true,
+  buildModules: ['nuxt-animejs'],
   modules: ['@nuxtjs/axios', '@nuxtjs/proxy'],
   axios: { proxy: true, proxyHeaders: true },
   proxy: [
@@ -18,5 +19,33 @@ export default {
       }
     }]
   ],
-  css: ['@fortawesome/fontawesome-free/css/all.css']
+  css: ['@fortawesome/fontawesome-free/css/all.css'],
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in',
+    css: false,
+    beforeEnter(el) {
+      this.$anime.set(el, {
+        opacity: 0
+      })
+    },
+    enter(el, done) {
+      this.$anime({
+        targets: el,
+        opacity: [0, 1],
+        duration: 500,
+        easing: 'easeInOutSine',
+        complete: done
+      })
+    },
+    leave(el, done) {
+      this.$anime({
+        targets: el,
+        opacity: [1, 0],
+        duration: 500,
+        easing: 'easeInOutSine',
+        complete: done
+      })
+    }
+  }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 3646a3c..b03dde6 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.49.0",
-    "sass-loader": "^10.1.1"
+    "sass-loader": "^10.1.1",
+    "nuxt-animejs": "^1.2.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
@@ -34,4 +35,4 @@
     "nuxt": "2.15.8",
     "three": "^0.137.4"
   }
-}
+}
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 1de675d..1852890 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,34 +10,17 @@
         li 除去阅览以外, 还可以做一些什么
         li 如翻页, 如发表
         li
-          nuxt-link(to="/thread/create")
+          NuxtLink(to="/thread/create")
             button 新议题
-  //.index.main-width
-  //  article
-  //    .card
-  //      .content
-  //        p 下载 Kana: 400 行代码实现服务端
-  //        p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
-  //        p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
-  //        //ModelBox
-  //        //ModelConesInner
-  //    .card
-  //      .header
-  //        span 最新
-  //        span 精华
-  //        .expnone
-  //        nuxt-link.create-thread(to="/thread/create") 新议题
-  //      .content
-  //        ThreadList(:data="data")
-  //  aside
-  //    .card
-  //      .content
-  //        .bbs-title Kana 开发者论坛
-  //        p
-  //        | 基于 node 实现的小型服务端,旨在快速灵活构建小型项目
-  //        | <br/> 1. 数据类型无限扩展并复用
-  //        | <br/> 2. 无依赖免配置一键安装
-  //        | <br/> 3. 接口模型
+  //NuxtLink(to="/index") NASAS
+  //NuxtLink(to="/index/hCG7UKzSRgCzyd8Y") |NASAS
+  //Nuxt
+  footer.footer
+    p
+      b Kana
+    .github
+      a(href="https://github.com/InvisibleFuture/kana")
+        span.fab.fa-github
 </template>
 
 <script>
diff --git a/pages/thread.vue b/pages/thread.vue
new file mode 100644
index 0000000..62ef497
--- /dev/null
+++ b/pages/thread.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+Nuxt
+</template>
diff --git a/pages/thread/_id.vue b/pages/thread/_id.vue
index 5c787ff..5bc9b58 100644
--- a/pages/thread/_id.vue
+++ b/pages/thread/_id.vue
@@ -1,31 +1,31 @@
 <template lang="pug">
-.thread
-  .header
-    h1.title {{ thread.title }}
-    .info
-      span.user.fas.fa-user-secret {{ thread.user.name }}
-      span.date.far.fa-calendar-alt {{ rwdate(thread.createdAt) }}
-      span.view.far.fa-eye {{ thread.views }}
-    .tags
-      span.tag test
-      span.tag demo
-  .content.circumscription
-    .thread-main(v-html="markdown(thread.data)")
-    button.magic
-      i.fas.fa-magic
-
-    //button.editor(
-    //  v-if="account.online && (account.uid === thread.uid || account.gid === 1)",
-    //  @click="edit_mode = !edit_mode"
-    //)
-    //  i.fas.fa-magic
-    //  | Editor
-    PostList(:data="postlist")
-    .post-create(v-if="account.online")
-      img.avatar(:src="account.avatar")
-      .content
-        textarea(v-model="post.data", rows="12")
-        button.submit(@click="createpost") 发表
+Drawer
+  .thread
+    .header
+      h1.title {{ thread.title }}
+      .info
+        span.user.fas.fa-user-secret {{ thread.user.name }}
+        span.date.far.fa-calendar-alt {{ rwdate(thread.createdAt) }}
+        span.view.far.fa-eye {{ thread.views }}
+      .tags
+        span.tag test
+        span.tag demo
+    .content.circumscription
+      .thread-main(v-html="markdown(thread.data)")
+      button.magic
+        i.fas.fa-magic
+      //button.editor(
+      //  v-if="account.online && (account.uid === thread.uid || account.gid === 1)",
+      //  @click="edit_mode = !edit_mode"
+      //)
+      //  i.fas.fa-magic
+      //  | Editor
+      PostList(:data="postlist")
+      .post-create(v-if="account.online")
+        img.avatar(:src="account.avatar")
+        .content
+          textarea(v-model="post.data", rows="12")
+          button.submit(@click="createpost") 发表
 </template>
 
 <script>
diff --git a/yarn.lock b/yarn.lock
index 6b96ce8..d26ab05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1701,6 +1701,11 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+animejs@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
+  integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
+
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -5261,6 +5266,13 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
+nuxt-animejs@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/nuxt-animejs/-/nuxt-animejs-1.2.2.tgz#a542222a0bd4c45d5b3d0d614a87883a2fd70b8a"
+  integrity sha512-umDCwIQV8N7IsZqlKmOJYGaoiWAZkw/GPun9a494vS9wMCZ6/3vkD8b5qg5E/OvsbQyypfKG+DtGksGvqrYLYQ==
+  dependencies:
+    animejs "^3.2.1"
+
 nuxt@2.15.8:
   version "2.15.8"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-2.15.8.tgz#946cba46bdaaf0e3918aa27fd9ea0fed8ed303b0"