@jx3box/jx3box-common-ui 5.5.17 → 5.5.21

package/assets/css/author.less

@@ -115,12 +115,12 @@
             }
             padding:2px 0;
         }
-        .u-teamlogo {
+        .u-team-logo {
             .size(26px);
             .y;
             .mr(10px);
         }
-        .u-teamname {
+        .u-team-name {
             .fz(12px);
             color: #555;
         }

package/index.js

@@ -5,6 +5,7 @@ import Breadcrumb from './src/Breadcrumb.vue'
 import LeftSidebar from './src/LeftSidebar.vue'
 import LeftSideToggle from './src/LeftSideToggle.vue'
 import Author from './src/Author.vue'
+import Avatar from './src/author/Avatar.vue'
 import RightSidebar from './src/RightSidebar.vue'
 import RightSideMsg from './src/RightSideMsg.vue'
 import Main from './src/Main.vue'
@@ -44,6 +45,7 @@ const components = {
 
     RightSideMsg,
     Author,
+    Avatar,
 
     Thx,
     Like,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.5.17",
+    "version": "5.5.21",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -30,8 +30,8 @@
         "last 2 versions"
     ],
     "dependencies": {
-        "@jx3box/jx3box-comment-ui": "^1.6.7",
-        "@jx3box/jx3box-common": "^7.0.17",
+        "@jx3box/jx3box-comment-ui": "^1.6.8",
+        "@jx3box/jx3box-common": "^7.0.18",
         "@jx3box/jx3box-data": "^1.8.3",
         "@jx3box/jx3box-editor": "^1.2.4",
         "axios": "^0.19.2",

package/service/author.js

@@ -39,7 +39,7 @@ function getUserMedals(uid) {
 }
 
 function getFrames() {
-    return axios.get(__imgPath + "data/user_avatar_frame.json");
+    return axios.get(__imgPath + "avatar/index.json");
 }
 
 function getUserPublicTeams(uid) {

package/src/App.vue

@@ -13,6 +13,17 @@
 
         <Main :withoutLeft="false" :withoutRight="false">
             <el-tabs v-model="tab" type="card">
+                <el-tab-pane label="头像" name="avatar">
+                    <el-radio-group v-model="avatar_size">
+                        <el-radio :label="60">xs-60</el-radio>
+                        <el-radio :label="84">s-84</el-radio>
+                        <el-radio :label="136">m-136</el-radio>
+                        <el-radio :label="224">l-224</el-radio>
+                    </el-radio-group>
+                    <div>
+                        <Avatar :size="avatar_size" url="" :id="8" frame="" />
+                    </div>
+                </el-tab-pane>
                 <el-tab-pane label="CMS作品" name="post">
                     <el-radio-group v-model="post_id">
                         <el-radio label="35605">Markdown</el-radio>
@@ -96,6 +107,7 @@ import Breadcrumb from "./Breadcrumb.vue";
 import LeftSidebar from "./LeftSidebar.vue";
 import LeftSideToggle from "./LeftSideToggle.vue";
 import Author from "./Author.vue";
+import Avatar from "./author/Avatar.vue";
 import UserPop from "./author/UserPop.vue";
 
 import Main from "./Main.vue";
@@ -161,6 +173,7 @@ export default {
 
         RightSideMsg,
         Author,
+        Avatar,
         // Authorposts,
 
         Mark,
@@ -188,7 +201,7 @@ export default {
     },
     data: function() {
         return {
-            tab: "post",
+            tab: "avatar",
 
             post: "",
             post_id: "35605",
@@ -197,6 +210,8 @@ export default {
             wikiPost: null,
             tag: "",
             visible: false,
+
+            avatar_size : 60,
         };
     },
     created: function() {

package/src/Author.vue

@@ -3,12 +3,12 @@
         <div class="u-author">
             <Avatar
                 class="u-avatar"
-                :id="id"
+                :uid="uid"
                 :url="data.user_avatar"
                 :size="68"
                 :frame="data.user_avatar_frame"
             />
-            <a class="u-name" :href="authorLink(id)">
+            <a class="u-name" :href="authorLink(uid)">
                 <span>{{ data.display_name }}</span>
             </a>
             <el-tooltip
@@ -88,8 +88,8 @@
                 <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-teamlogo" :src="showTeamLogo(item.team_logo)" />
-                <span class="u-teamname">{{item.team_name}}@{{item.team_server}}</span>
+                <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" />
@@ -139,9 +139,6 @@ export default {
         };
     },
     computed: {
-        id: function () {
-            return this.uid;
-        },
         tv_type: function () {
             return this.data && this.data.tv_type;
         },
@@ -180,7 +177,7 @@ export default {
     },
     methods: {
         loadData: function () {
-            return getUserInfo(this.id)
+            return getUserInfo(this.uid)
                 .then((data) => {
                     this.data = data;
                 })
@@ -200,12 +197,12 @@ export default {
             }
         },
         loadMedals: function () {
-            getUserMedals(this.id).then((data) => {
+            getUserMedals(this.uid).then((data) => {
                 this.medals = data;
             });
         },
         loadTeams: function () {
-            getUserPublicTeams(this.id).then((data) => {
+            getUserPublicTeams(this.uid).then((data) => {
                 this.teams = data && data.slice(0, 5);
             });
         },
@@ -214,12 +211,12 @@ export default {
             this.isVIP = await User.isVIP();
         },
         checkSuperAuthor: function () {
-            getSuperAuthor(this.id).then((res) => {
+            getSuperAuthor(this.uid).then((res) => {
                 this.isSuperAuthor = res.data.data;
             });
         },
         loadIdentity: function () {
-            getIdentity(this.id).then((res) => {
+            getIdentity(this.uid).then((res) => {
                 this.isPRO = res.data.data.isPRO;
                 this.isVIP = res.data.data.isPRE;
             });
@@ -239,8 +236,8 @@ export default {
         githubLink: function (val) {
             return "https://github.com/" + val;
         },
-        teamLink: function (id) {
-            return getLink("org", id);
+        teamLink: function (team_id) {
+            return getLink("org", team_id);
         },
         showTeamLogo: function (val) {
             return getThumbnail(val, 32);
@@ -252,7 +249,7 @@ export default {
         },
     },
     mounted: function () {
-        this.id && this.loadData();
+        this.uid && this.loadData();
     },
     components: {
         Avatar,

package/src/author/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
     <a class="c-avatar" :href="authorLink(uid)">
-        <img :src="showAvatar(avatar)" class="c-avatar-pic" :class="{ isCircle }" />
+        <img :src="showAvatar(url)" class="c-avatar-pic" :class="{ isCircle }" />
         <i class="c-avatar-frame" v-if="frameName" :class="style">
             <img :src="frameUrl" />
         </i>
@@ -9,71 +9,87 @@
 </template>
 
 <script>
-import frames from "@jx3box/jx3box-common/data/user_avatar_frame.json";
+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: "",
-    props: ["id", "url", "size", "frame"],
+    name: "Avatar",
+    props: ["uid", "url", "size", "frame"],
     components: {},
-    data: function () {
+    data: function() {
         return {
-            frames,
-            style_map: [60, 84, 136, 224],
-            style_cls: ["xs", "s", "m", "l"],
+            frames: [],
+            styles : [
+                {cls:'xs',size:60},
+                {cls:'s',size:84},
+                {cls:'m',size:136},
+                {cls:'l',size:224},
+            ]
         };
     },
     computed: {
-        uid: function () {
-            return ~~this.id || 0;
-        },
-        avatar: function () {
-            return this.url;
-        },
-        frameName: function () {
+        frameName: function() {
             return this.frame && this.frames[this.frame] ? this.frame : "";
         },
-        frameUrl: function () {
+        frameUrl: function() {
             if (this.frameName) {
-                let fileName = this.frames[this.frameName].files[this.style]
-                    .file;
-                return __imgPath + `image/avatar/${this.frameName}/${fileName}`;
+                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"
-            );
+        isCircle: function() {
+            return this.frameName && this.frames[this.frameName].style == "circle";
         },
-        style: function () {
+        style: function() {
             let style = ~~this.size;
-            this.style_map.forEach((item, i) => {
-                if (style < item) {
-                    return this.style_cls[i];
+            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];
+        },
     },
     methods: {
-        loadFrames: function () {
-            getFrames().then((res) => {
-                if (res.data) {
-                    this.frames = res.data;
+        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) {
+        showAvatar: function(val) {
             return showAvatar(val, this.size);
         },
         authorLink,
     },
-    created: function () {
-        this.loadFrames();
-    },
-    mounted: function () {},
+    mounted : function (){
+        this.loadFrames()
+    }
 };
 </script>
 
@@ -125,4 +141,4 @@ export default {
         top: -22px;
     }
 }
-</style>
+</style>

package/src/interact/boxcoin_records.vue

@@ -111,7 +111,7 @@ export default {
             deep: true,
             handler: function (val) {
                 if (val) {
-                    this.list = [val, ...this.list];
+                    this.list.push(val);
                     // 清空父组件的cache
                     this.$parent.cacheRecord = null;
                 }

package/src/wiki/WikiRevisions.vue

@@ -50,11 +50,11 @@ export default {
     },
     computed: {
         baseUrl: function() {
-            return location.href.includes("classic") ? __OriginRoot : __Root;
+            return (location.href.includes("classic") || location.href.includes("origin")) ? __OriginRoot : __Root;
         },
         prefix: function() {
             if (this.isGame) {
-                return this.baseUrl;
+                return this.baseUrl.slice(0,-1);
             } else {
                 return "";
             }