satori/kana-bbs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

anime

Browse Source
This commit is contained in:
satori 2022-02-07 23:56:33 +08:00
parent f1e778d198
commit e8bcfe147e
9 changed files with 216 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/sass/default.sass
View File

@ -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

127
components/Drawer.vue Normal file
View File

@ -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>

6
layouts/default.vue
View File

@ -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>

31
nuxt.config.js
View File

@ -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
})
}
}
}

3
package.json
View File

@ -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",

37
pages/index.vue
View File

@ -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>

3
pages/thread.vue Normal file
View File

@ -0,0 +1,3 @@
<template lang="pug">
Nuxt
</template>

54
pages/thread/_id.vue
View File

@ -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>

12
yarn.lock
View File

@ -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"