@jx3box/jx3box-common-ui 5.5.21 → 5.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.5.21",
+    "version": "5.5.24",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -31,10 +31,10 @@
     ],
     "dependencies": {
         "@jx3box/jx3box-comment-ui": "^1.6.8",
-        "@jx3box/jx3box-common": "^7.0.18",
+        "@jx3box/jx3box-common": "^7.0.21",
         "@jx3box/jx3box-data": "^1.8.3",
-        "@jx3box/jx3box-editor": "^1.2.4",
-        "axios": "^0.19.2",
+        "@jx3box/jx3box-editor": "^1.2.6",
+        "axios": "^0.26.1",
         "element-ui": "^2.13.2",
         "jquery": "^3.5.1",
         "lodash": "^4.17.15",

package/readme.md

@@ -1,5 +1,4 @@
 # JX3BOX UI
-手动更新cdn `https://oss.jx3box.com/static/`
 
 通用 UI 组件
 

package/src/Breadcrumb.vue

@@ -12,8 +12,9 @@
                 src="../assets/img/bread/menu.svg"
             />
         </div>
-        <a class="u-channel" :href="root" :class="{on:withoutLeft}">
+        <a class="u-channel" :href="rootLink" :class="{on:withoutLeft}">
             <i class="u-channel-logo">
+                <img :src="getAppIcon(slug)" v-if="!$slots.logo"/>
                 <slot name="logo"></slot>
             </i>
             <span class="u-title">{{ name }}</span>
@@ -50,7 +51,7 @@
 
 <script>
 import _ from "lodash";
-import { publishLink } from "@jx3box/jx3box-common/js/utils";
+import { publishLink,getAppIcon } from "@jx3box/jx3box-common/js/utils";
 import { __Links, feedback } from "@jx3box/jx3box-common/data/jx3box.json";
 import User from "@jx3box/jx3box-common/js/user";
 import Admin from "./bread/Admin";
@@ -87,13 +88,18 @@ export default {
             isApp: isApp(),
         };
     },
-    computed: {},
+    computed: {
+        rootLink : function (){
+            return this.root || `/${this.slug}`
+        }
+    },
     methods: {
         toggleLeftSide: function () {
             let status = !this.isOpen;
             Bus.$emit("toggleLeftSide", status);
         },
         publishLink,
+        getAppIcon,
     },
     mounted: function () {
         Bus.$on("toggleLeftSide", (data) => {

package/src/interact/Contributors.vue

@@ -0,0 +1,110 @@
+<template>
+    <section class="m-contributor">
+        <div class="m-author">
+            <el-radio
+                v-for="(item, i) in authors"
+                v-model="value"
+                :label="String(item.user_id)"
+                :key="i"
+                @change="handleAuthorChange"
+            >
+                <img
+                    class="u-pic"
+                    :src="showAvatar(item.user_avatar)"
+                    :alt="item.display_name"
+                />
+                <span class="u-txt" :title="item.display_name">
+                    {{ item.display_name }}
+                </span>
+            </el-radio>
+        </div>
+    </section>
+</template>
+
+<script>
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "Contributors",
+    props: {
+        authors: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            value: "",
+        };
+    },
+    watch: {
+        authors: {
+            deep: true,
+            immediate: true,
+            handler(val) {
+                if (val && val.length) this.value = String(val[0]?.user_id)
+            }
+        },
+        value: {
+            immediate: true,
+            handler(val) {
+                val && this.$emit('chosen', this.value)
+            }
+        }
+    },
+    methods: {
+        handleAuthorChange() {},
+        showAvatar,
+    },
+};
+</script>
+
+<style lang="less">
+.m-contributor {
+    padding: 10px 10px 0 10px;
+    .m-author {
+        .u-pic {
+            .db;
+            .size(48px);
+            background-color: @bg-black;
+            .r(4px);
+            transition: 0.1s ease-in;
+            // .tm(0.4);
+            box-sizing: border-box;
+
+            &:hover {
+                .tm(1);
+            }
+        }
+        .u-txt {
+            .db;
+            .x;
+            .fz(12px, 2);
+            white-space: nowrap;
+            overflow: hidden;
+            .w(48px);
+        }
+
+        .el-radio {
+            .ml(0);
+            .mr(15px);
+        }
+        .el-radio__input {
+            .none;
+        }
+        .el-radio__label {
+            .db;
+            padding-left: 0;
+        }
+
+        .is-checked {
+            .u-pic {
+                border: 3px solid @primary;
+                .tm(1);
+            }
+            .u-txt {
+                .bold;
+            }
+        }
+    }
+}
+</style>

package/src/interact/boxcoin_admin.vue

@@ -18,6 +18,7 @@
                 </div>
                 <div class="u-list">
                     <em class="u-label">❤️ 品鉴</em>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :label="item" v-for="item in points" :key="item" border>
@@ -50,10 +51,13 @@
 <script>
 import { grantBoxcoin } from "../../service/thx.js";
 import User from "@jx3box/jx3box-common/js/user";
+import Contributors from '@/interact/Contributors.vue';
 export default {
     name: "BoxcoinAdmin",
-    props: ["postType", "postId", "userId", "own", "points"],
-    components: {},
+    props: ["postType", "postId", "userId", "own", "points", 'authors'],
+    components: {
+        Contributors
+    },
     data: function () {
         return {
             visible: false,
@@ -61,7 +65,9 @@ export default {
             count: 0,
             remark: "辛苦，感谢！",
 
-            left : this.own
+            left : this.own,
+
+            chosen: '', // 被选中的人
         };
     },
     computed: {
@@ -90,8 +96,12 @@ export default {
         openBoxcoinPop: function () {
             this.visible = true;
         },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId
+        },
         submit: function () {
-            grantBoxcoin(this.postType, this.postId, this.userId, this.count, {
+            grantBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
                 remark: this.remark,
                 client : this.client
             })
@@ -100,12 +110,13 @@ export default {
                         message: "操作成功",
                         type: "success",
                     });
+                    return res.data.data
                 })
-                .then(() => {
+                .then((data) => {
                     // 1.扣除额度
                     this.left -= this.count;
                     // 2.将修改emit出去
-                    this.$emit('updateRecord', { count: this.count, remark: this.remark, is_user_gift: 0 });
+                    this.$emit('updateRecord', data);
                 })
                 .finally(() => {
                     this.visible = false;

package/src/interact/boxcoin_records.vue

@@ -7,7 +7,7 @@
                         <i class="el-icon-trophy"></i>
                     </span>
                     <span class="u-meta u-user">参与打赏</span>
-                    <span class="u-meta u-user" v-if="mode== 'wiki'">收益作者</span>
+                    <span class="u-meta u-user">收益作者</span>
                     <span class="u-meta u-count">盒币</span>
                     <span class="u-meta u-remark">寄语</span>
                     <time class="u-meta u-time"></time>
@@ -30,7 +30,6 @@
                         <span>{{item.ext_operate_user_info.display_name}}</span>
                     </a>
                     <a  
-                        v-if="mode== 'wiki'"
                         class="u-meta u-user"
                         :href="authorLink(item.user_id)"
                         target="_blank"
@@ -109,9 +108,9 @@ export default {
         },
         cacheRecord: {
             deep: true,
-            handler: function (val) {
-                if (val) {
-                    this.list.push(val);
+            handler: function (data) {
+                if (data) {
+                    this.list.push(data)
                     // 清空父组件的cache
                     this.$parent.cacheRecord = null;
                 }

package/src/interact/boxcoin_user.vue

@@ -15,6 +15,7 @@
                 </div>
                 <div class="u-list">
                     <em class="u-label">❤️ 打赏</em>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :label="item" v-for="item in points" :key="item" border>
@@ -47,10 +48,13 @@
 <script>
 import { rewardBoxcoin } from "../../service/thx.js";
 import User from "@jx3box/jx3box-common/js/user";
+import Contributors from '@/interact/Contributors.vue';
 export default {
     name: "BoxcoinUser",
-    props: ["boxcoin", "postType", "postId", "userId", "own", "points"],
-    components: {},
+    props: ["boxcoin", "postType", "postId", "userId", "own", "points", "authors"],
+    components: {
+        Contributors
+    },
     data: function () {
         return {
             visible: false,
@@ -61,6 +65,8 @@ export default {
             left : this.own,
 
             chargeLink: "/vip/boxcoin?redirect=" + location.href,
+
+            chosen: '', // 被选中的人
         };
     },
     computed: {
@@ -93,8 +99,12 @@ export default {
                 User.toLogin();
             }
         },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId
+        },
         submit: function () {
-            rewardBoxcoin(this.postType, this.postId, this.userId, this.count, {
+            rewardBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
                 remark: this.remark,
                 client : this.client
             })
@@ -103,12 +113,13 @@ export default {
                         message: "操作成功",
                         type: "success",
                     });
+                    return res.data.data
                 })
-                .then(() => {
+                .then((data) => {
                     // 1.扣除额度
                     this.left -= this.count;
                     // 2. 将新增emit出去
-                    this.$emit('updateRecord', { count: this.count, remark: this.remark, is_user_gift: 1 });
+                    this.$emit('updateRecord', data);
                 })
                 .finally(() => {
                     this.visible = false;

package/src/single/Creators.vue

@@ -84,6 +84,23 @@ export default {
             getPostAuthors(this.id).then((res) => {
                 this.super_author = res.data?.data.super_author;
                 this.other_authors = res.data?.data.other_authors;
+
+                const super_author = {
+                    user_id: this.super_author.ID,
+                    display_name: this.super_author.display_name,
+                    user_avatar: this.super_author.user_avatar,
+                }
+
+                const other_authors = this.other_authors?.map(item => {
+                    return {
+                        user_id: item.post_author_info?.ID,
+                        display_name: item.post_author_info?.display_name,
+                        user_avatar: item.post_author_info?.user_avatar,
+                    }
+                })
+
+                // 将联合创作者传出去
+                this.$emit('load-authors', { super_author, other_authors })
             });
         },
         showAvatar: function (val) {

package/src/single/Thx.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="w-thx">
         <div class="w-thx-panel">
-            <boxcoin-admin :postId="postId" :postType="postType" v-if="hasRight && adminBoxcoinEnable && boxcoin_enable" :userId="userId" :own="admin_left" :points="admin_points" @updateRecord="updateRecord" />
+            <boxcoin-admin :postId="postId" :postType="postType" v-if="hasRight && adminBoxcoinEnable && boxcoin_enable" :userId="userId" :own="admin_left" :points="admin_points" :authors="authors" @updateRecord="updateRecord" />
             <Like :postId="postId" :postType="postType"></Like>
             <fav :postId="postId" :postType="postType"></fav>
-            <boxcoin-user :postId="postId" :postType="postType" :boxcoin="boxcoin" :userId="userId" :own="user_left" :points="user_points" v-if="userBoxcoinEnable && boxcoin_enable" @updateRecord="updateRecord" />
+            <boxcoin-user :postId="postId" :postType="postType" :boxcoin="boxcoin" :userId="userId" :own="user_left" :points="user_points" :authors="authors" v-if="userBoxcoinEnable && boxcoin_enable" @updateRecord="updateRecord" />
             <Share :postId="postId" :postType="postType" />
         </div>
         <div class="w-thx-records">
@@ -28,7 +28,7 @@ import User from '@jx3box/jx3box-common/js/user'
 import {getPostBoxcoinConfig,getBoxcoinStatus} from '../../service/thx'
 export default {
     name: "Thx",
-    props: ["postId", "postType","userId","adminBoxcoinEnable","userBoxcoinEnable",'mode'],
+    props: ["postId", "postType","userId","adminBoxcoinEnable","userBoxcoinEnable",'mode', 'authors'],
     components: {
         Like,
         Share,
@@ -79,18 +79,8 @@ export default {
             })
         },
         // 用户打赏
-        updateRecord: function ({ count, remark, is_user_gift }){
-            this.cacheRecord = {
-                count,
-                remark,
-                is_user_gift,
-                operate_user_id: this.user.uid,
-                created_at: Date.now(),
-                ext_operate_user_info: {
-                    avatar: this.user.avatar_origin,
-                    display_name: this.user.name
-                },
-            }
+        updateRecord: function (data){
+            this.cacheRecord = data
         },
     },
     created: function () {},

package/src/single/cms-single.vue

@@ -8,7 +8,7 @@
         <!-- 文章前 -->
         <div class="m-single-prepend">
             <!-- 联合创作者 -->
-            <Creators class="m-single-creators" :postId="id" :postType="post_type" />
+            <Creators class="m-single-creators" :postId="id" :postType="post_type" @load-authors="loadAuthors" />
             <!-- 文集小册 -->
             <Collection class="m-single-collection" :id="collection_id" :defaultVisible="collection_collapse" @collectionUpdate="updateCollection"/>
             <slot name="single-prepend"></slot>
@@ -33,7 +33,7 @@
             <slot name="single-append"></slot>
 
             <!-- 打赏 -->
-            <Thx class="m-single-thx" :postId="id" :postType="post_type" :userId="author_id" :adminBoxcoinEnable="true" :userBoxcoinEnable="true"/>
+            <Thx class="m-single-thx" :postId="id" :postType="post_type" :userId="author_id" :adminBoxcoinEnable="true" :userBoxcoinEnable="true" :authors="authors" />
 
             <!-- 评论 -->
             <div class="m-single-comment">
@@ -74,7 +74,11 @@ export default {
     data: function() {
         return {
             collection_data : '',
-            directory : false
+            directory : false,
+
+            // 创作者
+            other_authors: [],
+            super_author: "",
         };
     },
     computed: {
@@ -119,6 +123,13 @@ export default {
                 collection_data : this.collection_data,
                 directory : this.directory
             }
+        },
+        authors: function (){
+            if (this.other_authors && this.other_authors.length) {
+                return [this.super_author, ...this.other_authors]
+            }
+
+            return []
         }
     },
     methods : {
@@ -127,6 +138,10 @@ export default {
         },
         updateDirectory : function (val){
             this.directory = val
+        },
+        loadAuthors({super_author, other_authors}) {
+            this.super_author = super_author;
+            this.other_authors = other_authors
         }
     },
     watch : {