@jx3box/jx3box-common-ui 5.4.5 → 5.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.4.5",
+    "version": "5.4.7",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -33,7 +33,7 @@
         "@jx3box/jx3box-comment-ui": "^1.6.6",
         "@jx3box/jx3box-common": "^6.7.8",
         "@jx3box/jx3box-data": "^1.8.3",
-        "@jx3box/jx3box-editor": "^1.0.7",
+        "@jx3box/jx3box-editor": "^1.0.8",
         "axios": "^0.19.2",
         "element-ui": "^2.13.2",
         "jquery": "^3.5.1",

package/src/App.vue

@@ -8,7 +8,6 @@
 
         <LeftSidebar :open="true">
             <LeftSideToggle :mobileOnly="true" />
-            <div id="directory"></div>
             <Author :author="author" :uid="8" />
         </LeftSidebar>
 
@@ -16,13 +15,13 @@
             <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="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" />
+                    <singlebox :post="post" @extendUpdate="updateExtend"/>
                 </el-tab-pane>
                 <el-tab-pane label="通用组件" name="widget">
                     <PostHeader :post="post" />
@@ -80,6 +79,7 @@
 
             <RightSidebar>
                 <RightSideMsg>Hello</RightSideMsg>
+                <div id="directory"></div>
                 <PostCollection :id="59" />
             </RightSidebar>
 
@@ -213,6 +213,9 @@ export default {
                 this.$forceUpdate()
             });
         },
+        updateExtend : function (val){
+            console.log(val)
+        }
     },
     watch: {
         post_id: {

package/src/single/Collection.vue

@@ -69,6 +69,7 @@ export default {
         loadData: function() {
             getCollection(this.id).then((res) => {
                 this.data = res.data?.data?.collection;
+                this.$emit('collectionUpdate',this.data)
             });
         },
     },

package/src/single/PostCollection.vue

@@ -31,7 +31,7 @@ export default {
     },
     computed: {
         list: function() {
-            return this.data?.posts || this.store?.posts;
+            return this.store?.posts || this.data?.posts;
         },
     },
     watch: {

package/src/single/PostDirectory.vue

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

@@ -10,7 +10,7 @@
             <!-- 联合创作者 -->
             <Creators class="m-single-creators" :postId="id" :postType="post_type" />
             <!-- 文集小册 -->
-            <Collection class="m-single-collection" :id="collection_id" :defaultVisible="collection_collapse" />
+            <Collection class="m-single-collection" :id="collection_id" :defaultVisible="collection_collapse" @collectionUpdate="updateCollection"/>
             <slot name="single-prepend"></slot>
         </div>
 
@@ -19,8 +19,8 @@
             <el-divider content-position="left">JX3BOX</el-divider>
             <div class="m-single-content">
                 <slot></slot>
-                <ArticleMarkdown v-if="isMarkdown" :content="post_content" />
-                <Article v-else :content="post_content" />
+                <ArticleMarkdown v-if="isMarkdown" :content="post_content" @directoryRendered="updateDirectory"/>
+                <Article v-else :content="post_content" @directoryRendered="updateDirectory"/>
             </div>
         </div>
         <div class="m-single-null" v-else>
@@ -73,6 +73,8 @@ export default {
     props: ["post", "stat"],
     data: function() {
         return {
+            collection_data : '',
+            directory : false
         };
     },
     computed: {
@@ -111,8 +113,31 @@ export default {
         },
         allow_comment : function (){
             return !this.post?.comment
+        },
+        extend_data : function (){
+            return {
+                collection_data : this.collection_data,
+                directory : this.directory
+            }
         }
     },
+    methods : {
+        updateCollection : function (val){
+            this.collection_data = val
+        },
+        updateDirectory : function (val){
+            this.directory = val
+        }
+    },
+    watch : {
+        extend_data : {
+            deep : true,
+            immediate : true,
+            handler : function (val){
+                this.$emit('extendUpdate',val)
+            }
+        }
+    }
 };
 </script>