@aochuang/common 1.0.0 → 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/loading/index.js

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

package/common/loading/loading.vue

@@ -0,0 +1,71 @@
+<template>
+  <transition>
+    <div class="ac-loading" v-if="visible" :style="style">
+      <ui-icon class="ac-loading__icon" name="loading" :size="40" color="#28a4e6"></ui-icon>
+      <div v-if="text" class="ac-loading__text">{{text}}</div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: 'AcLoading',
+  props: {
+    visible: {
+      type: Boolean
+    },
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    text: {
+      type: String
+    }
+  },
+  computed: {
+    style () {
+      const sy = {}
+      if (this.opacity) {
+        sy['background-color'] = `rgba(255, 255, 255, ${this.opacity})`
+      }
+      return sy
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-loading{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 1px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &.v-enter{
+    opacity: 0;
+  }
+  &.v-enter-active{
+    transition: all .3s;
+  }
+  &.v-enter-active{
+    opacity: 1;
+  }
+  &.v-leave{
+    opacity: 1;
+  }
+  &.v-leave-active{
+    transition: all .3s;
+  }
+  &.v-leave-active{
+    opacity: 0;
+  }
+}
+.ac-loading__text{
+  display: block;
+  color: #999;
+}
+</style>

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