@jx3box/jx3box-common-ui 6.5.3 → 6.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "6.5.3",
+  "version": "6.5.5",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/service/cms.js

@@ -7,10 +7,15 @@ function getPostAuthors(post_id) {
 function uploadImage(formData){
     return $cms().post(`/api/cms/upload/avatar`, formData);
 }
-
+//获取装扮
+function getDecoration(params) {
+    return $cms().get(`/api/cms/user/decoration`,{
+        params
+    });
+}
 // 通用上传
 function upload(formData){
     return $cms().post(`/api/cms/upload`, formData);
 }
 
-export { getPostAuthors, uploadImage, upload };
+export { getPostAuthors, uploadImage, upload,getDecoration };

package/src/LeftSidebar.vue

@@ -1,12 +1,13 @@
 <template>
   <aside
-    class="c-sidebar-left c-sidebar"
+    class="c-sidebar-left c-sidebar m-theme"
     :class="{
             isclose: !isOpen,
             isopen: isOpen,
             'without-bread': withoutBread,
         }"
     v-if="!isApp"
+    :style="decoration"
   >
     <div class="c-sidebar-left-inner">
       <slot></slot>
@@ -36,6 +37,8 @@
 <script>
 import Bus from "../service/bus";
 import { isApp } from "../assets/js/app.js";
+import {getDecoration} from "../service/cms"
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 export default {
   name: "LeftSidebar",
   props: ["open", "withoutBread"],
@@ -43,6 +46,7 @@ export default {
     return {
       isOpen: true,
       isApp: isApp(),
+      decoration:{}
     };
   },
   computed: {
@@ -60,6 +64,44 @@ export default {
       let status = !this.isOpen;
       Bus.$emit("toggleLeftSide", status);
     },
+    showDecoration:function(val,type){
+        return __imgPath + `decoration/images/${val}/${type}.png`;
+    },
+    getDecoration(){
+      let decoration_sidebar=sessionStorage.getItem('decoration_sidebar')
+      if(decoration_sidebar == 'no'){
+        return;
+      }
+      //已有缓存，读取解析
+      if(decoration_sidebar){
+        this.setDecoration(JSON.parse(decoration_sidebar))
+        return;
+      }
+      getDecoration({using:1,type:'sidebar'}).then(data=>{
+        let res=data.data.data
+        if(res.length==0){
+          //空 则为无主题，不再加载接口，界面设No
+          sessionStorage.setItem('decoration_sidebar','no')
+          return;
+        }
+        let decoration=res.filter(val => {
+          return val.type === 'sidebar'
+        })
+        console.log(decoration)
+        if(decoration.length>0){
+          sessionStorage.setItem('decoration_sidebar',JSON.stringify(decoration[0]))
+          this.setDecoration(decoration[0])
+        }else{
+          //空 则为无主题，不再加载接口，界面设No
+          sessionStorage.setItem('decoration_sidebar','no')
+        }
+      })
+    },
+    setDecoration(decoration_sidebar){
+        this.decoration={
+          'background-image':'url('+this.showDecoration(decoration_sidebar.val,decoration_sidebar.type)+')'
+        }
+    }
   },
   mounted: function () {
     Bus.$on("toggleLeftSide", (data) => {
@@ -76,10 +118,18 @@ export default {
   },
   created: function () {
     this.isOpen = this.open === undefined ? true : this.open;
+    this.getDecoration()
   },
 };
 </script>
 
 <style lang="less">
 @import "../assets/css/left-sidebar.less";
+// 虚拟装扮主题
+.m-theme{
+  // background: url(../assets/testbg.png) no-repeat;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: top right;
+}
 </style>

package/src/single/cms-single.vue

@@ -50,7 +50,7 @@
             />
 
             <!-- 评论 -->
-            <div class="m-single-comment">
+            <div ref="commentView" class="m-single-comment">
                 <el-divider content-position="left">评论</el-divider>
                 <Comment :id="id" category="post" v-if="id && allow_comment" />
                 <el-alert title="作者没有开启评论功能" type="warning" show-icon v-else></el-alert>
@@ -62,7 +62,13 @@
             <slot name="single-footer"></slot>
         </footer>
 
-        <right-affix :postId="id" :postType="post_type" :postTitle="post_title"></right-affix>
+        <right-affix
+            :postId="id"
+            :postType="post_type"
+            :postTitle="post_title"
+            :showComment="id && allow_comment"
+            @toComment="toComment($event)"
+        ></right-affix>
     </div>
 </template>
 
@@ -170,6 +176,12 @@ export default {
             this.super_author = super_author;
             this.other_authors = other_authors;
         },
+        toComment() {
+            this.$refs.commentView.scrollIntoView({
+                block: "center",
+                behavior: "auto",
+            });
+        },
     },
     watch: {
         extend_data: {

package/src/single/right-affix.vue

@@ -3,6 +3,11 @@
         <div class="item">
             <fav :postId="postId" :postType="postType" :postTitle="postTitle" :hiddenNum="true"></fav>
         </div>
+        <el-tooltip v-if="showComment" effect="dark" content="去评论" placement="left">
+            <div class="item" @click="toComment">
+                <i class="el-icon-chat-dot-square"></i>
+            </div>
+        </el-tooltip>
         <el-tooltip effect="dark" content="回到顶部" placement="bottom">
             <div class="item" v-show="scrollBtnShow" @click="goTop">
                 <div class="to-top"></div>
@@ -15,7 +20,7 @@
 import Fav from "../interact/Fav2.vue";
 export default {
     name: "RightAffix",
-    props: ["postId", "postType", "postTitle"],
+    props: ["postId", "postType", "postTitle", "showComment"],
     data() {
         return {
             scrollToptimer: null,
@@ -42,6 +47,9 @@ export default {
                 self.isTop = true;
             }, 30);
         },
+        toComment() {
+            this.$emit("toComment");
+        },
     },
     mounted() {
         //获取页面可视区高度
@@ -89,18 +97,26 @@ export default {
         &:hover {
             background-color: #f6fcff;
         }
+        .el-icon-chat-dot-square {
+            font-size: 20px;
+            font-weight: bold;
+            color: #3871e0;
+        }
+        .w-fav2 svg{
+            .size(26px);
+        }
     }
     .to-top {
         width: 0;
         height: 0;
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        border-bottom: 18px solid skyblue;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 16px solid #87ceeb;
     }
 }
-@media screen and (max-width:@smallpc){
-    .right-affix{
-        right:0;
+@media screen and (max-width: @smallpc) {
+    .right-affix {
+        right: 0;
     }
 }
 </style>