@jx3box/jx3box-ui 2.0.5 → 2.0.6

package/src/single/Author.vue

@@ -6,7 +6,9 @@
                 <!-- <AuthorFollow style="margin-right: 8px;" :uid="uid" /> -->
                 <AuthorRss :uid="uid" :data="data" />
                 <!-- <AuthorGift :uid="uid" /> -->
-                <el-button class="u-btn" size="small" @click="onMessage" icon="Message">私信</el-button
+                <el-button class="u-btn" size="small" @click="onMessage" icon="Message">{{
+                    $jx3boxT("jx3boxUi.author.message", "私信")
+                }}</el-button
                 >
             </div>
             <!-- <AuthorLink class="u-block u-links" :uid="uid" :data="data" /> -->
@@ -29,9 +31,11 @@ import AuthorMedals from "../author/AuthorMedals.vue";
 // import AuthorTeams from "../author/AuthorTeams.vue";
 import AuthorPosts from "../author/AuthorPosts.vue";
 import AuthorRss from "../author/AuthorRss.vue";
+import i18nMixin from "../../i18n/mixin";
 const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
 export default {
     name: "AuthorComp",
+    mixins: [i18nMixin],
     props: {
         uid: {
             type: [Number, String],

package/src/single/CmsSingle.vue

@@ -24,8 +24,7 @@
             <el-divider content-position="left">JX3BOX</el-divider>
             <div class="m-single-content">
                 <slot></slot>
-                <!-- <ArticleMarkdown v-if="isMarkdown" :content="post_content" @directoryRendered="updateDirectory" /> -->
-                <Article :content="post_content" @directoryRendered="updateDirectory" />
+                <Article :content="post_content" :post_mode="post_mode" @directoryRendered="updateDirectory" />
             </div>
         </div>
         <div class="m-single-null" v-else>
@@ -48,13 +47,19 @@
                 :authors="authors"
                 :client="post_client"
                 showRss
+                v-if="showThx"
             />
 
             <!-- 评论 -->
             <div ref="commentView" class="m-single-comment">
-                <el-divider content-position="left">评论</el-divider>
+                <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.cmsSingle.comment", "评论") }}</el-divider>
                 <Comment :id="id" category="post" v-if="id && allow_comment" />
-                <el-alert title="作者没有开启评论功能" type="warning" show-icon v-else></el-alert>
+                <el-alert
+                    :title="$jx3boxT('jx3boxUi.cmsSingle.commentDisabled', '作者没有开启评论功能')"
+                    type="warning"
+                    show-icon
+                    v-else
+                ></el-alert>
             </div>
         </div>
 
@@ -63,13 +68,13 @@
             <slot name="single-footer"></slot>
         </footer>
 
-        <!-- <right-affix
+        <right-affix
             :postId="id"
             :postType="post_type"
             :postTitle="post_title"
             :showComment="id && allow_comment"
             @toComment="toComment($event)"
-        ></right-affix> -->
+        ></right-affix>
     </div>
 </template>
 
@@ -78,26 +83,24 @@ 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 "../editor/Article.vue";
-// import ArticleMarkdown from "@jx3box/jx3box-editor/src/ArticleMarkdown.vue";
-import Comment from "./Comment.vue";
+import RightAffix from "./RightAffix.vue";
+import Article from "@jx3box/jx3box-editor/src/Article.vue";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { getAppType } from "@jx3box/jx3box-common/js/utils";
+import i18nMixin from "../../i18n/mixin";
 
 const { __visibleMap } = JX3BOX;
 
 export default {
     name: "cms-single",
+    mixins: [i18nMixin],
     components: {
         PostHeader,
         Creators,
         Collection,
         Thx,
         Article,
-        // ArticleMarkdown,
-        Comment,
-        // RightAffix,
+        RightAffix,
     },
     props: {
         post: {
@@ -108,6 +111,10 @@ export default {
             type: Object,
             default: () => ({}),
         },
+        showThx: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function () {
         return {
@@ -145,7 +152,7 @@ export default {
             return !!this.post?._check;
         },
         null_tip: function () {
-            let str = "作者设置了【";
+            let str = this.$jx3boxT("jx3boxUi.cmsSingle.authorSet", "作者设置了【");
             str += __visibleMap[this.post?.visible];
             str += "】";
             return str;
@@ -185,6 +192,10 @@ export default {
         }
     },
     methods: {
+        shouldSkipNavigation: function () {
+            if (typeof window === "undefined" || typeof location === "undefined") return false;
+            return location.pathname.includes("iframe.html") || !!window.__STORYBOOK_PREVIEW__;
+        },
         updateCollection: function (val) {
             this.collection_data = val;
         },
@@ -214,7 +225,7 @@ export default {
             deep: true,
             immediate: true,
             handler: function (val) {
-                if (location.host.includes("localhost")) {
+                if (location.host.includes("localhost") || this.shouldSkipNavigation()) {
                     return;
                 }
 
@@ -226,6 +237,9 @@ export default {
         community_id: {
             immediate: true,
             handler(val) {
+                if (this.shouldSkipNavigation()) {
+                    return;
+                }
                 if (val && val != 0) {
                     // 防止死循环
                     if (location.href.includes(`/community/${val}`)) {

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>