@aochuang/common 1.0.1 → 1.0.126

package/components/image/image.vue

@@ -4,6 +4,7 @@
     :class="className"
     :style="style"
     :title="title"
+    @click="handleClick"
   >
     <div class="ui-image__main" :style="mainStyle">
       <img
@@ -17,6 +18,7 @@
       <ui-icon
         v-if="status === 'error'"
         name="image-error-line"
+        class="ui-image__error"
         :size="iconSize"
         color="#aaa"
       ></ui-icon>
@@ -28,7 +30,8 @@
 </template>
 <script>
 import UiIcon from '../icon'
-import { fileToBase64, getImageClickFn } from './util'
+import { fileToBase64, getImageClickFn, getThumbnailSrc } from './util'
+import { formatOssPath } from '../../utils/oss'
 
 const LoadStatus = {
   normal: 'normal',
@@ -54,6 +57,14 @@ export default {
     maxHeight: {
       type: Number
     },
+    /**
+     * 启动裁剪
+     * 开启了服务端裁剪，图片尺寸默认等比根据宽带进行处理，如果width是100px那么裁剪的尺寸就是200px，放大一倍，如果没有给width|maxWidth，那么就给固定的1024px
+    */
+    enableThumbnail: {
+      type: Boolean,
+      default: true
+    },
     fit: {
       type: String,
       default: 'none',
@@ -62,7 +73,7 @@ export default {
       }
     },
     src: {
-      type: [String, File]
+      type: [String, File, Function]
     },
     alt: {
       type: String
@@ -72,7 +83,7 @@ export default {
       default: false
     },
     radius: {
-      type: Number,
+      type: [Number, String],
       default: 6
     },
     loading: {
@@ -104,13 +115,19 @@ export default {
       }
       return sy
     },
+    innerRadius () {
+      if (typeof this.radius === 'number') {
+        return this.radius + 'px'
+      }
+      return this.radius
+    },
     mainStyle () {
       const sy = {
-        'border-radius': this.radius + 'px'
+        'border-radius': this.innerRadius + 'px'
       }
-      if (this.fit) {
+      if (this.fit && this.status !== LoadStatus.error) {
         if (this.fit === 'none') {
-          sy['background-color'] = '#000'
+          sy['background-color'] = 'rgba(0,0,0,.05)'
         }
       }
       return sy
@@ -125,6 +142,8 @@ export default {
           sy.height = 'auto'
         } else {
           sy['object-fit'] = this.fit
+          sy['max-width'] = this.maxWidth ? this.maxWidth + 'px' : ''
+          sy['max-height'] = this.maxHeight ? this.maxHeight + 'px' : ''
           sy.width = '100%'
           sy.height = '100%'
         }
@@ -138,7 +157,7 @@ export default {
       return this.alt
     },
     iconSize () {
-      return this.clientWidth / 2
+      return Math.max(this.clientWidth / 2, 18)
     },
     className () {
       return ['is-' + this.status, { 'is-gray': this.gray }]
@@ -160,6 +179,9 @@ export default {
     this.clientWidth = this.$el.clientWidth
   },
   methods: {
+    handleClick () {
+      this.$emit('click')
+    },
     handlePreviewClick () {
       if (this.previewMethod) {
         this.previewMethod()
@@ -175,17 +197,28 @@ export default {
       this.$emit('load')
     },
     handleImageError () {
-      this.status = LoadStatus.error
-      this.$emit('error')
+      // 阿里云缩放只支持20971520字节大小图片，超过会报错，所以需要回退到原图
+      if (this.enableThumbnail) {
+        const nextSource = formatOssPath(this.source)
+        if (nextSource !== this.source) {
+          this.source = nextSource
+        } else {
+          this.status = LoadStatus.error
+          this.$emit('error')
+        }
+      } else {
+        this.status = LoadStatus.error
+        this.$emit('error')
+      }
     },
     preview () {
-      if (!this.src) {
+      if (!this.source) {
         return
       }
       const clickFn = getImageClickFn()
       if (clickFn) {
         clickFn({
-          src: this.src
+          src: formatOssPath(this.source)
         })
       }
     },
@@ -202,13 +235,36 @@ export default {
           }, () => {
             this.status = LoadStatus.error
           })
+        } else if (typeof this.src === 'function') {
+          const rs = this.src()
+          if (rs && rs.then) {
+            this.status = LoadStatus.loading
+            rs.then(rs => {
+              this.source = rs
+            }, () => {
+              this.status = LoadStatus.error
+            })
+          } else {
+            this.source = rs
+          }
         } else {
-          this.source = this.src
+          if (this.enableThumbnail) {
+            // 放大1.5倍
+            let thumbnailWidth = parseInt(this.width)
+            if (!isNaN(thumbnailWidth)) {
+              thumbnailWidth = thumbnailWidth * 1.5
+            } else {
+              thumbnailWidth = 720
+            }
+            this.source = formatOssPath(getThumbnailSrc(this.src, thumbnailWidth))
+          } else {
+            this.source = formatOssPath(this.src)
+          }
         }
       }
     },
     updateLoading () {
-      if (!this.src) {
+      if (!this.source) {
         this.status = this.loading ? LoadStatus.loading : LoadStatus.normal
       } else {
         if (typeof this.loading === 'boolean') {
@@ -247,6 +303,27 @@ export default {
   &.is-error,&.is-normal{
     background-color: #eee;
   }
+  &.is-error {
+    line-height: 1em;
+    width: 100%;
+    height: 100%;
+    .ui-image__main{
+      width: 100%;
+      height: 100%;
+      min-width: 32px;
+      min-height: 32px;
+      position: relative;
+    }
+    img {
+      display: none!important;
+    }
+    .ui-image__error{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
   &.is-success{
     .ui-image__img{
       display: inline-block;
@@ -265,6 +342,7 @@ export default {
   align-items: center;
   overflow: hidden;
   position: relative;
+  border-radius: 4px;
 }
 .ui-image__img{
   display: none;

package/components/image/index.js

@@ -1,5 +1,5 @@
 import Image from './image'
-import { setImageClickFn } from './util'
+import { setImageClickFn, getThumbnailSrc as _getThumbnailSrc } from './util'
 
 Image.install = (Vue, options) => {
   options = Object.assign({
@@ -9,4 +9,6 @@ Image.install = (Vue, options) => {
   Vue.component(Image.name, Image)
 }
 
+export const getThumbnailSrc = _getThumbnailSrc
+
 export default Image

package/components/image/util.js

@@ -1,3 +1,5 @@
+import { buildUrl, getUrlParams } from "../../utils/url"
+
 export function fileToBase64 (file) {
   return new Promise((resolve, reject) => {
     if (!file) {
@@ -23,4 +25,83 @@ export function setImageClickFn (fn) {
 
 export function getImageClickFn () {
   return imageClickFn
-}
+}
+
+/**
+ * 获取裁剪路径
+*/
+export function getThumbnailSrc (url, width) {
+  if (!url || !width) {
+    return url
+  }
+  let hash = url.split('#')[1]
+  // 新的后端拼接的oss地址
+  if (url.indexOf('/oss/view') > -1) {
+    // 这是1.0的
+    // http://localhost:8090/oss/view?url=https://wpj-dev3-kefures.oss-cn-shenzhen.aliyuncs.com/weremote/chat-logs/90fab9f6a2a54d60bfeba431adeb9e38/7eabb34fa8e824381310fbd8667a4404/3/3957413896365727039.jpg
+    const urlParams = getUrlParams(url)
+    if (!urlParams.url) {
+      return url
+    }
+    let nextUrl = urlParams.url
+    if (nextUrl.indexOf('.aliyuncs.com') > -1) {
+      if (nextUrl.indexOf('?') >= 0) {
+        nextUrl = nextUrl + '&x-oss-process=image/resize,w_' + width
+      } else {
+        nextUrl = nextUrl + '?x-oss-process=image/resize,w_' + width
+      }
+    } else if (nextUrl.indexOf('.myqcloud.com') > -1) {
+      if (nextUrl.indexOf('?') >= 0) {
+        nextUrl = nextUrl + '&imageMogr2/thumbnail/' + width
+      } else {
+        nextUrl = nextUrl + '?imageMogr2/thumbnail/' + width
+      }
+    }
+    url = buildUrl(url.substr(0, url.indexOf('/oss/view') + 9), Object.assign({}, urlParams, {
+      url: nextUrl
+    }))
+  } else if (url.indexOf('/oss/') > -1) {
+    // 这是3.0的
+    // https://dev.ifangzhou.com/oss/?url=https%3A%2F%2Fw…5856.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cw_720
+    const urlParams = getUrlParams(url)
+    if (!urlParams.url) {
+      return url
+    }
+    let nextUrl = urlParams.url
+    if (nextUrl.indexOf('.aliyuncs.com') > -1) {
+      if (nextUrl.indexOf('?') >= 0) {
+        nextUrl = nextUrl + '&x-oss-process=image/resize,w_' + width
+      } else {
+        nextUrl = nextUrl + '?x-oss-process=image/resize,w_' + width
+      }
+    } else if (nextUrl.indexOf('.myqcloud.com') > -1) {
+      if (nextUrl.indexOf('?') >= 0) {
+        nextUrl = nextUrl + '&imageMogr2/thumbnail/' + width
+      } else {
+        nextUrl = nextUrl + '?imageMogr2/thumbnail/' + width
+      }
+    }
+    url = buildUrl(url.substr(0, url.indexOf('/oss/') + 5), Object.assign({}, urlParams, {
+      url: nextUrl
+    }))
+  } else {
+    if (url.indexOf('.aliyuncs.com') > -1) {
+      if (url.indexOf('?') >= 0) {
+        url = url + '&x-oss-process=image/resize,w_' + width
+      } else {
+        url = url + '?x-oss-process=image/resize,w_' + width
+      }
+    } else if (url.indexOf('.myqcloud.com') > -1) {
+      if (url.indexOf('?') >= 0) {
+        url = url + '&imageMogr2/thumbnail/' + width
+      } else {
+        url = url + '?imageMogr2/thumbnail/' + width
+      }
+    }
+  }
+  if (hash) {
+    return url + '#' + hash
+  } else {
+    return url
+  }
+}

package/components/index.js

@@ -47,6 +47,7 @@ import Tree from './tree'
 import PopupSelect from './popup-select'
 import Panel from './panel'
 import Transfer from './transfer'
+import Tabbar from './tabbar'
 
 export {
   AdvancedFilter,
@@ -97,16 +98,18 @@ export {
   Tag,
   Tree,
   Transfer,
-  Video
+  Video,
+  Tabbar
 }
 
 export default {
   install (Vue, options = {}) {
     Vue.use(Button)
     Vue.use(Dropdown)
+    Vue.use(AdvancedFilter)
     Vue.use(Switch)
     Vue.use(Icon)
-    Vue.use(Image)
+    Vue.use(Image, options.image)
     Vue.use(Popover)
     Vue.use(Toolbar)
     Vue.use(Tooltip)
@@ -149,5 +152,6 @@ export default {
     Vue.use(Transfer)
     Vue.use(Tree)
     Vue.use(Skeleton)
+    Vue.use(Tabbar)
   }
 }

package/components/menu/index.js

@@ -2,13 +2,19 @@ import Menu from './menu'
 import MenuGroup from './menu-group'
 import MenuItem from './menu-item'
 
-export default {
+Menu.install = (Vue) => {
+  Vue.component(Menu.name, Menu)
+  Vue.component(MenuGroup.name, MenuGroup)
+  Vue.component(MenuItem.name, MenuItem)
+}
+
+Menu.MenuGroup = MenuGroup
+Menu.MenuItem = MenuItem
+
+export {
   Menu,
   MenuGroup,
-  MenuItem,
-  install (Vue) {
-    Vue.component(Menu.name, Menu)
-    Vue.component(MenuGroup.name, MenuGroup)
-    Vue.component(MenuItem.name, MenuItem)
-  }
+  MenuItem
 }
+
+export default Menu

package/components/menu/menu-group.vue

@@ -3,6 +3,7 @@
     <router-link
       v-if="isLink"
       :to="path"
+      :exact="exact"
       class="ui-menu-group__head"
       @click="handleToggleClick"
     >
@@ -61,6 +62,10 @@ export default {
     path: {
       type: String
     },
+    exact: {
+      type: Boolean,
+      default: true
+    },
     checkActiveMethod: {
       type: Function
     }
@@ -135,7 +140,7 @@ export default {
       if (isExactActive) {
         return true
       }
-      if (isActive) {
+      if (!this.exact && isActive) {
         if (this.activeLink && this.activeLink !== href) {
           return false
         } else {

package/components/menu/menu-item.vue

@@ -4,6 +4,7 @@
       :is="isLink ? 'router-link' : 'span'"
       class="ui-menu-item__main"
       :to="path"
+      :exact="exact"
     >
       <ui-icon v-if="icon" :name="icon" class="ui-menu-item__icon"></ui-icon>
       <span v-if="label || $slots.default" class="ui-menu-item__text" :title="label">
@@ -35,6 +36,10 @@ export default {
     path: {
       type: String
     },
+    exact: {
+      type: Boolean,
+      default: true
+    },
     type: {
       type: String,
       default: 'default',
@@ -86,6 +91,12 @@ export default {
   display: block;
 }
 .ui-menu--float{
+  .ui-menu-item {
+    &.is-active .ui-menu-item__main{
+      background-color: #edf3fb;
+      color: #0052CC;
+    }
+  }
   .ui-menu-item__main{
     display: block;
     line-height: 24px;
@@ -93,15 +104,14 @@ export default {
     cursor: pointer;
     transition: all .3s;
     &:hover{
-      background-color: #f0f8fc;
-      color: #00A0EB;
+      background-color: #f8f8f8;
     }
   }
   .ui-menu-item__icon{
     display: inline-block;
     vertical-align: top;
     margin-right: 4px;
-  }
+  } 
   .ui-menu-item{
     &.is-devided{
       padding: 0;
@@ -212,4 +222,48 @@ export default {
     }
   }
 }
+.ui-menu--radius{
+  padding: 8px;
+  .ui-menu-item__main{
+    display: block;
+    line-height: 24px;
+    padding: 6px 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    transition: all .3s;
+    border-radius: 5px;
+    color: #4E5969;
+    &:hover{
+      background-color: #f7f8fa;
+      color: #4c9aff;
+    }
+  }
+  .ui-menu-item__icon{
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 4px;
+  }
+  .ui-menu-item{
+    &:not(:last-child) {
+      margin-bottom: 6px;
+    }
+    &:hover, &.is-active {
+      .ui-menu-item__main{
+        background-color: #f7f8fa;
+        color: #4c9aff;
+      }
+    }
+    &.is-devided{
+      padding: 0;
+      height: 1px;
+      background: #eee;
+      margin: 6px 0;
+      .ui-menu-item__main{
+        display: none;
+      }
+    }
+  }
+}
 </style>

package/components/menu/menu.vue

@@ -16,7 +16,7 @@ export default {
       type: String,
       default: 'static',
       validator (value) {
-        return ['static', 'float', 'box'].indexOf(value) >= 0
+        return ['static', 'float', 'box', 'radius'].indexOf(value) >= 0
       }
     },
     current: {

package/components/message/message.js

@@ -2,22 +2,25 @@ import Message from 'element-ui/lib/message'
 import 'element-ui/lib/theme-chalk/icon.css'
 import 'element-ui/lib/theme-chalk/message.css'
 
-const warn = (message) => {
-  Message({
+const warn = (message, onClose) => {
+  return Message({
     message,
-    type: 'warning'
+    type: 'warning',
+    onClose
   })
 }
-const success = (message) => {
-  Message({
+const success = (message, onClose) => {
+  return Message({
     message,
-    type: 'success'
+    type: 'success',
+    onClose
   })
 }
-const error = (message) => {
-  Message({
+const error = (message, onClose) => {
+  return Message({
     message,
-    type: 'error'
+    type: 'error',
+    onClose
   })
 }
 

package/components/message-box/index.js

@@ -7,4 +7,8 @@ MessageBox.install = (Vue) => {
   // Vue.prototype.$confirmDel = MessageBox.confirmDel
 }
 
+MessageBox.message = MessageBox.message
+MessageBox.alert = MessageBox.alert
+MessageBox.confirm = MessageBox.confirm
+
 export default MessageBox

package/components/pagination/pagination.vue

@@ -61,6 +61,10 @@ export default {
     allowSelectPageSize: {
       type: Boolean,
       default: false
+    },
+    pageSizeList: {
+      type: Array,
+      default: () => [20, 50, 100, 200]
     }
   },
   data () {
@@ -68,11 +72,11 @@ export default {
       innerPageSize: this.pageSize
     }
   },
-  computed: {
-    pageSizeList () {
-      return [20, 50, 100, 200]
-    }
-  },
+  // computed: {
+  //   pageSizeList () {
+  //     return [20, 50, 100, 200]
+  //   }
+  // },
   methods: {
     // 每页显示行数发生变化触发
     handlePageSizeChange (value) {
@@ -156,9 +160,11 @@ export default {
     margin-left: 6px;
     font-weight: normal;
     &:hover {
+      color: #172b4d;
       border-color: #172b4d;
     }
     &.active {
+      background-color: #172b4d;
       border-color: #172b4d;
       color: #fff;
     }
@@ -180,8 +186,6 @@ export default {
       color: #172b4d;
     }
   }
-  .el-pagination__total{
-  }
   .el-pagination__sizes,
   .el-pagination__jump {
     .el-input__inner {

package/components/popover/popover.vue

@@ -13,7 +13,8 @@
     @after-enter="handleAfterShow"
     @after-leave="handleAfterHide"
   >
-    <slot></slot>
+    <component v-if="contentComponent" :is="contentComponent" :visible="innerVisible"></component>
+    <slot v-else></slot>
     <template slot="reference">
       <slot name="reference"></slot>
     </template>
@@ -65,6 +66,11 @@ export default {
       type: String
     }
   },
+  data () {
+    return {
+      contentComponent: null
+    }
+  },
   computed: {
     popperClass () {
       const cls = ['ui-popover']
@@ -96,6 +102,20 @@ export default {
     updatePopper () {
       this.$refs.popover && this.$refs.popover.updatePopper()
     },
+    setReferenceElm ($el) {
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        if (this.$refs.popover.popperJS) {
+          this.$refs.popover.popperJS._reference = $el
+        } else {
+          this.$refs.popover.referenceElm = $el
+        }
+        this.$refs.popover.updatePopper()
+      }, 30)
+    },
+    setContentComponent (component) {
+      this.contentComponent = component
+    },
     handleShow () {
       this.$emit('show')
     },
@@ -108,6 +128,9 @@ export default {
     handleAfterHide () {
       this.$emit('after-hide')
     }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
   }
 }
 </script>