@jx3box/jx3box-common-ui 5.4.5 → 5.5.0

package/assets/css/box.less

@@ -1,14 +1,14 @@
 .c-header-jx3box {
     background-color: @bg-black;
     .z(800);
-    overflow-y:auto;
+    overflow-y: auto;
     .w(100%);
-    box-shadow: 0 5px 5px rgba(0,0,0,.2);
-    transition:0.5s ease-in-out;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+    transition: 0.5s ease-in-out;
     .clearfix;
 
     .none;
-    &.on{
+    &.on {
         .db;
     }
 
@@ -46,7 +46,7 @@
         background-color: @bg-light;
         .pr;
         overflow: hidden;
-        .u-pic-hover{
+        .u-pic-hover {
             .none;
         }
     }
@@ -61,7 +61,8 @@
             // }
         }
     }
-    .u-pic,.u-pic-hover {
+    .u-pic,
+    .u-pic-hover {
         .size(32px);
         .db;
         .auto(x);
@@ -101,21 +102,23 @@
     }
 
     .pr;
-    .u-close{
+    .u-close {
         // .pa;.rb(0);
         .fr;
-        background-color:@color;
+        background-color: @color;
         .fz(13px);
-        padding:5px 10px;
-        i{.mr(3px);}
+        padding: 5px 10px;
+        i {
+            .mr(3px);
+        }
         .pointer;
     }
 }
-.c-header-jx3box.isOverlay{
-    background-color:rgba(0,0,0,.85);
+.c-header-jx3box.isOverlay {
+    background-color: rgba(0, 0, 0, 0.85);
 }
 @media screen and (max-width: @ipad) {
-    .c-jx3box{
+    .c-jx3box {
         .u-app-start {
             clear: none;
         }
@@ -123,42 +126,50 @@
     }
 }
 
-@media screen and (max-width:@phone){
-    .c-jx3box{
-        .u-list{
-            display: flex;
-            flex-wrap: wrap;
-            padding-right:10px;
-            li{
-                .w(25%);
-                .mr(0);
-                // flex:1;
+@media screen and (max-width: @phone) {
+    .c-jx3box {
+        .u-list {
+            padding-right: 20px;
+            // display: flex;
+            // flex-wrap: wrap;
+            li {
+                // flex: 1;
+                margin-right: 15px;
+                margin-bottom: 15px;
+                &:nth-child(4n) {
+                    .mr(0) !important;
+                }
             }
         }
-        .u-item{
-            .mr(20px);
-            .u-txt{
+        .u-item {
+            .size(68px);
+            .u-txt {
                 .fz(10px);
             }
-            .u-pic{
+            .u-pic {
                 .size(28px);
             }
         }
-        li:nth-child(4n) .u-item{
-            .mr(0) !important;
-        }
     }
 }
-@media screen and (max-width:320px){
-    .c-jx3box{
-        .u-item{
-            .size(60px);
-            .u-txt{
-                .fz(10px);
+@media screen and (max-width: 320px) {
+    .c-jx3box {
+        .u-list{
+            li{
+                .mr(12px);
+                .mb(12px);
             }
-            .u-pic{
+        }
+        .u-item {
+            .size(60px);
+            // .u-txt {
+                // .pr;
+                // left:-3px;
+                // transform: scale(0.8);
+            // }
+            .u-pic {
                 .size(28px);
             }
         }
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.4.5",
+    "version": "5.5.0",
     "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.1.2",
         "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>
 
@@ -105,6 +105,7 @@ import RightSideMsg from "./RightSideMsg.vue";
 import Footer from "./Footer.vue";
 import Bottom from "./Bottom.vue";
 
+// import cmsList from "./list/cms-list.vue";
 import singlebox from "./single/cms-single.vue";
 import PostHeader from "./single/PostHeader.vue";
 import PostCollection from "./single/PostCollection.vue";
@@ -149,6 +150,7 @@ export default {
         Bottom,
         RightSidebar,
 
+        // cmsList,
         singlebox,
         PostHeader,
         PostCollection,
@@ -213,6 +215,9 @@ export default {
                 this.$forceUpdate()
             });
         },
+        updateExtend : function (val){
+            console.log(val)
+        }
     },
     watch: {
         post_id: {

package/src/Box.vue

@@ -12,11 +12,11 @@
                     <span class="u-txt">首页</span>
                 </a>
             </li>
-            <li v-for="(item,i) in data" :key="i" :class="{'u-app-start':item.lf}" v-show="item.status && matchedClient(item.client)">
+            <li v-for="(item,i) in list" :key="i" :class="{'u-app-start':item.lf}">
                 <a class="u-item" :href="item.href" :target="item.href | getTarget">
-                    <img class="u-pic" svg-inline :src="item.img | getBoxIcon" />
-                    <img class="u-pic-hover" svg-inline :src="item.hover | getBoxIcon" />
-                    <span class="u-txt">{{item.name}}</span>
+                    <img class="u-pic" :src="item.img | getBoxIcon" />
+                    <!-- <img class="u-pic-hover" svg-inline :src="item.hover | getBoxIcon" /> -->
+                    <span class="u-txt">{{item.abbr}}</span>
                 </a>
             </li>
         </ul>
@@ -55,6 +55,11 @@ export default {
         originicon: function () {
             return __imgPath + "image/box/origin.svg";
         },
+        list : function (){
+            return this.data.filter((item,i) => {
+                return item.status && (item.client == this.client || item.client == 'all')
+            })
+        }
     },
     methods: {
         closeBox: function () {
@@ -95,7 +100,7 @@ export default {
             return __imgPath + "image/box/" + val;
         },
         getTarget: function (val) {
-            if (window.innerWidth < 768 || val.startsWith("/")) {
+            if (window.innerWidth < 768 || val?.startsWith("/")) {
                 return "_self";
             } else {
                 return "_blank";

package/src/header/nav.vue

@@ -15,8 +15,8 @@
                     ></a>
                     <el-dropdown-menu slot="dropdown" class="c-header-menu">
                         <el-dropdown-item
-                            v-for="subitem in item.children"
-                            :key="'header-nav-drop-' + subitem.key"
+                            v-for="(subitem, subIndex) in item.children"
+                            :key="'header-nav-drop-' + subitem.key + subIndex"
                             class="u-menu-item"
                         >
                             <a

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>
 

package/assets/css/cms-list.less

@@ -1,354 +0,0 @@
-// 列表搜索
-.m-archive-search{
-    .mb(10px);
-    .el-select .el-input {
-        width: 80px;
-    }
-    .u-switch{
-        .el-switch__label{
-            .bold;
-            color:#666;
-        }
-    }
-    .pl(122px);
-    .pr;
-    .u-publish{
-        .pa;.lt(0);
-    }
-}
-@media screen and (max-width:@phone){
-    .m-archive-search{
-        .pl(0);
-        .u-publish{
-            .none;
-        }
-    }
-}
-// 排序
-.m-archive-filter {
-    .fz(12px);
-    margin-bottom: 10px;
-    padding-bottom: 5px;
-    .clearfix;
-    border-bottom: 1px solid #eee;
-    .u-publish {
-        .fl;
-        .h(32px);
-        .mr(10px);
-        .ml(0);
-    }
-    .w-filter-mark,.w-filter-tag,.w-filter-client{
-        .fl;
-    }
-    .w-filter-client{
-        margin-top:(32px - 28px )/2;
-        .mr(10px);
-    }
-    .w-filter-mark,.w-filter-tag{
-        margin-top:8px;
-    }
-    .w-filter-menu{
-        .fl;
-        .mt(6px);
-        .mr(15px);
-    }
-
-    .w-filter-order{
-        .fr;
-        margin-top:8px;
-    }
-}
-@media screen and (max-width: @ipad) {
-    .m-archive-filter {
-        .u-publish {
-            .mr(10px);
-        }
-        .w-filter-mark,.w-filter-tag,.w-filter-order{
-            margin-top:0;
-        }
-        .w-filter-mark,.w-filter-tag{
-            .mr(10px);
-        }
-    }
-}
-@media screen and (max-width: @phone) {
-    .m-archive-filter {
-        .none;
-    }
-}
-// 为空
-.m-archive-null {
-    margin-top: 10px;
-}
-
-// 加载更多
-.m-archive-more {
-    .mb(10px);
-    .w(100%);
-    .none;
-}
-.m-archive-more.show {
-    .db;
-}
-
-// 分页
-.m-archive-pages {
-    overflow-x: auto;
-}
-@media screen and (max-width:@phone){
-    .m-archive-pages{
-        .el-pagination__jump{
-            .none !important; 
-        }
-    }
-}
-
-// 普通列表
-.m-archive-list {
-    .u-list {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-    }
-
-    .u-item {
-        border-bottom: 1px solid @border-hr;
-        padding-bottom: 20px;
-        .mb(20px);
-        .clearfix;
-        .pr;
-    }
-
-    // 海报
-    .u-banner {
-        .fl;
-        .mr(10px);
-        .w(180px);
-        .h(100px);
-        overflow: hidden;
-        .db;
-        .pr;
-        .z(1);
-        border: 1px solid #eee;
-        padding: 5px;
-        box-sizing: border-box;
-        img {
-            .size(100%);
-            filter: saturate(120%);
-            transition: 0.06s all ease-in-out;
-        }
-        transition: 0.06s border ease-in-out;
-        &:hover {
-            img {
-                filter: saturate(140%) brightness(120%);
-            }
-            border-color: @border;
-        }
-    }
-
-    // 标题
-    .u-post {
-        margin: 0;
-        padding: 0;
-        .nobreak;
-        .mb(5px);
-        .u-icon {
-            .size(16px);
-            .y(-3px);
-            .mr(5px);
-        }
-        &.isSticky {
-            .u-title::before {
-                content: "🎯";
-                .mr(5px);
-            }
-            // .u-title:hover{
-            //     box-shadow: 0 1px 0 #f00;
-            // }
-        }
-        .u-title {
-            // color:@darkblue;
-            font-weight:400;
-            &:hover {
-                box-shadow: 0 1px 0 @primary;
-            }
-        }
-        .fz(15px, 2);
-        font-weight: normal;
-        .lh(2);
-        font-weight: 400;
-    }
-
-    // 角标
-    .u-marks {
-    }
-    .u-mark {
-        font-style: normal;
-        font-size: 12px;
-        padding: 1px 5px 2px 5px;
-        margin-left: 5px;
-        border-radius: 2px;
-        background-color: #6f42c1;
-        color: #fff;
-        .ml(5px);
-    }
-
-    // 内容
-    .u-content {
-        .db;
-        padding-left: 20px;
-        .pr;
-    }
-
-    // 内容·描述类
-    .u-desc {
-        .db;
-        .fz(12px, 1.8);
-        color: #555;
-        .break(2);
-        .mb(6px);
-        padding: 0 2px;
-    }
-
-    // 内容·meta列表
-    .u-metalist {
-        .nobreak;
-        .db;
-        .fz(12px, 25px);
-        .mb(4px);
-        strong {
-            .dbi;
-            .y(top);
-            padding: 0 10px;
-            .mr(10px);
-            .r(4px);
-            background-color: #f1f8ff;
-            color: @color-link;
-            font-weight: normal;
-        }
-        em {
-            font-style: normal;
-        }
-        b {
-            font-weight: normal;
-        }
-        a {
-            color: #333;
-            &:hover {
-                color: @color-link;
-                box-shadow: 0 1px 0 @color-link;
-            }
-        }
-    }
-    .u-tag {
-        .db;
-        .nobreak;
-        a,
-        b {
-            padding: 0.2em 0.8em;
-            margin: 0 0.5em 0 0;
-            background-color: #f1f8ff;
-            border-radius: 3px;
-            .fz(12px);
-            color: #4989d2;
-        }
-        a:hover {
-            background-color: #def;
-        }
-    }
-    .u-types {
-        .db;
-        .nobreak;
-        b {
-            padding: 0.1em 0.8em;
-            margin: 0 0.5em 0.5em 0;
-            border-radius: 3px;
-            .fz(12px);
-            .dbi;
-            .y(top);
-        }
-    }
-
-    // 底部
-    .u-misc {
-        .db;
-        .pa;
-        .rb(10px, 24px);
-        .x(right);
-        .fz(12px, 20px);
-        color: #777;
-    }
-
-    .u-author{
-        // .pa;.rt(0);
-    }
-    .u-author-avatar {
-        .size(24px);
-        .y;
-        .r(2px);
-        .mr(5px);
-        // .fr;
-        // .ml(5px);
-    }
-    .u-author-name {
-        .fz(12px,24px);
-        // .fl;
-        color:#666;
-        &:hover {
-            color:@pink;
-        }
-    }
-    .u-date {
-        .db;
-        .mt(3px);
-        .clear;
-    }
-
-    .u-down {
-        // .u-btn-white;
-        i {
-            .size(12px);
-            .y(-1px);
-        }
-    }
-    .u-pipe {
-        margin: 0 5px;
-        color: #999;
-    }
-}
-@media screen and (max-width: @ipad) {
-    .m-archive-list {
-        .u-banner {
-            .w(100px);
-            .h(55px);
-            padding: 3px;
-            .fr;
-            margin-left: 10px;
-            margin-right: 0;
-        }
-
-        .u-post {
-            white-space: normal;
-            word-break: break-all;
-            .break(2);
-            .fz(14px, 22px);
-        }
-
-        .u-metalist,
-        .u-down,
-        .u-view {
-            .none;
-        }
-        .u-tag {
-            .mb(8px);
-        }
-
-        .u-misc {
-            .ps;
-            .x(left);
-        }
-        .u-author-name {
-            color: #555;
-        }
-    }
-}

package/src/single/cms-list.vue

@@ -1,77 +0,0 @@
-<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>