button

assets/sass/main.sass

@@ -42,3 +42,20 @@
   bottom: 0
   background: rgba(0,0,0,.9)
   z-index: 1024
+
+// 一些奇怪的按钮
+button.magic
+  width: 2.6rem
+  height: 2.6rem
+  line-height: 2.6rem
+  border-radius: 1.3rem
+  background: #222222
+  color: #fafafa
+  font-size: 1.3rem
+  text-align: center
+  padding: 0
+  transition: all .25s linear
+button.magic:hover
+  background: #000000
+  color: #ffffff
+  width: 6rem

components/PostList.vue

@@ -8,7 +8,7 @@
         .title {{ item.user.name }}
         .info
           span {{ rwdate(item.updatedAt) }}
-          p {{ item.data }}
+          div(v-html="markdown(item.data)")
   .post-none(v-else) 没有评论~
 </template>
 
@@ -48,6 +48,7 @@
 </style>
 
 <script>
+import { marked } from "marked";
 export default {
   props: ["data"],
   methods: {
@@ -55,6 +56,9 @@ export default {
       let t = new Date(utc);
       return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
     },
+    markdown(data) {
+      return marked.parse(data);
+    },
   },
 };
 </script>

pages/chat/index.vue

@@ -56,6 +56,10 @@ export default {
       this.chatactive.push(data);
       console.log(data);
     });
+    // 加载一部分历史聊天记录, 并在向上滚动时继续触发加载
+    // 基于什么信息进行分P加载呢...?
+    // 基于消息 _id 的链表向上下翻阅, 当消息从中间删除时, 进行链表对接
+
     // 组合键提交
     this.keyCodeForEvent();
   },

pages/docs/index.vue

@@ -4,11 +4,15 @@
   p Kana 的基本定位是用于快速构建并迭代尝试性质的想法, 即 MVP (产品最小化可行性验证)
   p 因而专注于以最少的易于理解的逻辑提供充分的且便捷的调用/修改/扩展方法
   p 适用于前后端分离的WEB项目和APP
+  p 由于为快速构建和简单应用而生, 它假设你并不会产生大规模数据(不超过你的内存大小), 因此所有数据都是直接在内存中的, 以获得最大响应速度
+  p 如果你需要的是并发性能极致, 请移步 saya.satori.love, (它是由go语言实现以极限优化性能为目标的后端服务,
+  p saya具有和kana一致的接口文档, 实际也可在两者之间作数据迁移)
   p ------------------------------
   p 如果一开始就将大量精力注入到繁琐的细节问题中(假想中的困难),
   p 大概率没有机会走到遭遇未能想象的困难那一步(真实的困难)
   p 人不能想象出自己所不了解的事物,
   p 在作选择时认清自己当前的真实需求, 这一点尤其重要
+  p 如果你需要
   p ------------------------------
   p 特性:
   p 1. 使用内嵌数据库(nedb), 不需要任何配置, 一步安装

pages/thread/_id.vue

@@ -10,7 +10,16 @@
       span.tag test
       span.tag demo
   .content.circumscription
-    p {{ thread.data }}
+    .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")
@@ -20,6 +29,7 @@
 </template>
 
 <script>
+import { marked } from "marked";
 export default {
   asyncData({ $axios, params }) {
     return $axios.get(`/api/thread/${params.id}`).then((res) => {
@@ -31,6 +41,7 @@ export default {
           attach: "thread",
           aid: params.id,
         },
+        edit_mode: false,
       };
     });
   },
@@ -44,6 +55,9 @@ export default {
       let t = new Date(utc);
       return t.getMonth() + 1 + "月 " + t.getDate() + ", " + t.getFullYear();
     },
+    markdown(data) {
+      return marked.parse(data);
+    },
     loadpostlist() {
       this.$axios
         .get(`/api/post?attach=thread&aid=${this.post.aid}`)
@@ -66,6 +80,9 @@ export default {
 
 
 <style lang="sass">
+.thread-main
+  margin: 0 0 4rem 0
+  padding: 2rem
 .thread
   >.header
     height: 240px
@@ -86,6 +103,10 @@ export default {
     top: -5rem
     border-radius: .5rem
     box-sizing: border-box
+    >.editor
+      position: absolute
+      top: 1rem
+      right: 1rem
 .post-create
   display: flex
   //background: #c8d22d