@jx3box/jx3box-common-ui 8.1.3 → 8.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "8.1.3",
+  "version": "8.1.5",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "@jx3box/jx3box-comment-ui": "^1.8.7",
-    "@jx3box/jx3box-common": "^8.2.1",
+    "@jx3box/jx3box-common": "^8.2.2",
     "@jx3box/jx3box-data": "^3.5.6",
     "@jx3box/jx3box-editor": "^2.1.4",
     "@jx3box/reporter": "^0.0.4",

package/service/cms.js

@@ -58,4 +58,4 @@ function getTopicBucket(params) {
     return $cms().get(`/api/cms/topic/bucket`, { params });
 }
 
-export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson, getSliders, getCollection, getTopicBucket, };
+export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson, getSliders, getCollection, getTopicBucket };

package/src/App.vue

@@ -58,6 +58,8 @@
                     <QRcode />
                     <Sharing />
 
+                    <PostGuide :post="post" />
+
                     <hr />
 
                     <markBy />
@@ -160,6 +162,7 @@ import PostCollection from "./single/PostCollection.vue";
 import Thx from "./single/Thx.vue";
 import Collection from "./single/Collection.vue";
 import Creators from "./single/Creators.vue";
+import PostGuide from "./single/PostGuide.vue";
 
 import Mark from "./interact/Mark.vue";
 import Fav from "./interact/Fav.vue";
@@ -241,6 +244,7 @@ export default {
         WikiComments,
 
         UserPop,
+        PostGuide,
     },
     data: function () {
         return {

package/src/single/PostGuide.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="m-post-guide" v-if="hasGuide">
+        <a :href="getPostLink(post.prev_post)" class="el-button el-button--default el-button--small" :class="{'is-disabled': !post.prev_post }">
+            <i class="el-icon-arrow-left"></i>
+            <span>上一篇</span>
+        </a>
+        <a :href="getPostLink(post.next_post)" class="el-button el-button--default el-button--small" :class="{'is-disabled': !post.next_post }">
+            <span>下一篇</span>
+            <i class="el-icon-arrow-right"></i>
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        post: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    computed: {
+        hasGuide() {
+            return this.post.prev_post || this.post.next_post;
+        }
+    },
+    methods: {
+        getPostLink(id) {
+            return id ? location.origin + "/post/" + id : "javascript:;";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-post-guide {
+    .flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

package/src/single/PostHeader.vue

@@ -34,7 +34,7 @@
             <!-- 客户端 -->
             <div class="u-meta u-sub-block">
                 <em class="u-label">适用客户端</em>
-                <span class="u-value u-client" :class="client">{{ showClientLabel(client) }}</span>
+                <span class="u-value u-client" :class="'i-client-' + client">{{ showClientLabel(client) }}</span>
             </div>
 
             <!-- 发布日期 -->
@@ -155,6 +155,23 @@ export default {
 </script>
 
 <style lang="less">
+.i-client-all{
+    border: 1px solid #a26ef7;
+    color: #a26ef7;
+}
+.i-client-std{
+    border: 1px solid #f0b400;
+    color: #f0b400;
+}
+.i-client-origin{
+    border: 1px solid #0eb7ce;
+    color: #0eb7ce;
+}
+.i-client-wujie{
+    border: 1px solid #fc79bf;
+    color: #fc79bf;
+}
+
 .m-single-header {
     padding-top: 20px;
     padding-bottom: 20px;
@@ -233,10 +250,6 @@ export default {
     .fz(12px, 20px);
     color: #666;
 
-    @origin: #0eb7ce;
-    @std: #f0b400;
-    @all: #a26ef7;
-
     .u-client {
         // .fl;
         font-style: normal;
@@ -244,21 +257,6 @@ export default {
         padding: 0px 5px;
         .r(3px);
         // .mr(10px);
-
-        &.std {
-            border: 1px solid @std;
-            color: @std;
-        }
-
-        &.origin {
-            border: 1px solid @origin;
-            color: @origin;
-        }
-
-        &.all {
-            border: 1px solid @all;
-            color: @all;
-        }
     }
 
     * {