@jx3box/jx3box-editor 1.7.2 → 1.7.4

package/assets/css/resource.less

@@ -188,8 +188,7 @@
             .mb(20px);
         }
         .e-jx3-emotion {
-            max-width: 200px;
-            max-height: 200px;
+            height: 200px;
             vertical-align: middle;
             .e-jx3-emotion-img {
                 border: none !important;

package/assets/js/img.js

@@ -1,5 +1,6 @@
 // 图片地址&懒加载
 import { resolveImagePath } from "@jx3box/jx3box-common/js/utils";
+import { __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
 function lazyLoad(str) {
     if (!str) return;
 
@@ -9,6 +10,9 @@ function lazyLoad(str) {
         let origin = item[0];
         let prefix = item[1];
         let src = resolveImagePath(item[2]);
+        if (src.includes('https://console.cnyixun.com/')) {
+            src = src.replace('https://console.cnyixun.com/', __cdn)
+        }
         let suffix = item[3];
         let output = `<img ${prefix} loading="lazy" src="${src}" ${suffix}>`;
         str = str.replace(origin, output);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {

package/service/cms.js

@@ -1,26 +1,31 @@
 import { $cms } from "@jx3box/jx3box-common/js/https";
-
+import axios from "axios";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 function uploadFile(data) {
     return $cms().post(`/api/cms/upload`, data);
 }
 
 // 获取用户列表
-function loadAuthors(params){
+function loadAuthors(params) {
     return $cms().get(`/api/cms/user/list`, {
-        params: params
+        params: params,
     });
 }
 
 // 获取表情列表
-function loadEmotions(params){
+function loadEmotions(params) {
     return $cms().get(`/api/cms/post/emotions`, {
-        params: params
+        params: params,
     });
 }
 //获取装扮
 function getDecoration(params) {
-    return $cms().get(`/api/cms/user/decoration`,{
-        params
+    return $cms().get(`/api/cms/user/decoration`, {
+        params,
     });
 }
-export { uploadFile, loadAuthors, loadEmotions,getDecoration };
+function getDecorationJson() {
+    let url = __imgPath + "decoration/index.json";
+    return axios.get(url);
+}
+export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationJson };

package/src/components/Author.vue

@@ -1,10 +1,6 @@
 <template>
     <div class="w-author" v-loading="loading">
-        <div
-            class="w-author-wrapper el-popover"
-            v-if="data"
-            :style="{ backgroundImage: bg }"
-        >
+        <div class="w-author-wrapper el-popover" v-if="data" :style="{ backgroundImage: `url(${bg})` }">
             <div class="u-author">
                 <Avatar
                     class="u-avatar"
@@ -15,34 +11,17 @@
                 />
                 <div class="u-info">
                     <a class="u-name" :href="authorLink(uid)" target="_blank">
-                        <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"
-                                />
+                        <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>
-                        <span class="u-displayname" :title="data.display_name">{{
-                            data.display_name || "未知"
-                        }}</span>
+                        <span class="u-displayname" :title="data.display_name">{{ data.display_name || "未知" }}</span>
                     </a>
                     <div class="u-extend">
                         <el-tooltip class="item" effect="dark" placement="top">
                             <div slot="content">
-                                <span class="u-tips"
-                                    >经验值：{{ data.experience }}</span
-                                >
+                                <span class="u-tips">经验值：{{ data.experience }}</span>
                             </div>
                             <span
                                 class="u-level"
@@ -53,44 +32,24 @@
                                 >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"
-                            >
+                        <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>
             </div>
+            <div class="u-honor" :style="honorStyle" v-if="honor">{{ honor }}</div>
             <div class="u-trophy" v-if="hasTrophy">
                 <div class="u-medals" v-if="medals && medals.length">
                     <medal :medals="medals" :showIcon="showMedalIcon"></medal>
                 </div>
             </div>
             <div class="u-teams" v-if="teams && teams.length">
-                <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 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>
         </div>
@@ -98,26 +57,18 @@
 </template>
 
 <script>
-import {
-    authorLink,
-    getLink,
-    getThumbnail,
-} from "@jx3box/jx3box-common/js/utils";
-import {
-    getUserInfo,
-    getUserMedals,
-    getUserPublicTeams,
-} from "../../service/author";
-import { getDecoration } from "../../service/cms";
-import {
-    __server,
-    __imgPath,
-    __userLevelColor,
-} from "@jx3box/jx3box-common/data/jx3box.json";
+import { authorLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { getUserInfo, getUserMedals, getUserPublicTeams } from "../../service/author";
+import { getDecoration, getDecorationJson } from "../../service/cms";
+import { __server, __imgPath, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
 import User from "@jx3box/jx3box-common/js/user";
 import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
 import Avatar from "./Avatar.vue";
 import medal from "./medal.vue";
+const ATCARD_KEY = "decoration_atcard";
+const DECORATION_JSON = "decoration_json";
+const DECORATION_KEY = "decoration_me";
+const HONOR_KEY = "honor_me";
 export default {
     name: "Author",
     components: {
@@ -131,6 +82,8 @@ export default {
         teams: [],
         loading: false,
         bg: "",
+        honor: "",
+        honorStyle: {},
     }),
     computed: {
         super_author_icon: function () {
@@ -161,18 +114,15 @@ export default {
             handler(val) {
                 if (val) {
                     this.loadData();
-                    this.getDecoration();
+                    this.getAtcard();
+                    this.getHonor();
                 }
             },
         },
     },
     methods: {
         loadData: function () {
-            const promises = [
-                getUserInfo(this.uid),
-                getUserMedals(this.uid),
-                getUserPublicTeams(this.uid),
-            ];
+            const promises = [getUserInfo(this.uid), getUserMedals(this.uid), getUserPublicTeams(this.uid)];
             this.loading = true;
             Promise.all(promises).then((res) => {
                 this.data = res[0];
@@ -196,45 +146,108 @@ export default {
                 this.teams = data && data.slice(0, 5);
             });
         },
-        getDecoration() {
-            let decoration_atcard = sessionStorage.getItem(
-                "decoration_atcard" + this.uid
-            );
+        getAtcard() {
+            let decoration_atcard = sessionStorage.getItem(ATCARD_KEY + this.uid);
             if (decoration_atcard == "no") {
                 this.bg = "";
                 return;
             }
             //已有缓存，读取解析
             if (decoration_atcard) {
-                this.setDecoration(JSON.parse(decoration_atcard));
+                this.setDecoration(decoration_atcard);
                 return;
             }
-            getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then(
-                (data) => {
-                    let res = data.data.data;
-                    if (res.length == 0) {
-                        //空 则为无主题，不再加载接口，界面设No
-                        sessionStorage.setItem(
-                            "decoration_atcard" + this.uid,
-                            "no"
-                        );
-                        this.bg = "";
-                        return;
-                    }
-                    sessionStorage.setItem(
-                        "decoration_atcard" + this.uid,
-                        JSON.stringify(res[0])
-                    );
-                    this.setDecoration(res[0]);
+            getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(ATCARD_KEY + this.uid, "no");
+                    this.bg = "";
+                    return;
                 }
-            );
+                sessionStorage.setItem(ATCARD_KEY + this.uid, res[0].val);
+                this.setDecoration(res[0].val);
+            });
         },
-        setDecoration(decoration_sidebar) {
-            this.bg = `url(${this.showDecoration(
-                decoration_sidebar.val,
-                decoration_sidebar.type
-            )})`;
+        setDecoration(val) {
+            this.bg = this.showDecoration(val, "atcard");
+        },
+        getHonor() {
+            this.honor = "";
+            let user_id = this.uid;
+            if (!user_id) {
+                return;
+            }
+            let honor_local = sessionStorage.getItem(HONOR_KEY + user_id);
+            if (honor_local == "no") return;
+            //已有缓存，读取解析
+            if (honor_local) {
+                this.honor = honor_local;
+                this.getHonorStyle();
+                return;
+            }
+            getDecoration({ using: 1, user_id: user_id, type: "honor" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(HONOR_KEY + user_id, "no");
+                    return;
+                }
+                let honor = res[0];
+                sessionStorage.setItem(HONOR_KEY + user_id, honor.val);
+                this.honor = honor.val;
+                this.getHonorStyle();
+            });
         },
+        //有称号后，获取样式配置
+        getHonorStyle() {
+            let user_id = this.uid;
+            let decoration_local = sessionStorage.getItem(DECORATION_KEY + user_id);
+            if (decoration_local) {
+                //解析本地缓存
+                let decoration_parse = JSON.parse(decoration_local);
+                if (!decoration_parse.status) return;
+
+                if (decoration_parse) {
+                    this.setHonorStyle(decoration_parse);
+                    return;
+                }
+            }
+            getDecoration({ using: 1, user_id: user_id, type: "homebg" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(DECORATION_KEY + user_id, JSON.stringify({ status: false }));
+                    return;
+                }
+                let decoration = res[0];
+                let decorationJson = sessionStorage.getItem(DECORATION_JSON);
+                if (!decorationJson) {
+                    //加载远程json，用于Honor颜色配置
+                    getDecorationJson().then((json) => {
+                        let decoration_json = json.data;
+                        let theme = JSON.parse(JSON.stringify(decoration_json[decoration.val]));
+                        theme.status = true;
+                        sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
+                        //缓存远程JSON文件
+                        sessionStorage.setItem(DECORATION_JSON, JSON.stringify(decoration_json));
+                        this.setHonorStyle(theme);
+                    });
+                } else {
+                    let theme = JSON.parse(decorationJson)[decoration.val];
+                    theme.status = true;
+                    sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
+                    this.setHonorStyle(theme);
+                }
+            });
+        },
+        setHonorStyle(style) {
+            this.honorStyle = {
+                "background-color": style.buttoncolor,
+                color: style.buttontextcolor,
+            };
+        },
+
         showMedalIcon: function (val) {
             return __imgPath + "image/medals/user/" + val + ".gif";
         },
@@ -294,5 +307,16 @@ export default {
             .bold;
         }
     }
+    .u-honor {
+        .mt(2px);
+        .dbi;
+        .h(18px);
+        background-color: #494038;
+        color: #ffffff;
+        .fz(12px,14px);
+        padding: 2px 50px 2px 10px;
+        .mb(15px);
+        .r(2px);
+    }
 }
 </style>