@jx3box/jx3box-vue3-ui 0.5.1 → 0.5.2

package/assets/css/cms-single.less

@@ -1,5 +1,5 @@
 .m-single-box {
-    padding: 0 30px;
+    // padding: 0 30px;
     .el-divider__text {
         color: #888;
         font-weight: 300;

package/assets/css/module/directory.less

@@ -29,22 +29,21 @@
 
     h1,
     h2,
-    h3,h4,h5,h6 {
+    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;
+            content: "";
+            background-image: url("../../img/single/ticket.svg");
             display: inline-block;
-            -webkit-font-smoothing: antialiased;
             margin-right: 5px;
-            font-size: 16px;
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            background-size: cover;
+            position: relative;
+            top: 2px;
         }
     }
 
@@ -66,18 +65,17 @@
     //     margin-left: 0;
     // }
 
-    .lv2{
-        padding-left:20px;
+    .lv2 {
+        padding-left: 20px;
     }
 
-    .lv3{
-        padding-left:40px;
+    .lv3 {
+        padding-left: 40px;
     }
 
-    .lv0{
+    .lv0 {
         display: none;
     }
-
 }
 
 .c-article-directory-title {
@@ -90,7 +88,8 @@
         //     color: #f39;
         // }
     }
-    .c-article-directory-title-skip,.c-article-directory-title-folder{
+    .c-article-directory-title-skip,
+    .c-article-directory-title-folder {
         font-size: 14px;
         float: right;
         padding: 0 5px;
@@ -102,6 +101,20 @@
         }
     }
 }
+.c-article-directory-title-icon {
+    &::before {
+        content: "";
+        background-image: url("../../img/single/directory-header.svg");
+        display: inline-block;
+        // margin-right: 5px;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background-size: cover;
+        position: relative;
+        top: 1px;
+    }
+}
 .c-article-directory-content {
     padding: 10px 15px;
 }
@@ -119,12 +132,12 @@
     animation: focusFade 0.5s ease-in-out;
 }
 
-.w-directory-anchor{
+.w-directory-anchor {
     .fz(16px);
     .pointer;
     // color:@color !important;
-    &:hover{
-        box-shadow:none !important;
-        color:#c00 !important;
+    &:hover {
+        box-shadow: none !important;
+        color: #c00 !important;
     }
-}
+}

package/assets/img/single/directory-header.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472 64 448zm256 512V657.024L512 768 320 960z"></path></svg>

package/assets/img/single/ticket.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 128v768h640V128H192zm-32-64h704a32 32 0 0 1 32 32v832a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h192v64H320v-64zm0 384h384v64H320v-64z"></path></svg>

package/assets/js/directory.js

@@ -25,7 +25,7 @@ function directory(from, to = "#directory") {
         $box.html(
             `<div class="c-article-directory" id="c-article-directory">
                 <div class="c-article-directory-title" id="c-article-directory-title">
-                    <span class="c-article-directory-title-label" class="c-go-top"><i class="el-icon-s-promotion"></i> 导读</span>
+                    <span class="c-article-directory-title-label" class="c-go-top"><i class="c-article-directory-title-icon"></i> 导读</span>
                     <span class="c-article-directory-title-skip" class="c-go-top">↑ 顶部</span>
                     <span class="c-article-directory-title-folder" class="c-go-top">↕ 折叠</span>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-vue3-ui",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/cms.js

@@ -62,4 +62,8 @@ function getSliders(source_type, source_ids, client='std') {
     });
 }
 
-export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, getHonorJson, getSliders, loadAuthors, loadEmotions, uploadFile };
+function getCollection(id) {
+    return $cms({ mute: true }).get(`/api/cms/post/collection/${id}`);
+}
+
+export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, getHonorJson, getSliders, loadAuthors, loadEmotions, uploadFile, getCollection };

package/src/App.vue

@@ -46,7 +46,8 @@
             <ItemSimple :item="item6" jx3-client-type="2" only-icon="true" iconSize="56px" /> -->
             <el-divider></el-divider>
             <UploadAlum />
-            <PostHeader :post="post"></PostHeader>
+            <!-- <PostHeader :post="post"></PostHeader> -->
+            <singlebox :post="post" />
             <SimpleThxVue
                 postType="bbs"
                 postTitle="bbs23865的标题"
@@ -69,6 +70,7 @@
             <Comment category="post" id="19382"></Comment>
             <RightSidebar>
                 <PostTopic type="bps" :id="48857"></PostTopic>
+                <div id="directory"></div>
             </RightSidebar>
 
             <Footer> </Footer>
@@ -78,12 +80,13 @@
 </template>
 
 <script>
+import singlebox from "./single/cms-single.vue";
 import UploadAlum from "./editor/UploadAlum.vue";
 import Author from "./single/Author.vue";
 import SimpleThxVue from "./single/SimpleThx.vue";
 import Comment from "./single/Comment.vue";
 import Thx from "./single/Thx.vue";
-import PostHeader from "./single/PostHeader.vue";
+// import PostHeader from "./single/PostHeader.vue";
 import PostTopic from "./single/PostTopic.vue";
 import axios from "axios";
 import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
@@ -97,15 +100,16 @@ export default {
         Author,
         Comment,
         Thx,
-        PostHeader,
+        // PostHeader,
         PostTopic,
         UploadAlum,
         AdminDirectMessage,
+        singlebox,
         // Admin,
     },
     data() {
         return {
-            post_id: "60031",
+            post_id: "69014",
             post: "",
             client: location.href.includes("origin") ? "origin" : "std",
             tag: "",

package/src/single/Collection.vue

@@ -0,0 +1,175 @@
+<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>
+            <a @click.stop :href="collectionLink(id)" target="_blank">《{{ title }}》</a>
+        </div>
+        <transition name="fade">
+            <div class="w-collection-list" v-if="visible">
+                <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>
+                </ol>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { getLink } from "@jx3box/jx3box-common/js/utils";
+import { getCollection } from "../../service/cms";
+export default {
+    name: "SingleCollection",
+    props: ["id", "defaultVisible"],
+    inject: [],
+    components: {},
+    data: function() {
+        return {
+            visible: this.defaultVisible || false,
+            data: {
+                title: "",
+                posts: [],
+            },
+        };
+    },
+    computed: {
+        title: function() {
+            return this.data?.title;
+        },
+        list: function() {
+            return this.data?.posts;
+        },
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function(val) {
+                if (~~val) {
+                    this.loadData();
+                } else {
+                    this.data = {
+                        title: "",
+                        posts: [],
+                    };
+                }
+            },
+        },
+        defaultVisible: function(val) {
+            this.visible = val;
+        },
+    },
+    methods: {
+        handleShow: function() {
+            this.visible = !this.visible;
+        },
+        loadData: function() {
+            getCollection(this.id).then((res) => {
+                this.data = res.data?.data;
+                this.$emit('collectionUpdate',this.data)
+            });
+        },
+        collectionLink: function(id) {
+            return getLink("collection", id);
+        },
+        showLink: function(item) {
+            if (item.type == "custom") {
+                return item.url;
+            } else {
+                return getLink(item.post_type || item.type, item.id);
+            }
+        },
+    },
+    created: function() {},
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+.w-collection {
+    &-title {
+        cursor: pointer;
+        position: relative;
+        border: 1px solid #ddd;
+        background-color: #fafbfc;
+        padding: 8px 10px 8px 10px;
+        display: block;
+        margin-bottom: 0;
+        border-radius: 4px;
+        line-height: 1.6;
+        font-size: 13px;
+        letter-spacing: 0.5px;
+        i {
+            .fz(16px);
+            .y(-1px);
+        }
+
+        &::after {
+            content: ">";
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            font-family: "宋体", Consolas;
+            color: #aaa;
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+
+        a {
+            .underline(@color-link);
+        }
+    }
+
+    counter-reset: collection;
+    .u-item {
+        .fz(13px, 32px);
+        border-bottom: 1px solid #eee;
+        transition: 0.15s ease-in-out;
+        .nobreak;
+        a {
+            .db;
+            &:before {
+                counter-increment: collection;
+                content: counter(collection) ". ";
+                color: #aaa;
+                .mr(5px);
+            }
+            &:hover {
+                background-color: #f0f6fd;
+                color: @pink;
+            }
+        }
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .u-list {
+        padding: 10px 20px;
+        margin: 0;
+        border: 1px dashed #ddd;
+        background: none;
+        border-top: none;
+    }
+
+    .on {
+        &::after {
+            transform: rotate(90deg);
+        }
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.5s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
+}
+</style>

package/src/single/Creators.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="w-creators" v-if="visible">
+        <span class="w-creators-title">联合创作</span>
+        <a
+            class="w-creators-super w-creators-item"
+            v-if="super_author"
+            :href="authorLink(super_author.ID)"
+            target="_blank"
+        >
+            <img class="u-avatar" :src="showAvatar(super_author.user_avatar)" />
+            <span class="u-name">{{ super_author.display_name }}</span>
+            <i class="u-up">UP</i>
+        </a>
+        <div class="w-creators-authors" v-if="other_authors">
+            <a
+                class="w-creators-author w-creators-item"
+                v-for="(item, i) in other_authors"
+                :key="i"
+                :href="authorLink(item.post_author_info.ID)"
+                target="_blank"
+                v-show="item.status"
+            >
+                <img class="u-avatar" :src="showAvatar(item.post_author_info.user_avatar)" />
+                <span class="u-name">{{ item.post_author_info.display_name }}</span>
+                <i class="u-label">{{ formatLabel(item.label) }}</i>
+            </a>
+        </div>
+        <a class="w-creators-edit" :href="editLink" v-if="isCreator">
+            <el-icon><Edit /></el-icon> 编辑当前作品
+        </a>
+    </div>
+</template>
+
+<script>
+import { getPostAuthors } from "../../service/cms";
+import { showAvatar, authorLink, editLink } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "SingleCreators",
+    props: ["postId", "postType"],
+    components: {},
+    data: function () {
+        return {
+            super_author: "",
+            other_authors: "",
+        };
+    },
+    computed: {
+        id: function () {
+            return this.postId;
+        },
+        visible: function () {
+            return this.other_authors && this.other_authors?.length;
+        },
+        editLink: function () {
+            return editLink(this.postType, this.postId);
+        },
+        creators: function ({ other_authors }) {
+            return other_authors.map((item) => {
+                return item.author_id;
+            });
+        },
+        userId: function () {
+            return ~~User.getInfo().uid;
+        },
+        isCreator: function ({ creators, userId, super_author }) {
+            return creators.includes(userId) || userId == super_author.ID;
+        },
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadData();
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            getPostAuthors(this.id).then((res) => {
+                this.super_author = res.data?.data.super_author;
+                this.other_authors = res.data?.data.other_authors;
+
+                const super_author = {
+                    user_id: this.super_author.ID,
+                    display_name: this.super_author.display_name,
+                    user_avatar: this.super_author.user_avatar,
+                };
+
+                const other_authors = this.other_authors?.map((item) => {
+                    if (item.status) {
+                        return {
+                            user_id: item.post_author_info?.ID,
+                            display_name: item.post_author_info?.display_name,
+                            user_avatar: item.post_author_info?.user_avatar,
+                        };
+                    }
+                }).filter((item) => {
+                    return !!item;
+                });
+
+                // 将联合创作者传出去
+                this.$emit("load-authors", { super_author, other_authors });
+            });
+        },
+        showAvatar: function (val) {
+            return showAvatar(val, 144);
+        },
+        authorLink,
+        formatLabel: function (str) {
+            return str && str.slice(0, 8);
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.w-creators {
+    display: flex;
+    border: 1px solid #ddd;
+    background-color: #fafbfc;
+    border-radius: 4px;
+    .pr;
+    overflow: hidden;
+    padding: 15px 10px 15px 40px;
+    overflow-x: auto;
+    .clearfix;
+}
+.w-creators-title {
+    .pa;
+    .lt(0);
+    writing-mode: vertical-rl;
+    .fz(12px);
+    background: @primary;
+    color: #fff;
+    .h(100%);
+    .x;
+    padding: 0 3px;
+    letter-spacing: 1px;
+}
+.w-creators-super {
+    // .fl;
+}
+.w-creators-authors {
+    // .fl;
+    display: flex;
+    flex-grow: 1;
+}
+.w-creators-item {
+    flex-shrink: 0;
+    .pr;
+    .u-avatar {
+        .size(48px);
+        .pa;
+        .lt(0);
+        .r(4px);
+    }
+    .pl(58px);
+    .mr(20px);
+    .u-name {
+        .fz(15px);
+        .bold;
+        .db;
+        color: @color;
+        margin-bottom: 2px;
+        .nobreak;
+        max-width: 120px;
+    }
+    &:hover {
+        .u-name {
+            color: @color-link;
+        }
+    }
+    .u-up {
+        .dbi;
+        .fz(12px,1);
+        font-style: normal;
+        border: 1px solid @pink;
+        color: @pink;
+        padding: 3px 10px;
+        .r(2px);
+        .mt(5px);
+    }
+    .u-label {
+        .nobreak;
+        max-width: 120px;
+        .dbi;
+        .fz(12px,1);
+        font-style: normal;
+        border: 1px solid @color-link;
+        color: @color-link;
+        padding: 3px 10px;
+        .r(2px);
+        .mt(5px);
+    }
+}
+.w-creators-edit {
+    .pa;
+    .rb(10px);
+    .fz(13px);
+    background-color: #e6f0fb;
+    padding: 2px 5px;
+    &:hover {
+        color: @pink;
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-creators-edit {
+        .none;
+    }
+}
+</style>

package/src/single/PostDirectory.vue

@@ -0,0 +1,147 @@
+<template>
+    <div class="m-single-directory"></div>
+</template>
+
+<script>
+export default {
+   name : 'PostDirectory',
+   props:[],
+   components : {},
+   data : function(){
+       return {
+           
+       }
+   },
+   computed:{},
+   watch:{},
+   methods:{},
+   created:function(){},
+   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/cms-single.vue

@@ -0,0 +1,213 @@
+<template>
+    <div class="m-single-box">
+        <!-- 头部 -->
+        <PostHeader :post="post" :stat="stat">
+            <slot name="single-header"></slot>
+        </PostHeader>
+
+        <!-- 文章前 -->
+        <div class="m-single-prepend">
+            <!-- 联合创作者 -->
+            <Creators class="m-single-creators" :postId="id" :postType="post_type" @load-authors="loadAuthors" />
+            <!-- 文集小册 -->
+            <Collection
+                class="m-single-collection"
+                :id="collection_id"
+                :defaultVisible="collection_collapse"
+                @collectionUpdate="updateCollection"
+            />
+            <slot name="single-prepend"></slot>
+        </div>
+
+        <!-- 文章内容 -->
+        <div class="m-single-post" v-if="visible">
+            <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" />
+            </div>
+        </div>
+        <div class="m-single-null" v-else>
+            <el-alert :title="null_tip" type="warning" show-icon></el-alert>
+        </div>
+
+        <!-- 文章后 -->
+        <div class="m-single-append">
+            <slot name="single-append"></slot>
+
+            <!-- 打赏 -->
+            <Thx
+                class="m-single-thx"
+                :postId="id"
+                :postType="post_type"
+                :postTitle="post_title"
+                :userId="author_id"
+                :adminBoxcoinEnable="true"
+                :userBoxcoinEnable="true"
+                :authors="authors"
+                :client="post_client"
+            />
+
+            <!-- 评论 -->
+            <div ref="commentView" class="m-single-comment">
+                <el-divider content-position="left">评论</el-divider>
+                <Comment :id="id" category="post" v-if="id && allow_comment" />
+                <el-alert title="作者没有开启评论功能" type="warning" show-icon v-else></el-alert>
+            </div>
+        </div>
+
+        <!-- 底部 -->
+        <footer class="m-single-footer">
+            <slot name="single-footer"></slot>
+        </footer>
+
+        <!-- <right-affix
+            :postId="id"
+            :postType="post_type"
+            :postTitle="post_title"
+            :showComment="id && allow_comment"
+            @toComment="toComment($event)"
+        ></right-affix> -->
+    </div>
+</template>
+
+<script>
+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 { __visibleMap } from "@jx3box/jx3box-common/data/jx3box.json";
+import { getAppType } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "cms-single",
+    components: {
+        PostHeader,
+        Creators,
+        Collection,
+        Thx,
+        Article,
+        // ArticleMarkdown,
+        Comment,
+        // RightAffix,
+    },
+    props: ["post", "stat"],
+    data: function () {
+        return {
+            collection_data: "",
+            directory: false,
+
+            // 创作者
+            other_authors: [],
+            super_author: "",
+        };
+    },
+    computed: {
+        id: function () {
+            return ~~this.post?.ID || 0;
+        },
+        app_type: function () {
+            return getAppType();
+        },
+        post_type: function () {
+            return this.post?.post_type;
+        },
+        post_title: function () {
+            return this.post?.post_title;
+        },
+        author_id: function () {
+            return this.post?.post_author;
+        },
+        collection_id: function () {
+            return this.post?.post_collection;
+        },
+        collection_collapse: function () {
+            return this.post?.collection_collapse;
+        },
+        visible: function () {
+            return !!this.post?._check;
+        },
+        null_tip: function () {
+            let str = "作者设置了【";
+            str += __visibleMap[this.post?.visible];
+            str += "】";
+            return str;
+        },
+        post_content: function () {
+            return this.post?.post_content || "";
+        },
+        post_mode: function () {
+            return this.post?.post_mode || "tinymce";
+        },
+        isMarkdown: function () {
+            return this.post_mode == "markdown";
+        },
+        allow_comment: function () {
+            return !this.post?.comment;
+        },
+        extend_data: function () {
+            return {
+                collection_data: this.collection_data,
+                directory: this.directory,
+            };
+        },
+        authors: function () {
+            if (this.other_authors && this.other_authors.length) {
+                return [this.super_author, ...this.other_authors];
+            }
+            return [];
+        },
+        post_client: function () {
+            return this.post?.client || "all";
+        },
+    },
+    methods: {
+        updateCollection: function (val) {
+            this.collection_data = val;
+        },
+        updateDirectory: function (val) {
+            this.directory = val;
+        },
+        loadAuthors({ super_author, other_authors }) {
+            this.super_author = super_author;
+            this.other_authors = other_authors;
+        },
+        toComment() {
+            this.$refs.commentView.scrollIntoView({
+                block: "start",
+                behavior: "auto",
+            });
+        },
+    },
+    watch: {
+        extend_data: {
+            deep: true,
+            immediate: true,
+            handler: function (val) {
+                this.$emit("extendUpdate", val);
+            },
+        },
+        post_type: {
+            deep: true,
+            immediate: true,
+            handler: function (val) {
+                if (location.host.includes("localhost")) {
+                    return;
+                }
+
+                if (val && val !== this.app_type) {
+                    location.href = `/${val}/${this.id}`;
+                }
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/cms-single.less";
+</style>