@jx3box/jx3box-ui 0.0.1

package/src/interact/Share.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="w-share2">
+        <el-popover trigger="hover" placement="right" popper-class="u-share2-pop" width="auto">
+            <div class="u-share2-content">
+                <div class="u-share2-content-main">
+                    <div
+                        v-for="shareItem in shareList"
+                        class="u-share2-item"
+                        :key="shareItem.key"
+                        @click="share(shareItem.key)"
+                        title="分享"
+                    >
+                        <img class="u-share-icon" svg-inline :src="shareItem.img" :alt="shareItem.name">
+                        <div class="u-share2-name">{{ shareItem.name }}</div>
+                    </div>
+                    <!-- <p class="tip">将文章链接贴</p> -->
+                </div>
+                <div class="u-share2-wechat">
+                    <qrcode-vue
+                        class="u-pic"
+                        :value="url.href"
+                        :size="75"
+                        level="H"
+                    ></qrcode-vue>
+                    <span>微信扫一扫分享</span>
+                </div>
+            </div>
+
+            <template #reference>
+                <!-- <el-tooltip class="item" effect="dark" content="分享" placement="top"> -->
+                    <div v-if="simple">
+                        <img class="u-icon u-simple-icon" svg-inline :src="iconPath" />
+                        <!-- <i class="el-icon-position"></i> -->
+                        <span class="u-text">分享</span>
+                    </div>
+                    <img
+                        v-else
+                        class="u-icon"
+                        svg-inline
+                        :src="iconPath"
+                    />
+                <!-- </el-tooltip> -->
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import QrcodeVue from "qrcode.vue";
+
+const { __imgPath } = JX3BOX;
+export default {
+    name: "ShareComp",
+    props: ["postType", "postId", "meta", "simple"],
+    data: function () {
+        return {
+            apis: {
+                qzone: 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',
+                qq: 'http://connect.qq.com/widget/shareqq/index.html?',
+                wechat: '',
+                weibo: 'https://service.weibo.com/share/share.php?',
+                tieba: 'http://tieba.baidu.com/f/commit/share/openShareApi?'
+            },
+            shareList: [
+                {
+                    name: '微博',
+                    key: 'weibo',
+                    img: require('../../assets/img/widget/weibo.svg'),
+                },
+                {
+                    name: 'QQ',
+                    key: 'qq',
+                    img: require('../../assets/img/widget/qq.svg'),
+                },
+                {
+                    name: 'QQ空间',
+                    key: 'qzone',
+                    img: require('../../assets/img/widget/qzone.svg'),
+                },
+                {
+                    name: '贴吧',
+                    key: 'tieba',
+                    img: require('../../assets/img/widget/tieba.svg'),
+                },
+                /* {
+                    name: '微信',
+                    key: 'wechat',
+                    img: require('../../assets/img/widget/weixin.svg'),
+                }, */
+            ]
+        };
+    },
+    computed: {
+        ready() {
+            return !!(this.postType && this.postId);
+        },
+        url() {
+            return document.location;
+        },
+        title() {
+            return this.meta?.title || document.title;
+        },
+        pic: function() {
+            return this.meta?.banner ||  __imgPath + `image/common/logo.png`;
+        },
+        urls: function() {
+            return  {
+                qzone: this.shareToQzone,
+                weibo: this.shareToWeibo,
+                tieba: this.shareToTieba,
+                qq: this.shareToQQ,
+            }
+        },
+        iconPath() {
+            return JX3BOX.__cdn + "design/vector/icon/share.svg"
+        },
+    },
+    methods: {
+        init: function () {
+        },
+        shareToWeibo: function (){
+            return this.apis['weibo']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&pic=${this.pic}`;
+        },
+        shareToQzone: function (){
+            return this.apis['qzone']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + '&sharesource=qzone'
+                + `&summary=${this.meta?.summary || ''}`
+                + `&desc=${this.meta?.desc || ''}`
+                + `&pics=${this.pic}`;
+        },
+        shareToQQ: function (){
+            return this.apis['qq']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&pics=${this.pic}`;
+        },
+        shareToTieba: function (){
+            return this.apis['tieba']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&summary=${this.meta?.summary || ''}`
+                + `&desc=${this.meta?.desc || ''}`
+                + `&pic=${this.pic}`;
+        },
+        share: function (val){
+            window.open(this.urls[val](), "_blank")
+        }
+    },
+    mounted: function () {
+        this.init();
+    },
+    components: {
+        QrcodeVue
+    }
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/interact/share2.less";
+</style>

package/src/interact/WatchLater.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="w-watch-later" @click="onWatchLaterClick">
+        <el-tooltip effect="dark" :content="favContent" placement="top-start">
+            <div>
+                <img v-if="favorite" class="u-icon" svg-inline :src="rmSrc" />
+                <img v-else class="u-icon" svg-inline :src="addSrc" />
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+const JX3BOX = require("@jx3box/jx3box-common/data/jx3box.json");
+import { addWatchLater, delWatchLater } from "../../service/fav";
+import { omit } from "lodash";
+export default {
+    name: "WatchLater",
+    props: {
+        category: {
+            type: String,
+            default: "article",
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+        authorId: {
+            type: Number,
+            default: 0,
+        },
+        banner: {
+            type: String,
+            default: "",
+        },
+        contentId: {
+            type: Number,
+            default: 0,
+        }
+    },
+    data: function () {
+        return {
+            login: User.isLogin(),
+            favorite: false,
+        };
+    },
+    computed: {
+        favContent() {
+            return this.favorite ? "已添加稍后在看" : "添加至稍后再看";
+        },
+        addSrc() {
+            return JX3BOX.__cdn + "design/vector/icon/time.svg"
+        },
+        rmSrc() {
+            return JX3BOX.__cdn + "design/vector/icon/time1.svg"
+        },
+        data() {
+            return {
+                category: this.category,
+                link: location.href,
+                title: this.title,
+                author_id: this.authorId,
+                banner: this.banner,
+                content_meta_id: this.contentId,
+            }
+        }
+    },
+    methods: {
+        onWatchLaterClick: function () {
+            if (this.login) {
+                this.favorite ? this.rmWatchLater() : this.addWatchLater();
+            } else {
+                User.toLogin();
+            }
+        },
+        addWatchLater: function () {
+            // add watch later
+            addWatchLater(this.data).then(() => {
+                this.favorite = true;
+            });
+        },
+        rmWatchLater: function () {
+            // remove watch later
+            delWatchLater(omit(this.data, ['title', 'author_id', 'banner', 'content_meta_id'])).then(() => {
+                this.favorite = false;
+            });
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.w-watch-later {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+        top: 4px;
+        .pr;
+    }
+}
+</style>

package/src/main.js

@@ -0,0 +1,72 @@
+// 1.Create APP
+import { createApp } from "vue";
+import App from "./App.vue";
+const app = createApp(App);
+
+// 2.Router
+
+// 3.Store
+
+// 4.i18n
+import { Jx3boxUiI18n, getJx3boxUiAvailableLocales } from "../index.js";
+
+const __langKey = (localStorage.getItem("lang") || "zh-cn").toLowerCase();
+const __langMap = {
+    "zh-cn": "zh-CN",
+    "en-us": "en-US",
+    "zh-tw": "zh-TW",
+    vi: "vi",
+};
+const __preferredI18nLocale = __langMap[__langKey] || "zh-CN";
+const __supportedI18nLocales = getJx3boxUiAvailableLocales();
+const __i18nLocale = __supportedI18nLocales.includes(__preferredI18nLocale) ? __preferredI18nLocale : "zh-CN";
+
+app.use(Jx3boxUiI18n, {
+    locale: __i18nLocale,
+});
+
+// 5.Components
+import { createHead } from "@vueuse/head";
+const head = createHead();
+app.use(head);
+
+// 6.UI
+
+// 6.1 JX3BOX UI
+import "@jx3box/jx3box-common/css/normalize.css";
+import "@jx3box/jx3box-common/css/font.css";
+
+// 6.2 Element Plus
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import en from "element-plus/es/locale/lang/en";
+import zhTw from "element-plus/es/locale/lang/zh-tw";
+import vi from "element-plus/es/locale/lang/vi";
+import "element-plus/dist/index.css";
+import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+
+const __elementLocaleMap = {
+    "zh-CN": zhCn,
+    "en-US": en,
+    "zh-TW": zhTw,
+    vi,
+};
+const __elementLocale = __elementLocaleMap[__i18nLocale] || zhCn;
+app.use(ElementPlus, {
+    locale: __elementLocale,
+});
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+// 6.3 Tailwind
+import "@jx3box/jx3box-common/css/tailwind.css";
+
+
+// 本地组件批量注册
+import { install } from "../index.js";
+install(app);
+
+// 3.Mount DOM
+app.mount("#app");

package/src/single/Author.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="c-author">
+        <AuthorInfo :uid="uid" :anonymous="anonymous" @ready="installModules" />
+        <template v-if="data">
+            <div class="u-interact">
+                <!-- <AuthorFollow style="margin-right: 8px;" :uid="uid" /> -->
+                <AuthorRss style="margin-right: 8px" :uid="uid" :data="data" />
+                <!-- <AuthorGift :uid="uid" /> -->
+                <el-button class="u-btn" size="small" @click="onMessage"><img class="u-msg-icon" svg-inline :src="src" />
+                    私信</el-button>
+            </div>
+            <!-- <AuthorMsg :uid="uid" /> -->
+            <!-- <AuthorLink class="u-block u-links" :uid="uid" :data="data" /> -->
+            <AuthorMedals class="u-block u-trophy" :uid="uid" />
+            <!-- <AuthorTeams class="u-block u-teams" :uid="uid" /> -->
+            <!-- <AuthorFans class="u-block u-fans" :uid="uid" /> -->
+            <slot></slot>
+            <AuthorPosts class="u-block u-posts" :uid="uid" />
+        </template>
+    </div>
+</template>
+
+<script>
+import AuthorInfo from "../author/AuthorInfo.vue";
+// import AuthorLink from "../author/AuthorLink.vue";
+// import AuthorFollow from "../author/AuthorFollow.vue";
+// import AuthorMsg from "./author/AuthorMsg.vue";
+// import AuthorGift from "../author/AuthorGift.vue";
+// import AuthorFans from "../author/AuthorFans.vue";
+import AuthorMedals from "../author/AuthorMedals.vue";
+// import AuthorTeams from "../author/AuthorTeams.vue";
+import AuthorPosts from "../author/AuthorPosts.vue";
+import AuthorRss from "../author/AuthorRss.vue";
+const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+export default {
+    name: "AuthorComp",
+    props: ["uid", "anonymous"],
+    data: function () {
+        return {
+            data: "",
+            src: jx3box.__cdn + "design/vector/icon/message.svg",
+        };
+    },
+    methods: {
+        installModules: function (data) {
+            if (this.anonymous == 1) {
+                return;
+            }
+            this.data = data;
+        },
+        onMessage: function () {
+            window.open("/dashboard/letter?receiver=" + this.uid, "_blank");
+        },
+    },
+    components: {
+        AuthorInfo,
+        // AuthorLink,
+        // AuthorFollow,
+        // AuthorMsg,
+        // AuthorGift,
+        AuthorMedals,
+        // AuthorTeams,
+        AuthorPosts,
+        // AuthorFans,
+        AuthorRss,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/single/author.less";
+</style>

package/src/single/Collection.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="w-collection" v-if="list && list.length">
+        <div class="w-collection-title" @click="handleShow" :class="{ on: visible }">
+            <span> <el-icon><Notebook /></el-icon> 该作品已被收录至作者的剑三小册 </span>
+            <a @click.stop :href="collectionLink(id)" 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' }">
+                    <li v-for="(item, i) in list" :key="i" class="u-item">
+                        <a v-if="item" :href="showLink(item)" target="_blank">
+                            <!-- <i class="el-icon-link"></i> -->
+                            {{ item.title }}
+                        </a>
+                    </li>
+                </ol>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { getLink } = utilModule;
+import { getCollection } from "../../service/cms";
+export default {
+    name: "SingleCollection",
+    props: ["id", "defaultVisible"],
+    inject: [],
+    components: {},
+    data: function() {
+        return {
+            visible: this.defaultVisible || false,
+            data: {
+                title: "",
+                posts: [],
+            },
+        };
+    },
+    computed: {
+        title: function() {
+            return this.data?.title;
+        },
+        list: function() {
+            return this.data?.posts;
+        },
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function(val) {
+                if (~~val) {
+                    this.loadData();
+                } else {
+                    this.data = {
+                        title: "",
+                        posts: [],
+                    };
+                }
+            },
+        },
+        defaultVisible: function(val) {
+            this.visible = val;
+        },
+    },
+    methods: {
+        handleShow: function() {
+            this.visible = !this.visible;
+        },
+        loadData: function() {
+            getCollection(this.id).then((res) => {
+                this.data = res.data?.data;
+                this.$emit('collectionUpdate',this.data)
+            });
+        },
+        collectionLink: function(id) {
+            return getLink("collection", id);
+        },
+        showLink: function(item) {
+            if (item.type == "custom") {
+                return item.url;
+            } else {
+                return getLink(item.post_type || item.type, item.id);
+            }
+        },
+    },
+    created: function() {},
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+.w-collection {
+    &-title {
+        cursor: pointer;
+        position: relative;
+        border: 1px solid #ddd;
+        background-color: #fafbfc;
+        padding: 8px 10px 8px 10px;
+        display: block;
+        margin-bottom: 0;
+        border-radius: 4px;
+        line-height: 1.6;
+        font-size: 13px;
+        letter-spacing: 0.5px;
+        i {
+            .fz(16px);
+            .y(-1px);
+        }
+
+        &::after {
+            content: ">";
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            font-family: "宋体", Consolas;
+            color: #aaa;
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+
+        a {
+            .underline(@color-link);
+        }
+    }
+
+    counter-reset: collection;
+    .u-item {
+        .fz(13px, 32px);
+        border-bottom: 1px solid #eee;
+        transition: 0.15s ease-in-out;
+        .nobreak;
+        a {
+            .db;
+            &:before {
+                counter-increment: collection;
+                content: counter(collection) ". ";
+                color: #aaa;
+                .mr(5px);
+            }
+            &:hover {
+                background-color: #f0f6fd;
+                color: @pink;
+            }
+        }
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .u-list {
+        padding: 10px 20px;
+        margin: 0;
+        border: 1px dashed #ddd;
+        background: none;
+        border-top: none;
+    }
+
+    .on {
+        &::after {
+            transform: rotate(90deg);
+        }
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.5s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
+}
+</style>