@jx3box/jx3box-ui 0.0.1

package/src/author/AuthorHonor.vue

@@ -0,0 +1,128 @@
+<template>
+    <a class="c-author-honor" :style="{ backgroundImage: `url(${imgUrl()})` }" v-if="honor" :href="url" target="_blank">
+        <span :style="{ color: honor.color }">{{ honor.honor }}</span>
+    </a>
+</template>
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getUserHonor } from "../../service/cms";
+import { inRange } from "lodash";
+
+const { __imgPath, __Root } = JX3BOX;
+const HONOR_IMG_KEY = "honor_img";
+export default {
+    props: ["uid"],
+    data: function () {
+        return {
+            honor: "",
+        };
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.getHonor();
+            },
+        },
+    },
+    computed: {
+        isJdt() {
+            return this.honor?.val?.toLowerCase()?.includes("jdt");
+        },
+        url() {
+            return this.honor?.honor_info?.url ? __Root + this.honor?.honor_info?.url : "";
+        },
+    },
+    methods: {
+        imgUrl: function () {
+            let item = this.honor;
+            if (!item) return;
+            if (item.isImgIndex) {
+                return __imgPath + `decoration/honor/${item.img}/${item.img}_${item.imgIndex}.${item.img_ext}`;
+            }
+            return __imgPath + `decoration/honor/${item.img}/${item.img}.${item.img_ext}`;
+        },
+        getHonor() {
+            let user_id = this.uid;
+            if (!user_id) return;
+            let honor_local = sessionStorage.getItem(HONOR_IMG_KEY + user_id) || "";
+            //解析本地缓存
+            if (honor_local == "no") return;
+            try {
+                this.honor = JSON.parse(honor_local);
+            } catch (err) {
+                getUserHonor(user_id).then((res) => {
+                    this.honor = res.data.data;
+                    if (!this.honor) {
+                        //空 则为无主题，不再加载接口，界面设No
+                        sessionStorage.setItem(HONOR_IMG_KEY + user_id, "no");
+                        return;
+                    }
+                    this.getHonorStyle(this.honor);
+                });
+            }
+        },
+        //有称号后，获取样式配置
+        getHonorStyle(honor) {
+            const data = honor;
+            let honorConfig = honor?.honor_info;
+            let only = honorConfig.only;
+            let prefix = honorConfig.prefix;
+            let regPrefix = honorConfig.prefix.match(/\{([^{}]+?)\}/g);
+            let ranking = honorConfig.ranking;
+            let honorStr = honorConfig.year || "";
+
+            console.log(honorConfig, regPrefix);
+            if (!only) {
+                if (regPrefix) {
+                    honorStr = honorStr + (data[regPrefix[0].slice(1, -1)] || "");
+                } else {
+                    honorStr = honorStr + prefix;
+                }
+            } else {
+                honorStr = prefix;
+            }
+            if (ranking.length > 0) {
+                data.imgIndex = 0;
+                for (let i = 0; i < ranking.length; i++) {
+                    if (honor.ranking !== undefined && inRange(Number(honor.ranking), ranking[i][0], ranking[i][1])) {
+                        data.imgIndex = i;
+                        let str = ranking[i][2];
+                        let regStr = str.match(/\{([^{}]+?)\}/g);
+                        if (regStr) {
+                            honorStr =
+                                honorStr +
+                                str.replace(/\{([^{}]+?)\}/g, function (match, p1) {
+                                    return data[p1] || "";
+                                });
+                        } else {
+                            honorStr = honorStr + str;
+                        }
+                        break;
+                    }
+                }
+            }
+            data.honor = honorStr + honorConfig.suffix;
+            data.color = honorConfig.color;
+            data.img = honorConfig.img;
+            data.img_ext = honorConfig.img_ext;
+            data.isHave = true;
+            data.isImgIndex = ranking?.length > 0;
+            sessionStorage.setItem(HONOR_IMG_KEY + this.uid, JSON.stringify(data));
+            this.honor = data;
+        },
+    },
+};
+</script>
+<style lang="less">
+.c-author-honor {
+    .dbi;
+    text-align: center;
+    .mb(10px);
+    .size(220px,45px);
+    color: #ffffff;
+    .fz(10px,45px);
+    .r(2px);
+    background-size: 100% 100%;
+}
+</style>

package/src/author/AuthorInfo.vue

@@ -0,0 +1,245 @@
+<template>
+    <div class="c-author-info">
+        <div class="u-author">
+            <Avatar class="u-avatar" :uid="uid" :url="data.user_avatar" size="s" :frame="data.user_avatar_frame" />
+            <div class="u-info">
+                <div class="u-name">
+                    <el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
+                        <a class="u-superauthor" href="/about/superauthor" target="_blank">
+                            <img :src="super_author_icon" alt="superauthor" />
+                        </a>
+                    </el-tooltip>
+                    <a class="u-displayname" :href="authorLink(uid)" target="_blank" v-if="!anonymous">
+                        {{ data.display_name || "未知" }}
+                    </a>
+                    <span class="u-displayname u-anonymous" v-else>神秘侠士</span>
+                </div>
+                <div class="u-extend">
+                    <el-tooltip class="item" effect="dark" placement="top" v-if="!anonymous">
+                        <template #content>
+                            <span class="u-tips">经验值：{{ data.experience }}</span>
+                        </template>
+                        <a
+                            class="u-level"
+                            :class="'lv-' + level"
+                            :style="{ backgroundColor: showLevelColor(level) }"
+                            href="/about/incentives"
+                            target="_blank"
+                            >Lv.{{ level }}</a
+                        >
+                    </el-tooltip>
+                    <a
+                        v-else
+                        class="u-level"
+                        :class="'lv-' + level"
+                        :style="{ backgroundColor: showLevelColor(level) }"
+                        href="/about/incentives"
+                        target="_blank"
+                        >Lv.{{ level }}</a
+                    >
+                    <el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip && !anonymous">
+                        <a class="u-vip" href="/vip/premium?from=sidebar_author" target="_blank">
+                            <i class="i-icon-vip on">{{ vipType }}</i>
+                        </a>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+        <Honor :uid="uid"></Honor>
+        <div class="u-bio">{{ data.user_bio }}</div>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { authorLink } = utilModule;
+import User from "@jx3box/jx3box-common/js/user";
+import { getUserInfo } from "../../service/author";
+import Avatar from "./Avatar.vue";
+import Honor from "./AuthorHonor.vue";
+
+const { __imgPath, __userLevelColor } = JX3BOX;
+export default {
+    name: "AuthorInfo",
+    props: ["uid", "anonymous"],
+    components: {
+        Avatar,
+        Honor,
+    },
+    data: function () {
+        return {
+            data: {},
+            isVIP: false,
+            super_author_icon: __imgPath + "image/user/" + "superauthor.svg",
+        };
+    },
+    computed: {
+        // level
+        level: function () {
+            return this.anonymous ? -1 : User.getLevel(this.data?.experience);
+        },
+
+        // vip
+        vipType: function () {
+            return this.data?.is_pro ? "PRO" : "PRE";
+        },
+        vipTypeTitle: function () {
+            return this.data?.is_pro ? "专业版会员" : "高级版会员";
+        },
+        isVip: function () {
+            return this.data?.is_pro || this.data?.is_pre;
+        },
+
+        // sign
+        isSuperAuthor: function () {
+            return this.data?.sign;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadData();
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            return getUserInfo(this.uid).then((data) => {
+                if (data) {
+                    this.data = data;
+                    this.$emit("ready", this.data);
+                }
+            });
+        },
+        authorLink,
+        showLevelColor: function (level) {
+            return __userLevelColor[level];
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-author-info {
+    .u-author {
+        .clearfix;
+        .db;
+        .mb(10px);
+        .pr;
+    }
+    .u-avatar {
+        .fl;
+        .mr(15px);
+        .size(68px);
+    }
+    .u-name {
+        .flex;
+        align-items: center;
+    }
+    .u-displayname {
+        .lh(2.2);
+        .bold;
+        color: @darkblue;
+        .nobreak;
+        &:hover {
+            color: #f39;
+        }
+    }
+    .u-anonymous {
+        color: #888;
+        &:hover {
+            color: #888;
+        }
+    }
+    .u-superauthor {
+        // margin-left: 4px;
+        // display: inline-block;
+        // vertical-align: -2px;
+        .fz(12px);
+        flex-shrink: 0;
+        img {
+            .size(16px);
+        }
+    }
+
+    .u-info {
+        .pr;
+        top: -4px;
+        .h(68px);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    .u-bio {
+        .fz(12px, 2);
+        .break(3);
+        color: #888;
+        padding: 0 5px;
+    }
+    .u-extend {
+        display: flex;
+        align-items: center;
+    }
+    .u-level {
+        padding: 2px 8px;
+        .fz(12px, 14px);
+        color: #fff;
+        background-color: #aaa;
+        border-radius: 2px;
+
+        &.lv-1 {
+            background-color: #32d3c4;
+        }
+        &.lv-2 {
+            background-color: #86c0fb;
+        }
+        &.lv-3 {
+            background-color: #33d9ff;
+        }
+        &.lv-4 {
+            background-color: #ffdb2a;
+        }
+        &.lv-5 {
+            background-color: #ffa739;
+        }
+        &.lv-6 {
+            background-color: #ff70b2;
+        }
+        &.lv-7 {
+            background-color: #ff3399;
+        }
+        &.lv-8 {
+            background-color: #f93c3c;
+        }
+    }
+    .u-vip {
+        .ml(5px);
+        .i-icon-vip {
+            .db;
+            padding: 2px 6px;
+            .fz(12px, 14px);
+            font-style: normal;
+            border-radius: 2px;
+            background-color: #ddd;
+            color: #fff;
+            &.on {
+                background-color: #6f42c1;
+            }
+        }
+    }
+    .u-honor {
+        .dbi;
+        text-align: center;
+        .mb(10px);
+        .size(220px,45px);
+        // background-color: #494038;
+        color: #ffffff;
+        .fz(10px,45px);
+        .r(2px);
+    }
+}
+</style>

package/src/author/AuthorLink.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="c-author-link" v-if="isExist">
+        <!-- <AuthorMsg :uid="uid"/> -->
+        <a
+            v-if="data.weibo_name"
+            class="u-link u-link__weibo"
+            :href="weiboLink(data.weibo_id)"
+            target="_blank"
+            :title="data.weibo_name"
+        >
+            <img :src="getIcon('weibo')" />
+        </a>
+        <a
+            v-if="data.github_name"
+            class="u-link u-link__github"
+            :href="githubLink(data.github_name)"
+            target="_blank"
+            :title="data.github_name"
+        >
+            <img :src="getIcon('github')" />
+        </a>
+        <a
+            v-if="data.tv_type && data.tv_id"
+            class="u-link u-link__tv"
+            :class="'u-link__' + data.tv_type"
+            :href="tv_link"
+            target="_blank"
+            :title="`房间号:${data.tv_id}`"
+        >
+            <img :src="getIcon(data.tv_type)" />
+        </a>
+    </div>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { tvLink } = utilModule;
+
+export default {
+    name: "AuthorLink",
+    props: ["data"],
+    components: {
+        // AuthorMsg
+    },
+    data: function () {
+        return {};
+    },
+    computed: {
+        tv_link: function () {
+            return tvLink(this.data.tv_type, this.data.tv_id) || "";
+        },
+        isExist(){
+            return this.data.weibo_name || this.data.github_name || (this.data.tv_type && this.data.tv_id)
+        }
+    },
+    watch: {},
+    methods: {
+        weiboLink: function (val) {
+            return "https://weibo.com/" + val;
+        },
+        githubLink: function (val) {
+            return "https://github.com/" + val;
+        },
+        getIcon: function (val) {
+            // console.log(process.env);
+            // return __imgPath + "image/author/" + val + ".svg";
+            const img = require("../../assets/img/author/" + val + ".svg");
+            // console.log(img)
+            return img;
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.c-author-link {
+    padding: 0 2px;
+    .flex;
+    align-items: center;
+    .u-link {
+        .mr(3px);
+        .r(50%);
+        .flex;
+        justify-content: center;
+        align-items: center;
+        .size(18px);
+        box-sizing: border-box;
+    }
+    img,
+    svg {
+        .size(18px);
+    }
+    .u-link__weibo {
+        background-color: #ffbf5f;
+        padding: 2px;
+    }
+    .u-link__bilibili {
+        padding: 3px;
+        background-color: #ff549d;
+        svg {
+            fill: #fff;
+        }
+    }
+    .u-link__huya{
+        padding: 2px;
+        background-color: #ffbf5f;
+    }
+    .u-link__douyu{
+    }
+}
+</style>

package/src/author/AuthorMedals.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="c-author-medals" v-if="ready">
+        <div class="u-label">
+            <img svg-inline src="../../assets/img/leftsidebar/medal.svg" />
+            <span>作者荣誉</span>
+        </div>
+        <div class="u-medals" v-if="medals && medals.length">
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.medal_desc"
+                placement="top"
+                v-for="item in medals"
+                :key="item.id"
+            >
+                <a :href="getMedalLink(item)" target="_blank" class="u-medal">
+                    <img class="u-medal-img" :src="showIcon(item.medal)" />
+                </a>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { getMedalLink } = utilModule;
+import { getUserMedals } from "../../service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const { __cdn, __Root } = JX3BOX;
+
+export default {
+    name: "AuthorMedals",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {
+            medals: [],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.medals && this.medals.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadMedals();
+            },
+        },
+    },
+    methods: {
+        loadMedals: function () {
+            getUserMedals(this.uid, {is_wear: 1}).then((data) => {
+                this.medals = data || [];
+            });
+        },
+        showIcon(medal) {
+            return __cdn + "design/medals/user/" + medal + ".gif";
+        },
+        getMedalLink(medal) {
+            if (medal.medal_url) return `${__Root}${medal.medal_url}`;
+            return getMedalLink(medal.rank_id, medal.medal_type || "rank");
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-author-medals {
+    .u-medals {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .u-medal {
+        cursor: pointer;
+        .mr(2px);
+        .u-medal-img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+</style>

package/src/author/AuthorMsg.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="c-author-msg">
+        <img src="../../assets/img/author/msg.svg" svg-inline title="短消息" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "AuthorMsg",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {};
+    },
+    computed: {},
+    watch: {},
+    methods: {},
+    created: function () {},
+    mounted: function () {
+        // 需要判断是否接受私信
+    },
+};
+</script>
+
+<style scoped lang="less"></style>