@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/single/Collection.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="w-collection" v-if="list && list.length">
         <div class="w-collection-title" @click="handleShow" :class="{ on: visible }">
-            <span> <el-icon><Notebook /></el-icon> 该作品已被收录至作者的剑三小册 </span>
+            <el-icon><Notebook /></el-icon>
+            {{ $jx3boxT("jx3boxUi.collection.included", "该作品已被收录至作者的剑三小册") }}
             <a @click.stop :href="collectionLink(id)" target="_blank">《{{ title }}》</a>
         </div>
         <transition name="fade">
@@ -9,7 +10,6 @@
                 <ol v-if="list && list.length" class="u-list" :style="{ display: visible ? 'block' : 'none' }">
                     <li v-for="(item, i) in list" :key="i" class="u-item">
                         <a v-if="item" :href="showLink(item)" target="_blank">
-                            <!-- <i class="el-icon-link"></i> -->
                             {{ item.title }}
                         </a>
                     </li>
@@ -23,21 +23,23 @@
 import * as utilModule from "@jx3box/jx3box-common/js/utils";
 const { getLink } = utilModule;
 import { getCollection } from "../../service/cms";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "SingleCollection",
+    mixins: [i18nMixin],
     props: {
         id: {
             type: [Number, String],
             default: 0,
         },
         defaultVisible: {
-            type: Boolean,
+            type: [Boolean, Number],
             default: false,
         },
     },
     inject: [],
     components: {},
-    data: function() {
+    data: function () {
         return {
             visible: this.defaultVisible || false,
             data: {
@@ -47,17 +49,17 @@ export default {
         };
     },
     computed: {
-        title: function() {
+        title: function () {
             return this.data?.title;
         },
-        list: function() {
+        list: function () {
             return this.data?.posts;
         },
     },
     watch: {
         id: {
             immediate: true,
-            handler: function(val) {
+            handler: function (val) {
                 if (~~val) {
                     this.loadData();
                 } else {
@@ -68,24 +70,24 @@ export default {
                 }
             },
         },
-        defaultVisible: function(val) {
+        defaultVisible: function (val) {
             this.visible = val;
         },
     },
     methods: {
-        handleShow: function() {
+        handleShow: function () {
             this.visible = !this.visible;
         },
-        loadData: function() {
+        loadData: function () {
             getCollection(this.id).then((res) => {
                 this.data = res.data?.data;
-                this.$emit('collectionUpdate',this.data)
+                this.$emit("collectionUpdate", this.data);
             });
         },
-        collectionLink: function(id) {
+        collectionLink: function (id) {
             return getLink("collection", id);
         },
-        showLink: function(item) {
+        showLink: function (item) {
             if (item.type == "custom") {
                 return item.url;
             } else {
@@ -93,20 +95,23 @@ export default {
             }
         },
     },
-    created: function() {},
-    mounted: function() {},
+    created: function () {},
+    mounted: function () {},
 };
 </script>
 
 <style lang="less">
 .w-collection {
-    &-title {
+    --el-color-primary: @primary;
+
+    .w-collection-title {
         cursor: pointer;
         position: relative;
         border: 1px solid #ddd;
         background-color: #fafbfc;
         padding: 8px 10px 8px 10px;
-        display: block;
+        // display: block;
+        .flex(y);
         margin-bottom: 0;
         border-radius: 4px;
         line-height: 1.6;
@@ -130,17 +135,30 @@ export default {
         }
 
         a {
-            .underline(@color-link);
+            color: var(--el-color-primary);
+            &:hover {
+                .underline(var(--el-color-primary));
+            }
         }
     }
 
     counter-reset: collection;
+
+    .u-list {
+        padding: 10px 20px;
+        margin: 0;
+        border: 1px dashed #ddd;
+        background: none;
+        border-top: none;
+    }
+
     .u-item {
         .fz(13px, 32px);
         border-bottom: 1px solid #eee;
         transition: 0.15s ease-in-out;
         .nobreak;
         a {
+            color: var(--el-color-primary);
             .db;
             &:before {
                 counter-increment: collection;
@@ -158,14 +176,6 @@ export default {
         }
     }
 
-    .u-list {
-        padding: 10px 20px;
-        margin: 0;
-        border: 1px dashed #ddd;
-        background: none;
-        border-top: none;
-    }
-
     .on {
         &::after {
             transform: rotate(90deg);

package/src/single/Comment.vue

@@ -4,10 +4,10 @@
             <CommentInputForm @submit="userSubmitInputForm" />
             <div class="c-comment-panel">
                 <div class="u-order">
-                    <span class="u-label">排序模式：</span>
+                    <span class="u-label">{{ $jx3boxT("jx3boxUi.comment.sortMode", "排序模式：") }}</span>
                     <el-radio-group v-model="isDesc" @change="changeOrder" size="small">
-                        <el-radio-button value="DESC">最后靠前</el-radio-button>
-                        <el-radio-button value="ASC">最早靠前</el-radio-button>
+                        <el-radio-button value="DESC">{{ $jx3boxT("jx3boxUi.comment.desc", "最后靠前") }}</el-radio-button>
+                        <el-radio-button value="ASC">{{ $jx3boxT("jx3boxUi.comment.asc", "最早靠前") }}</el-radio-button>
                     </el-radio-group>
                 </div>
                 <div class="u-op">
@@ -15,7 +15,7 @@
                         class="c-comment-panel-likes"
                         v-model="orderByLikes"
                         @change="changeOrderByLikes"
-                        active-text="获赞靠前"
+                        :active-text="$jx3boxT('jx3boxUi.comment.likesFirst', '获赞靠前')"
                     >
                     </el-switch>
                     <el-switch
@@ -23,8 +23,8 @@
                         v-model="openWhiteList"
                         @change="changeWhiteList"
                         v-if="commentPower.is_author || commentPower.is_editor"
-                        active-text="开启过滤"
-                        title="开启过滤后，仅设为显示的评论可被其他人所见"
+                        :active-text="$jx3boxT('jx3boxUi.comment.openWhitelist', '开启过滤')"
+                        :title="$jx3boxT('jx3boxUi.comment.openWhitelistTip', '开启过滤后，仅设为显示的评论可被其他人所见')"
                     >
                     </el-switch>
                 </div>
@@ -87,8 +87,10 @@ import CommentWithReply from "../comment/CommentWithReply.vue";
 import { GET, POST, DELETE, PUT, getOrderMode, setOrderMode } from "../../service/comment";
 import { getConfig } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "CommentComp",
+    mixins: [i18nMixin],
     props: {
         id: {
             type: [Number, String],
@@ -197,7 +199,7 @@ export default {
                 .then(() => {
                     this.$notify({
                         title: "",
-                        message: "删除成功!",
+                        message: this.$jx3boxT("jx3boxUi.comment.deleteSuccess", "删除成功!"),
                         type: "success",
                         duration: 3000,
                         position: "bottom-right",
@@ -211,7 +213,7 @@ export default {
                 .then(() => {
                     this.$notify({
                         title: "",
-                        message: "操作成功!",
+                        message: this.$jx3boxT("jx3boxUi.comment.actionSuccess", "操作成功!"),
                         type: "success",
                         duration: 3000,
                         position: "bottom-right",
@@ -245,7 +247,7 @@ export default {
                 .then((responseJSON) => {
                     if (responseJSON && ~~responseJSON.code > 0) {
                         this.$notify({
-                            title: "评论失败",
+                            title: this.$jx3boxT("jx3boxUi.comment.commentFailed", "评论失败"),
                             message: responseJSON.msg || "",
                             type: "error",
                             duration: 3000,
@@ -255,7 +257,7 @@ export default {
                     }
                     this.$notify({
                         title: "",
-                        message: "评论成功!",
+                        message: this.$jx3boxT("jx3boxUi.comment.commentSuccess", "评论成功!"),
                         type: "success",
                         duration: 3000,
                         position: "bottom-right",
@@ -371,16 +373,16 @@ export default {
         cursor: pointer;
         margin-right: 10px;
         // margin-left: 10px;
-        color: #3d454d;
+        color: #555;
+        .pr;top:-1px;
 
         &:hover {
-            color: #23ade5;
+            color: var(--el-color-primary);
         }
     }
     .c-jx3box-emotion {
         margin: 0;
         position: relative;
-        top: 7px;
     }
     .c-comment-emotion {
         overflow: hidden;
@@ -448,6 +450,10 @@ export default {
     b {
         color: #0366d6;
     }
+    .u-order{
+        .flex;
+        align-items: center;
+    }
 }
 .c-comment-emotion {
     max-height: 168px;

package/src/single/Creators.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="w-creators" v-if="visible">
-        <span class="w-creators-title">联合创作</span>
+        <span class="w-creators-title">{{ $jx3boxT("jx3boxUi.creators.title", "联合创作") }}</span>
         <a
             class="w-creators-super w-creators-item"
             v-if="super_author"
@@ -26,7 +26,7 @@
             </a>
         </div>
         <a class="w-creators-edit" :href="editLink" v-if="isCreator">
-            <el-icon><Edit /></el-icon> 编辑当前作品
+            <el-icon><Edit /></el-icon> {{ $jx3boxT("jx3boxUi.creators.editCurrent", "编辑当前作品") }}
         </a>
     </div>
 </template>
@@ -35,8 +35,10 @@
 import { getPostAuthors } from "../../service/cms";
 import { showAvatar, authorLink, editLink } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "SingleCreators",
+    mixins: [i18nMixin],
     props: {
         postId: {
             type: [Number, String],
@@ -173,7 +175,7 @@ export default {
         .bold;
         .db;
         color: @color;
-        margin-bottom: 2px;
+        // margin-bottom: 2px;
         .nobreak;
         max-width: 120px;
     }

package/src/single/PostCollection.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="c-post-collection" v-if="list && list.length">
+        <div class="m-title">
+            <div class="c-post-collection-title">
+                <el-icon class="u-icon"><Connection>></Connection></el-icon> 关联
+            </div>
+            <div class="u-op" @click="toggle"><el-icon><DCaret></DCaret></el-icon> 折叠</div>
+        </div>
+        <transition name="collapse">
+            <ul v-show="show" class="c-post-collection-list">
+                <li v-for="(item, i) in list" :key="i">
+                    <el-tooltip class="item" effect="dark" :content="item.title" placement="left">
+                        <a :href="showLink(item)" target="_blank">
+                            <el-icon><Link></Link></el-icon>
+                            {{ item.title }}
+                        </a>
+                    </el-tooltip>
+                </li>
+            </ul>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { getLink, resolveImagePath } from "@jx3box/jx3box-common/js/utils";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getCollection } from "../../service/cms";
+const { __imgPath } = JX3BOX;
+export default {
+    name: "PostCollection",
+    props: ["id", "store"],
+    components: {},
+    data: function () {
+        return {
+            data: {
+                title: "",
+                posts: [],
+            },
+            show: true,
+        };
+    },
+    computed: {
+        list: function () {
+            return this.store?.posts || this.data?.posts;
+        },
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function (val) {
+                !!~~val && this.loadData();
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            getCollection(this.id).then((res) => {
+                this.data = res.data?.data;
+            });
+        },
+        showLink: function (item) {
+            if (item.type == "custom") {
+                return item.url;
+            } else {
+                return getLink(item.type, item.id);
+            }
+        },
+        getCover: function (val) {
+            return val ? resolveImagePath(val) : `${__imgPath}image/collection/default_cover.png`;
+        },
+        toggle: function () {
+            this.show = !this.show;
+        },
+    },
+};
+</script>
+<style lang="less">
+.c-post-collection {
+    .m-title {
+        .flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 24px;
+        .u-op {
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 18px;
+            padding: 0 5px;
+            color: #cdd1db;
+            cursor: pointer;
+            .flex(y);
+            &:hover {
+                color: #a1a9bb;
+            }
+        }
+    }
+    .u-image {
+        img {
+            .w(100%);
+            height: 226px;
+            object-fit: cover;
+        }
+    }
+    .c-post-collection-title {
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 18px;
+        color: #333;
+        .flex;
+        align-items: center;
+        gap: 5px;
+    }
+    .u-icon {
+        font-size: 18px;
+    }
+    .c-post-collection-list {
+        list-style: none;
+        padding: 10px 20px;
+        margin: 0;
+        overflow: hidden;
+        li {
+            .fz(13px, 36px);
+        }
+        a {
+            .db;
+            color: var(--el-color-primary);
+            transition: 0.15s ease-in-out;
+            .nobreak;
+            &:hover {
+                background-color: #e6f0fb;
+            }
+        }
+        i {
+            .pr;
+            top: 2px;
+        }
+    }
+
+    .collapse-enter-active,
+    .collapse-leave-active {
+        transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+    }
+
+    .collapse-enter-from,
+    .collapse-leave-to {
+        max-height: 0;
+        opacity: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .collapse-enter-to,
+    .collapse-leave-from {
+        max-height: 480px;
+        opacity: 1;
+    }
+}
+</style>

package/src/single/PostDirectory.vue

@@ -19,129 +19,3 @@ export default {
    mounted:function(){},
 }
 </script>
-
-<style lang="less">
-.c-article-directory {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin: 0;
-        padding: 0;
-        cursor: pointer;
-        font-weight: normal;
-        white-space: nowrap;
-        word-wrap: normal;
-        word-break: keep-all;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        letter-spacing: 0.2px;
-        line-height: 20px;
-        padding: 8px 0;
-        &:hover {
-            // font-weight: 600;
-            color: #0366d6;
-        }
-        font-size: 12px;
-    }
-    a {
-        color: @color;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        &::before {
-            content: "\e78b";
-
-            font-family: element-icons !important;
-            speak: none;
-            font-style: normal;
-            font-weight: 400;
-            font-variant: normal;
-            text-transform: none;
-            line-height: 1;
-            vertical-align: baseline;
-            display: inline-block;
-            -webkit-font-smoothing: antialiased;
-            margin-right: 5px;
-            font-size: 16px;
-        }
-    }
-
-    // .hasChild {
-    //     font-size: 14px;
-    //     &::before {
-    //         content: "\e784";
-    //     }
-    // }
-
-    // h2,h3,h4,h5,h6{
-    //     margin-left: 20px;
-    // }
-    // .hasChild{
-    //     margin-left: 0;
-    // }
-
-    // h3 + h2,h4 + h3,h5 + h4,h6 + h5{
-    //     margin-left: 0;
-    // }
-
-    .lv2 {
-        padding-left: 20px;
-    }
-
-    .lv3 {
-        padding-left: 40px;
-    }
-
-    .lv0 {
-        display: none;
-    }
-}
-
-.c-article-directory-title {
-    margin-bottom: 5px;
-    .c-article-directory-title-label {
-        font-weight: 300;
-        font-size: 20px;
-        // cursor: pointer;
-        // &:hover {
-        //     color: #f39;
-        // }
-    }
-    .c-article-directory-title-skip,
-    .c-article-directory-title-folder {
-        font-size: 14px;
-        float: right;
-        padding: 0 5px;
-        line-height: 25px;
-        color: darken(#dcdfe6, 5%);
-        cursor: pointer;
-        &:hover {
-            color: darken(#dcdfe6, 20%);
-        }
-    }
-}
-.c-article-directory-content {
-    padding: 10px 15px;
-}
-
-@keyframes focusFade {
-    from {
-        background-color: #c3fcff;
-    }
-    to {
-        background-color: transparent;
-    }
-}
-
-.c-article .isScrollFocus {
-    animation: focusFade 0.5s ease-in-out;
-}
-</style>

package/src/single/PostGuide.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="w-post-guide" v-if="hasGuide">
+        <div class="u-prev">
+            <a :href="getPostLink(post?.prev_post)" class="el-button el-button--default el-button--small is-plain" :class="{'is-disabled': !post?.prev_post }">
+                <el-icon><ArrowLeft></ArrowLeft></el-icon>
+                <span>上一篇</span>
+            </a>
+            <a :href="getPostLink(post?.prev_post)" class="u-post-title">{{ getPostTitle(post?.prev_post) }}</a>
+        </div>
+        <div class="u-next">
+            <a :href="getPostLink(post?.next_post)" class="el-button el-button--default el-button--small is-plain" :class="{'is-disabled': !post.next_post }">
+                <span>下一篇</span>
+                <el-icon><ArrowRight></ArrowRight></el-icon>
+            </a>
+            <a :href="getPostLink(post?.next_post)" class="u-post-title">{{ getPostTitle(post?.next_post) }}</a>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getLink } from '@jx3box/jx3box-common/js/utils';
+export default {
+    name: "PostGuide",
+    props: {
+        post: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    computed: {
+        hasGuide() {
+            const isPrevValid = this.post.prev_post && typeof this.post.prev_post === "object";
+            const isNextValid = this.post.next_post && typeof this.post.next_post === "object";
+            return isPrevValid || isNextValid;
+        }
+    },
+    methods: {
+        getPostLink({ ID: id, post_type }) {
+            const link = id ? getLink(post_type, id) : "javascript:;";
+            return link;
+        },
+        getPostTitle(item) {
+            return item?.post_title || "";
+        }
+    },
+};
+</script>
+
+<style lang="less">
+.w-post-guide {
+    .flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .u-post-title {
+        margin-left: 10px;
+        font-size: 14px;
+        // color: #666;
+
+        &:hover {
+            // color: #0366d6;
+            // box-shadow: 0 1px 0 #0366d6;
+            .underline(var(--el-color-primary));
+            color:var(--el-color-primary);
+        }
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .w-post-guide {
+        flex-wrap: wrap;
+
+        .u-prev,.u-next {
+            width: 100%;
+            .nobreak;
+        }
+
+        .u-prev {
+            margin-bottom: 10px;
+            span{
+                margin-left:5px;
+            }
+        }
+
+        .u-next {
+            margin-left: 0;
+            span{
+                margin-right:5px;
+            }
+        }
+    }
+}
+</style>