@jx3box/jx3box-common-ui 5.3.8 → 5.4.2

package/src/single/PostHeader.vue

@@ -0,0 +1,328 @@
+<template>
+    <header class="m-single-header" v-if="post">
+        <!-- 标题 -->
+        <div class="m-single-title">
+            <span class="u-title u-sub-block" :href="url" :title="title">
+                <i class="u-original" v-if="isOriginal">原创</i>
+                <i class="u-private" v-if="post.post_status != 'publish'">
+                    <i class="el-icon-lock" v-if="post.post_status == 'draft' || post.post_status == 'pending' || ~~post.visible" style="color:#fb9b24"></i>
+                    <i class="el-icon-delete" v-if="post.post_status == 'dustbin'" style="color:#c00"></i>
+                </i>
+                <span class="u-title-text">{{ title }}</span>
+            </span>
+        </div>
+
+        <!-- 信息 -->
+        <div class="m-single-info">
+            <!-- 用户名 -->
+            <div class="u-author u-sub-block">
+                <i class="u-author-icon">
+                    <img svg-inline src="../../assets/img/single/author.svg" />
+                </i>
+                <a class="u-name" :href="author_link">{{ author_name }}</a>
+            </div>
+
+            <!-- 自定义字段 -->
+            <!-- <template v-if="metas && metas.length">
+            <div class="u-meta u-sub-block" v-for="(meta_value,meta_key) in metas" :key="meta_key">
+                <em class="u-label">{{meta_key}}</em>
+                <span class="u-value">{{meta_value}}</span>
+            </div>
+            </template> -->
+            <slot></slot>
+
+            <!-- 客户端 -->
+            <div class="u-meta u-sub-block">
+                <em class="u-label">适用客户端</em>
+                <span class="u-value u-client" :class="client">{{ client | showClientLabel }}</span>
+            </div>
+
+            <!-- 发布日期 -->
+            <span class="u-podate u-sub-block"  :title="'发布日期:' + post_time">
+                <i class="u-icon-podate">
+                    <img svg-inline src="../../assets/img/single/podate.svg" />
+                </i>
+                <time>{{ post_date }}</time>
+            </span>
+
+            <!-- 最后更新 -->
+            <span class="u-modate u-sub-block" :title="'最后更新:' + update_time">
+                <i class="u-icon-modate">
+                    <img svg-inline src="../../assets/img/single/modate.svg" />
+                </i>
+                <time>{{ update_date }}</time>
+            </span>
+
+            <!-- 查看次数 -->
+            <span class="u-views u-sub-block">
+                <i class="el-icon-view"></i>
+                {{ views }}
+            </span>
+
+            <!-- 编辑 -->
+            <a class="u-edit u-sub-block" :href="edit_link" v-if="canEdit">
+                <i class="u-icon-edit el-icon-edit-outline"></i>
+                <span>编辑</span>
+            </a>
+        </div>
+    </header>
+</template>
+
+<script>
+import { __Root } from "@jx3box/jx3box-common/data/jx3box.json";
+import { showDate, showTime } from "@jx3box/jx3box-common/js/moment";
+import { editLink, authorLink } from "@jx3box/jx3box-common/js/utils.js";
+import User from "@jx3box/jx3box-common/js/user.js";
+import client_map from "../../assets/data/clients.json";
+export default {
+    name: "single-header",
+    props: ["post", "stat"],
+    data: function() {
+        return {};
+    },
+    computed: {
+        url: function() {
+            return location.href;
+        },
+        isOriginal: function() {
+            return !!~~this.post?.original;
+        },
+        title: function() {
+            return this.post?.post_title || "无标题";
+        },
+        author_link: function() {
+            return authorLink(this.post?.post_author);
+        },
+        author_name: function() {
+            return this.post?.author || "匿名";
+        },
+        post_date: function() {
+            return showDate(new Date(this.post?.post_date));
+        },
+        update_date: function() {
+            return showDate(new Date(this.post?.post_modified));
+        },
+        post_time: function() {
+            return showTime(new Date(this.post?.post_date));
+        },
+        update_time: function() {
+            return showTime(new Date(this.post?.post_modified));
+        },
+        views: function() {
+            return this.stat?.views || "-";
+        },
+        edit_link: function() {
+            return editLink(this.post?.post_type, this.post?.ID);
+        },
+        canEdit: function() {
+            return this.post?.post_author == User.getInfo().uid || User.isEditor();
+        },
+        client: function() {
+            return this.post?.client || "std";
+        },
+    },
+    methods: {},
+    mounted: function() {},
+    filters: {
+        showClientLabel: function(val) {
+            return client_map[val];
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-single-header {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 280px;
+    .pr;
+    .u-sub-block {
+        .dbi;
+        .y(top);
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-header {
+        padding-right: 0;
+    }
+}
+@media print {
+    .m-single-header {
+        padding-right: 0;
+    }
+}
+
+.m-single-title {
+    .fz(32px);
+    padding: 1px 0;
+
+    .u-title {
+        color: @color;
+        // &:hover {
+        //     color: @primary;
+        // }
+        letter-spacing: 0.5px;
+        font-weight: 300;
+        .db;
+        .nobreak;
+    }
+    .u-author {
+        .pr;
+    }
+
+    .u-original {
+        background-color: #6f42c1;
+        color: #fff;
+        .fz(14px, 20px);
+        font-style: normal;
+        font-weight: normal;
+        padding: 2px 5px;
+        .mr(5px);
+        // .fl;
+    }
+
+    .u-private {
+        .y(-2px);
+        margin-right: 5px;
+        color: #111;
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-title {
+        .fz(1rem, 1.8);
+        .u-title {
+            word-break: break-all;
+            white-space: normal;
+            font-weight: normal;
+        }
+    }
+}
+@media print {
+    .m-single-title {
+        .x;
+    }
+}
+
+.m-single-info {
+    margin-top: 10px;
+    .clearfix;
+    .fz(12px, 20px);
+    color: #666;
+
+    @origin: #0eb7ce;
+    @std: #f0b400;
+    @all: #a26ef7;
+
+    .u-client {
+        // .fl;
+        font-style: normal;
+        .fz(12px);
+        padding: 0px 5px;
+        .r(3px);
+        // .mr(10px);
+
+        &.std {
+            border: 1px solid @std;
+            color: @std;
+        }
+
+        &.origin {
+            border: 1px solid @origin;
+            color: @origin;
+        }
+
+        &.all {
+            border: 1px solid @all;
+            color: @all;
+        }
+    }
+
+    * {
+        .dbi;
+    }
+
+    svg {
+        fill: #666;
+        .size(16px);
+        .y;
+        .mr(3px);
+    }
+
+    .u-sub-block {
+        .mr(15px);
+        .fl;
+    }
+
+    .u-author {
+        a:hover {
+            box-shadow: 0 1px 0 @color-link;
+        }
+        i {
+            .pr;
+            top: -2px;
+        }
+    }
+
+    .u-label {
+        .mr(5px);
+        background-color: #eee;
+        padding: 0 5px;
+        .r(2px);
+        font-style: normal;
+    }
+    .u-value {
+    }
+
+    .u-views {
+        i {
+            .fz(15px);
+            .y;
+        }
+    }
+
+    .u-edit {
+        i {
+            &:before {
+                font-size: 16px;
+            }
+            .pr;
+            top: 2px;
+            .mr(3px);
+        }
+        &:hover {
+            box-shadow: 0 1px 0 @color-link;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .m-single-info {
+        .u-meta {
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-single-info {
+        .u-podate {
+            .none;
+        }
+    }
+}
+@media print {
+    .m-single-info {
+        .u-meta,
+        .u-views,
+        .u-edit {
+            .none;
+        }
+        .x;
+        .u-sub-block {
+            float: none;
+        }
+        .u-name {
+            color: @color;
+        }
+    }
+}
+</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>