oxy-uni-ui 2.1.1 → 2.1.3

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

@@ -13,34 +13,65 @@
       :root-portal="rootPortal"
     >
       <view :class="rootClass">
+        <oxy-icon v-if="messageState.showClose" custom-class="oxy-message-box__close" name="close" @click="toggleModal('close')" />
+        <slot name="header" />
+
         <view :class="bodyClass">
-          <view v-if="messageState.title" class="oxy-message-box__title">
-            {{ messageState.title }}
-          </view>
-          <view class="oxy-message-box__content">
-            <block v-if="messageState.type === 'prompt'">
-              <oxy-input
-                v-model="messageState.inputValue"
-                :type="messageState.inputType"
-                :size="messageState.inputSize"
-                :placeholder="messageState.inputPlaceholder"
-                @input="inputValChange"
-              />
-              <view v-if="messageState.showErr" class="oxy-message-box__input-error">
-                {{ messageState.inputError || translate('inputNoValidate') }}
-              </view>
-            </block>
-            <slot>{{ messageState.msg }}</slot>
+          <slot name="image">
+            <image v-if="messageState.headerImage" mode="widthFix" class="oxy-message-box__img" :src="messageState.headerImage"></image>
+          </slot>
+
+          <slot name="title" :icon="messageState.icon" :title="messageState.title" :iconProps="messageState.iconProps">
+            <view v-if="messageState.iconProps?.name || messageState.title" class="oxy-message-box__title">
+              <oxy-icon
+                v-if="messageState.iconProps?.name"
+                :custom-class="`oxy-message-box__icon ${iconTypeClass}`"
+                :name="messageState.iconProps.name"
+                :color="messageState.iconProps.color"
+                :size="messageState.iconProps.size"
+              ></oxy-icon>
+              {{ messageState.title }}
+            </view>
+          </slot>
+
+          <view class="oxy-message-box__content" v-if="messageState.type === 'prompt' || !!messageState.msg || $slots.default">
+            <slot
+              :msg="messageState.msg"
+              :type="messageState.type"
+              :inputValue="messageState.inputValue"
+              :showErr="messageState.showErr"
+              :inputError="messageState.inputError"
+            >
+              <block v-if="messageState.type === 'prompt'">
+                <view v-if="messageState.msg" class="oxy-message-box__content-text oxy-message-box__content-text--prompt">
+                  {{ messageState.msg }}
+                </view>
+                <oxy-input
+                  v-model="messageState.inputValue"
+                  :type="messageState.inputType"
+                  :size="messageState.inputSize"
+                  :placeholder="messageState.inputPlaceholder || translate('inputPlaceholder')"
+                  @input="inputValChange"
+                />
+                <view v-if="messageState.showErr" class="oxy-message-box__input-error">
+                  {{ messageState.inputError || translate('inputNoValidate') }}
+                </view>
+              </block>
+              <view v-else class="oxy-message-box__content-text">{{ messageState.msg }}</view>
+            </slot>
           </view>
         </view>
-        <view :class="`oxy-message-box__actions ${messageState.showCancelButton ? 'oxy-message-box__flex' : 'oxy-message-box__block'}`">
-          <oxy-button v-bind="customCancelProps" v-if="messageState.showCancelButton" @click="toggleModal('cancel')">
-            {{ messageState.cancelButtonText || translate('cancel') }}
-          </oxy-button>
-          <oxy-button v-bind="customConfirmProps" @click="toggleModal('confirm')">
-            {{ messageState.confirmButtonText || translate('confirm') }}
-          </oxy-button>
-        </view>
+
+        <slot name="actions" :confirm="() => toggleModal('confirm')" :cancel="() => toggleModal('cancel')" :close="() => toggleModal('close')">
+          <view :class="actionsClass">
+            <oxy-button v-bind="customCancelProps" v-if="showCancelButton" @click="toggleModal('cancel')">
+              {{ messageState.cancelButtonText || translate('cancel') }}
+            </oxy-button>
+            <oxy-button v-bind="customConfirmProps" v-if="showConfirmButton" @click="toggleModal('confirm')">
+              {{ messageState.confirmButtonText || translate('confirm') }}
+            </oxy-button>
+          </view>
+        </slot>
       </view>
     </oxy-popup>
   </view>
@@ -49,7 +80,9 @@
 export default {
   name: 'oxy-message-box',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -60,10 +93,11 @@ export default {
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import OxyButton from '../oxy-button/oxy-button.vue'
 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, resolveSizeWithScreenWidth } from '../common/util'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, onUnmounted, reactive, ref, watch } from 'vue'
+import { messageBoxProps, MESSAGE_BUILTIN_ICON_MAP, type MessageBuiltinIconType, type MessageOptionsWithCallBack, type MessageResult } from './types'
+import { initMessageOptions, removeMessageOptions, resolveMessageScopeId } from '.'
+import { deepAssign, isDef, isFunction, isPromise, isString, isUndefined, omitBy, resolveSizeWithScreenWidth } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { ButtonProps } from '../oxy-button/types'
 
@@ -71,20 +105,41 @@ const props = defineProps(messageBoxProps)
 
 const { translate } = useTranslate('message-box')
 
+const iconType = ref<string>('')
+
+const iconTypeClass = computed(() => {
+  return iconType.value ? `is-${iconType.value}` : ''
+})
+
 const rootClass = computed(() => {
   return `oxy-message-box__container ${props.customClass}`
 })
 
 const bodyClass = computed(() => {
-  return `oxy-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
+  return `oxy-message-box__body ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
 })
 
 const popupWidth = computed(() => {
   return resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
 })
 
-const messageOptionKey = getMessageDefaultOptionKey(props.selector)
-const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项
+const showCancelButton = computed(() => {
+  return !!messageState.showCancelButton && messageState.cancelButtonProps !== null
+})
+
+const showConfirmButton = computed(() => {
+  return messageState.confirmButtonProps !== null
+})
+
+const actionsClass = computed(() => {
+  const verticalClass = messageState.actionLayout === 'vertical' ? 'oxy-message-box__actions--vertical' : ''
+  const layoutClass = messageState.actionLayout === 'vertical' || showCancelButton.value ? 'oxy-message-box__flex' : 'oxy-message-box__block'
+  const themeClass = messageState.theme === 'text' ? 'is-text' : ''
+  return `oxy-message-box__actions ${verticalClass} ${layoutClass} ${themeClass}`
+})
+
+const scopeId = resolveMessageScopeId()
+const messageOption = initMessageOptions(props.selector, scopeId)
 
 const messageState = reactive<MessageOptionsWithCallBack>({
   msg: '', // 消息内容
@@ -95,6 +150,11 @@ const messageState = reactive<MessageOptionsWithCallBack>({
   confirmButtonText: '', // 确定按钮文案
   cancelButtonText: '', // 取消按钮文案
   type: 'alert', // 弹框类型
+  theme: 'button', // 按钮风格
+  actionLayout: 'horizontal', // 按钮布局
+  headerImage: '', // 头图
+  icon: '', // 快捷图标名
+  showClose: false, // 关闭按钮
   inputType: 'text', // 输入框类型
   inputValue: '', // 输入框初始值
   inputPlaceholder: '', // 输入框placeholder
@@ -113,9 +173,18 @@ const customConfirmProps = computed(() => {
     {
       block: true
     },
-    isDef(messageState.confirmButtonProps) ? omitBy(messageState.confirmButtonProps, isUndefined) : {}
+    isDef(messageState.confirmButtonProps) && messageState.confirmButtonProps !== null && typeof messageState.confirmButtonProps === 'object'
+      ? omitBy(messageState.confirmButtonProps, isUndefined)
+      : {}
   )
-  buttonProps.customClass = `${buttonProps.customClass || ''} oxy-message-box__actions-btn`
+
+  if (messageState.theme === 'text') {
+    buttonProps.type = 'text'
+    // oxy-button 在 text 且 round=true 时会清除默认 min-width，保证操作栏可等分布局
+    buttonProps.round = true
+  }
+
+  buttonProps.customClass = `${buttonProps.customClass || ''} oxy-message-box__actions-btn oxy-message-box__actions-btn--confirm`
   return buttonProps
 })
 
@@ -128,8 +197,17 @@ const customCancelProps = computed(() => {
       block: true,
       type: 'info'
     },
-    isDef(messageState.cancelButtonProps) ? omitBy(messageState.cancelButtonProps, isUndefined) : {}
+    isDef(messageState.cancelButtonProps) && messageState.cancelButtonProps !== null && typeof messageState.cancelButtonProps === 'object'
+      ? omitBy(messageState.cancelButtonProps, isUndefined)
+      : {}
   )
+
+  if (messageState.theme === 'text') {
+    buttonProps.type = 'text'
+    // oxy-button 在 text 且 round=true 时会清除默认 min-width，保证操作栏可等分布局
+    buttonProps.round = true
+  }
+
   buttonProps.customClass = `${buttonProps.customClass || ''} oxy-message-box__actions-btn`
   return buttonProps
 })
@@ -157,45 +235,75 @@ watch(
   }
 )
 
+onUnmounted(() => {
+  removeMessageOptions(props.selector, scopeId)
+})
+
 /**
  * 点击操作
  * @param action
  */
-function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
+function toggleModal(action: 'confirm' | 'cancel' | 'modal' | 'close') {
   if (action === 'modal' && !messageState.closeOnClickModal) {
     return
   }
   if (messageState.type === 'prompt' && action === 'confirm' && !validate()) {
     return
   }
+
   switch (action) {
     case 'confirm':
       if (messageState.beforeConfirm) {
-        messageState.beforeConfirm({
-          resolve: (isPass) => {
-            if (isPass) {
-              handleConfirm({
-                action: action,
-                value: messageState.inputValue
-              })
-            }
+        const inputValue = messageState.inputValue || ''
+        let handled = false
+
+        const finishConfirm = (isPass: boolean) => {
+          if (handled) return
+          handled = true
+          if (isPass) {
+            handleConfirm({
+              action: 'confirm',
+              value: inputValue
+            })
           }
+        }
+
+        const result = messageState.beforeConfirm({
+          value: inputValue,
+          resolve: finishConfirm
         })
-      } else {
-        handleConfirm({
-          action: action,
-          value: messageState.inputValue
-        })
+
+        if (isPromise(result)) {
+          result
+            .then((isPass) => {
+              finishConfirm(!!isPass)
+            })
+            .catch(() => {})
+          return
+        }
+
+        if (typeof result === 'boolean') {
+          finishConfirm(result)
+          return
+        }
+
+        return
       }
+
+      handleConfirm({
+        action: 'confirm',
+        value: messageState.inputValue
+      })
       break
     case 'cancel':
       handleCancel({
-        action: action
+        action: 'cancel'
       })
       break
-    default:
+    case 'modal':
+    case 'close':
       handleCancel({
-        action: 'modal'
+        action: action
       })
       break
   }
@@ -224,7 +332,7 @@ function handleCancel(result: MessageResult) {
 }
 
 /**
- * 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
+ * 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接通过。
  */
 function validate() {
   if (messageState.inputPattern && !messageState.inputPattern.test(String(messageState.inputValue))) {
@@ -251,9 +359,11 @@ function resetErr(val: boolean) {
     messageState.showErr = false
   }
 }
+
 function inputValChange({ value }: { value: string | number }) {
   if (value === '') {
     messageState.showErr = false
+    messageState.inputValue = value
     return
   }
   messageState.inputValue = value
@@ -267,15 +377,19 @@ function reset(option: MessageOptionsWithCallBack) {
   if (option) {
     messageState.title = isDef(option.title) ? option.title : ''
     messageState.showCancelButton = isDef(option.showCancelButton) ? option.showCancelButton : false
-    messageState.show = option.show
-    messageState.closeOnClickModal = option.closeOnClickModal
+    messageState.show = !!option.show
+    messageState.closeOnClickModal = isDef(option.closeOnClickModal) ? option.closeOnClickModal : true
     messageState.confirmButtonText = option.confirmButtonText
     messageState.cancelButtonText = option.cancelButtonText
     messageState.msg = option.msg
     messageState.type = option.type
+    messageState.theme = isDef(option.theme) ? option.theme : 'button'
+    messageState.actionLayout = isDef(option.actionLayout) ? option.actionLayout : 'horizontal'
+    messageState.headerImage = isDef(option.headerImage) ? option.headerImage : ''
+    messageState.icon = isDef(option.icon) ? option.icon : ''
     messageState.inputType = option.inputType
     messageState.inputSize = option.inputSize
-    messageState.inputValue = option.inputValue
+    messageState.inputValue = isDef(option.inputValue) ? option.inputValue : ''
     messageState.inputPlaceholder = option.inputPlaceholder
     messageState.inputPattern = option.inputPattern!
     messageState.inputValidate = option.inputValidate
@@ -287,8 +401,19 @@ function reset(option: MessageOptionsWithCallBack) {
     messageState.zIndex = option.zIndex
     messageState.lazyRender = option.lazyRender
     messageState.width = isDef(option.width) ? option.width : props.width
+    messageState.showClose = isDef(option.showClose) ? option.showClose : false
     messageState.confirmButtonProps = option.confirmButtonProps
     messageState.cancelButtonProps = option.cancelButtonProps
+
+    const iconName = option.iconProps?.name || option.icon
+    if (isString(iconName) && iconName in MESSAGE_BUILTIN_ICON_MAP) {
+      const builtinIcon = MESSAGE_BUILTIN_ICON_MAP[iconName as MessageBuiltinIconType]
+      messageState.iconProps = { ...option.iconProps, name: builtinIcon }
+      iconType.value = iconName
+    } else {
+      messageState.iconProps = option.iconProps
+      iconType.value = ''
+    }
   }
 }
 </script>

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

@@ -1,13 +1,36 @@
 import { baseProps, makeStringProp, makeBooleanProp } from '../common/props'
 import type { ButtonProps } from '../oxy-button/types'
+import type { IconProps } from '../oxy-icon/types'
 import { type InputSize, type InputType } from '../oxy-input/types'
 
 export type MessageType = 'alert' | 'confirm' | 'prompt'
+export type MessageTheme = 'button' | 'text'
+export type MessageActionLayout = 'horizontal' | 'vertical'
+export type MessageBuiltinIconType = 'success' | 'info' | 'warning' | 'danger'
+
+/**
+ * 内置图标类型和 oxy-icon 图标名映射
+ */
+export const MESSAGE_BUILTIN_ICON_MAP: Record<MessageBuiltinIconType, string> = {
+  success: 'check-circle-filled',
+  info: 'info-circle-filled',
+  warning: 'warning',
+  danger: 'error-circle-filled'
+}
 
 export type MessageBeforeConfirmOption = {
+  /**
+   * 弹框当前输入值（仅 prompt 时有意义）
+   */
+  value: string | number
+  /**
+   * 兼容旧版 beforeConfirm 回调方式，调用后决定是否继续确认
+   */
   resolve: (isPass: boolean) => void
 }
 
+export type MessageBeforeConfirm = (options: MessageBeforeConfirmOption) => void | boolean | Promise<boolean>
+
 export type MessageOptions = {
   /**
    * 标题
@@ -37,6 +60,41 @@ export type MessageOptions = {
    * 弹框类型
    */
   type?: MessageType
+  /**
+   * 弹框操作按钮风格
+   * @default 'button'
+   */
+  theme?: MessageTheme
+  /**
+   * 操作按钮布局方式
+   * @default 'horizontal'
+   */
+  actionLayout?: MessageActionLayout
+  /**
+   * 顶部头图地址
+   * @default ''
+   */
+  headerImage?: string
+  /**
+   * 图标名称，支持内置类型（success / info / warning / danger）或 oxy-icon 图标名
+   * @default ''
+   */
+  icon?: MessageBuiltinIconType | string
+  /**
+   * 图标颜色（优先级高于内置类型颜色）
+   * @default ''
+   */
+  iconColor?: string
+  /**
+   * 图标组件透传属性
+   * @default undefined
+   */
+  iconProps?: Partial<IconProps>
+  /**
+   * 是否显示右上角关闭按钮
+   * @default false
+   */
+  showClose?: boolean
   /**
    * 当type为prompt时，输入框类型
    */
@@ -84,7 +142,7 @@ export type MessageOptions = {
   /**
    * 确认前钩子
    */
-  beforeConfirm?: (options: MessageBeforeConfirmOption) => void
+  beforeConfirm?: MessageBeforeConfirm
   /**
    * 取消按钮Props
    */
@@ -101,7 +159,7 @@ export type MessageOptionsWithCallBack = MessageOptions & {
   fail?: (res: MessageResult) => void
 }
 
-export type ActionType = 'confirm' | 'cancel' | 'modal'
+export type ActionType = 'confirm' | 'cancel' | 'modal' | 'close'
 
 export type InputValidate = (inputValue: string | number) => boolean
 

package/components/oxy-navbar/index.scss

@@ -58,7 +58,7 @@
     font-size: $-navbar-desc-font-size;
     display: flex;
     align-items: center;
-    padding: 0 24rpx;
+    padding: 0 $-spacing-24;
 
     @include when(disabled) {
       opacity: $-navbar-disabled-opacity;

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

@@ -1,10 +1,7 @@
 <template>
   <view :style="placeholderStyle">
     <view :class="`oxy-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
-      <view
-        class="oxy-navbar__content"
-        :style="{ width: fixed && avoidMenuButtonMode === 'full' ? unitConvert(navWidth, 0, { output: 'px' }) : '100%' }"
-      >
+      <view class="oxy-navbar__content" :style="{ width: avoidMenuButtonMode === 'full' ? unitConvert(navWidth, 0, { output: 'px' }) : '100%' }">
         <view class="oxy-navbar__capsule" v-if="$slots.capsule">
           <slot name="capsule" />
         </view>
@@ -42,7 +39,9 @@
 export default {
   name: 'oxy-navbar',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -93,7 +92,7 @@ const rootStyle = computed(() => {
 
 const rightStyle = computed(() => {
   const style: CSSProperties = {}
-  if (props.fixed && props.avoidMenuButtonMode === 'right' && navWidth.value !== 'auto') {
+  if (props.avoidMenuButtonMode === 'right' && navWidth.value !== 'auto') {
     style['right'] = `calc(100% - ${unitConvert(navWidth.value, 0, { output: 'px' })})`
   }
   return style
@@ -104,7 +103,7 @@ onMounted(() => {
     setPlaceholderHeight()
   }
   // #ifdef MP-WEIXIN
-  if (props.fixed && props.avoidMenuButtonMode) {
+  if (props.avoidMenuButtonMode) {
     const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
     navWidth.value = menuBtnInfo.left
   }
@@ -125,6 +124,10 @@ function handleClickRight() {
 
 const { proxy } = getCurrentInstance() as any
 
+/**
+ * 计算占位高度。fixed 模式下，查询 navbar 的 rect 得到实际占用高度，
+ * 转换为 rpx 用于占位，避免内容被 fixed 导航栏遮挡。
+ */
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
     placeholderHeight.value = ''

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

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

package/components/oxy-notice-bar/index.scss

@@ -22,7 +22,7 @@
     color: $-notice-bar-danger-color;
   }
   @include edeep(prefix) {
-    padding-right: 8rpx;
+    padding-right: $-spacing-8;
     font-size: $-notice-bar-prefix-size;
   }
 

package/components/oxy-notice-bar/oxy-notice-bar.vue

@@ -19,7 +19,9 @@
 export default {
   name: 'oxy-notice-bar',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -130,10 +132,17 @@ function reset() {
   startTransition()
 }
 
+/**
+ * 启动滚动动画（横向走马灯或纵向轮播）
+ * 在 nextTick 后调用 scroll() 计算并设置 CSS transition
+ */
 function startTransition() {
   nextTick(() => scroll())
 }
 
+/**
+ * 停止动画：清除所有 transition 属性并重置状态
+ */
 function stopTransition() {
   transitionState.transitionProperty = 'unset'
   transitionState.transitionDelay = 'unset'
@@ -149,6 +158,12 @@ function handleClose() {
   emit('close')
 }
 
+/**
+ * 设置 CSS transition 属性（横向 translateX 或纵向 translateY）
+ * @param duration - 动画时长（秒）
+ * @param delay - 延迟时间（秒）
+ * @param translate - 位移距离（像素）
+ */
 function setTransition({ duration, delay, translate }: { duration: number; delay: number; translate: number }) {
   transitionState.transitionProperty = 'all'
   transitionState.transitionDelay = `${delay}s`
@@ -161,6 +176,10 @@ function queryRect() {
   return Promise.all([getRect($wrap, false, proxy), getRect($content, false, proxy)])
 }
 
+/**
+ * 纵向滚动动画：根据当前索引计算 translateY，实现轮播滚动
+ * @param height - 内容区域总高度
+ */
 async function verticalAnimate(height: number) {
   const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
   setTransition({
@@ -170,6 +189,11 @@ async function verticalAnimate(height: number) {
   })
 }
 
+/**
+ * 核心滚动逻辑：查询容器/内容尺寸后计算动画参数
+ * 横向模式：设置 translateX 动画使内容从右到左滚动
+ * 纵向模式（多条文本）：调用 verticalAnimate 逐条轮播
+ */
 async function scroll() {
   const [wRect, cRect] = await queryRect()
   if (!wRect.width || !cRect.width || !cRect.height) return
@@ -201,6 +225,11 @@ function next() {
   emit('next', currentIndex.value)
 }
 
+/**
+ * 动画结束回调：无缝循环
+ * 横向模式：瞬间重置到右侧，查询新宽度后继续滚动
+ * 纵向模式：轮播下一条文本
+ */
 function animationEnd() {
   if (isHorizontal.value) {
     setTransition({

package/components/oxy-notify/index.ts

@@ -1,26 +1,31 @@
-import { inject, provide, reactive, ref } from 'vue'
 import type { NotifyProps } from './types'
 import { deepMerge, isString } from '../common/util'
+import { createSharedState } from '../composables/useSharedState'
 
 let timer: ReturnType<typeof setTimeout>
 let currentOptions = getDefaultOptions()
 const notifyDefaultOptionKey = '__NOTIFY_OPTION__'
-const None = Symbol('None')
+
 export const setNotifyDefaultOptions = (options: NotifyProps) => {
   currentOptions = deepMerge(currentOptions, options) as NotifyProps
 }
 export const resetNotifyDefaultOptions = () => {
   currentOptions = getDefaultOptions()
 }
-export const useNotify = (selector: string = '') => {
-  const notifyOptionKey = getNotifyOptionKey(selector)
 
-  const notifyOption = inject(notifyOptionKey, ref<NotifyProps | typeof None>(None))
-  if (notifyOption.value === None) {
-    notifyOption.value = currentOptions
-    provide(notifyOptionKey, notifyOption)
-  }
+const {
+  getState: getNotifyOptions,
+  initState: initNotifyOptions,
+  removeState: removeNotifyOptions,
+  resolveScopeId: resolveNotifyScopeId
+} = createSharedState<NotifyProps>(() => currentOptions, { namespace: 'notify' })
+
+export { getNotifyOptions, initNotifyOptions, removeNotifyOptions, resolveNotifyScopeId }
+
+export const useNotify = (selector: string = '') => {
+  const scopeId = resolveNotifyScopeId()
   const showNotify = (option: NotifyProps | string) => {
+    const notifyOption = initNotifyOptions(selector, scopeId)
     const options = deepMerge(currentOptions, isString(option) ? { message: option } : option) as NotifyProps
     notifyOption.value = deepMerge(options, { visible: true })
     if (notifyOption.value.duration && notifyOption.value.duration > 0) {
@@ -29,10 +34,9 @@ export const useNotify = (selector: string = '') => {
     }
   }
   const closeNotify = () => {
+    const notifyOption = initNotifyOptions(selector, scopeId)
     timer && clearTimeout(timer)
-    if (notifyOption.value !== None) {
-      notifyOption.value.visible = false
-    }
+    notifyOption.value.visible = false
   }
 
   return {