实现排序

package.json

@@ -22,15 +22,16 @@
   "homepage": "https://github.com/InvisibleFuture/kana-bbs#readme",
   "devDependencies": {
     "pug": "^3.0.2",
+    "pug-plain-loader": "^1.0.0",
     "sass": "^1.49.0",
-    "sass-loader": "^10.1.1",
-    "pug-plain-loader": "^1.0.0"
+    "sass-loader": "^10.1.1"
   },
   "dependencies": {
-    "nuxt": "2.15.8",
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "@nuxtjs/axios": "^5.12.0",
     "@nuxtjs/proxy": "^2.1.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
+    "marked": "^4.0.12",
+    "nuxt": "2.15.8",
     "three": "^0.137.4"
   }
-}
+}

pages/docs.vue

@@ -3,14 +3,14 @@
   .docs.circumscription
     .outline
       ul
-        li 下载安装
-        li 接口使用
-        li 插件制作
-        li 基础开发
         li(v-for="item in list", :key="item._id")
           NuxtLink(:to="`/docs/${item._id}`") {{ item.name }}
-      .create-doc
-        button(@click="createin = !createin") Create
+          i.fas.fa-sort-numeric-up-alt(
+            @click="settop(item, true)",
+            v-if="account.gid"
+          ) {{ item.top || 0 }}
+      .create-doc(v-if="account.gid")
+        button(@click="submit()") Create
     .content
       Nuxt
 </template>
@@ -26,12 +26,38 @@ export default {
       };
     });
   },
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
+  mounted() {
+    this.listsort();
+  },
   methods: {
     submit() {
       this.$axios.post("/api/docs", this.doc).then((res) => {
+        if (res.status === 200) {
+          this.list.push(res.data);
+        }
+      });
+    },
+    settop(item, n) {
+      item.top = item.top || 0;
+      item.top = n ? item.top + 1 : item.top - 1;
+      let data = { top: item.top };
+      this.$axios.patch(`/api/docs/${item._id}`, data).then((res) => {
+        if (res.status === 200) this.listsort();
         console.log(res.data);
       });
     },
+    listsort() {
+      this.list.sort((x, y) => {
+        x.top = x.top || 0;
+        y.top = y.top || 0;
+        return y.top - x.top;
+      });
+    },
   },
 };
 </script>

pages/docs/_id.vue

@@ -1,22 +1,28 @@
 <template lang="pug">
 .docs-item
-  button.editor(@click="editor()") {{ edit ? '取消编辑' : '编辑模式' }}
+  button.editor(@click="editor()", v-if="account.gid") {{ edit ? '取消编辑' : '编辑模式' }}
   button.submit(@click="submit()", v-if="edit") 保存修改
   .contenter(v-if="!edit")
     h1.title {{ data.name }}
-    p {{ data.data }}
+    div(v-html="markdown(data.data)")
   .contenter(v-else)
     input.title(v-model="doc.name")
     textarea.data(v-model="doc.data", rows="32")
 </template>
 
 <script>
+import { marked } from "marked";
 export default {
   asyncData({ $axios, params }) {
     return $axios.get(`/api/docs/${params.id}`).then((res) => {
       return { data: res.data, edit: false, doc: { data: "", name: "" } };
     });
   },
+  computed: {
+    account() {
+      return this.$store.state.account;
+    },
+  },
   methods: {
     editor() {
       if (!this.eidt) {
@@ -35,6 +41,9 @@ export default {
         console.log(res.data);
       });
     },
+    markdown(data) {
+      return marked.parse(data);
+    },
   },
 };
 </script>

pages/docs/index.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+.docs-index
+  p Hello World!
+</template>

yarn.lock

@@ -4806,6 +4806,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d"
+  integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"