@aochuang/common 1.0.1 → 1.0.126

package/common/index.js

@@ -0,0 +1,13 @@
+import Tooltip from './tooltip'
+import Voice from './voice'
+import VoicePlayer from './voice-player'
+import WechatEmojiSelect from './wechat-emoji-select'
+import Resizable from './resizable'
+
+export {
+    Resizable,
+    Tooltip,
+    Voice,
+    VoicePlayer,
+    WechatEmojiSelect
+}

package/common/resizable/index.js

@@ -0,0 +1,3 @@
+import Resizable from './resizable.vue'
+
+export default Resizable

package/common/resizable/resizable.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="bi-resizable" :class="['is-' + direction]">
+    <template v-if="direction === 'horizontal'">
+      <div 
+        class="bi-resizable__panel" 
+        :style="panelStyle"
+      >
+        <slot name="panel"></slot>
+      </div>
+      <div 
+        class="bi-resizable__resizer"
+        :class="{ 'is-dragging': isDragging }"
+        @mousedown="startDrag"
+        @touchstart="startDrag"
+      >
+        <i 
+          class="bi-resizable__resizer-icon"
+          @mousedown.stop="startDrag"
+          @touchstart.stop="startDrag"  
+          title="拖拽调整宽度"
+        >
+          <i></i><i></i><i></i><i></i>
+        </i>
+      </div>
+      <div class="bi-resizable__content">
+        <slot name="content"></slot>
+      </div>
+    </template>
+    <template v-else>
+      <div class="bi-resizable__content">
+        <slot name="content"></slot>
+      </div>
+      <template v-if="$slots.panel">
+        <div 
+          class="bi-resizable__resizer"
+          :class="{ 'is-dragging': isDragging }"
+          @mousedown="startDrag"
+          @touchstart="startDrag"
+        >
+          <i 
+            class="bi-resizable__resizer-icon"
+            @mousedown.stop="startDrag"
+            @touchstart.stop="startDrag"
+            title="拖拽调整高度"
+          >
+            <i></i><i></i><i></i><i></i>
+          </i>
+        </div> 
+        <div 
+          class="bi-resizable__panel" 
+          :style="panelStyle"
+        >
+          <slot name="panel"></slot>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BiResizable',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: (value) => ['horizontal', 'vertical'].includes(value)
+    },
+    initialSize: {
+      type: Number,
+      default: 200
+    },
+    minSize: {
+      type: Number,
+      default: 100
+    },
+    maxSize: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      currentSize: this.initialSize,
+      isDragging: false,
+      startPos: 0
+    };
+  },
+  computed: {
+    panelStyle() {
+      return this.direction === 'horizontal' ? { width: `${this.currentSize}px` } : { height: `${this.currentSize}px` };
+    }
+  },
+  methods: {
+    startDrag (e) {
+      e.preventDefault()
+      this.isDragging = true
+      // 根据方向获取初始位置
+      this.startPos = e.touches 
+        ? (this.direction === 'horizontal' ? e.touches[0].clientX : e.touches[0].clientY)
+        : (this.direction === 'horizontal' ? e.clientX : e.clientY)
+      // 绑定鼠标/触摸事件
+      document.addEventListener('mousemove', this.handleDrag)
+      document.addEventListener('mouseup', this.stopDrag)
+      document.addEventListener('touchmove', this.handleDrag)
+      document.addEventListener('touchend', this.stopDrag)
+      
+      document.body.style.userSelect = 'none'
+    },
+    handleDrag (e) {
+      if (!this.isDragging) {
+        return
+      }
+      // 根据方向获取当前位置
+      const currentPos = e.touches
+        ? (this.direction === 'horizontal' ? e.touches[0].clientX : e.touches[0].clientY)
+        : (this.direction === 'horizontal' ? e.clientX : e.clientY)
+      // 计算拖拽变化量 - 核心修复：垂直方向的delta计算取反
+      const delta = this.direction === 'horizontal'
+        ? (currentPos - this.startPos) // 水平方向：向右拖拽panel变宽
+        : (this.startPos - currentPos) // 垂直方向：向上拖拽(当前位置减小)panel高度减小，向下拖拽(当前位置增大)高度增加
+      // 计算新尺寸并应用限制
+      let newSize = this.currentSize + delta
+      newSize = Math.max(this.minSize, Math.min(newSize, this.maxSize))
+      // 更新尺寸和起始位置
+      if (newSize !== this.currentSize) {
+        this.currentSize = newSize
+        this.startPos = currentPos
+      }
+    },
+    stopDrag () {
+      this.isDragging = false
+      // 解绑事件
+      document.removeEventListener('mousemove', this.handleDrag)
+      document.removeEventListener('mouseup', this.stopDrag)
+      document.removeEventListener('touchmove', this.handleDrag)
+      document.removeEventListener('touchend', this.stopDrag)
+      document.body.style.userSelect = ''
+    }
+  },
+  watch: {
+    initialSize (newVal) {
+      this.currentSize = newVal
+    }
+  }
+};
+</script>
+
+<style>
+.bi-resizable {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.bi-resizable.is-horizontal {
+  flex-direction: row;
+}
+.bi-resizable.is-vertical {
+  flex-direction: column;
+}
+.bi-resizable__content {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+.bi-resizable__resizer {
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  user-select: none;
+  z-index: 1000;
+  position: relative;
+}
+.bi-resizable__resizer:hover {
+  background-color: #eee;
+}
+.bi-resizable__resizer.is-dragging {
+  background-color: #999;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer {
+  width: 0;
+  height: 100%;
+  cursor: col-resize;
+  border-left: 1px solid #eee;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer .bi-resizable__resizer-icon{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  right: -6px;
+  transition: opacity .25s;
+  cursor: col-resize;
+  opacity: .3;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer .bi-resizable__resizer-icon:hover {
+  opacity: 1;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer .bi-resizable__resizer-icon i{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 6px;
+  height: 4px;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer .bi-resizable__resizer-icon i:before {
+  content: '';
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #333;
+}
+.bi-resizable.is-horizontal > .bi-resizable__resizer .bi-resizable__resizer-icon i:after {
+  content: '';
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #333;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer {
+  width: 100%;
+  height: 0;
+  cursor: row-resize;
+  border-bottom: 1px solid #eee;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer .bi-resizable__resizer-icon{
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  top: -6px;
+  transition: opacity .25s;
+  cursor: row-resize;
+  opacity: .3;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer .bi-resizable__resizer-icon:hover {
+  opacity: 1;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer .bi-resizable__resizer-icon i{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 4px;
+  height: 6px;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer .bi-resizable__resizer-icon i:before {
+  content: '';
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #333;
+}
+.bi-resizable.is-vertical > .bi-resizable__resizer .bi-resizable__resizer-icon i:after {
+  content: '';
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #333;
+}
+</style>

package/common/scroll-load-more/index.js

@@ -0,0 +1,3 @@
+import ScrollLoadMore from './scroll-load-more'
+
+export default ScrollLoadMore

package/common/scroll-load-more/scroll-load-more.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="ac-scroll-load-more" :class="{'is-full': isFull, 'is-empty': !items || !items.length}">
+    <div class="ac-scroll-load-history__more" v-if="enableHistory && items && items.length">
+      <span class="ac-scroll-load-history__more-loading" v-if="historyLoading"><ui-icon name="loading"></ui-icon> 数据加载中</span>
+      <template v-else-if="notMoreHistory">
+        <span class="ac-scroll-load-history__more-complete">没有更多历史数据~</span>
+      </template>
+      <span class="ac-scroll-load-history__more-load" v-else @click="handleLoadMoreHistoryClick">点击加载更多历史数据</span>
+    </div>
+    <div class="ac-scroll-load-more__list">
+      <div
+        class="ac-scroll-load-more__item"
+        :style="itemStyle"
+        v-for="(item, index) in items"
+        :key="index"
+        :ref="idField ? `item-${item[idField]}` : ''"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </div>
+    </div>
+    <div class="ac-scroll-load-more__more" v-if="items && items.length">
+      <span class="ac-scroll-load-more__more-loading" v-if="loading"><ui-icon name="loading"></ui-icon> 数据加载中</span>
+      <template v-else-if="notMore">
+        <span class="ac-scroll-load-more__more-complete" v-if="items && items.length > pageSize">{{ emptyText }}</span>
+      </template>
+      <span class="ac-scroll-load-more__more-load" v-else @click="handleLoadMoreClick">点击加载更多数据</span>
+    </div>
+    <template v-else>
+      <template v-if="loading">
+        <!-- <div
+          class="ac-scroll-load-more__loading-item"
+          v-for="item in 6"
+          :key="item"
+        >
+          <slot name="skeleton"></slot>
+        </div> -->
+        <slot name="loading">
+          <div class="ac-scroll-load-more__loading">
+            <ui-icon name="loading" :size="36"></ui-icon> 数据加载中
+          </div>
+        </slot>
+      </template>
+      <div class="ac-scroll-load-more__empty" v-else>
+        <slot name="empty">
+          <ui-empty icon="activity-line" text="暂无相关数据"></ui-empty>
+        </slot>
+        <!-- <ui-empty icon="device" text="暂无设备数据"></ui-empty> -->
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { Empty as UiEmpty } from '../../components'
+import { getScrollParent } from '../../utils/dom'
+
+export default {
+  name: 'AcScrollLoadMore',
+  components: {
+    UiEmpty
+  },
+  props: {
+    height: {
+      type: String,
+      default: 'auto'
+    },
+    idField: {
+      type: String
+    },
+    span: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 18
+    },
+    checkMore: {
+      type: Boolean,
+      default: true
+    },
+    loadMoreText: {
+      type: String,
+      default: '点击加载更多数据'
+    },
+    emptyText: {
+      type: String,
+      default: '数据已加载完毕'
+    },
+    enableHistory: {
+      type: Boolean,
+      default: false
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    // 数据有变化时自动滚到最新
+    autoScrollNew: {
+      type: Boolean,
+      defualt: false
+    },
+    data: {
+      type: Array
+    },
+    queryMethod: {
+      type: Function
+    },
+    isDelete: {
+      type: [Number, Boolean],
+      default: 0
+    }
+  },
+  data () {
+    return {
+      pageIndex: 0,
+      loading: false,
+      notMore: false,
+      historyLoading: false,
+      notMoreHistory: false,
+      items: this.data || []
+    }
+  },
+  computed: {
+    isFull () {
+      return this.height === '100%'
+    },
+    itemStyle () {
+      const style = {}
+      if (this.span && this.span !== 1) {
+        const span = this.span || 1
+        const colSpan = (100 / span) + '%'
+        style.width = colSpan
+        style.float = 'left'
+      }
+      return style
+    }
+  },
+  watch: {
+    data () {
+      this.items = this.data || []
+    }
+  },
+  created () {
+    if (this.autoLoad) {
+      this.reload()
+    }
+  },
+  mounted () {
+    this.parentScrollEl = getScrollParent(this.$el)
+    this.parentScrollEl.addEventListener('scroll', this.handleParentScroll)
+  },
+  methods: {
+    handleLoadMoreHistoryClick () {
+      this.loadData(false).then(rs => {
+        this.items = (rs || []).concat(this.items)
+        this.$emit('load', {
+          data: this.items
+        })
+      })
+    },
+    handleParentScroll (evt) {
+      if (this.loading) {
+        return
+      }
+      if (this.disabledScrollLoad) {
+        return
+      }
+      const scrollTop = evt.target.scrollTop + evt.target.clientHeight
+      if (evt.target.scrollHeight - 10 <= scrollTop) {
+        if (this.lastScrollTop === scrollTop) {
+          return
+        }
+        this.lastScrollTop = scrollTop
+        this.loadMoreData()
+      }
+    },
+    handleLoadMoreClick () {
+      if (this.loading) {
+        return
+      }
+      this.loadMoreData()
+    },
+    reload () {
+      this.pageIndex = 0
+      this.notMore = false
+      this.items = []
+      this.parentScrollEl && (this.parentScrollEl.scrollTop = 0)
+      return this.loadData().then((data) => {
+        this.items = data || []
+        this.$emit('load', {
+          data: this.items
+        })
+        if (this.autoScrollNew && this.idField && data && data.length) {
+          this.$nextTick(() => {
+            this.scrollTo(data[data.length - 1][this.idField])
+          })
+        }
+      })
+    },
+    loadMoreData () {
+      if (this.notMore) {
+        return
+      }
+      this.pageIndex++
+      return this.loadData().then(rs => {
+        this.items = [].concat(this.items, rs)
+        this.$emit('load', {
+          data: this.items
+        })
+        if (this.autoScrollNew && this.idField && rs && rs.length) {
+          this.$nextTick(() => {
+            this.scrollTo(rs[rs.length - 1][this.idField])
+          })
+        }
+      })
+    },
+    scrollTo (id) {
+      const key = `item-${id}`
+      if (!this.$refs[key]) {
+        return
+      }
+      if (this.parentScrollEl) {
+        this.disabledScrollLoad = true
+        this.parentScrollEl.scrollTop = this.$refs[key][0].offsetTop
+        this._scrollTimer = setTimeout(() => {
+          this.disabledScrollLoad = false
+        })
+      }
+    },
+    removeItem (index) {
+      this.items.splice(index, 1)
+    },
+    loadData (isDown = true) {
+      if (!this.queryMethod) {
+        return Promise.reject()
+      }
+      if (isDown) {
+        this.loading = true
+      } else {
+        this.historyLoading = true
+      }
+      let relativeItem = null
+      if (this.items && this.items.length) {
+        if (isDown) {
+          relativeItem = this.items[this.items.length - 1]
+        } else {
+          relativeItem = this.items[0]
+        }
+      }
+      const params = {}
+      if (this.pageSize) {
+        params.pageIndex = this.pageIndex
+        params.pageSize = this.pageSize
+      }
+      return this.queryMethod(params, relativeItem, isDown).then((data) => {
+        if (!this.pageSize) {
+          this.notMore = true
+        } else {
+          if (isDown) {
+            if (this.checkMore && data.length < this.pageSize) {
+              this.notMore = true
+            }
+          } else {
+            if (data.length < this.pageSize) {
+              this.notMoreHistory = true
+            }
+          }
+        }
+        return data
+      }).finally(() => {
+        if (isDown) {
+          this.loading = false
+        } else {
+          this.historyLoading = false
+        }
+      })
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._scrollTimer)
+    this.parentScrollEl && this.parentScrollEl.removeEventListener('scroll', this.handleParentScroll)
+  }
+}
+</script>
+<style lang="less">
+.ac-scroll-load-more{
+  position: relative;
+  &.is-full {
+    height: 100%;
+    .ac-scroll-load-more__empty{
+      padding-top: 0;
+    }
+    &.is-empty{
+      .ac-scroll-load-more__loading{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+.ac-scroll-load-more__list{
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-scroll-load-more__item {
+  box-sizing: border-box;
+  position: relative;
+  .friend_item-del-icon {
+    font-style: normal;
+    position: absolute;
+    top: 12px;
+    right: 3px;
+    font-size: 12px;
+    transform: rotateZ(-30deg);
+    z-index: 1;
+  }
+}
+.ac-scroll-load-more__more{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #999;
+}
+.ac-scroll-load-more__more-loading,
+.ac-scroll-load-more__more-load,
+.ac-scroll-load-more__more-complete {
+  padding-bottom: 20px;
+  padding-top: 12px;
+}
+.ac-scroll-load-more__more-load{
+  cursor: pointer;
+  &:hover {
+    color: #52a1e4;
+  }
+}
+.ac-scroll-load-more__empty{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 60px;
+  height: 100%;
+}
+.ac-scroll-load-more__loading {
+  text-align: center;
+  color: #999;
+  padding-top: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+  .ui-icon {
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    line-height: 36px;
+  }
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-scroll-load-more__loading-item{
+  padding: 8px;
+  box-sizing: border-box;
+}
+.ac-scroll-load-history__more{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #999;
+}
+.ac-scroll-load-history__more-loading,
+.ac-scroll-load-history__more-load,
+.ac-scroll-load-history__more-complete {
+  padding-bottom: 20px;
+  padding-top: 12px;
+}
+.ac-scroll-load-history__more-load{
+  cursor: pointer;
+  &:hover {
+    color: #52a1e4;
+  }
+}
+</style>

package/common/static-map/index.js

@@ -0,0 +1,3 @@
+import StaticMap from './static-map'
+
+export default StaticMap