@aochuang/common 1.0.0 → 1.0.126

package/components/icon/index.js

@@ -0,0 +1,7 @@
+import Icon from './icon'
+
+Icon.install = (Vue) => {
+  Vue.component(Icon.name, Icon)
+}
+
+export default Icon

package/components/image/image.vue

@@ -0,0 +1,377 @@
+<template>
+  <div
+    class="ui-image"
+    :class="className"
+    :style="style"
+    :title="title"
+    @click="handleClick"
+  >
+    <div class="ui-image__main" :style="mainStyle">
+      <img
+        class="ui-image__img"
+        :src="source"
+        :alt="alt"
+        @load="handleImageLoad"
+        @error="handleImageError"
+        :style="imageStyle"
+      />
+      <ui-icon
+        v-if="status === 'error'"
+        name="image-error-line"
+        class="ui-image__error"
+        :size="iconSize"
+        color="#aaa"
+      ></ui-icon>
+      <div class="ui-image__preview" v-if="previewable && status === 'success'" @click="handlePreviewClick">
+        <ui-icon name="sousuo" :size="30" color="#fff"></ui-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import UiIcon from '../icon'
+import { fileToBase64, getImageClickFn, getThumbnailSrc } from './util'
+import { formatOssPath } from '../../utils/oss'
+
+const LoadStatus = {
+  normal: 'normal',
+  loading: 'loading',
+  success: 'success',
+  error: 'error'
+}
+export default {
+  name: 'UiImage',
+  components: {
+    UiIcon
+  },
+  props: {
+    width: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    maxWidth: {
+      type: Number
+    },
+    maxHeight: {
+      type: Number
+    },
+    /**
+     * 启动裁剪
+     * 开启了服务端裁剪，图片尺寸默认等比根据宽带进行处理，如果width是100px那么裁剪的尺寸就是200px，放大一倍，如果没有给width|maxWidth，那么就给固定的1024px
+    */
+    enableThumbnail: {
+      type: Boolean,
+      default: true
+    },
+    fit: {
+      type: String,
+      default: 'none',
+      validator (value) {
+        return ['fill', 'contain', 'cover', 'none', 'scale-down'].indexOf(value) >= 0
+      }
+    },
+    src: {
+      type: [String, File, Function]
+    },
+    alt: {
+      type: String
+    },
+    gray: {
+      type: Boolean,
+      default: false
+    },
+    radius: {
+      type: [Number, String],
+      default: 6
+    },
+    loading: {
+      type: Boolean
+    },
+    previewable: {
+      type: Boolean,
+      default: false
+    },
+    previewMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      source: null,
+      clientWidth: 0,
+      status: LoadStatus.normal
+    }
+  },
+  computed: {
+    style () {
+      const sy = {}
+      if (this.width) {
+        sy.width = this.width
+      }
+      if (this.height) {
+        sy.height = this.height
+      }
+      return sy
+    },
+    innerRadius () {
+      if (typeof this.radius === 'number') {
+        return this.radius + 'px'
+      }
+      return this.radius
+    },
+    mainStyle () {
+      const sy = {
+        'border-radius': this.innerRadius + 'px'
+      }
+      if (this.fit && this.status !== LoadStatus.error) {
+        if (this.fit === 'none') {
+          sy['background-color'] = 'rgba(0,0,0,.05)'
+        }
+      }
+      return sy
+    },
+    imageStyle () {
+      const sy = {}
+      if (this.fit) {
+        if (this.fit === 'none') {
+          sy['max-width'] = this.maxWidth ? this.maxWidth + 'px' : (this.width === 'auto' ? '' : '100%')
+          sy['max-height'] = this.maxHeight ? this.maxHeight + 'px' : (this.height === 'auto' ? '' : '100%')
+          sy.width = 'auto'
+          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%'
+        }
+      }
+      return sy
+    },
+    title () {
+      if (this.error) {
+        return '图片加载失败'
+      }
+      return this.alt
+    },
+    iconSize () {
+      return Math.max(this.clientWidth / 2, 18)
+    },
+    className () {
+      return ['is-' + this.status, { 'is-gray': this.gray }]
+    }
+  },
+  watch: {
+    src (val) {
+      this.handleLoadImage()
+    },
+    loading (val) {
+      this.updateLoading()
+    }
+  },
+  created () {
+    this.handleLoadImage()
+    this.updateLoading()
+  },
+  mounted () {
+    this.clientWidth = this.$el.clientWidth
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    },
+    handlePreviewClick () {
+      if (this.previewMethod) {
+        this.previewMethod()
+      } else {
+        this.preview()
+      }
+    },
+    handleLoadImage () {
+      this.resolveSrc()
+    },
+    handleImageLoad () {
+      this.status = LoadStatus.success
+      this.$emit('load')
+    },
+    handleImageError () {
+      // 阿里云缩放只支持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.source) {
+        return
+      }
+      const clickFn = getImageClickFn()
+      if (clickFn) {
+        clickFn({
+          src: formatOssPath(this.source)
+        })
+      }
+    },
+    resolveSrc () {
+      if (!this.src) {
+        this.status = this.loading ? LoadStatus.loading : LoadStatus.normal
+        this.source = null
+      } else {
+        this.status = LoadStatus.loading
+        if (this.src instanceof File) {
+          this.status = LoadStatus.loading
+          fileToBase64(this.src).then((rs) => {
+            this.source = rs
+          }, () => {
+            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 {
+          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.source) {
+        this.status = this.loading ? LoadStatus.loading : LoadStatus.normal
+      } else {
+        if (typeof this.loading === 'boolean') {
+          if (this.loading === true) {
+            this.status = LoadStatus.loading
+          } else {
+            this.status = LoadStatus.success
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-image{
+  display: inline-block;
+  vertical-align: top;
+  &.is-loading{
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: ui-image-loading;
+    animation-timing-function: linear;
+    background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
+    background-size: 800px 104px;
+  }
+  &.is-gray {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+  &.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;
+    }
+    .ui-image__preview{
+      display: flex;
+    }
+  }
+}
+.ui-image__main{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  border-radius: 4px;
+}
+.ui-image__img{
+  display: none;
+}
+
+@keyframes ui-image-loading {
+  0%{
+    background-position: -468px 0
+  }
+  100%{
+    background-position: 468px 0
+  }
+}
+.ui-image__preview{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,.3);
+  opacity: 0;
+  transition: all .3s;
+  cursor: pointer;
+  display: none;
+  &:hover{
+    opacity: 1;
+  }
+}
+</style>

package/components/image/index.js

@@ -0,0 +1,14 @@
+import Image from './image'
+import { setImageClickFn, getThumbnailSrc as _getThumbnailSrc } from './util'
+
+Image.install = (Vue, options) => {
+  options = Object.assign({
+    imageClickFn: null
+  }, options)
+  setImageClickFn(options.imageClickFn)
+  Vue.component(Image.name, Image)
+}
+
+export const getThumbnailSrc = _getThumbnailSrc
+
+export default Image

package/components/image/util.js

@@ -0,0 +1,107 @@
+import { buildUrl, getUrlParams } from "../../utils/url"
+
+export function fileToBase64 (file) {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject()
+    } else {
+      var reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => {
+        resolve(reader.result)
+      }
+      reader.onerror = () => {
+        reject()
+      }
+    }
+  })
+}
+
+let imageClickFn = null
+
+export function setImageClickFn (fn) {
+  imageClickFn = 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

@@ -0,0 +1,157 @@
+import Button from './button'
+import BrickWall from './brick-wall'
+import AdvancedFilter from './advanced-filter'
+import Autocomplete from './autocomplete'
+import Dropdown from './dropdown'
+import Switch from './switch'
+import Icon from './icon'
+import Image from './image'
+import Popover from './popover'
+import Toolbar from './toolbar'
+import Tooltip from './tooltip'
+import Text from './text'
+import Menu from './menu'
+import Sortable from './sortable'
+import Dialog from './dialog'
+import Filter from './filter'
+import Grid from './grid'
+import Loading from './loading'
+import Pagination from './pagination'
+import Form from './form'
+import Textarea from './textarea'
+import Textbox from './textbox'
+import Message from './message'
+import MessageBox from './message-box'
+import Empty from './empty'
+import Avatar from './avatar'
+import Drawer from './drawer'
+import Tabs from './tabs'
+import CheckboxGroup from './checkbox-group'
+import Checkbox from './checkbox'
+import CheckboxButton from './checkbox-button'
+import Select from './select'
+import Cascader from './cascader'
+import Searchbox from './searchbox'
+import DatePicker from './date-picker'
+import Radio from './radio'
+import RadioButton from './radio-button'
+import RadioGroup from './radio-group'
+import Video from './video'
+import Spinner from './spinner'
+import SpinnerRange from './spinner-range'
+import SpinnerTextarea from './spinner-textarea'
+import Skeleton from './skeleton'
+import TimePicker from './time-picker'
+import Tag from './tag'
+import Tree from './tree'
+import PopupSelect from './popup-select'
+import Panel from './panel'
+import Transfer from './transfer'
+import Tabbar from './tabbar'
+
+export {
+  AdvancedFilter,
+  Autocomplete,
+  Avatar,
+  Button,
+  BrickWall,
+  Cascader,
+  CheckboxGroup,
+  Checkbox,
+  CheckboxButton,
+  DatePicker,
+  Drawer,
+  Dropdown,
+  Dialog,
+  Empty,
+  Filter,
+  Form,
+  Grid,
+  Icon,
+  Image,
+  Menu,
+  Message,
+  MessageBox,
+  Pagination,
+  Popover,
+  PopupSelect,
+  Panel,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Sortable,
+  Select,
+  Searchbox,
+  Spinner,
+  SpinnerRange,
+  SpinnerTextarea,
+  Skeleton,
+  Switch,
+  Toolbar,
+  Tooltip,
+  Text,
+  Loading,
+  Textarea,
+  Textbox,
+  Tabs,
+  TimePicker,
+  Tag,
+  Tree,
+  Transfer,
+  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, options.image)
+    Vue.use(Popover)
+    Vue.use(Toolbar)
+    Vue.use(Tooltip)
+    Vue.use(Menu)
+    Vue.use(Sortable)
+    Vue.use(Dialog)
+    Vue.use(Filter)
+    Vue.use(Grid, options.grid)
+    Vue.use(Loading)
+    Vue.use(Pagination)
+    Vue.use(Form)
+    Vue.use(Textarea)
+    Vue.use(Textbox)
+    Vue.use(Text)
+    Vue.use(Message)
+    Vue.use(MessageBox)
+    Vue.use(Empty)
+    Vue.use(Avatar)
+    Vue.use(Drawer)
+    Vue.use(Tabs)
+    Vue.use(CheckboxGroup)
+    Vue.use(Checkbox)
+    Vue.use(CheckboxButton)
+    Vue.use(Select)
+    Vue.use(Cascader)
+    Vue.use(Searchbox)
+    Vue.use(DatePicker)
+    Vue.use(Radio)
+    Vue.use(RadioButton)
+    Vue.use(RadioGroup)
+    Vue.use(Video)
+    Vue.use(Spinner)
+    Vue.use(TimePicker)
+    Vue.use(Autocomplete)
+    Vue.use(Tag)
+    Vue.use(SpinnerRange)
+    Vue.use(SpinnerTextarea)
+    Vue.use(PopupSelect)
+    Vue.use(Panel)
+    Vue.use(Transfer)
+    Vue.use(Tree)
+    Vue.use(Skeleton)
+    Vue.use(Tabbar)
+  }
+}

package/components/loading/index.js

@@ -0,0 +1,7 @@
+import Loading from './loading'
+
+Loading.install = (Vue) => {
+  Vue.component(Loading.name, Loading)
+}
+
+export default Loading