@jx3box/jx3box-vue3-ui 0.0.3 → 0.0.5

package/assets/css/thx.less

@@ -6,6 +6,14 @@
         .mr(20px);
     }
     .x;
+
+    .u-record-icon {
+        .size(26px);
+        // .y;
+        .pr;
+        top: 4px;
+        .pointer;
+    }
 }
 .w-thx-panel {
     .mb(20px);

package/assets/img/widget/records.svg

@@ -0,0 +1 @@
+<svg t="1681228372666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10848" width="200" height="200"><path d="M309.9 140.6h402.9c21.1 0 38.2-17.1 38.2-38.2s-17.1-38.2-38.2-38.2H309.9c-21.1 0-38.2 17.1-38.2 38.2s17.1 38.2 38.2 38.2z" fill="#61D0ED" p-id="10849"></path><path d="M776.3 112.1c-4.7 30.5-30.8 54-62.7 54H309.1c-31.8 0-58-23.5-62.7-54-46.2 19.1-78.7 64.5-78.7 117.6v602.7c0 70.3 57 127.3 127.3 127.3h432.7c70.3 0 127.3-57 127.3-127.3V229.7c0-53.1-32.5-98.6-78.7-117.6z m-47.9 572.1h-434c-21.1 0-38.2-17.1-38.2-38.2s17.1-38.2 38.2-38.2h433.9c21.1 0 38.2 17.1 38.2 38.2s-17.1 38.2-38.1 38.2z m0-173h-434c-21.1 0-38.2-17.1-38.2-38.2s17.1-38.2 38.2-38.2h433.9c21.1 0 38.2 17.1 38.2 38.2s-17.1 38.2-38.1 38.2z m0-173h-434c-21.1 0-38.2-17.1-38.2-38.2s17.1-38.2 38.2-38.2h433.9c21.1 0 38.2 17.1 38.2 38.2s-17.1 38.2-38.1 38.2z" fill="#61D0ED" p-id="10850"></path></svg>

package/index.js

@@ -0,0 +1,25 @@
+import Header from "./src/Header.vue";
+import Footer from "./src/Footer.vue";
+import Main from "./src/Main.vue";
+import Breadcrumb from "./src/Breadcrumb.vue";
+import LeftSidebar from "./src/LeftSidebar.vue";
+import RightSidebar from "./src/RightSidebar.vue";
+import LeftSideToggle from "./src/LeftSideToggle.vue";
+
+const components = {
+    Header,
+    Footer,
+    Main,
+    Breadcrumb,
+    LeftSidebar,
+    RightSidebar,
+    LeftSideToggle,
+};
+
+const install = function (app) {
+    Object.keys(components).forEach((key) => {
+        app.component(key, components[key]);
+    });
+};
+
+export { install };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-vue3-ui",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/helper.js

@@ -4,4 +4,13 @@ function getCollection(id) {
     return $helper().get(`/api/post/collection/${id}`);
 }
 
-export { getCollection };
+// 面包屑
+function getBreadcrumb(key) {
+    return $helper()
+        .get(`/api/breadcrumb/${key}`)
+        .then((res) => {
+            return res.data.data.breadcrumb.html || "";
+        });
+}
+
+export { getCollection, getBreadcrumb };

package/src/App.vue

@@ -20,33 +20,36 @@
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
+            <SimpleThxVue
+                postType="bbs"
+                postTitle="bbs23865的标题"
+                type="batchReward"
+                :userId="7"
+                :adminBoxcoinEnable="true"
+                :userBoxcoinEnable="true"
+                :postId="57260"
+            />
             <RightSidebar> </RightSidebar>
             <Footer></Footer>
-            <Bottom></Bottom>
+            <!-- <Bottom></Bottom> -->
         </Main>
     </div>
 </template>
 
 <script>
-import Header from "./Header.vue";
-import Breadcrumb from "./Breadcrumb.vue";
-import Main from "./Main.vue";
-import Footer from "./Footer.vue";
-import LeftSidebar from "./LeftSidebar.vue";
-import LeftSideToggle from "./LeftSideToggle.vue";
-import RightSidebar from "./RightSidebar.vue";
-import Bottom from "./Bottom.vue";
+import SimpleThxVue from "./single/SimpleThx.vue";
 export default {
     name: "App",
     components: {
-        Main,
-        Header,
-        Footer,
-        Breadcrumb,
-        LeftSidebar,
-        LeftSideToggle,
-        RightSidebar,
-        Bottom,
+        // Main,
+        // Header,
+        // Footer,
+        // Breadcrumb,
+        // LeftSidebar,
+        // LeftSideToggle,
+        // RightSidebar,
+        // Bottom,
+        SimpleThxVue,
     },
 };
 </script>

package/src/header/UserInfo.vue

@@ -21,7 +21,8 @@
                         <a href="https://os.jx3box.com/admin">管理平台</a>
                     </li>
                     <li>
-                        <a @click="logout">退出登录</a>
+                        <a class="" @click="logout">退出登录</a>
+
                     </li>
                 </ul>
             </template>
@@ -82,7 +83,7 @@
                         </a>
                         <hr />
                         <div class="u-logout">
-                            <el-button @click="logout" size="small" plain>退出登录</el-button>
+                            <el-button @click="logout" plain>退出登录</el-button>
                         </div>
                     </div>
                 </div>

package/src/interact/BoxcoinAdmin.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="w-boxcoin-admin" v-if="allowBoxcoin">
+        <el-tooltip effect="dark" content="品鉴" placement="top-start">
+            <div class="w-boxcoin-block">
+                <img @click="openBoxcoinPop" class="u-icon" svg-inline src="../../assets/img/widget/like3.svg" />
+            </div>
+        </el-tooltip>
+        <el-dialog
+            title="品鉴评分"
+            v-model="visible"
+            class="w-boxcoin-pop"
+            :close-on-click-modal="false"
+            append-to-body
+        >
+            <div class="w-boxcoin-admin-content">
+                <div class="u-left">
+                    <em class="u-label">本月状态</em>
+                    已用<b>{{ this.used }}</b> 剩余<b>{{ this.left }}</b> 总计<b>{{ this.total }}</b>
+                    <el-progress
+                        :percentage="100 - (this.used * 100) / this.total"
+                        :stroke-width="15"
+                        :text-inside="true"
+                    ></el-progress>
+                </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 fitPoints" :key="item" border>
+                                <b>{{ item }}</b
+                                >盒币
+                            </el-radio>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <div class="u-msg">
+                    <em class="u-label">📝 寄语</em>
+                    <div class="u-input">
+                        <el-input
+                            v-model="remark"
+                            placeholder="请输入寄语（必填）"
+                            :minlength="2"
+                            :maxlength="30"
+                            show-word-limit
+                        ></el-input>
+                        <el-button :disabled="fetchingCurrentRelease" @click="insertCurrentRelease"
+                            >插入当前版本</el-button
+                        >
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="visible = false">取 消</el-button>
+                    <el-button type="primary" @click="submit" :disabled="!ready || submitting">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { grantBoxcoin } from "../../service/thx.js";
+import { getBreadcrumb } from "../../service/helper.js";
+import User from "@jx3box/jx3box-common/js/user";
+import Contributors from "./Contributors.vue";
+export default {
+    name: "BoxcoinAdmin",
+    props: ["postType", "postId", "userId", "own", "total", "points", "max", "min", "authors", "client"],
+    components: {
+        Contributors,
+    },
+    data: function () {
+        return {
+            visible: false,
+            count: 0,
+
+            remark: "辛苦，感谢！",
+            left: this.own,
+            chosen: "", // 被选中的人
+
+            submitting: false,
+            fetchingCurrentRelease: false,
+        };
+    },
+    computed: {
+        used: function () {
+            return this.total - this.left;
+        },
+        ready: function () {
+            return this.isNotSelf && this.isEnough && this.count && this.remark;
+        },
+        isNotSelf: function () {
+            return this.userId != User.getInfo().uid;
+        },
+        isEnough: function () {
+            return this.left && this.left >= this.count;
+        },
+        allowBoxcoin: function () {
+            return this.postType && this.postId && (this.userId || (this.authors && this.authors.length));
+        },
+        hostClient: function () {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+        fitPoints: function () {
+            return this.points.filter((item) => item <= this.left);
+        },
+    },
+    watch: {
+        own: function (val) {
+            this.left = val;
+        },
+    },
+    methods: {
+        openBoxcoinPop: function () {
+            this.visible = true;
+        },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId;
+        },
+        submit: function () {
+            this.submitting = true;
+            grantBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
+                remark: this.remark,
+                client: this.client || this.hostClient,
+            })
+                .then((res) => {
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    return res.data.data;
+                })
+                .then((data) => {
+                    // 1.扣除额度
+                    this.left -= this.count;
+                    // 2.将修改emit出去
+                    this.$emit("updateRecord", data);
+                })
+                .finally(() => {
+                    this.submitting = false;
+                    this.visible = false;
+                });
+        },
+        insertCurrentRelease: function () {
+            this.fetchingCurrentRelease = true;
+            getBreadcrumb(`current-release-${this.hostClient}`)
+                .then((res) => {
+                    this.remark += res;
+                })
+                .catch(() => {
+                    this.$message({
+                        message: "获取失败",
+                        type: "error",
+                    });
+                })
+                .finally(() => {
+                    this.fetchingCurrentRelease = false;
+                });
+        },
+        init: function () {},
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>

package/src/interact/BoxcoinRecords.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="w-boxcoin-records" v-loading="loading">
+        <div class="w-boxcoin-records-list" v-if="list && list.length">
+            <ul class="u-list">
+                <li class="u-item u-head">
+                    <span class="u-meta u-action">
+                        <i class="el-icon-trophy"></i>
+                    </span>
+                    <span class="u-meta u-user">参与打赏</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>
+                </li>
+                <li v-for="(item, i) in list" :key="i" class="u-item u-body">
+                    <span class="u-meta u-action">
+                        <template v-if="item.is_user_gift">
+                            <i title="打赏"><img class svg-inline src="../../assets/img/widget/gift.svg" /></i>
+                        </template>
+                        <template v-else>
+                            <i title="品鉴"><img class svg-inline src="../../assets/img/widget/admin_gift.svg" /></i>
+                        </template>
+                    </span>
+                    <a class="u-meta u-user" :href="authorLink(item.operate_user_id)" target="_blank">
+                        <img class="u-user-avatar" :src="showAvatar(item.ext_operate_user_info.avatar)" alt />
+                        <span>{{ item.ext_operate_user_info.display_name }}</span>
+                    </a>
+                    <a class="u-meta u-user" :href="authorLink(item.user_id)" target="_blank">
+                        <img class="u-user-avatar" :src="showAvatar(item.ext_user_info.avatar)" alt />
+                        <span>{{ item.ext_user_info.display_name }}</span>
+                    </a>
+                    <span class="u-meta u-count">
+                        +
+                        <b>{{ item.count + item.ext_take_off_count + ~~item.ext2_take_off_count }}</b>
+                    </span>
+                    <span class="u-meta u-remark">{{ item.remark }}</span>
+                    <time class="u-meta u-time">{{ showTime(item.created_at) }}</time>
+                    <span class="u-client" v-if="isSuperAdmin">{{ item.client }}</span>
+                    <span class="u-delete" v-if="isSuperAdmin" @click="recovery(item, i)">
+                        <i class="el-icon-delete"></i>撤销
+                    </span>
+                </li>
+            </ul>
+        </div>
+        <el-pagination
+            class="w-boxcoin-records-pages"
+            small
+            layout="prev, pager, next"
+            :hide-on-single-page="true"
+            :page-size="per"
+            :total="total"
+            v-model="page"
+        ></el-pagination>
+    </div>
+</template>
+
+<script>
+import { getPostBoxcoinRecords, recoveryBoxcoin } from "../../service/thx";
+import User from "@jx3box/jx3box-common/js/user";
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+import { showTime } from "@jx3box/jx3box-common/js/moment";
+export default {
+    name: "BoxcoinRecords",
+    props: ["postType", "postId", "cacheRecord", "postClient", "mode"],
+    components: {},
+    data: function () {
+        return {
+            list: [],
+            per: 12,
+            page: 1,
+            total: 1,
+            loading: false,
+            boxcoin: 0,
+            isSuperAdmin: User.isSuperAdmin(),
+        };
+    },
+    computed: {
+        post_keys: function () {
+            return [this.postType, this.postId];
+        },
+        params: function () {
+            return {
+                pageSize: this.per,
+                pageIndex: this.page,
+                //client : this.postClient,
+            };
+        },
+    },
+    watch: {
+        post_keys: {
+            immediate: true,
+            deep: true,
+            handler: function () {
+                this.postType && this.postId && this.loadData();
+            },
+        },
+        params: {
+            deep: true,
+            handler: function () {
+                this.loadData();
+            },
+        },
+        cacheRecord: {
+            deep: true,
+            handler: function (data) {
+                if (data) {
+                    this.list.push(data);
+                    // 清空父组件的cache
+                    this.$parent.cacheRecord = null;
+                }
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            getPostBoxcoinRecords(this.postType, this.postId, this.params).then((res) => {
+                this.list = res.data.data.list;
+                this.total = res.data.data.page.total;
+                this.boxcoin = res.data.data.fromManager + res.data.data.fromUser;
+                this.$parent.boxcoin = this.boxcoin;
+            });
+        },
+        recovery: function (item, i) {
+            this.$alert("是否确定撤销该评分？", "确认", {
+                confirmButtonText: "确定",
+                callback: (action) => {
+                    if (action == "confirm") {
+                        recoveryBoxcoin(item.id).then(() => {
+                            this.$message({
+                                message: "撤销成功",
+                                type: "success",
+                            });
+                            this.list.splice(i, 1);
+                        });
+                    }
+                },
+            });
+        },
+        authorLink,
+        showTime,
+        showAvatar: function (val) {
+            return showAvatar(val, 72);
+        },
+    },
+};
+</script>

package/src/interact/BoxcoinUser.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="w-boxcoin-user" v-if="allowBoxcoin">
+        <el-tooltip effect="dark" content="投币" placement="top-start">
+            <div class="w-boxcoin-block" @click="openBoxcoinPop">
+                <img class="u-icon" svg-inline src="../../assets/img/widget/heart1.svg" />
+                <span class="u-count" v-if="boxcoin">{{boxcoin}}</span>
+            </div>
+        </el-tooltip>
+        <el-dialog title="投币打赏" v-model="visible" class="w-boxcoin-pop" append-to-body :close-on-click-modal="false">
+            <div class="w-boxcoin-user-content">
+                <div class="u-left">
+                    <em class="u-label">当前拥有盒币</em>
+                    <b>{{left}}</b>
+                    <a class="u-charge" :href="chargeLink" target="_blank">[充值]</a>
+                </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 fitPoints" :key="item" border>
+                                <b>{{item}}</b>盒币
+                            </el-radio>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <div class="u-msg">
+                    <em class="u-label">📝 寄语</em>
+                    <div class="u-input">
+                        <el-input
+                            v-model="remark"
+                            placeholder="请输入寄语（必填）"
+                            :minlength="2"
+                            :maxlength="30"
+                            show-word-limit
+                        ></el-input>
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="visible = false">取 消</el-button>
+                    <el-button type="primary" @click="submit" :disabled="!ready">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { rewardBoxcoin } from "../../service/thx.js";
+import User from "@jx3box/jx3box-common/js/user";
+import Contributors from './Contributors.vue';
+export default {
+    name: "BoxcoinUser",
+    props: ["boxcoin", "postType", "postId", "userId", "own", "points", "authors",'client'],
+    components: {
+        Contributors
+    },
+    data: function () {
+        return {
+            visible: false,
+
+            count: 0,
+            remark: "辛苦了，谢谢大大！",
+
+            left : this.own,
+
+            chargeLink: "/vip/boxcoin?redirect=" + location.href,
+
+            chosen: '', // 被选中的人
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.isNotSelf && this.isEnough && this.count && this.remark;
+        },
+        isNotSelf: function () {
+            return this.userId != User.getInfo().uid;
+        },
+        isEnough: function () {
+            return this.left && this.left >= this.count;
+        },
+        allowBoxcoin : function (){
+            return this.postType && this.postId && (this.userId || (this.authors && this.authors.length))
+        },
+        hostClient : function (){
+            return location.href.includes('origin') ? 'origin' : 'std'
+        },
+        fitPoints : function (){
+            return this.points //.filter(item => item <= this.left)
+        }
+    },
+    watch: {
+        own : function (val){
+            this.left = val
+        }
+    },
+    methods: {
+        openBoxcoinPop: function () {
+            if (User.isLogin()) {
+                this.visible = true;
+            } else {
+                User.toLogin();
+            }
+        },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId
+        },
+        submit: function () {
+            rewardBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
+                remark: this.remark,
+                client : this.client || this.hostClient
+            })
+                .then((res) => {
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    return res.data.data
+                })
+                .then((data) => {
+                    // 1.扣除额度
+                    this.left -= this.count;
+                    // 2. 将新增emit出去
+                    this.$emit('updateRecord', data);
+                })
+                .finally(() => {
+                    this.visible = false;
+                });
+
+        },
+        init: function () {},
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.w-boxcoin-user {
+    .dbi;
+    .x(left);
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+        top: -2px;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+    }
+    .u-charge {
+        .underline(@color-link);
+        .ml(10px);
+    }
+}
+</style>

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: "ContributorsComp",
+    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/Fav.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="w-fav2" :class="{ disabled: favorite }" @click="doFav">
+        <el-tooltip effect="dark" :content="favContent" placement="top-start">
+            <div>
+                <img v-if="favorite" class="u-icon" svg-inline src="../../assets/img/widget/unstar.svg" />
+                <img v-else class="u-icon" svg-inline src="../../assets/img/widget/star.svg" />
+                <span class="u-count" v-if="!hiddenNum && total">{{ total }}</span>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { hasFav, addFav, delFav } from "../../service/fav";
+export default {
+    name: "FavoriteComp",
+    props: ["postType", "postId", "postTitle", "hiddenNum"],
+    data: function () {
+        return {
+            login: User.isLogin(),
+            favorite: false,
+            total: 0,
+        };
+    },
+    computed: {
+        favContent() {
+            return this.favorite ? "已收藏" : "收藏";
+        },
+    },
+    methods: {
+        doFav: function () {
+            if (this.login) {
+                this.favorite ? this.delFav() : this.addFav();
+            } else {
+                User.toLogin();
+            }
+        },
+        hasFav: function () {
+            hasFav(this.postType, this.postId).then((res) => {
+                this.favorite = res.id || false;
+                this.total = res.totalFavorites || 0;
+            });
+        },
+        addFav: function () {
+            addFav(this.postType, this.postId, this.postTitle).then((res) => {
+                this.favorite = res.id;
+                this.total++;
+            });
+        },
+        delFav: function () {
+            delFav(this.favorite).then(() => {
+                this.favorite = false;
+                this.total && this.total--;
+            });
+        },
+    },
+    watch: {
+        postId: {
+            immediate: true,
+            handler() {
+                if (this.postType && this.postId) this.hasFav();
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.w-fav2 {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(32px);
+        .y;
+        .pr;
+        top: -1px;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+    }
+}
+</style>

package/src/interact/Like.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="w-like2" :class="{ disabled: !status }" @click="addLike" v-if="ready">
+        <el-tooltip effect="dark" content="点赞" placement="top-start">
+            <div>
+                <img class="u-icon" svg-inline src="../../assets/img/widget/like2.svg" />
+                <span class="u-count" v-if="count">{{ count }}</span>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import { postStat, getStat } from "@jx3box/jx3box-common/js/stat";
+export default {
+    name: "LikeComp",
+    props: ["postType", "postId"],
+    data: function () {
+        return {
+            status: true,
+            count: 0,
+        };
+    },
+    computed: {
+        ready() {
+            return this.postType && this.postId;
+        },
+    },
+    methods: {
+        init: function () {
+            this.loadStat();
+        },
+        loadStat: function () {
+            getStat(this.postType, this.postId).then((res) => {
+                this.count = res.data.likes || 0;
+            });
+        },
+        // 点赞
+        addLike: function () {
+            if (!this.ready) return;
+            this.count++;
+            if (this.status) {
+                postStat(this.postType, this.postId, "likes");
+            }
+            this.status = false;
+        },
+    },
+    watch: {
+        postId: function () {
+            this.init();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/like2.less";
+</style>

package/src/main.js

@@ -26,5 +26,8 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component);
 }
 
+import { install } from "../index.js";
+install(app);
+
 // 3.Mount DOM
 app.mount("#app");

package/src/single/SimpleThx.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="w-thx">
+        <div class="w-thx-panel">
+            <boxcoin-admin
+                :postId="postId"
+                :postType="postType"
+                v-if="hasRight && adminBoxcoinEnable && boxcoin_enable"
+                :userId="userId"
+                :max="admin_max"
+                :min="admin_min"
+                :own="admin_left"
+                :total="admin_total"
+                :points="admin_points"
+                :authors="authors"
+                @updateRecord="updateRecord"
+                :client="client"
+            />
+            <Like :postId="postId" :postType="postType"></Like>
+            <fav :postId="postId" :postType="postType" :postTitle="postTitle"></fav>
+            <boxcoin-user
+                :postId="postId"
+                :postType="postType"
+                :boxcoin="boxcoin"
+                :userId="userId"
+                :own="user_left"
+                :points="user_points"
+                :authors="authors"
+                v-if="userBoxcoinEnable && boxcoin_enable && allowGift"
+                @updateRecord="updateRecord"
+                :client="client"
+            />
+            <el-tooltip effect="dark" content="打赏记录" placement="top-start">
+                <!-- <div class="w-boxcoin-block"> -->
+                <img
+                    src="../../assets/img/widget/records.svg"
+                    svg-inline
+                    class="u-record-icon"
+                    alt=""
+                    @click="onRecord"
+                />
+                <!-- </div> -->
+            </el-tooltip>
+        </div>
+
+        <el-drawer v-model="showDrawer" title="打赏记录">
+            <BoxcoinRecords
+                :postId="postId"
+                :postType="postType"
+                :postClient="client"
+                :cacheRecord="cacheRecord"
+                :mode="mode"
+            />
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import Like from "../interact/Like.vue";
+import Fav from "../interact/Fav.vue";
+import BoxcoinAdmin from "../interact/BoxcoinAdmin.vue";
+import BoxcoinUser from "../interact/BoxcoinUser.vue";
+import BoxcoinRecords from "@/interact/BoxcoinRecords.vue";
+import User from "@jx3box/jx3box-common/js/user";
+import { getBoxcoinStatus, getPostBoxcoinConfig } from "../../service/thx";
+
+export default {
+    name: "SimpleThx",
+    components: {
+        Like,
+        Fav,
+        BoxcoinAdmin,
+        BoxcoinUser,
+        BoxcoinRecords,
+    },
+    props: {
+        type: {
+            type: String,
+            default: "normal",
+        },
+        postId: {
+            type: Number,
+            default: 0,
+        },
+        postType: {
+            type: String,
+            default: "",
+        },
+        postTitle: {
+            type: String,
+            default: "",
+        },
+        userId: {
+            type: Number,
+            default: 0,
+        },
+        authors: {
+            type: Array,
+            default: () => [],
+        },
+        mode: {
+            type: String,
+            default: "normal",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+        allowGift: {
+            type: Number,
+            default: 1,
+        },
+        adminBoxcoinEnable: {
+            type: Boolean,
+            default: false,
+        },
+        userBoxcoinEnable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            boxcoin: 0,
+            hasRight: User.getInfo().group >= 32,
+            user: User.getInfo(),
+
+            admin_max: 0,
+            admin_min: 0,
+            admin_left: 0,
+            admin_total: 0,
+            admin_points: [100],
+
+            user_left: 0,
+            user_points: [100],
+
+            cacheRecord: null,
+            boxcoin_enable: 0,
+
+            showDrawer: false,
+        };
+    },
+    computed: {
+        post_keys: function () {
+            return [this.postId, this.postType];
+        },
+    },
+    watch: {
+        post_keys: {
+            immediate: true,
+            deep: true,
+            handler: function () {
+                this.postType && this.postId && this.loadBoxcoinConfig();
+            },
+        },
+    },
+    methods: {
+        loadBoxcoinConfig: function () {
+            User.isLogin() &&
+                getPostBoxcoinConfig(this.postType).then((res) => {
+                    this.admin_max = res.data.data.limit.admin_max || 0;
+                    this.admin_min = res.data.data.limit.admin_min || 0;
+                    this.admin_points = res.data.data.limit.admin_points || [10, 1000];
+                    this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
+                    this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
+
+                    this.user_points = res.data.data.limit.user_points || [10, 1000];
+                    // 根据多端展示剩余币
+                    // 作品是n端，接受n端币+all币
+                    if (this.client == "origin") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
+                    } else if (this.client == "std") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainStd + res.data.data.asUserBoxCoinRemainAll;
+                    } else {
+                        this.user_left =
+                            res.data.data.asUserBoxCoinRemainAll +
+                            res.data.data.asUserBoxCoinRemainStd +
+                            res.data.data.asUserBoxCoinRemainOrigin;
+                    }
+                });
+            getBoxcoinStatus().then((res) => {
+                this.boxcoin_enable = !!~~res.data.data.val;
+            });
+        },
+        // 用户打赏
+        updateRecord: function (data) {
+            this.cacheRecord = data;
+        },
+        onRecord: function () {
+            this.showDrawer = true;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/thx.less";
+</style>