oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-link/index.scss

@@ -48,10 +48,10 @@
   }
 
   &__prefix-icon:not(:empty) + &__content:not(:empty) {
-	    padding-left: 4px;
+	    padding-left: 8rpx;
 	}
 
 	&__content:not(:empty) + &__suffix-icon:not(:empty) {
-	    padding-left: 4px;
+	    padding-left: 8rpx;
 	}
 }

package/components/oxy-list/oxy-list.vue

@@ -28,8 +28,8 @@
       @refresherrestore="onRestore"
       @refresherabort="onAbort"
     >
-      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
-        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+      <view class="oxy-virtual-scroll__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
           <view v-for="(item, index) in virtualData" :key="index">
             <slot name="item" :item="item" :index="startIndex + index"></slot>
           </view>
@@ -54,7 +54,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -80,6 +80,7 @@ import type {
   ScrollViewOnScrollEvent
 } from '@uni-helper/uni-app-types/index'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { unitConvert } from '../common/util'
 
 const props = defineProps(listProps)
 

package/components/oxy-loading/oxy-loading.vue

@@ -19,7 +19,7 @@ export default {
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
-import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
+import { withDefaultUnit, gradient, context, objToStyle, isDef } from '../common/util'
 import { loadingProps } from './types'
 
 const svgDefineId = context.id++
@@ -44,7 +44,11 @@ const iconSize = ref<string | number | null>(null)
 watch(
   () => props.size,
   (newVal) => {
-    iconSize.value = addUnit(newVal)
+    if (!isDef(newVal) || newVal === '') {
+      iconSize.value = null
+      return
+    }
+    iconSize.value = withDefaultUnit(newVal)
   },
   {
     deep: true,
@@ -66,8 +70,8 @@ watch(
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(iconSize.value)) {
-    style.height = addUnit(iconSize.value)
-    style.width = addUnit(iconSize.value)
+    style.height = iconSize.value
+    style.width = iconSize.value
   }
   return `${objToStyle(style)} ${props.customStyle}`
 })

package/components/oxy-loading/types.ts

@@ -14,7 +14,7 @@ export const loadingProps = {
    */
   color: makeStringProp('#4D80F0'),
   /**
-   * 设置加载指示器大小
+   * 设置加载指示器大小，number 类型按 `rpx` 语义处理
    */
   size: makeNumericProp('')
 }

package/components/oxy-loadmore/index.scss

@@ -15,7 +15,7 @@
 
   @include edeep(loading) {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: 16rpx;
     vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;
@@ -26,7 +26,7 @@
     vertical-align: middle;
 
     @include when(light) {
-      margin: 0 6px;
+      margin: 0 12rpx;
       color: $-loadmore-error-color;
     }
   }
@@ -36,4 +36,4 @@
     vertical-align: middle;
     font-size: $-loadmore-refresh-fs;
   }
-}
+}

package/components/oxy-long-press-menu/index.scss

@@ -0,0 +1,93 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(long-press-menu) {
+  position: relative;
+  display: inline-block; /* 让容器适应内容宽度 */
+  user-select: none;
+  -webkit-user-select: none;
+
+  @include e(trigger) {
+    position: relative;
+    transition: background-color 0.2s;
+    border-radius: $-long-press-menu-radius;
+    /* 默认为 inline-block，减少空白占据 */
+    display: inline-block;
+    width: 100%;
+
+    @include when(active) {
+      background-color: rgba(0, 0, 0, 0.05); /* 长按时的高亮背景 */
+    }
+  }
+
+  @include e(mask) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 998;
+    background-color: transparent; /* 透明遮罩，点击关闭 */
+  }
+
+  @include e(popover) {
+    position: fixed;
+    z-index: $-long-press-menu-z-index;
+    background-color: $-long-press-menu-bg;
+    border-radius: $-long-press-menu-radius;
+    padding: $-long-press-menu-padding;
+    min-width: 200rpx;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  @include e(item) {
+    padding: $-long-press-menu-item-padding;
+    position: relative;
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 24rpx;
+      bottom: 24rpx;
+      width: 1px;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  @include e(text) {
+    color: $-long-press-menu-color;
+    font-size: $-long-press-menu-fs;
+    white-space: nowrap;
+  }
+
+  @include e(arrow) {
+    left: 24rpx;
+  }
+  @include triangleArrow($-long-press-menu-arrow-size, $-long-press-menu-bg);
+
+  @include when(selectable) {
+    /* 移除 user-select，改为控制 trigger */
+    .oxy-long-press-menu__trigger {
+      user-select: text;
+      -webkit-user-select: text;
+      -webkit-touch-callout: none; /* 禁用系统默认长按菜单 */
+      cursor: text;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}

package/components/oxy-long-press-menu/oxy-long-press-menu.vue

@@ -0,0 +1,338 @@
+<template>
+  <view :id="elId" :data-id="elId" :class="`oxy-long-press-menu ${mode === 'selection' ? 'is-selectable' : ''} ${customClass}`" :style="customStyle">
+    <!-- 触发区域 -->
+    <!-- mode='normal': 使用 longpress 事件 -->
+    <!-- mode='selection': 不使用 longpress，依靠 renderjs/js 监听 selection -->
+    <view
+      class="oxy-long-press-menu__trigger"
+      @longpress="mode === 'normal' ? onLongPress($event) : null"
+      :class="{ 'is-active': isVisible && mode === 'normal' }"
+    >
+      <slot></slot>
+    </view>
+
+    <!-- 遮罩层 (Normal模式使用，Selection模式不需要遮罩，依靠原生行为关闭) -->
+    <view v-if="isVisible && mode === 'normal'" class="oxy-long-press-menu__mask" @click="hideMenu" @touchmove.stop.prevent></view>
+
+    <!-- 气泡菜单 -->
+    <view v-if="isVisible" class="oxy-long-press-menu__popover" :style="popoverStyle" @click.stop>
+      <view
+        v-if="visibleArrow"
+        :class="`oxy-long-press-menu__arrow oxy-long-press-menu__${arrowBottom ? 'arrow-down' : 'arrow-up'}`"
+        :style="arrowStyle"
+      ></view>
+      <view class="oxy-long-press-menu__content">
+        <view v-for="(item, index) in menus" :key="index" class="oxy-long-press-menu__item" @click="onMenuClick(item)">
+          <text class="oxy-long-press-menu__text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- #ifdef APP-PLUS || H5 -->
+    <view :prop="selectionProp" :change:prop="selection.propObserver"></view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+import { uuid, getRect, unitConvert } from '../common/util'
+
+export default {
+  name: 'oxy-long-press-menu',
+  props: {
+    customClass: {
+      type: String,
+      default: ''
+    },
+    customStyle: {
+      type: String,
+      default: ''
+    },
+    mode: {
+      type: String,
+      default: 'normal'
+    },
+    menus: {
+      type: Array,
+      default: () => []
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    visibleArrow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      elId: `long-press-menu${uuid()}`,
+      isVisible: false,
+      popoverStyle: {},
+      arrowStyle: {},
+      rect: null,
+      selectedText: '', // 存储选中的文本
+      selectionProp: '', // 用于与 renderjs 通信
+      arrowBottom: true
+    }
+  },
+  watch: {
+    // 监听外部 content 变化
+    content(val) {
+      if (this.mode === 'normal') {
+        this.selectedText = val
+      }
+    }
+  },
+  created() {
+    if (this.mode === 'normal') {
+      this.selectedText = this.content
+    }
+  },
+  methods: {
+    // --- RenderJS 通信方法 ---
+    // 接收 renderjs 发来的选中区域信息
+    onSelectionChange(data) {
+      if (this.mode !== 'selection') return
+
+      if (!data) {
+        // 清除选中
+        if (this.mode === 'selection') {
+          this.isVisible = false
+        }
+        return
+      }
+
+      const { text, rect } = data
+      if (text && rect) {
+        this.selectedText = text
+        this.showMenu(rect)
+      }
+    },
+
+    // --- 现有逻辑 ---
+    onLongPress(e) {
+      if (this.mode !== 'normal') return
+
+      // 获取触发元素的位置
+      getRect('.oxy-long-press-menu__trigger', false, this)
+        .then((rect) => {
+          if (rect) {
+            this.showMenu(rect)
+          }
+        })
+        .catch(() => {})
+      this.$emit('longpress', e)
+    },
+    showMenu(rect) {
+      this.rect = rect
+      // 计算气泡位置
+      // 默认显示在元素上方
+      this.arrowBottom = true // 箭头在底部（气泡在上方）
+      let top = rect.top - (this.mode !== 'normal' ? 60 : 10) // 预估气泡高度 + 箭头 + 间距
+      let left = rect.left + rect.width / 2
+      // 如果上方空间不足，显示在下方
+      if (top < 50) {
+        // 顶部留一些安全距离
+        top = rect.bottom + (this.mode !== 'normal' ? 20 : 60)
+        this.arrowBottom = false // 箭头在顶部（气泡在下方）
+      }
+      this.popoverStyle = {
+        top: unitConvert(top, 0, { output: 'px' }),
+        left: unitConvert(left, 0, { output: 'px' }),
+        animation: 'fadeIn 0.2s ease-out'
+      }
+      this.arrowStyle = {
+        left: unitConvert(rect.width / 2, 0, { output: 'px' })
+      }
+      this.isVisible = true
+      this.$nextTick(() => {
+        getRect('.oxy-long-press-menu__popover', false, this)
+          .then((prect) => {
+            if (prect) {
+              const windowWidth = uni.getSystemInfoSync().windowWidth
+              let pLeft = left - prect.width / 2
+              let arrowLeft = rect.width / 2
+              let arrowRight = 'auto'
+              if (pLeft < 0) {
+                pLeft = rect.left
+              } else if (pLeft + prect.width > windowWidth) {
+                pLeft = rect.left + rect.width - prect.width
+                arrowLeft = 'auto'
+                arrowRight = rect.width / 2
+              } else {
+                arrowLeft = '50%'
+              }
+              this.popoverStyle.left = unitConvert(pLeft, 0, { output: 'px' })
+              this.arrowStyle.left = unitConvert(arrowLeft, 0, { output: 'px' })
+              this.arrowStyle.right = unitConvert(arrowRight, 0, { output: 'px' })
+            }
+          })
+          .catch(() => {})
+      })
+      // 振动反馈 (仅 Normal 模式或首次显示时)
+      if (this.mode === 'normal') {
+        uni.vibrateShort()
+      }
+    },
+    hideMenu() {
+      this.isVisible = false
+      // 通知 renderjs 清除状态 (可选)
+      this.selectionProp = 'clear-' + Date.now()
+    },
+    onMenuClick(item) {
+      // 不要立即 hideMenu，因为可能要操作 selection
+      // 但对于 copy，我们通常会操作完后隐藏
+
+      // 内置复制功能
+      if (item.value === 'copy') {
+        const textToCopy = this.selectedText || this.content
+        if (textToCopy) {
+          uni.setClipboardData({
+            data: textToCopy,
+            success: () => {
+              uni.showToast({
+                title: '已复制',
+                icon: 'none'
+              })
+            }
+          })
+        }
+      }
+
+      this.$emit('menu-click', { ...item, content: this.selectedText })
+      this.hideMenu()
+    }
+  }
+}
+</script>
+
+<!-- #ifdef APP-PLUS || H5 -->
+<script module="selection" lang="renderjs">
+module.exports = {
+  data() {
+    return {
+      isSelecting: false,
+      ownerId: null,
+      selectionDebounce: null
+    }
+  },
+  mounted() {
+    // 获取组件ID
+    this.ownerId = this.$el.getAttribute('data-id')
+
+    // 监听 selectionchange
+    document.addEventListener('selectionchange', this.handleSelectionChange)
+    // 监听 touchend 用于确定选择结束
+    document.addEventListener('touchend', this.handleTouchEnd)
+    // 同时也监听当前元素的 touchend，以防冒泡问题
+    this.$el.addEventListener('touchend', this.handleTouchEnd)
+    document.addEventListener('mouseup', this.handleTouchEnd)
+
+    // 阻止默认上下文菜单（防止系统菜单冲突）
+    this.$el.addEventListener('contextmenu', (e) => {
+      // 在 selectable 模式下，如果选区在本组件内，阻止默认菜单
+      // 在 normal 模式下，也阻止默认菜单
+      e.preventDefault()
+      return false
+    })
+  },
+  beforeDestroy() {
+    document.removeEventListener('selectionchange', this.handleSelectionChange)
+    document.removeEventListener('touchend', this.handleTouchEnd)
+    if (this.$el) {
+      this.$el.removeEventListener('touchend', this.handleTouchEnd)
+    }
+    document.removeEventListener('mouseup', this.handleTouchEnd)
+  },
+  methods: {
+    propObserver(newValue, oldValue) {
+      if (newValue && newValue.startsWith('clear')) {
+        const selection = window.getSelection()
+        if (selection) {
+          selection.removeAllRanges()
+        }
+      }
+    },
+    handleSelectionChange() {
+      // 清除之前的定时器
+      if (this.selectionDebounce) clearTimeout(this.selectionDebounce)
+
+      // 增加防抖检测，以防 touchend 被系统吞掉或未触发
+      // 600ms 后如果没有新的 selectionchange，尝试检查选区
+      this.selectionDebounce = setTimeout(() => {
+        this.checkSelection()
+      }, 600)
+    },
+    handleTouchEnd() {
+      // 立即清除防抖，改用短延时检查
+      if (this.selectionDebounce) clearTimeout(this.selectionDebounce)
+
+      // 延时一下确保 selection 状态已更新
+      setTimeout(() => {
+        this.checkSelection()
+      }, 100)
+    },
+    checkSelection() {
+      const selection = window.getSelection()
+      // 如果没有选区或选区为空，清除菜单
+      if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+        this.$ownerInstance.callMethod('onSelectionChange', null)
+        return
+      }
+
+      const text = selection.toString()
+      if (!text || !text.trim()) {
+        this.$ownerInstance.callMethod('onSelectionChange', null)
+        return
+      }
+
+      // 检查选区是否在这个组件内
+      if (!this.isSelectionInThisElement(selection)) {
+        // 不属于本组件的选区，应该清除本组件的菜单
+        // 这样点击外部或者选择了其他组件的文字时，当前菜单会自动消失
+        this.$ownerInstance.callMethod('onSelectionChange', null)
+        return
+      }
+
+      // 获取选区坐标
+      const range = selection.getRangeAt(0)
+      const rect = range.getBoundingClientRect()
+
+      // 转换为纯对象传递
+      this.$ownerInstance.callMethod('onSelectionChange', {
+        text: text,
+        rect: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          right: rect.right,
+          width: rect.width,
+          height: rect.height
+        }
+      })
+    },
+    isSelectionInThisElement(selection) {
+      if (!selection) selection = window.getSelection()
+      if (selection.rangeCount === 0) return false
+
+      const range = selection.getRangeAt(0)
+      let container = range.commonAncestorContainer
+
+      // 如果容器是文本节点，取其父元素
+      if (container.nodeType === 3) {
+        container = container.parentNode
+      }
+
+      // 使用 contains 判断选区是否在当前组件根元素内
+      return this.$el.contains(container)
+    }
+  }
+}
+</script>
+<!-- #endif -->
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-long-press-menu/types.ts

@@ -0,0 +1,34 @@
+import type { PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type LongPressMenuType = 'normal' | 'selection'
+
+export type MenusItem = {
+  [key: string]: any
+  text: string
+  value: string
+}
+
+export const longPressMenuProps = {
+  ...baseProps,
+  /**
+   * 模式，'normal' (长按直接弹) | 'selection' (选文后弹 - 仅H5/App)
+   * 类型: string
+   * 默认值: 'normal'
+   */
+  mode: makeStringProp<LongPressMenuType>('normal'),
+  /**
+   * 菜单项
+   * 类型: array
+   * 默认值: [{ text: '复制', value: 'copy' }]
+   */
+  menus: {
+    type: Array as PropType<MenusItem[]>,
+    default: () => [{ text: '复制', value: 'copy' }]
+  },
+  /**
+   * 要复制的内容，如果不传则不自动处理复制
+   * 类型: string
+   */
+  content: makeStringProp('')
+}

package/components/oxy-message-box/index.scss

@@ -31,7 +31,6 @@
   overflow: hidden;
 
   @include e(container) {
-    width: $-message-box-width;
     box-sizing: border-box;
   }
 
@@ -40,7 +39,7 @@
     padding: $-message-box-padding;
 
     @include when(no-title) {
-      padding: 25px 24px 0px;
+      padding: 50rpx 48rpx 0rpx;
     }
   }
 
@@ -48,10 +47,10 @@
     text-align: center;
     font-size: $-message-box-title-fs;
     color: $-message-box-title-color;
-    line-height: 20px;
+    line-height: 40rpx;
     font-weight: 500;
-    padding-top: 5px;
-    padding-bottom: 10px;
+    padding-top: 10rpx;
+    padding-bottom: 20rpx;
   }
 
   @include e(content) {
@@ -60,7 +59,7 @@
     font-size: $-message-box-content-fs;
     text-align: center;
     overflow: auto;
-    line-height: 20px;
+    line-height: 40rpx;
 
     &::-webkit-scrollbar {
       width: $-message-box-content-scrollbar-width;
@@ -74,8 +73,8 @@
   }
 
   @include e(input-error) {
-    min-height: 18px;
-    margin-top: 2px;
+    min-height: 36rpx;
+    margin-top: 4rpx;
     color: $-message-box-input-error-color;
     text-align: left;
 
@@ -85,17 +84,19 @@
   }
 
   @include e(actions) {
-    padding: 24px;
+    padding: 48rpx;
   }
   
   @include edeep(actions-btn) {
     &:not(:last-child) {
-      margin-right: 16px;
+      margin-right: 32rpx;
     }
   }
 
   @include e(flex) {
     display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   @include e(block) {
@@ -103,6 +104,6 @@
   }
 
   @include e(cancel) {
-    margin-right: 16px;
+    margin-right: 32rpx;
   }
 }