@jx3box/jx3box-common-ui 5.7.1 → 5.7.4

package/assets/css/author.less

@@ -176,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.1",
+  "version": "5.7.4",
   "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/service/cms.js

@@ -4,4 +4,8 @@ function getPostAuthors(post_id) {
     return $cms({mute:true}).get(`/api/cms/post/${post_id}/authors`);
 }
 
-export { getPostAuthors };
+function uploadImage(formData){
+    return $cms().post(`/api/cms/upload/avatar`, formData);
+}
+
+export { getPostAuthors, uploadImage };

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">
@@ -62,6 +62,9 @@
                     <tagBy :data="['PVE', 'PVX']" :type="tag" />
                     <clientBy type="" />
                     <zlpBy />
+
+                    <hr />
+                    <uploadImage v-model="upload" info="非必选。首页海报尺寸1100*300（推荐2200*600支持高分屏），最大20M。"></uploadImage>
                 </el-tab-pane>
                 <el-tab-pane label="百科组件" name="wiki"
                     ><WikiPanel :wiki-post="wikiPost">
@@ -142,6 +145,8 @@ import tagBy from "./filters/tagBy.vue";
 import clientBy from "./filters/clientBy.vue";
 import zlpBy from "./filters/zlpBy.vue";
 
+import uploadImage from './upload/upload_banner.vue'
+
 import WikiPanel from "./wiki/WikiPanel.vue";
 import WikiRevisions from "./wiki/WikiRevisions.vue";
 import WikiComments from "./wiki/WikiComments.vue";
@@ -193,6 +198,8 @@ export default {
         clientBy,
         zlpBy,
 
+        uploadImage,
+
         WikiPanel,
         WikiRevisions,
         WikiComments,
@@ -212,6 +219,8 @@ export default {
             visible: false,
 
             avatar_size : 60,
+
+            upload: '',
         };
     },
     created: function() {

package/src/Author.vue

@@ -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 {

package/src/upload/upload_banner.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="c-upload-banner">
+        <el-alert class="u-tip" :title="info" type="info" show-icon></el-alert>
+        <div v-if="data" class="u-upload" :style="uploadStyle">
+            <img :src="preview" />
+            <i class="u-upload-mask"></i>
+            <i class="u-upload-delete el-icon-delete" title="移除" @click="remove"></i>
+        </div>
+        <div v-else class="u-upload el-upload el-upload--picture-card" @click="select">
+            <i class="el-icon-plus"></i>
+        </div>
+        <input class="u-upload-input" type="file" @change="upload" ref="uploadInput" accept=".jpg, .jpeg, .png, .gif, .bmp" />
+    </div>
+</template>
+
+<script>
+import { getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { uploadImage } from '../../service/cms.js';
+export default {
+    name: 'upload-banner',
+    props: {
+        content: {
+            type: String,
+            default: '',
+        },
+        info: {
+            type: String,
+            default: '用于展示tips',
+        },
+        size: {
+            type: [Array, Number],
+            default: 148,
+        }
+    },
+    data() {
+        return {
+            data: this.content || '',
+        };
+    },
+    model: {
+        prop: 'content',
+        event: 'input',
+    },
+    watch: {
+        content(val) {
+            this.data = val;
+        },
+        data(val) {
+            this.$emit('input', val);
+        },
+    },
+    computed: {
+        fileInput: function () {
+            return this.$refs.uploadInput;
+        },
+        preview() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return getThumbnail(this.data, size, true);
+        },
+        uploadStyle() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return {
+                width: size[0] + 'px',
+                height: size[1] + 'px',
+            };
+        },
+    },
+    methods: {
+        select() {
+            this.fileInput.dispatchEvent(new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }));
+        },
+        upload() {
+            const file = this.fileInput.files[0];
+            if (!file) return;
+            const formData = new FormData();
+            formData.append('avatar', file);
+            uploadImage(formData).then(res => {
+                this.data = res.data.data[0];
+                this.$message({
+                    message: "上传成功",
+                    type: "success",
+                });
+            });
+        },
+        remove() {
+            this.data = '';
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.c-upload-banner {
+    .u-tip{
+        padding:5px 15px;
+    }
+    .u-upload {
+        .pr;
+        .size(148px);
+        .mt(10px);
+        img {
+            .size(100%);
+            .y(bottom);
+        }
+        .u-upload-mask {
+            .none;
+            .pa;
+            .lt(0);
+            .size(100%);
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+        .u-upload-delete {
+            .pa;
+            .lt(50%);
+            .size(24px);
+            .fz(24px);
+            padding: 40px;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            .pointer;
+            .none;
+        }
+        &:hover {
+            .u-upload-mask,
+            .u-upload-delete {
+                .db;
+            }
+        }
+    }
+    .u-upload-input {
+        .none;
+    }
+}
+</style>