@jx3box/jx3box-common-ui 6.4.5 → 6.4.7

package/src/LeftSidebar.vue

@@ -1,77 +1,82 @@
 <template>
-    <aside
-        class="c-sidebar-left c-sidebar"
-        :class="{
+  <aside
+    class="c-sidebar-left c-sidebar"
+    :class="{
             isclose: !isOpen,
             isopen: isOpen,
             'without-bread': withoutBread,
         }"
-        v-if="!isApp"
+    v-if="!isApp"
+  >
+    <div class="c-sidebar-left-inner">
+      <slot></slot>
+    </div>
+    <span
+      class="c-sidebar-left-toggle"
+      :class="!isOpen && 'close-sidebar-left'"
+      @click="toggleLeftSide"
+      :title="isOpen ? '收起侧边栏' : '打开侧边栏'"
     >
-        <div class="c-sidebar-left-inner"><slot></slot></div>
-        <span
-            class="c-sidebar-left-toggle"
-            @click="toggleLeftSide"
-            title="收起侧边栏"
-        >
-            <img
-                v-show="isOpen"
-                svg-inline
-                src="../assets/img/leftsidebar/close.svg"
-            />
-            <img
-                v-show="!isOpen"
-                svg-inline
-                src="../assets/img/leftsidebar/open.svg"
-            />
-        </span>
-    </aside>
+      <!-- <img
+        v-show="isOpen"
+        svg-inline
+        src="../assets/img/leftsidebar/close.svg"
+      /> -->
+      <span v-show="isOpen"><i class="el-icon-arrow-left"></i></span>
+      <span v-show="!isOpen"><i class="el-icon-arrow-right"></i></span>
+      <!-- <img
+        v-show="!isOpen"
+        svg-inline
+        src="../assets/img/leftsidebar/open.svg"
+      /> -->
+    </span>
+  </aside>
 </template>
 
 <script>
 import Bus from "../service/bus";
 import { isApp } from "../assets/js/app.js";
 export default {
-    name: "LeftSidebar",
-    props: ["open", "withoutBread"],
-    data: function() {
-        return {
-            isOpen: true,
-            isApp: isApp(),
-        };
+  name: "LeftSidebar",
+  props: ["open", "withoutBread"],
+  data: function () {
+    return {
+      isOpen: true,
+      isApp: isApp(),
+    };
+  },
+  computed: {
+    stickyHeader: function () {
+      return this.withoutBread;
     },
-    computed: {
-        stickyHeader: function() {
-            return this.withoutBread;
-        },
+  },
+  watch: {
+    open: function (newval) {
+      this.isOpen = newval === undefined ? true : !!newval;
     },
-    watch: {
-        open: function(newval) {
-            this.isOpen = newval === undefined ? true : !!newval;
-        },
+  },
+  methods: {
+    toggleLeftSide: function () {
+      let status = !this.isOpen;
+      Bus.$emit("toggleLeftSide", status);
     },
-    methods: {
-        toggleLeftSide: function() {
-            let status = !this.isOpen;
-            Bus.$emit("toggleLeftSide", status);
-        },
-    },
-    mounted: function() {
-        Bus.$on("toggleLeftSide", (data) => {
-            this.isOpen = data;
-        });
+  },
+  mounted: function () {
+    Bus.$on("toggleLeftSide", (data) => {
+      this.isOpen = data;
+    });
 
-        if (window.innerWidth < 1024) {
-            this.isOpen = false;
+    if (window.innerWidth < 1024) {
+      this.isOpen = false;
 
-            document.addEventListener("click", function() {
-                Bus.$emit("toggleLeftSide", false);
-            });
-        }
-    },
-    created: function() {
-        this.isOpen = this.open === undefined ? true : this.open;
-    },
+      document.addEventListener("click", function () {
+        Bus.$emit("toggleLeftSide", false);
+      });
+    }
+  },
+  created: function () {
+    this.isOpen = this.open === undefined ? true : this.open;
+  },
 };
 </script>
 

package/src/author/Avatar.vue

@@ -36,9 +36,12 @@ export default {
         return {
             frames: [],
             styles : {
+                xxs : 36,
+                xs : 48,
                 s : 68,
                 m : 88,
-                l : 120
+                l : 120,
+                xl : 150
             }
         };
     },
@@ -60,7 +63,17 @@ export default {
 .c-avatar {
     .pr;
     .dbi;
-
+    &.xl{
+        @pic:150px;
+        @frame:210px;
+        .c-avatar-pic{.size(@pic);}
+        .c-avatar-frame{
+            .size(@frame);
+            .lt(@pic / 2);
+            margin-left:-@frame / 2;
+            margin-top:-@frame / 2;
+        }
+    }
     &.l{
         @pic:120px;
         @frame:168px;
@@ -96,6 +109,28 @@ export default {
             margin-top:-@frame / 2;
         }
     }
+    &.xs{
+        @pic:48px;
+        @frame:68px;
+        .c-avatar-pic{.size(@pic);}
+        .c-avatar-frame{
+            .size(@frame);
+            .lt(@pic / 2);
+            margin-left:-@frame / 2;
+            margin-top:-@frame / 2;
+        }
+    }
+    &.xxs{
+        @pic:36px;
+        @frame:48px;
+        .c-avatar-pic{.size(@pic);}
+        .c-avatar-frame{
+            .size(@frame);
+            .lt(@pic / 2);
+            margin-left:-@frame / 2;
+            margin-top:-@frame / 2;
+        }
+    }
 }
 .c-avatar-pic {
     .db;

package/src/header/user.vue

@@ -56,7 +56,7 @@
                         </li>
                         <hr />
                         <template v-for="(item, i) in panel">
-                            <li :key="'panel-' + i" v-if="isAdmin || !item.onlyAdmin">
+                            <li :key="'panel-' + i" v-if="isEditor || !item.onlyAdmin">
                                 <a :href="item.link">{{ item.label }}</a>
                             </li>
                         </template>

package/src/interact/Fav2.vue

@@ -1,67 +1,82 @@
 <template>
-    <div class="w-fav2" :class="{ disabled: favorite }" @click="doFav">
-        <el-tooltip effect="dark" :content="favContent" placement="top-start">
-            <div>
-                <img class="u-icon" svg-inline src="../../assets/img/widget/star.svg" />
-                <span class="u-count" v-if="total">{{ total }}</span>
-            </div>
-        </el-tooltip>
-    </div>
+  <div
+    class="w-fav2"
+    :class="{ disabled: favorite }"
+    @click="doFav"
+  >
+    <el-tooltip
+      effect="dark"
+      :content="favContent"
+      placement="top-start"
+    >
+      <div>
+        <img
+          class="u-icon"
+          svg-inline
+          src="../../assets/img/widget/star.svg"
+        />
+        <span
+          class="u-count"
+          v-if="!hiddenNum && total"
+        >{{ total }}</span>
+      </div>
+    </el-tooltip>
+  </div>
 </template>
 
 <script>
 import User from "@jx3box/jx3box-common/js/user";
 import { hasFav, addFav, delFav } from "../../service/fav";
 export default {
-    name: "Fav2",
-    props: ["postType", "postId", "postTitle"],
-    data: function () {
-        return {
-            login: User.isLogin(),
-            favorite: false,
-            total: 0,
-        };
+  name: "Fav2",
+  props: ["postType", "postId", "postTitle", "hiddenNum"],
+  data: function () {
+    return {
+      login: User.isLogin(),
+      favorite: false,
+      total: 0,
+    };
+  },
+  computed: {
+    favContent () {
+      return this.favorite ? "取消收藏" : "收藏";
     },
-    computed: {
-        favContent() {
-            return this.favorite ? "取消收藏" : "收藏";
-        },
+  },
+  methods: {
+    doFav: function () {
+      if (this.login) {
+        this.favorite ? this.delFav() : this.addFav();
+      } else {
+        User.toLogin();
+      }
     },
-    methods: {
-        doFav: function () {
-            if (this.login) {
-                this.favorite ? this.delFav() : this.addFav();
-            } else {
-                User.toLogin();
-            }
-        },
-        hasFav: function () {
-            hasFav(this.postType, this.postId).then((res) => {
-                this.favorite = res.id || false;
-                this.total = res.totalFavorites || 0;
-            });
-        },
-        addFav: function () {
-            addFav(this.postType, this.postId, this.postTitle).then((res) => {
-                this.favorite = res.id;
-                this.total++;
-            });
-        },
-        delFav: function () {
-            delFav(this.favorite).then(() => {
-                this.favorite = false;
-                this.total && this.total--;
-            });
-        },
+    hasFav: function () {
+      hasFav(this.postType, this.postId).then((res) => {
+        this.favorite = res.id || false;
+        this.total = res.totalFavorites || 0;
+      });
     },
-    watch: {
-        postId: {
-            immediate: true,
-            handler() {
-                if (this.postType && this.postId) this.hasFav();
-            },
-        },
+    addFav: function () {
+      addFav(this.postType, this.postId, this.postTitle).then((res) => {
+        this.favorite = res.id;
+        this.total++;
+      });
     },
+    delFav: function () {
+      delFav(this.favorite).then(() => {
+        this.favorite = false;
+        this.total && this.total--;
+      });
+    },
+  },
+  watch: {
+    postId: {
+      immediate: true,
+      handler () {
+        if (this.postType && this.postId) this.hasFav();
+      },
+    },
+  },
 };
 </script>
 

package/src/single/cms-single.vue

@@ -61,6 +61,8 @@
         <footer class="m-single-footer">
             <slot name="single-footer"></slot>
         </footer>
+
+        <right-affix :postId="id" :postType="post_type" :postTitle="post_title"></right-affix>
     </div>
 </template>
 
@@ -69,6 +71,7 @@ import PostHeader from "./PostHeader.vue";
 import Creators from "./Creators.vue";
 import Collection from "./Collection.vue";
 import Thx from "./Thx.vue";
+import RightAffix from "./right-affix.vue";
 import Article from "@jx3box/jx3box-editor/src/Article.vue";
 import ArticleMarkdown from "@jx3box/jx3box-editor/src/ArticleMarkdown.vue";
 import Comment from "@jx3box/jx3box-comment-ui/src/Comment.vue";
@@ -84,6 +87,7 @@ export default {
         Article,
         ArticleMarkdown,
         Comment,
+        RightAffix,
     },
     props: ["post", "stat"],
     data: function () {

package/src/single/right-affix.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="right-affix">
+        <div class="item">
+            <fav :postId="postId" :postType="postType" :postTitle="postTitle" :hiddenNum="true"></fav>
+        </div>
+        <el-tooltip effect="dark" content="回到顶部" placement="bottom">
+            <div class="item" v-show="scrollBtnShow" @click="goTop">
+                <div class="to-top"></div>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import Fav from "../interact/Fav2.vue";
+export default {
+    name: "RightAffix",
+    props: ["postId", "postType", "postTitle"],
+    data() {
+        return {
+            scrollToptimer: null,
+            scrollBtnShow: false,
+            isTop: true,
+        };
+    },
+    components: {
+        Fav,
+    },
+    methods: {
+        goTop() {
+            //设置定时器
+            const self = this;
+            this.scrollToptimer = setInterval(function () {
+                //获取滚动条距离顶部高度
+                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
+                var ispeed = Math.floor(-osTop / 7);
+                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
+                //到达顶部，清除定时器
+                if (osTop === 0) {
+                    clearInterval(self.scrollToptimer);
+                }
+                self.isTop = true;
+            }, 30);
+        },
+    },
+    mounted() {
+        //获取页面可视区高度
+        var clientHeight = document.documentElement.clientHeight;
+        const self = this;
+        window.addEventListener("scroll", function () {
+            //显示回到顶部按钮
+            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
+            if (osTop >= clientHeight) {
+                self.scrollBtnShow = true;
+            } else {
+                self.scrollBtnShow = false;
+            }
+            //回到顶部过程中用户滚动滚动条，停止定时器
+            if (!self.isTop) {
+                clearInterval(self.scrollToptimer);
+            }
+            self.isTop = false;
+        });
+    },
+};
+</script>
+
+<style lang="less">
+.right-affix {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    right: @aside-right;
+    top: @header-height + @bread-height + 100px;
+    background-color: #fafbfc;
+    padding: 8px 5px;
+    z-index: 200;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    .item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        &:hover {
+            background-color: #f6fcff;
+        }
+    }
+    .to-top {
+        width: 0;
+        height: 0;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        border-bottom: 18px solid skyblue;
+    }
+}
+@media screen and (max-width:@smallpc){
+    .right-affix{
+        right:0;
+    }
+}
+</style>