改用 EAvatar

resources/assets/js/app.js

@@ -30,11 +30,13 @@ Vue.component('TableAction', TableAction);
 Vue.component('UserAvatar', UserAvatar);
 
 import {
+    Avatar,
     Tooltip,
     Dropdown,
     DropdownMenu,
     DropdownItem,
 } from 'element-ui';
+Vue.component('EAvatar', Avatar);
 Vue.component('ETooltip', Tooltip);
 Vue.component('EDropdown', Dropdown);
 Vue.component('EDropdownMenu', DropdownMenu);

resources/assets/js/components/UserAvatar.vue

@@ -14,8 +14,8 @@
         <div class="avatar-wrapper">
             <div :class="['avatar-box', userId === userid || user.online ? 'online' : '']" :style="boxStyle">
                 <em :style="spotStyle"></em>
-                <WAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
+                <EAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
-                <WAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</WAvatar>
+                <EAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</EAvatar>
             </div>
             <div v-if="showName" class="avatar-name">{{user.nickname}}</div>
         </div>
@@ -23,11 +23,9 @@
 </template>
 
 <script>
-    import WAvatar from "./WAvatar";
     import {mapState} from "vuex";
     export default {
         name: 'UserAvatar',
-        components: {WAvatar},
         props: {
             userid: {
                 type: [String, Number],

resources/assets/js/components/UserInput.vue

@@ -25,7 +25,7 @@
                 :avatar="item.userimg"
                 :disabled="isDisabled(item.userid)">
                 <div class="user-input-option">
-                    <div class="user-input-avatar"><WAvatar :src="item.userimg"/></div>
+                    <div class="user-input-avatar"><EAvatar class="avatar" :src="item.userimg"/></div>
                     <div class="user-input-nickname">{{ item.nickname }}</div>
                     <div class="user-input-userid">ID: {{ item.userid }}</div>
                 </div>
@@ -36,10 +36,8 @@
 </template>
 
 <script>
-    import WAvatar from "./WAvatar";
     export default {
         name: 'UserInput',
-        components: {WAvatar},
         props: {
             value: {
                 type: [String, Number, Array],

resources/assets/js/components/WAvatar.vue

@@ -1,125 +0,0 @@
-<template>
-    <span :class="classes" :style="styles">
-        <img :src="src" v-if="src" @error="handleError">
-        <Icon :type="icon" :custom="customIcon" v-else-if="icon || customIcon"></Icon>
-        <span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
-    </span>
-</template>
-
-<script>
-    import Icon from 'view-design-hi/src/components/icon';
-    import { oneOf } from 'view-design-hi/src/utils/assist';
-
-    const prefixCls = 'ivu-avatar';
-
-    const sizeList = ['small', 'large', 'default'];
-
-    export default {
-        name: 'WAvatar',
-        components: { Icon },
-        props: {
-            shape: {
-                validator (value) {
-                    return oneOf(value, ['circle', 'square']);
-                },
-                default: 'circle'
-            },
-            size: {
-                type: [String, Number],
-                default () {
-                    return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
-                }
-            },
-            src: {
-                type: String
-            },
-            icon: {
-                type: String
-            },
-            customIcon: {
-                type: String,
-                default: ''
-            },
-        },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                scale: 1,
-                childrenWidth: 0,
-                isSlotShow: false,
-                slotTemp: null
-            };
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}`,
-                    `${prefixCls}-${this.shape}`,
-                    {
-                        [`${prefixCls}-image`]: !!this.src,
-                        [`${prefixCls}-icon`]: !!this.icon || !!this.customIcon,
-                        [`${prefixCls}-${this.size}`]: oneOf(this.size, sizeList)
-                    }
-                ];
-            },
-            styles () {
-                let style = {};
-                if (this.size && !oneOf(this.size, sizeList)) {
-                    style.width = `${this.size}px`;
-                    style.height = `${this.size}px`;
-                    style.lineHeight = `${this.size}px`;
-                    style.fontSize = `${this.size/2}px`;
-                }
-                return style;
-            },
-            childrenStyle () {
-                let style = {};
-                if (this.isSlotShow) {
-                    style = {
-                        msTransform: `scale(${this.scale})`,
-                        WebkitTransform: `scale(${this.scale})`,
-                        transform: `scale(${this.scale})`,
-                        display: 'inline-block',
-                    };
-                }
-                return style;
-            }
-        },
-        watch: {
-            size (val, oldVal) {
-                if (val !== oldVal) this.setScale();
-            }
-        },
-        methods: {
-            setScale () {
-                this.isSlotShow = !this.src && !this.icon;
-                if (this.$refs.children) {
-                    // set children width again to make slot centered
-                    this.childrenWidth = this.$refs.children.offsetWidth;
-                    const avatarWidth = this.$el.getBoundingClientRect().width;
-                    // add 4px gap for each side to get better performance
-                    if (avatarWidth - 8 < this.childrenWidth) {
-                        this.scale = (avatarWidth - 8) / this.childrenWidth;
-                    } else {
-                        this.scale = 1;
-                    }
-                }
-            },
-            handleError (e) {
-                this.$emit('on-error', e);
-            }
-        },
-        beforeCreate () {
-            this.slotTemp = this.$slots.default;
-        },
-        mounted () {
-            this.setScale();
-        },
-        updated () {
-            if (this.$slots.default !== this.slotTemp) {
-                this.slotTemp = this.$slots.default;
-                this.setScale();
-            }
-        }
-    };
-</script>

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -333,13 +333,14 @@
                 <Poptip
                     confirm
                     placement="bottom"
+                    style="margin-left:8px"
                     @on-ok="onUser"
                     transfer>
                     <div slot="title">
                         <p><strong>{{$L('移除成员负责的任务将变成无负责人，')}}</strong></p>
                         <p>{{$L('注意此操作不可逆！')}}</p>
                     </div>
-                    <Button type="primary" :loading="userLoad > 0" style="margin-left:8px">{{$L('保存')}}</Button>
+                    <Button type="primary" :loading="userLoad > 0">{{$L('保存')}}</Button>
                 </Poptip>
             </div>
         </Modal>

resources/assets/sass/components/user-avatar.scss

@@ -6,6 +6,8 @@
         .avatar-box {
             position: relative;
             border-radius: 50%;
+            display: flex;
+            align-items: center;
             .avatar-text {
                 background-color: $primary-color;
             }
@@ -13,8 +15,8 @@
                 position: absolute;
                 right: 0;
                 bottom: 0;
-                width: 9px;
+                width: 8px;
-                height: 9px;
+                height: 8px;
                 border-radius: 50%;
                 background-color: #ff0000;
                 border: 1px solid #ffffff;

resources/assets/sass/components/user-input.scss

@@ -27,7 +27,9 @@
         display: flex;
         align-items: center;
         .user-input-avatar {
-            .ivu-avatar {
+            display: flex;
+            align-items: center;
+            .avatar {
                 width: 26px;
                 height: 26px;
             }

resources/assets/sass/element.scss

@@ -6,6 +6,7 @@ $--dropdown-menuItem-hover-fill: #f4f5f7;
 $--dropdown-menuItem-hover-color: #606266;
 
 @import "~element-ui/packages/theme-chalk/src/common/transition";
+@import "~element-ui/packages/theme-chalk/src/avatar";
 @import "~element-ui/packages/theme-chalk/src/tooltip";
 @import "~element-ui/packages/theme-chalk/src/dropdown";
 @import "~element-ui/packages/theme-chalk/src/dropdown-menu";