@jx3box/jx3box-ui 2.0.5 → 2.0.6

package/src/interact/BoxcoinUser.vue

@@ -1,19 +1,29 @@
 <template>
     <div class="w-boxcoin-user" v-if="allowBoxcoin">
-        <el-tooltip effect="dark" content="投币" placement="top-start" v-if="canGift">
+        <el-tooltip
+            effect="dark"
+            :content="$jx3boxT('jx3boxUi.boxcoinUser.tooltip', '投币')"
+            placement="top-start"
+            v-if="canGift"
+        >
             <div class="w-boxcoin-block" @click="openBoxcoinPop">
                 <img class="u-icon" svg-inline :src="iconPath" />
                 <span class="u-count" v-if="boxcoin">{{ boxcoin }}</span>
             </div>
         </el-tooltip>
-        <el-tooltip effect="dark" content="您当前等级不够，不能够进行投币。" placement="top" v-else>
+        <el-tooltip
+            effect="dark"
+            :content="$jx3boxT('jx3boxUi.boxcoinUser.disabledTooltip', '您当前等级不够，不能够进行投币。')"
+            placement="top"
+            v-else
+        >
             <div class="w-boxcoin-block disabled">
                 <img class="u-icon" svg-inline :src="iconPath" />
                 <span class="u-count" v-if="boxcoin">{{ boxcoin }}</span>
             </div>
         </el-tooltip>
         <el-dialog
-            title="投币打赏"
+            :title="$jx3boxT('jx3boxUi.boxcoinUser.dialogTitle', '投币打赏')"
             v-model="visible"
             class="w-boxcoin-pop"
             append-to-body
@@ -21,34 +31,34 @@
         >
             <div class="w-boxcoin-user-content">
                 <div class="u-left">
-                    <em class="u-label">当前拥有盒币</em>
+                    <em class="u-label">{{ $jx3boxT("jx3boxUi.boxcoinUser.currentBoxcoin", "当前拥有盒币") }}</em>
                     <b>{{ left }}</b>
-                    <a class="u-charge" :href="chargeLink" target="_blank">[充值]</a>
+                    <a class="u-charge" :href="chargeLink" target="_blank">[{{ $jx3boxT("jx3boxUi.boxcoinUser.recharge", "充值") }}]</a>
                 </div>
                 <div class="u-list">
-                    <em class="u-label">❤️ 打赏</em>
+                    <em class="u-label">❤️ {{ $jx3boxT("jx3boxUi.boxcoinUser.reward", "打赏") }}</em>
                     <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :value="item" v-for="item in fitPoints" :key="item" border>
                                 <b>{{ item }}</b
-                                >盒币
+                                >{{ $jx3boxT("jx3boxUi.boxcoinUser.boxcoin", "盒币") }}
                             </el-radio>
-                            <el-radio value="custom" border>自定义</el-radio>
+                            <el-radio value="custom" border>{{ $jx3boxT("jx3boxUi.boxcoinUser.custom", "自定义") }}</el-radio>
                             <el-input
                                 v-model="amount"
                                 v-show="count === 'custom'"
-                                placeholder="输入自定义数量"
+                                :placeholder="$jx3boxT('jx3boxUi.boxcoinUser.customPlaceholder', '输入自定义数量')"
                             ></el-input>
                         </el-radio-group>
                     </div>
                 </div>
                 <div class="u-msg">
-                    <em class="u-label">📝 寄语</em>
+                    <em class="u-label">📝 {{ $jx3boxT("jx3boxUi.boxcoinUser.remark", "寄语") }}</em>
                     <div class="u-input">
                         <el-input
                             v-model="remark"
-                            placeholder="请输入寄语（必填）"
+                            :placeholder="$jx3boxT('jx3boxUi.boxcoinUser.remarkPlaceholder', '请输入寄语（必填）')"
                             :minlength="2"
                             :maxlength="30"
                             show-word-limit
@@ -58,8 +68,10 @@
             </div>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="visible = false">取 消</el-button>
-                    <el-button type="primary" @click="submit" :disabled="!ready">确 定</el-button>
+                    <el-button @click="visible = false">{{ $jx3boxT("jx3boxUi.common.cancel", "取消") }}</el-button>
+                    <el-button type="primary" @click="submit" :disabled="!ready">{{
+                        $jx3boxT("jx3boxUi.common.confirm", "确定")
+                    }}</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -72,8 +84,10 @@ import User from "@jx3box/jx3box-common/js/user";
 import Contributors from "./Contributors.vue";
 import { debounce } from "lodash";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "BoxcoinUser",
+    mixins: [i18nMixin],
     props: {
         boxcoin: {
             type: Number,
@@ -124,7 +138,7 @@ export default {
             visible: false,
 
             count: 0,
-            remark: "辛苦了，谢谢大大！",
+            remark: this.$jx3boxT("jx3boxUi.boxcoinUser.defaultRemark", "辛苦了，谢谢大大！"),
             amount: "",
 
             left: this.own,
@@ -190,7 +204,7 @@ export default {
             })
                 .then((res) => {
                     this.$message({
-                        message: "操作成功",
+                        message: this.$jx3boxT("jx3boxUi.boxcoinUser.success", "操作成功"),
                         type: "success",
                     });
                     return res.data.data;
@@ -216,6 +230,10 @@ export default {
 .w-boxcoin-user {
     .dbi;
     .x(left);
+    .w-boxcoin-block {
+        .flex;
+        align-items: center;
+    }
     .u-icon {
         .size(26px);
         .y;
@@ -224,8 +242,6 @@ export default {
     .u-count {
         color: #888;
         .ml(10px);
-        .pr;
-        top: 4px;
     }
     .u-charge {
         .underline(@color-link);

package/src/interact/Fav.vue

@@ -14,8 +14,10 @@
 import User from "@jx3box/jx3box-common/js/user";
 import { hasFav, addFav, delFav } from "../../service/fav";
 import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "FavoriteComp",
+    mixins: [i18nMixin],
     props: {
         postType: {
             type: String,
@@ -47,7 +49,9 @@ export default {
     },
     computed: {
         favContent() {
-            return this.favorite ? "已收藏" : "收藏";
+            return this.favorite
+                ? this.$jx3boxT("jx3boxUi.fav.collected", "已收藏")
+                : this.$jx3boxT("jx3boxUi.fav.collect", "收藏");
         },
         starIcon() {
             return this.isOld ? require("../../assets/img/widget/star.svg") : JX3BOX.__cdn + "design/vector/icon/collect.svg"

package/src/interact/Homework.vue

@@ -0,0 +1,318 @@
+<template>
+    <div class="w-boxcoin-admin">
+        <el-dialog
+            :title="dialogTitle"
+            v-model="show"
+            class="w-boxcoin-pop"
+            :close-on-click-modal="false"
+            append-to-body
+            @close="onClose"
+        >
+            <div class="w-boxcoin-admin-content">
+                <div class="u-left" v-if="type == 'grant'">
+                    <em class="u-label">本月状态</em>
+                    已用<b>{{ this.used }}</b> 剩余<b>{{ this.left }}</b> 总计<b>{{ this.total }}</b>
+                    <el-progress
+                        :percentage="this.total ? 100 - (this.used * 100) / this.total : 0"
+                        :stroke-width="15"
+                        :text-inside="true"
+                    ></el-progress>
+                </div>
+                <div class="u-left" v-else>
+                    <em class="u-label">当前拥有盒币</em>
+                    <b>{{ left }}</b>
+                    <!-- <a class="u-charge" :href="chargeLink" target="_blank">[充值]</a> -->
+                </div>
+                <el-radio-group class="u-homework-type" v-model="type" size="small" v-if="hasPermission">
+                    <el-radio-button label="grant">品鉴</el-radio-button>
+                    <el-radio-button label="reward">打赏</el-radio-button>
+                </el-radio-group>
+                <div class="u-list">
+                    <em class="u-label">❤️ {{ type == "reward" ? "打赏" : "品鉴" }}</em>
+                    <div class="u-points">
+                        <el-radio-group v-model="count">
+                            <el-radio :value="item" v-for="item in fitPoints" :key="item" border>
+                                <b>{{ item }}</b
+                                >盒币
+                            </el-radio>
+                            <el-radio value="custom"  border>自定义</el-radio>
+                            <el-input
+                                v-model="amount"
+                                v-show="count === 'custom'"
+                                placeholder="输入自定义数量"
+                            ></el-input>
+                        </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>
+                <el-button @click="onClose" >取 消</el-button>
+                <el-button type="primary" @click="submit" :disabled="!ready || submitting" >确 定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { grantBoxcoin, getPostBoxcoinConfig, getBoxcoinStatus, rewardBoxcoin } from "../../service/thx.js";
+import User from "@jx3box/jx3box-common/js/user";
+import { getBreadcrumb } from "@jx3box/jx3box-common/js/system";
+export default {
+    name: "Homework",
+    props: {
+        postType: {
+            type: String,
+            default: "",
+        },
+        postId: {
+            type: [String, Number],
+            default: 0,
+        },
+        userId: {
+            type: [String, Number],
+            default: 0,
+        },
+        client: {
+            type: String,
+            default: "",
+        },
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        articleId: {
+            type: [String, Number],
+            default: 0,
+        },
+        category: {
+            type: String,
+            default: "",
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+        placeholder: {
+            type: String,
+            default: "",
+        }
+    },
+    emits: ["update:modelValue", "updateRecord"],
+    data: function () {
+        return {
+            count: 0,
+
+            remark: "不错，加油！",
+            chosen: "", // 被选中的人
+            amount: "",
+
+            submitting: false,
+            fetchingCurrentRelease: false,
+
+            // 打赏or品鉴
+            type: "reward",
+
+            // config
+            admin_max: 0,
+            admin_min: 0,
+            admin_left: 0,
+            admin_total: 0,
+            admin_points: [100],
+
+            user_left: 0,
+            user_points: [100],
+            boxcoin_enable: false,
+
+            show: false,
+        };
+    },
+    computed: {
+        left() {
+            return this.type === "reward" ? this.user_left : this.admin_left;
+        },
+        hasPermission() {
+            return User.hasPermission("manage_bbs_reward");
+        },
+        total: function () {
+            return this.admin_total;
+        },
+        used: function () {
+            return this.total - this.left;
+        },
+        ready: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            // 不能给自己打赏，打赏目标不能是自己
+            // 打赏数量不能超过剩余数量
+            // 打赏数量不能为0
+            // 打赏寄语不能为空
+            return !!(!this.isSelf && !this.targetIsSelf && this.isEnough && count && this.remark);
+        },
+        isNotSelf: function () {
+            return this.userId != User.getInfo().uid;
+        },
+        targetIsSelf: function () {
+            return this.chosen == User.getInfo().uid;
+        },
+        isEnough: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            return this.left && this.left >= count;
+        },
+        allowBoxcoin: function () {
+            return this.postType && this.postId && (this.userId || (this.authors && this.authors.length));
+        },
+        hostClient: function () {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+        points: function () {
+            return this.type === "reward" ? this.user_points : this.admin_points;
+        },
+        fitPoints: function () {
+            const points = this.points.filter((item) => item <= this.left);
+            if (this.isSignAuthor) {
+                // 最大值为1000
+                return points.filter((item) => item <= 1000);
+            }
+            return points;
+        },
+        isSignAuthor: function () {
+            return User.getInfo().group == 32;
+        },
+        finalClient: function () {
+            if (this.client == "wujie") {
+                return "std";
+            }
+            return this.client;
+        },
+        dialogTitle() {
+            return this.title || "批改作业";
+        },
+    },
+    watch: {
+        own: function (val) {
+            this.left = val;
+        },
+        modelValue: function (val) {
+            if (val) {
+                this.show = true;
+                this.loadBoxcoinConfig();
+
+                if (this.hasPermission) {
+                    this.type = 'grant'
+                }
+            }
+        },
+        show: function (val) {
+            this.$emit("update:modelValue", val);
+        },
+    },
+    methods: {
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId;
+        },
+        submit: function () {
+            this.submitting = true;
+            const count = this.count === "custom" ? this.amount : this.count;
+            let client = this.client || this.hostClient;
+            if (!["std", "origin", "all"].includes(client)) {
+                client = "std";
+            }
+            const fn = this.type === "reward" ? rewardBoxcoin : grantBoxcoin;
+            fn(this.postType, this.postId, this.userId, count, {
+                remark: this.remark,
+                client: client,
+                redirect: `/${this.category}/${this.articleId}`,
+            })
+                .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.onClose();
+                });
+        },
+        insertCurrentRelease: function () {
+            this.fetchingCurrentRelease = true;
+            getBreadcrumb(`current-release-${this.hostClient}`)
+                .then((res) => {
+                    this.remark += res;
+                })
+                .catch((err) => {
+                    this.$message({
+                        message: "获取失败",
+                        type: "error",
+                    });
+                })
+                .finally(() => {
+                    this.fetchingCurrentRelease = false;
+                });
+        },
+        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.finalClient == "origin") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
+                    } else if (this.finalClient == "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;
+            });
+        },
+        onClose() {
+            this.show = false
+        },
+    },
+    mounted() {
+        this.remark = this.placeholder || "不错，加油！";
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/single/thx.less";
+.u-homework-type {
+    margin-top: 10px;
+}
+</style>

package/src/interact/Like.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-like2" :class="{ disabled: !status }" @click="addLike" v-if="ready">
-        <el-tooltip effect="dark" content="点赞" placement="top-start">
-            <div>
+        <el-tooltip effect="dark" :content="$jx3boxT('jx3boxUi.like.like', '点赞')" placement="top-start">
+            <div class="w-like2__trigger">
                 <img class="u-icon" svg-inline :src="iconPath" />
                 <span class="u-count" v-if="count">{{ count }}</span>
             </div>
@@ -12,8 +12,10 @@
 <script>
 import { postStat, getStat } from "@jx3box/jx3box-common/js/stat";
 import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "LikeComp",
+    mixins: [i18nMixin],
     props: {
         postType: {
             type: String,

package/src/interact/Rss.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-rss">
         <el-tooltip effect="dark" :content="tooltipContent" placement="top-start">
-            <div @click="onRssClick">
+            <div class="w-rss__trigger" @click="onRssClick">
                 <img v-if="subscribed" class="u-icon" svg-inline :src="rmSrc" />
                 <img v-else class="u-icon" svg-inline :src="addSrc" />
                 <span class="u-count" v-if="!hiddenNum && total > 0">{{ total }}</span>
@@ -24,9 +24,11 @@ import {
     unsubscribePost,
 } from "@jx3box/jx3box-common/js/rss";
 const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+import i18nMixin from "../../i18n/mixin";
 
 export default {
     name: "RssComponent",
+    mixins: [i18nMixin],
     props: {
         type: {
             type: String,
@@ -53,7 +55,9 @@ export default {
     },
     computed: {
         tooltipContent() {
-            return this.subscribed ? "已订阅" : "加入订阅";
+            return this.subscribed
+                ? this.$jx3boxT("jx3boxUi.rss.subscribed", "已订阅")
+                : this.$jx3boxT("jx3boxUi.rss.subscribe", "加入订阅");
         },
         addSrc() {
             return jx3box.__cdn + "design/vector/icon/rss.svg";
@@ -153,11 +157,13 @@ export default {
         .y;
         .pr;
     }
+    .w-rss__trigger {
+        .flex;
+        align-items: center;
+    }
     .u-count {
         color: #888;
         .ml(10px);
-        top: 2px;
-        .pr;
     }
 }
 </style>

package/src/interact/Share.vue

@@ -8,7 +8,7 @@
                         class="u-share2-item"
                         :key="shareItem.key"
                         @click="share(shareItem.key)"
-                        title="分享"
+                        :title="$jx3boxT('jx3boxUi.share.share', '分享')"
                     >
                         <img class="u-share-icon" svg-inline :src="shareItem.img" :alt="shareItem.name">
                         <div class="u-share2-name">{{ shareItem.name }}</div>
@@ -22,24 +22,21 @@
                         :size="75"
                         level="H"
                     ></qrcode-vue>
-                    <span>微信扫一扫分享</span>
+                    <span>{{ $jx3boxT("jx3boxUi.share.wechatShare", "微信扫一扫分享") }}</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> -->
+                <div v-if="simple">
+                    <img class="u-icon u-simple-icon" svg-inline :src="iconPath" />
+                    <span class="u-text">{{ $jx3boxT("jx3boxUi.share.share", "分享") }}</span>
+                </div>
+                <img
+                    v-else
+                    class="u-icon"
+                    svg-inline
+                    :src="iconPath"
+                />
             </template>
         </el-popover>
     </div>
@@ -48,10 +45,12 @@
 <script>
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import QrcodeVue from "qrcode.vue";
+import i18nMixin from "../../i18n/mixin";
 
 const { __imgPath } = JX3BOX;
 export default {
     name: "ShareComp",
+    mixins: [i18nMixin],
     props: {
         postType: {
             type: String,
@@ -81,22 +80,22 @@ export default {
             },
             shareList: [
                 {
-                    name: '微博',
+                    name: this.$jx3boxT("jx3boxUi.share.weibo", "微博"),
                     key: 'weibo',
                     img: require('../../assets/img/widget/weibo.svg'),
                 },
                 {
-                    name: 'QQ',
+                    name: this.$jx3boxT("jx3boxUi.share.qq", "QQ"),
                     key: 'qq',
                     img: require('../../assets/img/widget/qq.svg'),
                 },
                 {
-                    name: 'QQ空间',
+                    name: this.$jx3boxT("jx3boxUi.share.qzone", "QQ空间"),
                     key: 'qzone',
                     img: require('../../assets/img/widget/qzone.svg'),
                 },
                 {
-                    name: '贴吧',
+                    name: this.$jx3boxT("jx3boxUi.share.tieba", "贴吧"),
                     key: 'tieba',
                     img: require('../../assets/img/widget/tieba.svg'),
                 },

package/src/interact/WatchLater.vue

@@ -14,8 +14,10 @@ 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";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "WatchLater",
+    mixins: [i18nMixin],
     props: {
         category: {
             type: String,
@@ -46,7 +48,9 @@ export default {
     },
     computed: {
         favContent() {
-            return this.favorite ? "已添加稍后在看" : "添加至稍后再看";
+            return this.favorite
+                ? this.$jx3boxT("jx3boxUi.watchLater.added", "已添加稍后在看")
+                : this.$jx3boxT("jx3boxUi.watchLater.add", "添加至稍后再看");
         },
         addSrc() {
             return JX3BOX.__cdn + "design/vector/icon/time.svg"

package/src/main.js

@@ -46,6 +46,7 @@ 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";
+import "@jx3box/jx3box-common/css/element-fonticon.css";
 
 const __elementLocaleMap = {
     "zh-CN": zhCn,