@jx3box/jx3box-common-ui 6.1.2 → 6.1.5

package/src/Author.vue

@@ -1,225 +1,52 @@
 <template>
-    <div class="c-author" v-if="data">
-        <div class="u-author">
-            <Avatar class="u-avatar" :uid="uid" :url="data.user_avatar" :size="68" :frame="data.user_avatar_frame" />
-            <div class="u-info">
-                <a class="u-name" :href="authorLink(uid)" target="_blank">
-                    <span>{{ data.display_name.slice(0, 8) }}</span>
-                    <el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
-                        <a class="u-superauthor" href="/dashboard/#/cooperation" target="_blank">
-                            <img :src="super_author_icon" alt="superauthor" />
-                        </a>
-                    </el-tooltip>
-                </a>
-                <div class="u-extend">
-                    <el-tooltip class="item" effect="dark" placement="top">
-                        <div slot="content">
-                            <span class="u-tips">经验值：{{ data.experience }}</span>
-                        </div>
-                        <span class="u-level" :class="'lv-' + level" :style={backgroundColor:showLevelColor(level)}>Lv.{{ level }}</span>
-                    </el-tooltip>
-                    <el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip">
-                        <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 class="c-author">
+        <AuthorInfo :uid="uid" @ready="installModules" />
+        <template v-if="data">
+            <div class="u-fans">
+                <AuthorFollow style="margin-right: 8px;" :uid="uid" />
+                <AuthorGift :uid="uid" />
             </div>
-        </div>
-        <div class="u-bio">{{ data.user_bio }}</div>
-        <AuthorFollow class="u-follow-box" :uid="uid" />
-        <div class="u-link" v-if="hasLink">
-            <a v-if="data.weibo_name" class="u-weibo" :href="weiboLink(data.weibo_id)" target="_blank">
-                <img svg-inline src="../assets/img/author/weibo.svg" />
-                {{ data.weibo_name }}
-            </a>
-            <a v-if="data.github_name" class="u-github" :href="githubLink(data.github_name)" target="_blank">
-                <img svg-inline src="../assets/img/author/github.svg" />
-                {{ data.github_name }}
-            </a>
-            <div v-if="data.tuilan_id" class="u-tuilan" title="推栏ID">
-                <img src="../assets/img/author/tuilan.png" />
-                {{ data.tuilan_id }}
-            </div>
-            <a v-if="data.tv_type && data.tv_id" class="u-tv" :href="tv_link" target="_blank">
-                <img :src="tv_img" />
-                {{ data.tv_id }}
-                <span class="u-tv-living" v-if="tv_status">
-                    <div class="u-tv-living-icon">
-                        <div class="u-tv-living-icon-col first"></div>
-                        <div class="u-tv-living-icon-col"></div>
-                        <div class="u-tv-living-icon-col last"></div>
-                    </div>
-                </span>
-            </a>
-        </div>
-        <slot></slot>
-        <div class="u-trophy" v-if="hasTrophy">
-            <div class="u-label">
-                <i class="el-icon-trophy"></i>
-                <span>作者荣誉</span>
-            </div>
-            <div class="u-medals" v-if="medals && medals.length">
-                <!-- <span class="u-medal" v-for="(item, i) in medals" :key="i">
-                    <img :src="showMedalIcon(item.medal)" :title="showMedalDesc(item)" />
-                </span> -->
-                <medal :medals="medals" :showIcon="showMedalIcon"></medal>
-            </div>
-        </div>
-        <div class="u-teams" v-if="teams && teams.length">
-            <div class="u-label">
-                <i class="el-icon-school"></i>
-                <span>所属团队</span>
-            </div>
-            <a class="u-team" v-for="(item, i) in teams" :key="i" :href="teamLink(item.team_id)" target="_blank">
-                <img class="u-team-logo" :src="showTeamLogo(item.team_logo)" />
-                <span class="u-team-name">{{ item.team_name }}@{{ item.team_server }}</span>
-            </a>
-        </div>
-        <Authorposts :uid="uid" />
+            <!-- <AuthorMsg :uid="uid" /> -->
+            <AuthorLink class="u-links" :uid="uid" :data="data" />
+            <AuthorMedals class="u-trophy" :uid="uid" />
+            <AuthorTeams class="u-teams" :uid="uid" />
+            <slot></slot>
+            <AuthorPosts class="u-posts" :uid="uid" />
+        </template>
     </div>
 </template>
 
 <script>
-// const liveStatusMap = ["等待开播", "直播中", "直播结束"];
-import { authorLink, tvLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { __server, __imgPath,__userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
-import { getUserInfo, getDouyu, getUserMedals, getUserPublicTeams } from "../service/author";
-import { user as medal_map } from "@jx3box/jx3box-common/data/medals.json";
-import User from "@jx3box/jx3box-common/js/user";
-import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
-// components
-import medal from './medal/medal.vue'
-import Avatar from "./author/Avatar.vue";
-import Authorposts from "./author/Authorposts.vue";
+import AuthorInfo from "./author/AuthorInfo.vue";
+import AuthorLink from "./author/AuthorLink.vue";
 import AuthorFollow from "./author/AuthorFollow.vue";
+// import AuthorMsg from "./author/AuthorMsg.vue";
+import AuthorGift from "./author/AuthorGift.vue";
+import AuthorMedals from "./author/AuthorMedals.vue";
+import AuthorTeams from "./author/AuthorTeams.vue";
+import AuthorPosts from "./author/AuthorPosts.vue";
 export default {
     name: "Author",
     props: ["uid"],
-    data: function() {
+    data: function () {
         return {
             data: "",
-            tv: "",
-            medals: [],
-            medal_map,
-            teams: [
-                // {
-                //     team_name : '诗画印象',
-                //     team_logo : 'https://oss.jx3box.com/2019/09/logo.png',
-                //     team_server : "蝶恋花"
-                // }
-            ],
-            isVIP: false,
         };
     },
-    computed: {
-        tv_type: function() {
-            return this.data && this.data.tv_type;
-        },
-        tv_id: function() {
-            return (this.data && this.data.tv_id) || 0;
-        },
-        tv_img: function() {
-            return __imgPath + "image/tv/" + this.tv_type + ".png";
-        },
-        tv_link: function() {
-            return tvLink(this.tv_type, this.tv_id) || "";
-        },
-        tv_status: function() {
-            return (this.tv && this.tv.show_status == 1) || false;
-        },
-        super_author_icon: function() {
-            return __imgPath + "image/user/" + "superauthor.svg";
-        },
-        hasLink: function() {
-            return this.data.weibo_name || this.data.github_name || this.data.tuilan_id || this.data.tv_id;
-        },
-        hasTrophy: function() {
-            return this.medals.length;
-        },
-        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;
-        },
-        isSuperAuthor: function() {
-            return this.data?.sign;
-        },
-        level: function() {
-            return User.getLevel(this.data?.experience);
-        },
-    },
     methods: {
-        loadData: function() {
-            return getUserInfo(this.uid)
-                .then((data) => {
-                    this.data = data;
-                })
-                .then(() => {
-                    this.loadMedals();
-                    this.loadTeams();
-                });
-        },
-        loadTV: function() {
-            if (this.tv_type == "douyu") {
-                if (!this.tv_id || isNaN(this.tv_id)) return;
-                getDouyu(this.tv_id).then((data) => {
-                    this.tv = data;
-                });
-            }
-        },
-        loadMedals: function() {
-            getUserMedals(this.uid).then((data) => {
-                this.medals = data;
-            });
-        },
-        loadTeams: function() {
-            getUserPublicTeams(this.uid).then((data) => {
-                this.teams = data && data.slice(0, 5);
-            });
-        },
-
-        // filters
-        showMedalIcon: function(val) {
-            return __imgPath + "image/medals/user/" + val + ".gif";
-        },
-        showMedalDesc: function(item) {
-            return item.medal_desc || medal_map[item.medal];
+        installModules: function (data) {
+            this.data = data;
         },
-        authorLink,
-        weiboLink: function(val) {
-            return "https://weibo.com/" + val;
-        },
-        githubLink: function(val) {
-            return "https://github.com/" + val;
-        },
-        teamLink: function(team_id) {
-            return getLink("org", team_id);
-        },
-        showTeamLogo: function(val) {
-            return getThumbnail(val, 96);
-        },
-        showLevelColor:function (level){
-            return __userLevelColor[level]
-        }
-    },
-    watch: {
-        uid: function() {
-            this.loadData();
-        },
-    },
-    mounted: function() {
-        this.uid && this.loadData();
     },
     components: {
-        Avatar,
-        Authorposts,
-        medal,
+        AuthorInfo,
+        AuthorLink,
         AuthorFollow,
+        // AuthorMsg,
+        AuthorGift,
+        AuthorMedals,
+        AuthorTeams,
+        AuthorPosts,
     },
 };
 </script>

package/src/GameText.vue

@@ -0,0 +1,144 @@
+<!--
+ * @Author: X3ZvaWQ
+ * @Date: 2022-08-20 20:23:57
+ * @LastEditors: X3ZvaWQ
+ * @LastEditTime: 2022-08-20 23:12:34
+ * @Description: 用于渲染游戏内Text标签的文本
+-->
+<template>
+    <span v-html="html"></span>
+</template>
+
+<script>
+import { extractTextContent, getLink } from "@jx3box/jx3box-common/js/utils";
+import { getResource } from "../service/resource";
+
+export default {
+    name: "GameText",
+    props: {
+        text: {
+            type: String,
+            default: "",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+    },
+    data: function () {
+        return {
+            html: "",
+        };
+    },
+    methods: {
+        /**
+         * 渲染某一个单独的Text标签成Span或链接
+         * @param {*} school_id
+         * @returns
+         */
+        renderItemHtml: function (item) {
+            let content = item.text;
+            let style = ``;
+            let link = null;
+            content = content.replace(/\n/g, "<br />").replace(/\\/g, "");
+            if ([item.r, item.g, item.b].every((v) => v != undefined && v > 0)) {
+                style = `color: rgb(${item.r}, ${item.g}, ${item.b});`;
+            } else if (item.font != undefined) {
+                const fonts = require("../assets/data/game_font.json");
+                for (let color in fonts) {
+                    if (fonts[color].includes(item.font)) {
+                        style = `color: ${color};`;
+                        break;
+                    }
+                }
+            }
+            if (item.name == "iteminfolink" && item.script) {
+                let item_type = item.script?.match(/this\.dwTabType=(\d+)/i)?.[1];
+                let item_index = item.script?.match(/this\.dwIndex=(\d+)/i)?.[1];
+                if (item_type && item_index) {
+                    let item_id = `${item_type}_${item_index}`;
+                    link = getLink("item", item_id);
+                }
+            }
+            if (link) {
+                return `<a style="${style} text-decoration: none;" target="_blank" href="${link}">${content}</a>`;
+            } else {
+                return `<span style="${style}">${content}</span>`;
+            }
+        },
+        /**
+         * 将一段游戏内文本转换为Html
+         * @param {Object[]} texts 标签对象
+         */
+        renderTextHtml: function (Text) {
+            let result = Text;
+            const matches = Text.match(/<Text>(.*?)<\/text>/gimsy);
+            if (!matches) return Text;
+            for (let match of matches) {
+                let text = extractTextContent(match);
+                let html = this.renderItemHtml(text[0]);
+                result = result.replace(match, html);
+            }
+            return result;
+        },
+        /**
+         * 获取形如<BUFF 110 1 desc>的资源字段并转换
+         */
+        renderResource: function () {
+            const matches = this.html.match(/<BUFF (\d+) (\d+) (.*?)>/gim);
+            if (!matches) return;
+            for (let match of matches) {
+                let [, id, level, type] = match.match(/<BUFF (\d+) (\d+) (.*?)>/i);
+                type = type.toLowerCase();
+                let type_map = {
+                    desc: "Desc",
+                    time: "Interval",
+                };
+                getResource(`buff.${id}_${level}`, this.client)
+                    .then((res) => {
+                        let data = res.data;
+                        let attr = type_map[type] || type;
+                        let value = data[attr];
+                        if (typeof value == "number" && type == "time") {
+                            let time = value / 16;
+                            if (time > 60) {
+                                time = `${Math.floor(time / 60)}分钟`;
+                            } else {
+                                time = `${time}秒`;
+                            }
+                            this.html = this.html.replace(match, time);
+                            return;
+                        }
+                        if (!value) return;
+                        let _matches = value.match(/<BUFF ([0-9a-zA-Z]+)>/gi);
+                        if (!_matches) this.html = this.html.replace(match, value);
+                        for (let _match of _matches) {
+                            let [, _attr] = _match.match(/<BUFF ([0-9a-zA-Z]+)>/i);
+                            for (let i = 1; i < 15; i++) {
+                                if (data[`BeginAttrib${i}`] == _attr) {
+                                    value = value.replace(_match, data[`BeginValue${i}A`]);
+                                }
+                            }
+                        }
+                        this.html = this.html.replace(match, value);
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
+    },
+    watch: {
+        text: {
+            immediate: true,
+            handler: function (val) {
+                this.html = this.renderTextHtml(val);
+                this.renderResource();
+            },
+        },
+    },
+};
+</script>
+
+<style>
+</style>

package/src/author/AuthorFollow.vue

@@ -1,45 +1,31 @@
 <template>
-    <div class="u-follow">
-        <!-- <template v-if="isLogin">
-            <template v-if="isSelf">
-                <div class="u-fans-box">
-                    <span class="u-fans-label">关注</span>
-                    <span class="u-fans">{{ formatFansNum(fansNum) }}</span>
-                </div>
-            </template>
-            <template v-else>
-
-            </template>
-        </template>
-        <el-button class="u-fans-box" @click="follow" size="mini" v-else>
-            <span class="u-fans-label">关注</span>
-            <span class="u-fans">{{ formatFansNum(fansNum) }}</span>
-        </el-button> -->
+    <div class="c-author-follow">
         <el-button
             v-if="!isFollow"
+            class="u-btn"
             :class="{ 'is-follow': isFollow, 'u-fans-box': isSelf }"
             size="mini"
-            :icon="!isSelf && btnIcon"
+            plain
+            :icon="btnIcon"
             @click="follow"
-            :type="isSelf ? '' : btnType"
             :loading="loading"
             :disabled="isSelf"
         >
-            {{ btnText }}<span class="u-follow-count">{{ formatFansNum(fansNum) }}</span>
+            {{ btnText }}
+            <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }} </span> -->
         </el-button>
-        <el-popover
-            v-else
-            placement="bottom"
-            trigger="hover"
-            popper-class="u-follow-popover"
-            :visible-arrow="false"
-        >
+        <el-popover v-else placement="bottom" trigger="hover" popper-class="u-follow-popover" :visible-arrow="false">
             <div class="u-action-list">
-                <div class="u-action-item" v-for="item in actions" :key="item.label" @click.stop="item.action">{{ item.label }}</div>
+                <div class="u-action-item" v-for="item in actions" :key="item.label" @click.stop="item.action">
+                    {{ item.label }}
+                </div>
             </div>
-            <el-button class="u-unfollow-btn" size="mini" :type="btnType" slot="reference">{{ btnText }}<span class="u-follow-count">{{ formatFansNum(fansNum) }}</span></el-button>
+            <el-button class="u-unfollow-btn" size="mini" :type="btnType" slot="reference"
+                >{{ btnText }}
+                <!-- TODO:后续在粉丝榜中展示粉丝数 -->
+                <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }}</span> -->
+            </el-button>
         </el-popover>
-        <el-button size="mini" icon="el-icon-message" disabled title="Lv4+可用">私信</el-button>
     </div>
 </template>
 
@@ -58,7 +44,7 @@ export default {
         return {
             isFollow: false,
             fansNum: 0,
-            loading: false
+            loading: false,
         };
     },
     computed: {
@@ -66,10 +52,10 @@ export default {
             return this.isFollow ? "已关注" : "关注";
         },
         btnIcon() {
-            return this.isSelf ? "" : (this.isFollow ? "" : "el-icon-plus");
+            return this.isSelf ? "" : this.isFollow ? "" : "el-icon-plus";
         },
         btnType() {
-            return this.isFollow ? "info" : "warning"
+            return this.isFollow ? "info" : "warning";
         },
         actions() {
             return [
@@ -87,7 +73,7 @@ export default {
         user() {
             return User.getInfo();
         },
-        isLogin: function() {
+        isLogin: function () {
             return User.isLogin();
         },
     },
@@ -97,7 +83,7 @@ export default {
             handler(val) {
                 val && this.loadFans();
             },
-        }
+        },
     },
     methods: {
         // 格式化粉丝数
@@ -126,10 +112,10 @@ export default {
         },
         // 取消关注
         unfollow() {
-            this.$confirm('确定不再关注此人？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
+            this.$confirm("确定不再关注此人？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
             }).then(() => {
                 unfollow(this.uid)
                     .then((res) => {
@@ -151,15 +137,24 @@ export default {
                 })
                 .catch((err) => {
                     console.log(err);
-                }).finally(() => {
+                })
+                .finally(() => {
                     this.loading = false;
                 });
-        }
+        },
     },
 };
 </script>
 
-<style lang="less">
+<style scoped lang="less">
+.c-author-follow{
+    // .u-btn{
+    //     background-color: #31dee6;
+    //     border-color:lighten(#31dee6,5%);
+    //     color: #fff;
+    // }
+}
+
 .u-unfollow-btn {
     &.el-button {
         margin-right: 10px;
@@ -176,24 +171,14 @@ export default {
                 cursor: pointer;
                 padding: 8px 10px;
                 &:hover {
-                    background: rgb(248,248,251);
+                    background: rgb(248, 248, 251);
                 }
             }
         }
     }
 }
-.u-follow-count{
-    margin-left:5px;
+.u-follow-count {
+    margin-left: 5px;
 }
 
-.u-fans-box {
-    cursor: default !important;
-    .u-fans-label {
-        color: #999;
-        margin-right: 5px;
-    }
-    .u-fans {
-        color: #333;
-    }
-}
 </style>