@jx3box/jx3box-ui 2.0.5 → 2.0.6

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>

package/src/single/PostHeader.vue

@@ -3,7 +3,7 @@
         <!-- 标题 -->
         <div class="m-single-title">
             <span class="u-title u-sub-block" :href="url" :title="title">
-                <i class="u-original" v-if="isOriginal">原创</i>
+                <i class="u-original" v-if="isOriginal">{{ $jx3boxT("jx3boxUi.postHeader.original", "原创") }}</i>
                 <i class="u-private" v-if="post.post_status != 'publish' || !!~~post.visible">
                     <el-icon
                         v-if="post.post_status == 'draft' || post.post_status == 'pending' || !!~~post.visible"
@@ -16,7 +16,7 @@
                 <template v-if="titleExtra">
                     <span class="u-client" :class="'i-client-' + client">{{ showClientLabel(client) }}</span>
                     <span class="u-client u-zlp" v-if="zlp">{{ zlp }}</span>
-                    <span class="u-client i-client-wujie" v-if="is_wujie">无界</span>
+                    <span class="u-client i-client-wujie" v-if="is_wujie">{{ $jx3boxT("jx3boxUi.postHeader.wujie", "无界") }}</span>
                 </template>
             </span>
         </div>
@@ -29,7 +29,7 @@
                     <img svg-inline src="../../assets/img/single/author.svg" />
                 </i>
                 <a class="u-name" :href="author_link" v-if="!anonymous">{{ author_name }}</a>
-                <span class="u-name u-anonymous" v-else>神秘侠士</span>
+                <span class="u-name u-anonymous" v-else>{{ $jx3boxT("jx3boxUi.postHeader.mysterious", "神秘侠士") }}</span>
             </div>
 
             <!-- 自定义字段 -->
@@ -43,13 +43,16 @@
 
             <!-- 客户端 -->
             <div class="u-meta u-sub-block">
-                <em class="u-label">适用客户端</em>
+                <em class="u-label">{{ $jx3boxT("jx3boxUi.postHeader.client", "适用客户端") }}</em>
                 <span class="u-value u-client" :class="client">{{ showClientLabel(client) }}</span>
-                <span class="u-value u-client wujie" v-if="is_wujie">无界</span>
+                <span class="u-value u-client wujie" v-if="is_wujie">{{ $jx3boxT("jx3boxUi.postHeader.wujie", "无界") }}</span>
             </div>
 
             <!-- 发布日期 -->
-            <span class="u-podate u-sub-block" :title="'发布日期:' + post_time">
+            <span
+                class="u-podate u-sub-block"
+                :title="$jx3boxT('jx3boxUi.postHeader.publishDateTitle', '发布日期:{time}', { time: post_time })"
+            >
                 <i class="u-icon-podate">
                     <img svg-inline src="../../assets/img/single/podate.svg" />
                 </i>
@@ -57,7 +60,10 @@
             </span>
 
             <!-- 最后更新 -->
-            <span class="u-modate u-sub-block" :title="'最后更新:' + update_time">
+            <span
+                class="u-modate u-sub-block"
+                :title="$jx3boxT('jx3boxUi.postHeader.updateDateTitle', '最后更新:{time}', { time: update_time })"
+            >
                 <i class="u-icon-modate">
                     <img svg-inline src="../../assets/img/single/modate.svg" />
                 </i>
@@ -70,7 +76,11 @@
                 {{ views }}
             </span>
 
-            <span class="u-word-count u-sub-block" v-if="wordCount" title="累计字数">
+            <span
+                class="u-word-count u-sub-block"
+                v-if="wordCount"
+                :title="$jx3boxT('jx3boxUi.postHeader.wordCount', '累计字数')"
+            >
                 <el-icon :size="15"><Sunny /></el-icon>
                 {{ wordCount }}
             </span>
@@ -78,7 +88,7 @@
             <!-- 编辑 -->
             <a class="u-edit u-sub-block" :href="edit_link" v-if="canEdit && !anonymous">
                 <el-icon class="u-icon-edit" :size="16"><Edit /></el-icon>
-                <span>编辑</span>
+                <span>{{ $jx3boxT("jx3boxUi.postHeader.edit", "编辑") }}</span>
             </a>
         </div>
     </header>
@@ -90,10 +100,12 @@ import { showDate, showTime } from "@jx3box/jx3box-common/js/moment";
 import { editLink, authorLink } from "@jx3box/jx3box-common/js/utils.js";
 import User from "@jx3box/jx3box-common/js/user.js";
 import $ from "jquery";
+import i18nMixin from "../../i18n/mixin";
 const { __clients } = JX3BOX;
 
 export default {
     name: "PostHeader",
+    mixins: [i18nMixin],
     props: {
         post: {
             type: Object,
@@ -125,13 +137,13 @@ export default {
             return !!~~this.post?.original;
         },
         title: function () {
-            return this.post?.post_title || "无标题";
+            return this.post?.post_title || this.$jx3boxT("jx3boxUi.postHeader.noTitle", "无标题");
         },
         author_link: function () {
             return authorLink(this.post?.post_author);
         },
         author_name: function () {
-            return this.post?.author_info?.display_name || "匿名";
+            return this.post?.author_info?.display_name || this.$jx3boxT("jx3boxUi.postHeader.anonymous", "匿名");
         },
         post_date: function () {
             return showDate(new Date(this.post?.post_date));
@@ -218,8 +230,8 @@ export default {
     // padding-right: 280px;
     .pr;
     .u-sub-block {
-        .dbi;
-        .y(top);
+        .flex;
+        align-items: center;
     }
 }
 @media screen and (max-width: @phone) {
@@ -244,7 +256,7 @@ export default {
         // }
         letter-spacing: 0.5px;
         font-weight: 300;
-        .db;
+        // .db;
         .nobreak;
     }
     .u-author {
@@ -263,9 +275,11 @@ export default {
     }
 
     .u-private {
-        .y(-4px);
+        // .y(-4px);
         margin-right: 5px;
         color: #111;
+        top:2px;
+        .pr;
     }
 }
 @media screen and (max-width: @phone) {
@@ -285,15 +299,20 @@ export default {
 }
 
 .m-single-info {
+
+
     margin-top: 10px;
     .clearfix;
     .fz(12px, 20px);
     color: #666;
+    .flex;
+    align-items: center;
 
     @origin: #0eb7ce;
     @std: #f0b400;
     @all: #a26ef7;
     @wujie: #fc79bf;
+    --el-color-primary: @primary;
 
     .u-client {
         // .fl;
@@ -343,8 +362,11 @@ export default {
     }
 
     .u-author {
+        a {
+            color: var(--el-color-primary);
+        }
         a:hover {
-            box-shadow: 0 1px 0 @color-link;
+            .underline(var(--el-color-primary));
         }
         i {
             .pr;
@@ -373,9 +395,9 @@ export default {
                 font-size: 16px;
             }
             .pr;
-            top: 4px;
             .mr(1px);
         }
+        color: var(--el-color-primary);
         &:hover {
             box-shadow: 0 1px 0 @color-link;
         }

package/src/single/PostTopic.vue

@@ -80,14 +80,14 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .c-post-topic {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
 }
 .c-post-topic__banner {
     position: relative;
     margin-bottom: 10px;
-    padding: 10px 10px 0 10px;
+    //padding: 10px 10px 0 10px;
     .c-topic-text {
         font-size: 12px;
         font-weight: 700;

package/src/single/PostVersion.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="c-post-version" v-if="list && list.length">
+        <div class="m-title">
+            <div class="u-title">
+                <el-icon class="u-icon"><Clock /></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="u-list">
+                <li v-for="(item, i) in list" class="u-item" :key="i" @click="handleContrast(item)">
+                    <div class="u-version">
+                        <span>{{ item.version }}</span> - <span>{{ item.created_at }}</span>
+                    </div>
+                    <el-button class="u-compare" size="small" type="primary" link
+                        ><el-icon class="u-icon"><Sort></Sort></el-icon>对比</el-button
+                    >
+                </li>
+            </ul>
+        </transition>
+        <version-dialog
+            v-model="visible"
+            :link_content_meta_id="link_content_meta_id"
+            :title="title"
+            :content="content"
+            :commit_hash="commit_hash"
+            :versions="list"
+        ></version-dialog>
+    </div>
+</template>
+
+<script>
+import { getCommitHistories, commitHistory } from "../../service/commit-history";
+import VersionDialog from "./VersionDialog.vue";
+export default {
+    name: "PostVersion",
+    props: ["post"],
+    components: { VersionDialog },
+    data() {
+        return {
+            loading: false,
+            index: 1,
+            pageSize: 10, // 取最新的10个版本即可
+            total: 0,
+            list: [],
+            show: true,
+            visible: false,
+            commit_hash: "",
+            isMobile: window.innerWidth < 768,
+        };
+    },
+    computed: {
+        link_content_meta_id() {
+            return this.post?.link_content_meta_id || 0;
+        },
+        content() {
+            return this.post?.post_content || "";
+        },
+        title() {
+            return this.post?.post_title || "";
+        },
+        pageParams() {
+            return {
+                index: this.index,
+                pageSize: this.pageSize,
+            };
+        },
+    },
+    watch: {
+        link_content_meta_id: {
+            immediate: true,
+            handler: function (val) {
+                !!val && this.load();
+            },
+        },
+        page() {
+            this.load();
+        },
+    },
+    methods: {
+        onAdd() {
+            commitHistory(this.link_content_meta_id, {
+                commit: "提交测试4",
+                content: `每日机缘4`,
+            })
+                .then((res) => {
+                    this.$message.success("创建成功");
+                    this.load();
+                })
+                .catch((err) => {
+                    this.$message.error(err.message);
+                });
+        },
+        handleContrast(item) {
+            if (this.isMobile) {
+                return;
+            }
+            this.commit_hash = item.commit_hash;
+            this.visible = true;
+        },
+        load() {
+            this.loading = true;
+            getCommitHistories(this.link_content_meta_id, this.pageParams)
+                .then((res) => {
+                    const list = res.data?.data?.list || [];
+                    if (list.length) {
+                        this.list = list.map((item, i) => {
+                            return {
+                                ...item,
+                                version: "v" + (list.length - i),
+                            };
+                        });
+                        this.total = res.data?.data?.page?.total || 0;
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        toggle() {
+            this.show = !this.show;
+        },
+    },
+};
+</script>
+<style lang="less">
+.c-post-version {
+    .m-title {
+        .flex;
+        justify-content: space-between;
+        align-items: center;
+        //margin-bottom: 5px;
+        line-height: 24px;
+        .u-op {
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 18px;
+            //float: right;
+            padding: 0 5px;
+            color: #cdd1db;
+            cursor: pointer;
+            .flex(y);
+            &:hover {
+                color: #a1a9bb;
+            }
+        }
+    }
+    .u-title {
+        //font-weight: 400;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 18px;
+        color: #333;
+        .flex;
+        align-items: center;
+        gap: 5px;
+        .u-icon {
+            font-size: 18px;
+        }
+    }
+    .u-list {
+        list-style: none;
+        padding: 10px;
+        margin: 0;
+        overflow: hidden;
+        li {
+            padding: 0 10px;
+            .fz(13px, 36px);
+            .flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: 0.15s ease-in-out;
+            .nobreak;
+            &:hover {
+                background-color: #fcfcfc;
+                .r(4px);
+
+                .u-compare {
+                    .db;
+                    @media screen and (max-width: @phone) {
+                        .none;
+                    }
+                }
+            }
+            .pointer;
+        }
+
+        .u-compare {
+            .none;
+
+            .u-icon {
+                transform: rotate(90deg);
+                margin-right: 3px;
+            }
+        }
+    }
+
+    .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>