@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/src/interact/Share.vue

@@ -8,7 +8,7 @@
                         class="u-share2-item"
                         :key="shareItem.key"
                         @click="share(shareItem.key)"
-                        title="分享"
+                        :title="$jx3boxT('jx3boxUi.share.share', '分享')"
                     >
                         <img class="u-share-icon" svg-inline :src="shareItem.img" :alt="shareItem.name">
                         <div class="u-share2-name">{{ shareItem.name }}</div>
@@ -22,24 +22,21 @@
                         :size="75"
                         level="H"
                     ></qrcode-vue>
-                    <span>微信扫一扫分享</span>
+                    <span>{{ $jx3boxT("jx3boxUi.share.wechatShare", "微信扫一扫分享") }}</span>
                 </div>
             </div>
 
             <template #reference>
-                <!-- <el-tooltip class="item" effect="dark" content="分享" placement="top"> -->
-                    <div v-if="simple">
-                        <img class="u-icon u-simple-icon" svg-inline :src="iconPath" />
-                        <!-- <i class="el-icon-position"></i> -->
-                        <span class="u-text">分享</span>
-                    </div>
-                    <img
-                        v-else
-                        class="u-icon"
-                        svg-inline
-                        :src="iconPath"
-                    />
-                <!-- </el-tooltip> -->
+                <div v-if="simple">
+                    <img class="u-icon u-simple-icon" svg-inline :src="iconPath" />
+                    <span class="u-text">{{ $jx3boxT("jx3boxUi.share.share", "分享") }}</span>
+                </div>
+                <img
+                    v-else
+                    class="u-icon"
+                    svg-inline
+                    :src="iconPath"
+                />
             </template>
         </el-popover>
     </div>
@@ -48,10 +45,12 @@
 <script>
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import QrcodeVue from "qrcode.vue";
+import i18nMixin from "../../i18n/mixin";
 
 const { __imgPath } = JX3BOX;
 export default {
     name: "ShareComp",
+    mixins: [i18nMixin],
     props: {
         postType: {
             type: String,
@@ -81,22 +80,22 @@ export default {
             },
             shareList: [
                 {
-                    name: '微博',
+                    name: this.$jx3boxT("jx3boxUi.share.weibo", "微博"),
                     key: 'weibo',
                     img: require('../../assets/img/widget/weibo.svg'),
                 },
                 {
-                    name: 'QQ',
+                    name: this.$jx3boxT("jx3boxUi.share.qq", "QQ"),
                     key: 'qq',
                     img: require('../../assets/img/widget/qq.svg'),
                 },
                 {
-                    name: 'QQ空间',
+                    name: this.$jx3boxT("jx3boxUi.share.qzone", "QQ空间"),
                     key: 'qzone',
                     img: require('../../assets/img/widget/qzone.svg'),
                 },
                 {
-                    name: '贴吧',
+                    name: this.$jx3boxT("jx3boxUi.share.tieba", "贴吧"),
                     key: 'tieba',
                     img: require('../../assets/img/widget/tieba.svg'),
                 },

package/src/interact/WatchLater.vue

@@ -14,8 +14,10 @@ import User from "@jx3box/jx3box-common/js/user";
 const JX3BOX = require("@jx3box/jx3box-common/data/jx3box.json");
 import { addWatchLater, delWatchLater } from "../../service/fav";
 import { omit } from "lodash";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "WatchLater",
+    mixins: [i18nMixin],
     props: {
         category: {
             type: String,
@@ -46,7 +48,9 @@ export default {
     },
     computed: {
         favContent() {
-            return this.favorite ? "已添加稍后在看" : "添加至稍后再看";
+            return this.favorite
+                ? this.$jx3boxT("jx3boxUi.watchLater.added", "已添加稍后在看")
+                : this.$jx3boxT("jx3boxUi.watchLater.add", "添加至稍后再看");
         },
         addSrc() {
             return JX3BOX.__cdn + "design/vector/icon/time.svg"

package/src/main.js

@@ -46,6 +46,7 @@ import zhTw from "element-plus/es/locale/lang/zh-tw";
 import vi from "element-plus/es/locale/lang/vi";
 import "element-plus/dist/index.css";
 import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+import "@jx3box/jx3box-common/css/element-fonticon.css";
 
 const __elementLocaleMap = {
     "zh-CN": zhCn,

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;
     }