@jx3box/jx3box-common-ui 5.7.0 → 5.7.3

package/assets/css/author.less

@@ -108,6 +108,11 @@
         padding: 0 2px;
     }
 
+    .u-medal{
+        img{
+            .size(20px);
+        }
+    }
     .u-label {
         margin: 15px 0 10px 0;
         padding: 0 5px 10px 5px;
@@ -171,12 +176,14 @@
                 background-color: #e6f0fb;
                 // color:@color-link;
             }
-            padding: 2px 0;
+            padding: 4px 4px;
+            .r(3px);
         }
         .u-team-logo {
-            .size(26px);
+            .size(24px);
             .y;
-            .mr(10px);
+            .mr(4px);
+            .r(4px);
         }
         .u-team-name {
             .fz(12px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "5.7.0",
+  "version": "5.7.3",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {
@@ -31,8 +31,8 @@
   ],
   "dependencies": {
     "@jx3box/jx3box-comment-ui": "^1.7.0",
-    "@jx3box/jx3box-common": "^7.1.2",
-    "@jx3box/jx3box-data": "^1.9.1",
+    "@jx3box/jx3box-common": "^7.1.5",
+    "@jx3box/jx3box-data": "^1.9.4",
     "@jx3box/jx3box-editor": "^1.2.7",
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",

package/src/App.vue

@@ -8,7 +8,7 @@
 
         <LeftSidebar :open="true">
             <LeftSideToggle :mobileOnly="true" />
-            <Author :author="author" :uid="8" />
+            <Author :author="author" :uid="2" />
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
@@ -21,7 +21,7 @@
                         <el-radio :label="224">l-224</el-radio>
                     </el-radio-group>
                     <div>
-                        <Avatar :size="avatar_size" url="" :id="8" frame="" />
+                        <Avatar :id="8" url="" :size="avatar_size" frame="" />
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="CMS作品" name="post">

package/src/Author.vue

@@ -3,7 +3,7 @@
         <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)">
+                <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">
@@ -16,7 +16,7 @@
                         <div slot="content">
                             <span class="u-tips">经验值：{{ data.experience }}</span>
                         </div>
-                        <span class="u-level" :class="'lv-' + level">Lv.{{ level }}</span>
+                        <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">
@@ -83,7 +83,7 @@ const liveStatusMap = ["等待开播", "直播中", "直播结束"];
 import Avatar from "./author/Avatar.vue";
 import Authorposts from "./author/Authorposts.vue";
 import { authorLink, tvLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { __server, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+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";
@@ -198,6 +198,9 @@ export default {
         showTeamLogo: function(val) {
             return getThumbnail(val, 96);
         },
+        showLevelColor:function (level){
+            return __userLevelColor[level]
+        }
     },
     watch: {
         uid: function() {

package/src/author/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
     <a class="c-avatar" :href="authorLink(uid)">
-        <img :src="showAvatar(url)" class="c-avatar-pic" :class="{ isCircle }" />
-        <i class="c-avatar-frame" v-if="frameName" :class="style">
+        <img :src="showAvatar(url)" class="c-avatar-pic"/>
+        <i class="c-avatar-frame" v-if="frame">
             <img :src="frameUrl" />
         </i>
         <slot></slot>
@@ -9,9 +9,7 @@
 </template>
 
 <script>
-import default_frames from "@jx3box/jx3box-common/data/user_avatar_frame.json";
 import { __server, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
-import { getFrames } from "../../service/author";
 import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "Avatar",
@@ -29,66 +27,17 @@ export default {
         };
     },
     computed: {
-        frameName: function() {
-            return this.frame && this.frames[this.frame] ? this.frame : "";
-        },
         frameUrl: function() {
-            if (this.frameName) {
-                let fileName = this.frames[this.frameName].files[this.style].file;
-                return __imgPath + `avatar/images/${this.frameName}/${fileName}`;
-            }
-            return "";
-        },
-        isCircle: function() {
-            return this.frameName && this.frames[this.frameName].style == "circle";
-        },
-        style: function() {
-            let style = ~~this.size;
-            for(let [i,v] of this.styles.entries()){
-                if(style < v.size){
-                    return this.styles[i]['cls']
-                }
-            }
-            return "s";
-        },
-        data: function() {
-            return [this.uid, this.url, this.size, this.frame];
+            return __imgPath + `avatar/images/${this.frame}/${this.frame}.svg`;
         },
     },
     methods: {
-        loadFrames: function() {
-
-            // 无头像框
-            if(!this.frame) return
-
-            let frames = sessionStorage.getItem("avatarFrames");
-
-            // 本地缓存
-            if(frames){
-                try {
-                    frames = JSON.parse(frames);
-                    this.frames = frames;
-                } catch (e) {
-                    this.frames = default_frames
-                }
-
-            // 线上数据
-            }else{
-                getFrames().then((res) => {
-                    if (res.data) {
-                        this.frames = res.data || {};
-                        sessionStorage.setItem("avatarFrames", JSON.stringify(this.frames));
-                    }
-                });
-            }
-        },
         showAvatar: function(val) {
             return showAvatar(val, this.size*3);
         },
         authorLink,
     },
     mounted : function (){
-        this.loadFrames()
     }
 };
 </script>
@@ -101,18 +50,19 @@ export default {
 .c-avatar-pic {
     .db;
     .full;
-    .r(4px);
-    &.isCircle {
-        .r(100%);
-    }
+    .r(100%);
 }
 .c-avatar-frame {
     .pa;
+    .lt(-10px);
+    .size(100%);
+    padding: 10px;
+    box-sizing: content-box;
     img {
         .db;
         .pa;
-        .lt(0);
         .size(100%);
+        .lt(0);
     }
 
     &.xs {