oxy-uni-ui 1.2.0 → 2.0.0

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;
   }
 }

package/components/oxy-message-box/oxy-message-box.vue

@@ -5,13 +5,14 @@
       v-model="messageState.show"
       :close-on-click-modal="messageState.closeOnClickModal"
       :lazy-render="messageState.lazyRender"
+      :max-width="popupMaxWidth"
       custom-class="oxy-message-box"
       @click-modal="toggleModal('modal')"
       :z-index="messageState.zIndex"
       :duration="200"
       :root-portal="rootPortal"
     >
-      <view :class="rootClass">
+      <view :class="rootClass" :style="containerStyle">
         <view :class="bodyClass">
           <view v-if="messageState.title" class="oxy-message-box__title">
             {{ messageState.title }}
@@ -62,7 +63,7 @@ import OxyInput from '../oxy-input/oxy-input.vue'
 import { computed, inject, reactive, ref, watch } from 'vue'
 import { messageBoxProps, type MessageOptionsWithCallBack, type MessageResult } from './types'
 import { defaultOptions, getMessageDefaultOptionKey } from '.'
-import { deepAssign, isDef, isFunction, isUndefined, omitBy } from '../common/util'
+import { deepAssign, isDef, isFunction, isUndefined, omitBy, resolveSizeWithScreenWidth } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { ButtonProps } from '../oxy-button/types'
 
@@ -78,6 +79,11 @@ const bodyClass = computed(() => {
   return `oxy-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
 })
 
+const containerStyle = computed(() => {
+  const width = resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
+  return `width:${width};`
+})
+
 const messageOptionKey = getMessageDefaultOptionKey(props.selector)
 const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项
 
@@ -96,7 +102,8 @@ const messageState = reactive<MessageOptionsWithCallBack>({
   inputError: '', // 输入框错误提示文案
   showErr: false, // 是否显示错误提示
   zIndex: 99, // 弹窗层级
-  lazyRender: true // 弹层内容懒渲染
+  lazyRender: true, // 弹层内容懒渲染
+  width: props.width // 弹框宽度
 })
 
 /**
@@ -280,6 +287,7 @@ function reset(option: MessageOptionsWithCallBack) {
     messageState.showErr = option.showErr
     messageState.zIndex = option.zIndex
     messageState.lazyRender = option.lazyRender
+    messageState.width = isDef(option.width) ? option.width : props.width
     messageState.confirmButtonProps = option.confirmButtonProps
     messageState.cancelButtonProps = option.cancelButtonProps
   }

package/components/oxy-message-box/types.ts

@@ -77,6 +77,10 @@ export type MessageOptions = {
    * 弹层内容懒渲染，触发展示时才渲染内容
    */
   lazyRender?: boolean
+  /**
+   * 弹框宽度，支持带单位的值（如 `640rpx`、`480px`、`80%`）
+   */
+  width?: string
   /**
    * 确认前钩子
    */
@@ -125,6 +129,16 @@ export const messageBoxProps = {
    * 指定唯一标识
    */
   selector: makeStringProp(''),
+  /**
+   * 弹框宽度，支持带单位的值（如 `640rpx`、`480px`、`80%`）
+   * @default '80%'
+   */
+  width: makeStringProp('80%'),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-navbar/index.scss

@@ -58,7 +58,7 @@
     font-size: $-navbar-desc-font-size;
     display: flex;
     align-items: center;
-    padding: 0 12px;
+    padding: 0 24rpx;
 
     @include when(disabled) {
       opacity: $-navbar-disabled-opacity;
@@ -90,4 +90,4 @@
     width: 100%;
     z-index: 500;
   }
-}
+}

package/components/oxy-navbar/oxy-navbar.vue

@@ -1,7 +1,10 @@
 <template>
-  <view :style="{ height: addUnit(height) }">
+  <view :style="placeholderStyle">
     <view :class="`oxy-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
-      <view class="oxy-navbar__content">
+      <view
+        class="oxy-navbar__content"
+        :style="{ width: fixed && avoidMenuButtonMode === 'full' ? unitConvert(navWidth, 0, { output: 'px' }) : '100%' }"
+      >
         <view class="oxy-navbar__capsule" v-if="$slots.capsule">
           <slot name="capsule" />
         </view>
@@ -19,7 +22,12 @@
           <slot name="title" />
           <block v-if="!$slots.title && title">{{ title }}</block>
         </view>
-        <view :class="`oxy-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
+        <view
+          :class="`oxy-navbar__right ${rightDisabled ? 'is-disabled' : ''}`"
+          @click="handleClickRight"
+          v-if="$slots.right || rightText"
+          :style="rightStyle"
+        >
           <slot name="right" />
 
           <view v-if="!$slots.right && rightText" class="oxy-navbar__text" hover-class="oxy-navbar__text--hover" :hover-stay-time="70">
@@ -44,41 +52,63 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { getRect, isDef, objToStyle, unitConvert } from '../common/util'
 import { navbarProps } from './types'
 
 const props = defineProps(navbarProps)
 const emit = defineEmits(['click-left', 'click-right'])
 
-const height = ref<number | ''>('') // 占位高度
+const placeholderHeight = ref<number | ''>('') // 占位高度（rpx 语义）
+const navWidth = ref<number | 'auto'>('auto') // 导航栏宽度
 
 const { statusBarHeight } = uni.getSystemInfoSync()
 
 watch(
-  [() => props.fixed, () => props.placeholder],
+  [() => props.fixed, () => props.placeholder, () => props.safeAreaInsetTop, () => props.customStyle],
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false }
+  { immediate: false }
 )
 
+const placeholderStyle = computed(() => {
+  if (!props.fixed || !props.placeholder) {
+    return {}
+  }
+  return {
+    height: `${Number(placeholderHeight.value) || 0}rpx`
+  }
+})
+
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (props.fixed && isDef(props.zIndex)) {
     style['z-index'] = props.zIndex
   }
   if (props.safeAreaInsetTop) {
-    style['padding-top'] = addUnit(statusBarHeight || 0)
+    style['padding-top'] = unitConvert(statusBarHeight || 0, 0, { output: 'px' })
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+const rightStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && props.avoidMenuButtonMode === 'right' && navWidth.value !== 'auto') {
+    style['right'] = `calc(100% - ${unitConvert(navWidth.value, 0, { output: 'px' })})`
+  }
+  return style
+})
+
 onMounted(() => {
   if (props.fixed && props.placeholder) {
-    nextTick(() => {
-      setPlaceholderHeight()
-    })
+    setPlaceholderHeight()
+  }
+  // #ifdef MP-WEIXIN
+  if (props.fixed && props.avoidMenuButtonMode) {
+    const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
+    navWidth.value = menuBtnInfo.left
   }
+  // #endif
 })
 
 function handleClickLeft() {
@@ -97,11 +127,26 @@ const { proxy } = getCurrentInstance() as any
 
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
+    placeholderHeight.value = ''
     return
   }
 
-  getRect('.oxy-navbar', false, proxy).then((res) => {
-    height.value = res.height as number
+  nextTick(() => {
+    getRect('.oxy-navbar', false, proxy)
+      .then((res) => {
+        const rectHeight = Number(res.height) || 0
+        const rectTop = Number(res.top)
+        const rectBottom = Number(res.bottom)
+        const occupiedHeight =
+          rectHeight > 0 ? rectHeight : !Number.isNaN(rectTop) && !Number.isNaN(rectBottom) ? Math.max(rectBottom - rectTop, 0) : 0
+        const pxPer100Rpx = uni.upx2px(100)
+        const occupiedHeightInRpx = pxPer100Rpx ? (occupiedHeight / pxPer100Rpx) * 100 : occupiedHeight * 2
+
+        placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
+      })
+      .catch(() => {
+        placeholderHeight.value = ''
+      })
   })
 }
 </script>

package/components/oxy-navbar/types.ts

@@ -46,7 +46,14 @@ export const navbarProps = {
   /**
    * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
    */
-  rightDisabled: makeBooleanProp(false)
+  rightDisabled: makeBooleanProp(false),
+  /**
+   * 胶囊避让模式：'full' 整体缩小宽度，'right' 仅右侧避让，不传则不避让
+   */
+  avoidMenuButtonMode: {
+    type: String,
+    default: ''
+  }
 }
 
 export type NavbarProps = ExtractPropTypes<typeof navbarProps>