@jx3box/jx3box-common-ui 5.3.8 → 5.4.2

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,67 +13,74 @@
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
-            
-            
-            <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>
-                <div style="height:1200px;">
-                    <RightSideMsg>Test</RightSideMsg>
-
-                    <Author :author="author" uid="5" />
-                </div>
+                <RightSideMsg>Hello</RightSideMsg>
+                <PostCollection :id="59" />
             </RightSidebar>
 
             <Footer></Footer>
@@ -105,6 +105,10 @@ 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";
+
 import Thx from "./single/Thx.vue";
 import Collection from "./single/Collection.vue";
 import Creators from "./single/Creators.vue";
@@ -145,6 +149,10 @@ export default {
         Bottom,
         RightSidebar,
 
+        singlebox,
+        PostHeader,
+        PostCollection,
+
         Thx,
         Collection,
         Creators,
@@ -174,28 +182,51 @@ export default {
         WikiRevisions,
         WikiComments,
 
-        UserPop
+        UserPop,
     },
     data: function() {
         return {
+            tab: "post",
+
+            post: "",
+            post_id: "35605",
+
             author: "",
             wikiPost: null,
-            tag : '',
-            visible : false,
+            tag: "",
+            visible: false,
         };
     },
     created: function() {
-        WikiPost.view(11042).then(
-            (res) => {
-                res = res.data;
-                if (res.code === 200) this.wikiPost = res.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>

package/src/header/nav.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="c-header-nav" v-if="finalNav">
-        <div class="u-item-box" v-for="item in finalNav" :key="item.key">
+        <div class="u-item-box" v-for="item in finalNav" :key="'header-nav-' + item.key">
             <template
                 v-if="item.status && item.children && item.children.length"
             >
@@ -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/header/user.vue

@@ -6,8 +6,15 @@
                 <el-tooltip effect="dark" content="我的消息" placement="bottom">
                     <a class="u-msg" :href="url.msg">
                         <i class="u-icon u-icon-msg">
-                            <i class="u-pop" style="display: none;" v-show="pop"></i>
-                            <img svg-inline src="../../assets/img/header/msg.svg" />
+                            <i
+                                class="u-pop"
+                                style="display: none"
+                                v-show="pop"
+                            ></i>
+                            <img
+                                svg-inline
+                                src="../../assets/img/header/msg.svg"
+                            />
                         </i>
                     </a>
                 </el-tooltip>
@@ -17,14 +24,22 @@
             <div class="c-header-panel" id="c-header-panel">
                 <el-tooltip effect="dark" content="发布中心" placement="bottom">
                     <a class="u-post" :href="url.publish">
-                        <img class="u-add" svg-inline src="../../assets/img/header/add.svg" />
+                        <img
+                            class="u-add"
+                            svg-inline
+                            src="../../assets/img/header/add.svg"
+                        />
                     </a>
                 </el-tooltip>
             </div>
 
             <!-- user info -->
             <div class="c-header-info">
-                <div class="c-header-profile" id="c-header-profile" @click="showmenu">
+                <div
+                    class="c-header-profile"
+                    id="c-header-profile"
+                    @click="showmenu"
+                >
                     <img class="u-avatar" :src="user.avatar" />
                     <span class="u-dropdown"></span>
                     <ul class="u-menu" v-show="!fold">
@@ -47,14 +62,17 @@
                                 href="/vip/premium?from=header_usermenu"
                                 target="_blank"
                             >
-                                <i class="i-icon-vip" :class="{ on: isVIP || isPRO }">{{ vipType }}</i>
+                                <i
+                                    class="i-icon-vip"
+                                    :class="{ on: isVIP || isPRO }"
+                                    >{{ vipType }}</i
+                                >
                                 <span class="u-vip-type">
                                     <template v-if="isVIP || isPRO">
-                                        {{ vipTypeTxt
-                                        }}
-                                        <span
-                                            class="u-vip-left"
-                                        >({{ vipLeftDays }}天)</span>
+                                        {{ vipTypeTxt }}
+                                        <span class="u-vip-left"
+                                            >({{ vipLeftDays }}天)</span
+                                        >
                                     </template>
                                     <template v-else>升级账号类型</template>
                                 </span>
@@ -63,7 +81,10 @@
                         </li>
                         <hr />
                         <template v-for="(item, i) in panel">
-                            <li :key="'panel-' + i" v-if="isEditor || !item.onlyAdmin">
+                            <li
+                                :key="'panel-' + i"
+                                v-if="isEditor || !item.onlyAdmin"
+                            >
                                 <a :href="item.link">{{ item.label }}</a>
                             </li>
                         </template>
@@ -104,7 +125,7 @@ export default {
     data: function () {
         return {
             panel,
-            isEditor : false,
+            isEditor: false,
 
             // 是否有消息
             pop: false,
@@ -200,7 +221,7 @@ export default {
             });
         },
         loadPanel: function () {
-            getMenu('panel').then((res) => {
+            getMenu("panel").then((res) => {
                 this.panel = res.data?.data?.val || panel;
             });
         },
@@ -237,7 +258,7 @@ export default {
         // 初始化
         init: function () {
             if (this.isLogin) {
-                this.isEditor = User.isEditor()
+                this.isEditor = User.isEditor();
                 this.checkMSG();
                 this.loadPanel();
                 this.loadAsset();

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/PostCollection.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="m-single-collection" v-if="list && list.length">
+        <div class="u-title"><i class="el-icon-connection"></i> 关联</div>
+        <ul class="u-list">
+            <li v-for="(item, i) in list" :key="i">
+                <el-tooltip class="item" effect="dark" :content="item.title" placement="left">
+                    <a :href="item | showLink" target="_blank">
+                        <i class="el-icon-link"></i>
+                        {{ item.title }}
+                    </a>
+                </el-tooltip>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { getLink } from "@jx3box/jx3box-common/js/utils";
+import { getCollection } from "../../service/helper";
+export default {
+    name: "PostCollection",
+    props: ["id", "store"],
+    components: {},
+    data: function() {
+        return {
+            data: {
+                title: "",
+                posts: [],
+            },
+        };
+    },
+    computed: {
+        list: function() {
+            return this.data?.posts || this.store?.posts;
+        },
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function(val) {
+                !!~~val && this.loadData();
+            },
+        },
+    },
+    methods: {
+        loadData: function() {
+            getCollection(this.id).then((res) => {
+                this.data = res.data?.data?.collection;
+            });
+        },
+    },
+    filters: {
+        showLink: function(item) {
+            if (item.type == "custom") {
+                return item.url;
+            } else {
+                return getLink(item.type, item.id);
+            }
+        },
+    },
+};
+</script>
+<style scoped lang="less">
+.m-single-collection {
+    .u-title {
+        font-weight: 300;
+        font-size: 20px;
+    }
+    .u-list {
+        list-style: none;
+        padding: 10px 20px;
+        margin: 0;
+        li {
+            .fz(13px, 36px);
+        }
+        a {
+            .db;
+            transition: 0.15s ease-in-out;
+            .nobreak;
+            &:hover {
+                background-color: #e6f0fb;
+            }
+        }
+    }
+}
+</style>

package/src/single/PostContents.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="m-single-contents">
+        <!-- TODO: -->
+    </div>
+</template>
+
+<script>
+export default {
+   name : 'PostContents',
+   props:[],
+   components : {},
+   data : function(){
+       return {
+           
+       }
+   },
+   computed:{},
+   watch:{},
+   methods:{},
+   filters:{},
+   created:function(){},
+   mounted:function(){},
+}
+</script>