@jx3box/jx3box-common-ui 5.4.1 → 5.4.2

package/assets/css/{post_single.less → cms-single.less}

@@ -16,6 +16,10 @@
     .pr;
 }
 
+.m-single-collection,.m-single-creators{
+    .mb(10px);
+}
+
 .m-single-post {
     .mb(10px);
     .pr;

package/assets/css/crumb.less

@@ -10,3 +10,8 @@
         }
     }
 }
+@media screen and (max-width: @phone) {
+    .c-crumb {
+        .none;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.4.1",
+    "version": "5.4.2",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -30,8 +30,10 @@
         "last 2 versions"
     ],
     "dependencies": {
+        "@jx3box/jx3box-comment-ui": "^1.6.6",
         "@jx3box/jx3box-common": "^6.7.8",
         "@jx3box/jx3box-data": "^1.8.3",
+        "@jx3box/jx3box-editor": "^1.0.4",
         "axios": "^0.19.2",
         "element-ui": "^2.13.2",
         "jquery": "^3.5.1",

package/src/App.vue

@@ -1,14 +1,7 @@
 <template>
     <div class="container-page">
         <Header></Header>
-        <Breadcrumb
-            name="频道名称"
-            slug="slug"
-            root="/slug"
-            :publishEnable="true"
-            :feedbackEnable="true"
-            :adminEnable="true"
-        >
+        <Breadcrumb name="频道名称" slug="slug" root="/slug" :publishEnable="true" :feedbackEnable="true" :adminEnable="true">
             <img slot="logo" svg-inline src="../assets/img/jx3.svg" />
             bread info
         </Breadcrumb>
@@ -20,64 +13,74 @@
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
-            <PostHeader :post="post"/>
-            
-            <Creators :postId="30432" style="margin-bottom:10px"/>
-            <Collection :id="59" :defaultVisible="true"/>
-            <UserPop title="添加用户" v-model="visible" @confirm="addUser"/>
-            <el-button @click="visible = true">用户POP</el-button>
-
-            <Thx :postId="23865" postType="bbs" :userId="7" :adminBoxcoinEnable="true" :userBoxcoinEnable="true"/>
-
-            <hr />
-
-            <Like mode="heart" :count="100" :showCount="true" />
-            <Down :count="100" :showCount="true" />
-            <Mark label="KEY" value="VALUE" BGL="#000" BGR="#F39" />
-            <Fav post-id="90" post-type="jx3dat" />
-            <Feed post-id="90" post-type="jx3dat" />
-            <Print title="传入标题" />
-            <QRcode />
-            <Sharing />
-
-            <hr />
-
-            <markBy />
-            <menuBy :data="['test1', 'test2']" />
-            <orderBy />
-            <tagBy :data="['PVE', 'PVX']" :type="tag"/>
-            <clientBy type=""/>
-            <zlpBy/>
-
-            <hr />
-
-            <WikiPanel :wiki-post="wikiPost">
-                <template slot="head-title">
-                    <i class="el-icon-location-information"></i>
-                    <span class="u-title">通识正文</span>
-                </template>
-                <template slot="head-actions">
-                    <a class="el-button el-button--primary u-publish">
-                        <i class="el-icon-edit"></i>
-                        <span>完善百科通识</span>
-                    </a>
-                    <span class="u-more">查看更多</span>
-                </template>
-                <template slot="body"
-                    >正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容</template
-                >
-            </WikiPanel>
-            <hr />
-
-            <WikiRevisions type="achievement" source-id="9096" />
-            <hr>
-
-            <WikiComments type="achievement" source-id="9096" />
-            <hr>
+            <el-tabs v-model="tab" type="card">
+                <el-tab-pane label="CMS作品" name="post">
+                    <el-radio-group v-model="post_id">
+                        <el-radio label="35605">测试Markdown</el-radio>
+                        <el-radio label="32035">仅小册</el-radio>
+                        <el-radio label="30017">仅联合创作者</el-radio>
+                        <el-radio label="30582">小册和联合创作者</el-radio>
+                        <el-radio label="31129">无小册和联合创作者</el-radio>
+                    </el-radio-group>
+                    <singlebox :post="post" />
+                </el-tab-pane>
+                <el-tab-pane label="通用组件" name="widget">
+                    <PostHeader :post="post" />
+                    <Creators :postId="30432" style="margin-bottom:10px" />
+                    <Collection :id="59" :defaultVisible="true" />
+                    <UserPop title="添加用户" v-model="visible" @confirm="addUser" />
+                    <el-button @click="visible = true">用户POP</el-button>
+
+                    <Thx :postId="23865" postType="bbs" :userId="7" :adminBoxcoinEnable="true" :userBoxcoinEnable="true" />
+
+                    <hr />
+
+                    <Like mode="heart" :count="100" :showCount="true" />
+                    <Down :count="100" :showCount="true" />
+                    <Mark label="KEY" value="VALUE" BGL="#000" BGR="#F39" />
+                    <Fav post-id="90" post-type="jx3dat" />
+                    <Feed post-id="90" post-type="jx3dat" />
+                    <Print title="传入标题" />
+                    <QRcode />
+                    <Sharing />
+
+                    <hr />
+
+                    <markBy />
+                    <menuBy :data="['test1', 'test2']" />
+                    <orderBy />
+                    <tagBy :data="['PVE', 'PVX']" :type="tag" />
+                    <clientBy type="" />
+                    <zlpBy />
+                </el-tab-pane>
+                <el-tab-pane label="百科组件" name="wiki"
+                    ><WikiPanel :wiki-post="wikiPost">
+                        <template slot="head-title">
+                            <i class="el-icon-location-information"></i>
+                            <span class="u-title">通识正文</span>
+                        </template>
+                        <template slot="head-actions">
+                            <a class="el-button el-button--primary u-publish">
+                                <i class="el-icon-edit"></i>
+                                <span>完善百科通识</span>
+                            </a>
+                            <span class="u-more">查看更多</span>
+                        </template>
+                        <template slot="body">正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容</template>
+                    </WikiPanel>
+                    <hr />
+
+                    <WikiRevisions type="achievement" source-id="9096"/>
+                    <hr />
+
+                    <WikiComments type="achievement" source-id="9096"/>
+                    <hr
+                /></el-tab-pane>
+            </el-tabs>
 
             <RightSidebar>
-                <RightSideMsg>Hello</RightSideMsg >
-                <PostCollection :id="59"/>
+                <RightSideMsg>Hello</RightSideMsg>
+                <PostCollection :id="59" />
             </RightSidebar>
 
             <Footer></Footer>
@@ -102,6 +105,7 @@ import RightSideMsg from "./RightSideMsg.vue";
 import Footer from "./Footer.vue";
 import Bottom from "./Bottom.vue";
 
+import singlebox from "./single/cms-single.vue";
 import PostHeader from "./single/PostHeader.vue";
 import PostCollection from "./single/PostCollection.vue";
 
@@ -145,6 +149,7 @@ export default {
         Bottom,
         RightSidebar,
 
+        singlebox,
         PostHeader,
         PostCollection,
 
@@ -177,39 +182,51 @@ export default {
         WikiRevisions,
         WikiComments,
 
-        UserPop
+        UserPop,
     },
     data: function() {
         return {
+            tab: "post",
+
+            post: "",
+            post_id: "35605",
+
             author: "",
             wikiPost: null,
-            tag : '',
-            visible : false,
-
-            post : ''
+            tag: "",
+            visible: false,
         };
     },
     created: function() {
-        WikiPost.view(11042).then(
-            (res) => {
-                res = res.data;
-                if (res.code === 200) this.wikiPost = res.data;
-            }
-        );
-        axios.get('/api/cms/post/32035').then((res) => {
-            this.post = res.data.data
-        })
+        WikiPost.view(11042).then((res) => {
+            res = res.data;
+            if (res.code === 200) this.wikiPost = res.data;
+        });
     },
     methods: {
-        addUser : function (val){
-            console.log(val)
-        }
+        addUser: function(val) {
+            console.log(val);
+        },
+        loadPost: function() {
+            axios.get(`/api/cms/post/${this.post_id}`).then((res) => {
+                this.post = res.data.data;
+                this.$forceUpdate()
+            });
+        },
+    },
+    watch: {
+        post_id: {
+            immediate: true,
+            handler: function(val) {
+                this.loadPost();
+            },
+        },
     },
 };
 </script>
 
 <style lang="less">
-    body{
-        padding-top:0;
-    }
-</style>
+body {
+    padding-top: 0;
+}
+</style>

package/src/header/nav.vue

@@ -16,7 +16,7 @@
                     <el-dropdown-menu slot="dropdown" class="c-header-menu">
                         <el-dropdown-item
                             v-for="subitem in item.children"
-                            :key="subitem.key"
+                            :key="'header-nav-drop-' + subitem.key"
                             class="u-menu-item"
                         >
                             <a

package/src/single/Collection.vue

@@ -1,18 +1,12 @@
 <template>
     <div class="w-collection" v-if="list && list.length">
         <div class="w-collection-title" @click="handleShow" :class="{ on: visible }">
-            <span>
-                <i class="el-icon-notebook-1"></i> 该作品已被收录至作者的剑三小册
-            </span>
+            <span> <i class="el-icon-notebook-1"></i> 该作品已被收录至作者的剑三小册 </span>
             <a @click.stop :href="id | collectionLink" 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' }"
-                >
+                <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="item | showLink" target="_blank">
                             <!-- <i class="el-icon-link"></i> -->
@@ -30,10 +24,10 @@ import { getLink } from "@jx3box/jx3box-common/js/utils";
 import { getCollection } from "../../service/helper";
 export default {
     name: "Collection",
-    props: ["id",'defaultVisible'],
+    props: ["id", "defaultVisible"],
     inject: [],
     components: {},
-    data: function () {
+    data: function() {
         return {
             visible: this.defaultVisible || false,
             data: {
@@ -43,39 +37,46 @@ 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) {
-                !!~~val && this.loadData();
+            handler: function(val) {
+                if (!!~~val) {
+                    this.loadData();
+                } else {
+                    this.data = {
+                        title: "",
+                        posts: [],
+                    };
+                }
             },
         },
-        defaultVisible : function (val){
-            this.visible = 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?.collection;
             });
         },
     },
     filters: {
-        collectionLink: function (id) {
+        collectionLink: function(id) {
             return getLink("collection", id);
         },
-        showLink: function (item) {
+        showLink: function(item) {
             if (item.type == "custom") {
                 return item.url;
             } else {
@@ -83,12 +84,12 @@ export default {
             }
         },
     },
-    created: function () {},
-    mounted: function () {},
+    created: function() {},
+    mounted: function() {},
 };
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 .w-collection {
     &-title {
         cursor: pointer;
@@ -126,7 +127,7 @@ export default {
 
     counter-reset: collection;
     .u-item {
-        .fz(13px,32px);
+        .fz(13px, 32px);
         border-bottom: 1px solid #eee;
         transition: 0.15s ease-in-out;
         .nobreak;
@@ -143,8 +144,8 @@ export default {
                 color: @pink;
             }
         }
-        &:last-child{
-            border-bottom:none;
+        &:last-child {
+            border-bottom: none;
         }
     }
 
@@ -172,4 +173,4 @@ export default {
         opacity: 0;
     }
 }
-</style>
+</style>

package/src/single/cms-list.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="m-archive-box">
+        <!-- 搜索靠前 -->
+        <slot name="search-before"></slot>
+        <!-- 筛选 -->
+        <div class="m-archive-filter" v-if="$slots.filter">
+            <slot name="filter"></slot>
+        </div>
+        <!-- 搜索靠后 -->
+        <slot name="search-after"></slot>
+        <!-- 列表 -->
+        <slot></slot>
+        <!-- 空 -->
+        <el-alert v-if="!list.length" class="m-archive-null" title="没有找到相关条目" type="info" center show-icon></el-alert>
+        <!-- 下一页 -->
+        <el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" @click="appendPage">加载更多</el-button>
+        <!-- 分页 -->
+        <el-pagination
+            class="m-archive-pages"
+            background
+            layout="total, prev, pager, next,jumper"
+            :hide-on-single-page="true"
+            :page-size="perPage"
+            :total="totalRecords"
+            :current-page.sync="currentPage"
+            @current-change="changePage"
+        ></el-pagination>
+    </div>
+</template>
+<script>
+export default {
+    name: "cms-list",
+    props: ["data", "total", "per", "pages", "page"],
+    data: function() {
+        return {
+            currentPage: this.page || 1,
+        };
+    },
+    computed: {
+        list: function() {
+            return this.data;
+        },
+        totalRecords: function() {
+            return this.total;
+        },
+        totalPages: function() {
+            return this.pages;
+        },
+        perPage: function() {
+            return this.per;
+        },
+        hasNextPage: function() {
+            return this.totalRecords > 1 && this.currentPage < this.totalPages;
+        },
+    },
+    methods: {
+        appendPage: function() {
+            this.$emit("appendPage", ++this.currentPage);
+        },
+        changePage: function(i) {
+            this.$emit("changePage", i);
+            this.$route.query.page = i;
+        },
+    },
+    watch: {
+        page: function(page) {
+            this.currentPage = page;
+        },
+    },
+    mounted: function() {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/cms-list.less";
+</style>

package/src/single/cms-single.vue

@@ -0,0 +1,120 @@
+<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" />
+            <!-- 文集小册 -->
+            <Collection class="m-single-collection" :id="collection_id" :defaultVisible="collection_collapse" />
+            <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">
+                <ArticleMarkdown v-if="isMarkdown" :content="post_content" />
+                <Article v-else :content="post_content" />
+                <slot></slot>
+            </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">
+            <!-- 打赏 -->
+            <Thx class="m-single-thx" :postId="id" :postType="post_type" :userId="author_id" :adminBoxcoinEnable="true" :userBoxcoinEnable="true"/>
+
+            <slot name="single-append"></slot>
+
+            <!-- 评论 -->
+            <div 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>
+    </div>
+</template>
+
+<script>
+import PostHeader from "./PostHeader.vue";
+import Creators from "./Creators.vue";
+import Collection from "./Collection.vue";
+import Thx from "./Thx.vue";
+import Article from "@jx3box/jx3box-editor/src/Article.vue";
+import ArticleMarkdown from "@jx3box/jx3box-editor/src/ArticleMarkdown.vue";
+import Comment from "@jx3box/jx3box-comment-ui/src/Comment.vue";
+import { __visibleMap } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "cms-single",
+    components: {
+        PostHeader,
+        Creators,
+        Collection,
+        Thx,
+        Article,
+        ArticleMarkdown,
+        Comment,
+    },
+    props: ["post", "stat"],
+    data: function() {
+        return {
+        };
+    },
+    computed: {
+        id: function() {
+            return ~~this.post?.ID || 0;
+        },
+        post_type: function() {
+            return this.post?.post_type;
+        },
+        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
+        }
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/cms-single.less";
+</style>