oxy-uni-ui 2.1.2 → 2.1.3

package/components/oxy-loadmore/oxy-loadmore.vue

@@ -17,7 +17,9 @@
 export default {
   name: 'oxy-loadmore',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

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

@@ -26,7 +26,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 998;
+    z-index: $-z-index-overlay;
     background-color: transparent; /* 透明遮罩，点击关闭 */
   }
 

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

@@ -1,18 +1,23 @@
 <template>
-  <view :id="elId" :data-id="elId" :class="`oxy-long-press-menu ${mode === 'selection' ? 'is-selectable' : ''} ${customClass}`" :style="customStyle">
+  <view
+    :id="elId"
+    :data-id="elId"
+    :class="`oxy-long-press-menu ${effectiveMode === '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' }"
+      @longpress="effectiveMode === 'normal' ? onLongPress($event) : null"
+      :class="{ 'is-active': isVisible && effectiveMode === '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 && effectiveMode === '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>
@@ -36,6 +41,7 @@
 
 <script>
 import { uuid, getRect, unitConvert } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
 
 export default {
   name: 'oxy-long-press-menu',
@@ -77,16 +83,31 @@ export default {
       arrowBottom: true
     }
   },
+  setup() {
+    const { translate } = useTranslate('longPressMenu')
+    return { translate }
+  },
+  computed: {
+    effectiveMode() {
+      let mode = this.mode
+      // #ifndef APP-PLUS || H5
+      if (mode === 'selection') {
+        mode = 'normal'
+      }
+      // #endif
+      return mode
+    }
+  },
   watch: {
     // 监听外部 content 变化
     content(val) {
-      if (this.mode === 'normal') {
+      if (this.effectiveMode === 'normal') {
         this.selectedText = val
       }
     }
   },
   created() {
-    if (this.mode === 'normal') {
+    if (this.effectiveMode === 'normal') {
       this.selectedText = this.content
     }
   },
@@ -94,11 +115,11 @@ export default {
     // --- RenderJS 通信方法 ---
     // 接收 renderjs 发来的选中区域信息
     onSelectionChange(data) {
-      if (this.mode !== 'selection') return
+      if (this.effectiveMode !== 'selection') return
 
       if (!data) {
         // 清除选中
-        if (this.mode === 'selection') {
+        if (this.effectiveMode === 'selection') {
           this.isVisible = false
         }
         return
@@ -113,7 +134,7 @@ export default {
 
     // --- 现有逻辑 ---
     onLongPress(e) {
-      if (this.mode !== 'normal') return
+      if (this.effectiveMode !== 'normal') return
 
       // 获取触发元素的位置
       getRect('.oxy-long-press-menu__trigger', false, this)
@@ -125,17 +146,25 @@ export default {
         .catch(() => {})
       this.$emit('longpress', e)
     },
+    /**
+     * 展示气泡菜单。根据触发元素 rect 计算气泡位置和箭头方向。
+     * - 上方空间不足时翻转到下方显示
+     * - 渲染后二次修正：气泡超出屏幕左侧则右对齐，超出右侧则左对齐
+     * - 同步修正箭头位置
+     * - Normal 模式触发振动反馈
+     * @param rect - 触发元素的 boundingClientRect
+     */
     showMenu(rect) {
       this.rect = rect
       // 计算气泡位置
       // 默认显示在元素上方
       this.arrowBottom = true // 箭头在底部（气泡在上方）
-      let top = rect.top - (this.mode !== 'normal' ? 60 : 10) // 预估气泡高度 + 箭头 + 间距
+      let top = rect.top - (this.effectiveMode !== 'normal' ? 60 : 10) // 预估气泡高度 + 箭头 + 间距
       let left = rect.left + rect.width / 2
       // 如果上方空间不足，显示在下方
       if (top < 50) {
         // 顶部留一些安全距离
-        top = rect.bottom + (this.mode !== 'normal' ? 20 : 60)
+        top = rect.bottom + (this.effectiveMode !== 'normal' ? 20 : 60)
         this.arrowBottom = false // 箭头在顶部（气泡在下方）
       }
       this.popoverStyle = {
@@ -172,7 +201,7 @@ export default {
           .catch(() => {})
       })
       // 振动反馈 (仅 Normal 模式或首次显示时)
-      if (this.mode === 'normal') {
+      if (this.effectiveMode === 'normal') {
         uni.vibrateShort()
       }
     },
@@ -193,7 +222,7 @@ export default {
             data: textToCopy,
             success: () => {
               uni.showToast({
-                title: '已复制',
+                title: this.translate('copied'),
                 icon: 'none'
               })
             }

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

@@ -1,9 +1,9 @@
-@import "../common/abstracts/variable.scss";
-@import "../common/abstracts/_mixin.scss";
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
 
 .oxy-theme-dark {
   @include b(message-box) {
-    @include e(body) {
+    @include e(container) {
       background-color: $-dark-background2;
     }
 
@@ -11,55 +11,111 @@
       color: $-dark-color;
     }
 
-    @include e(content) {
+    @include e(content-text) {
       color: $-dark-color3;
+    }
 
+    @include e(content) {
       &::-webkit-scrollbar-thumb {
         background: $-dark-border-color;
       }
     }
+
+    @include e(close) {
+      color: $-dark-color3;
+    }
   }
 }
 
-:deep(.oxy-message-box){
-  border-radius: $-message-box-radius;
-  overflow: hidden;
+:deep() {
+  .oxy-popup.oxy-message-box {
+    background: transparent;
+    border-radius: $-message-box-radius;
+    overflow: hidden;
+  }
 }
 
 @include b(message-box) {
-  border-radius: $-message-box-radius;
-  overflow: hidden;
-
   @include e(container) {
+    background: $-message-box-bg;
+    border-radius: $-message-box-radius;
+    overflow: hidden;
     box-sizing: border-box;
+    position: relative;
   }
 
   @include e(body) {
-    background-color: $-message-box-bg;
     padding: $-message-box-padding;
 
-    @include when(no-title) {
-      padding: 56rpx 48rpx 0rpx;
+    @include when(prompt) {
+      .oxy-message-box__content {
+        padding-top: $-message-box-input-padding-top;
+      }
+    }
+  }
+
+  @include e(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: $-message-box-img-radius;
+
+    & + .oxy-message-box__title {
+      margin-top: $-message-box-body-spacing-large;
+    }
+
+    & + .oxy-message-box__content {
+      margin-top: $-message-box-body-spacing-large;
+
+      .oxy-message-box__body.is-prompt & {
+        margin-top: $-message-box-body-spacing;
+      }
     }
   }
 
   @include e(title) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
     font-size: $-message-box-title-fs;
     color: $-message-box-title-color;
-    line-height: $-lh-base;
-    font-weight: $-fw-medium;
-    padding-top: $-spacing-16;
-    padding-bottom: $-spacing-24;
+    line-height: $-message-box-title-line-height;
+    font-weight: $-message-box-title-fw;
+
+    & + .oxy-message-box__content {
+      margin-top: $-message-box-body-spacing;
+    }
+  }
+
+  @include e(icon) {
+    font-size: $-message-box-icon-size;
+    line-height: $-message-box-icon-size;
+    margin: 0 auto;
+    margin-bottom: $-message-box-icon-margin-bottom;
+    color: $-message-box-icon-color;
+
+    @include when(success) {
+      color: $-message-box-icon-success-color;
+    }
+
+    @include when(info) {
+      color: $-message-box-icon-info-color;
+    }
+
+    @include when(warning) {
+      color: $-message-box-icon-warning-color;
+    }
+
+    @include when(danger) {
+      color: $-message-box-icon-danger-color;
+    }
   }
 
   @include e(content) {
     max-height: $-message-box-content-max-height;
-    color: $-message-box-content-color;
-    font-size: $-message-box-content-fs;
     text-align: center;
     overflow: auto;
-    line-height: $-lh-base;
 
     &::-webkit-scrollbar {
       width: $-message-box-content-scrollbar-width;
@@ -72,38 +128,169 @@
     }
   }
 
+  @include e(content-text) {
+    color: $-message-box-content-color;
+    font-size: $-message-box-content-fs;
+    line-height: $-message-box-content-line-height;
+
+    @include m(prompt) {
+      display: block;
+      margin-bottom: $-message-box-body-spacing;
+    }
+  }
+
   @include e(input-error) {
-    min-height: 40rpx;
-    margin-top: 8rpx;
     color: $-message-box-input-error-color;
+    font-size: $-message-box-input-fs;
+    line-height: $-message-box-input-line-height;
+    padding-top: $-message-box-input-padding-top;
     text-align: left;
-
-    @include when(hidden) {
-      visibility: hidden;
-    }
   }
 
   @include e(actions) {
-    padding: 48rpx;
-  }
-  
-  @include edeep(actions-btn) {
-    &:not(:last-child) {
-      margin-right: $-spacing-32;
+    padding: $-message-box-actions-padding;
+
+    :deep() {
+      .oxy-message-box__actions-btn {
+        min-width: 0;
+        flex: 1 1 0;
+
+        /* #ifndef MP-TOUTIAO */
+        &:not(:last-child) {
+          margin-right: $-message-box-actions-spacing;
+        }
+        /* #endif */
+      }
+
+      .oxy-message-box__actions-btn--confirm {
+        font-weight: $-message-box-actions-confirm-fw;
+      }
+    }
+
+    /* #ifdef MP-TOUTIAO */
+    // 抖音无 virtualHost，wrapper 元素阻断了 :deep()，改用 > * 作用于子元素
+    > *:not(:last-child) {
+      margin-right: $-message-box-actions-spacing;
+    }
+    /* #endif */
+
+    @include m(vertical) {
+      flex-direction: column;
+      padding: $-message-box-actions-padding-vertical;
+
+      :deep() {
+        .oxy-message-box__actions-btn {
+          flex: none;
+          width: 100%;
+
+          /* #ifndef MP-TOUTIAO */
+          &:not(:last-child) {
+            margin-right: 0;
+            margin-bottom: $-message-box-actions-spacing-vertical;
+          }
+          /* #endif */
+        }
+      }
+
+      /* #ifdef MP-TOUTIAO */
+      > *:not(:last-child) {
+        margin-right: 0;
+        margin-bottom: $-message-box-actions-spacing-vertical;
+      }
+      > * {
+        flex: none;
+        width: 100%;
+      }
+      /* #endif */
+    }
+
+    @include when(text) {
+      padding: $-message-box-actions-text-padding;
+
+      :deep() {
+        .oxy-message-box__actions-btn {
+          margin: 0;
+          border-radius: 0;
+          padding: $-message-box-actions-text-btn-padding;
+          border-top: $-message-box-actions-text-border;
+          border-color: $-message-box-actions-text-border-color;
+
+          &:not(:last-child) {
+            /* #ifndef MP-TOUTIAO */
+            margin-right: 0;
+            /* #endif */
+            border-right: $-message-box-actions-text-border;
+            border-color: $-message-box-actions-text-border-color;
+          }
+
+          &.is-text {
+            height: auto;
+            font-size: $-message-box-actions-text-btn-fs;
+            line-height: $-message-box-actions-text-btn-line-height;
+          }
+        }
+
+        .oxy-message-box__actions-btn--confirm.is-text {
+          color: $-message-box-actions-text-confirm-color;
+        }
+      }
+
+      /* #ifdef MP-TOUTIAO */
+      // 抖音下 text 主题样式通过 > * 作用到 wrapper 上
+      > * {
+        margin: 0;
+        border-radius: 0;
+        padding: $-message-box-actions-text-btn-padding;
+        border-top: $-message-box-actions-text-border;
+        border-color: $-message-box-actions-text-border-color;
+      }
+
+      > *:not(:last-child) {
+        border-right: $-message-box-actions-text-border;
+        border-color: $-message-box-actions-text-border-color;
+      }
+      /* #endif */
+
+      &.oxy-message-box__actions--vertical {
+        :deep() {
+          .oxy-message-box__actions-btn {
+            &:not(:last-child) {
+              border-right: none;
+            }
+          }
+        }
+
+        /* #ifdef MP-TOUTIAO */
+        > *:not(:last-child) {
+          border-right: none;
+        }
+        /* #endif */
+      }
     }
   }
 
   @include e(flex) {
     display: flex;
-    justify-content: center;
-    align-items: center;
+
+    /* #ifdef MP-TOUTIAO */
+    // 抖音下 flex 容器子元素是 wrapper 而非 button，需用 > * 直接作用
+    > * {
+      flex: 1;
+      min-width: 0;
+    }
+    /* #endif */
   }
 
   @include e(block) {
     display: block;
   }
 
-  @include e(cancel) {
-    margin-right: $-spacing-32;
+  @include e(close) {
+    position: absolute;
+    top: $-message-box-close-top;
+    right: $-message-box-close-right;
+    font-size: $-message-box-close-size;
+    color: $-message-box-close-color;
+    z-index: 1;
   }
 }

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

@@ -1,10 +1,7 @@
-import { inject, provide, ref } from 'vue'
 import type { Message, MessageOptions, MessageOptionsWithCallBack, MessageResult, MessageType } from './types'
-import { deepMerge } from '../common/util'
-
-const messageDefaultOptionKey = '__MESSAGE_OPTION__'
-
-const None = Symbol('None')
+import { deepMerge, isDef, isObj, isString } from '../common/util'
+import type { IconProps } from '../oxy-icon/types'
+import { createSharedState } from '../composables/useSharedState'
 
 // 默认模板
 export const defaultOptions: MessageOptionsWithCallBack = {
@@ -14,39 +11,69 @@ export const defaultOptions: MessageOptionsWithCallBack = {
   closeOnClickModal: true,
   msg: '',
   type: 'alert',
+  theme: 'button',
+  actionLayout: 'horizontal',
   inputType: 'text',
   inputValue: '',
   showErr: false,
   zIndex: 99,
   lazyRender: true,
-  inputError: ''
+  inputError: '',
+  showClose: false
 }
 
-export function useMessage(selector: string = ''): Message {
-  const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey
-  const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack | typeof None>(None)) // Message选项
-  if (messageOption.value === None) {
-    messageOption.value = defaultOptions
-    provide(messageOptionKey, messageOption)
-  }
+const messageDefaultOptionKey = '__MESSAGE_OPTION__'
+
+const {
+  getState: getMessageOptions,
+  initState: initMessageOptions,
+  removeState: removeMessageOptions,
+  resolveScopeId: resolveMessageScopeId
+} = createSharedState<MessageOptionsWithCallBack>(() => defaultOptions, { namespace: 'message-box' })
 
+export { getMessageOptions, initMessageOptions, removeMessageOptions, resolveMessageScopeId }
+
+export function useMessage(selector: string = ''): Message {
+  const scopeId = resolveMessageScopeId()
   const createMethod = (type: MessageType) => {
     // 优先级：options->MessageOptions->defaultOptions
     return (options: MessageOptions | string) => {
-      const messageOptions = deepMerge({ type: type }, typeof options === 'string' ? { title: options } : options) as MessageOptions
-      if (messageOptions.type === 'confirm' || messageOptions.type === 'prompt') {
-        messageOptions.showCancelButton = true
-      } else {
-        messageOptions.showCancelButton = false
+      const messageOptions = deepMerge({ type: type }, isString(options) ? { title: options } : options) as MessageOptions
+
+      // 保留历史行为：confirm / prompt 默认展示取消按钮，alert 默认不展示
+      if (!isDef(messageOptions.showCancelButton)) {
+        messageOptions.showCancelButton = messageOptions.type === 'confirm' || messageOptions.type === 'prompt'
       }
+
+      normalizeIconProps(messageOptions)
+
       return show(messageOptions)
     }
   }
 
+  /**
+   * 将 icon / iconColor 快捷字段合并到 iconProps 中，保持与 props 配置一致
+   */
+  function normalizeIconProps(options: MessageOptions) {
+    if (options.icon || options.iconColor) {
+      const iconProps: Partial<IconProps> = {}
+      if (options.icon) {
+        iconProps.name = options.icon
+      }
+      if (options.iconColor) {
+        iconProps.color = options.iconColor
+      }
+      options.iconProps = isDef(options.iconProps) && isObj(options.iconProps) ? { ...options.iconProps, ...iconProps } : iconProps
+    }
+  }
+
   const show = (option: MessageOptions | string) => {
+    const messageOption = initMessageOptions(selector, scopeId)
     // 返回一个promise
     return new Promise<MessageResult>((resolve, reject) => {
-      const options = deepMerge(defaultOptions, typeof option === 'string' ? { title: option } : option)
+      const rawOptions = isString(option) ? { title: option } : { ...option }
+      normalizeIconProps(rawOptions)
+      const options = deepMerge(defaultOptions, rawOptions)
       messageOption.value = deepMerge(options, {
         show: true,
         success: (res: MessageResult) => {
@@ -69,9 +96,8 @@ export function useMessage(selector: string = ''): Message {
   const prompt = createMethod('prompt')
 
   const close = () => {
-    if (messageOption.value !== None) {
-      messageOption.value.show = false
-    }
+    const messageOption = initMessageOptions(selector, scopeId)
+    messageOption.value.show = false
   }
   return {
     show,