/* * @Author: RenXiaoDong * @Date: 2025-08-20 23:17:49 * @Description: 气泡上下文管理 * 提供气泡组件间的通信机制,支持全局状态管理和组件间数据传递 */ import { computed, defineComponent, inject, provide, shallowRef, triggerRef, unref, watch } from "vue"; import type { ComputedRef, InjectionKey } from "vue"; import { objectType } from "@/utils/type"; import type { BubbleContextProps } from "./types"; /** * 气泡上下文注入键 * 用于Vue的依赖注入系统,确保上下文的唯一性 */ const BubbleContextKey: InjectionKey> = Symbol('BubbleContext'); /** * 全局气泡上下文API * 提供全局访问气泡上下文的能力,用于跨组件通信 */ export const globalBubbleContextApi = shallowRef(); /** * 气泡上下文提供者Hook * 向子组件提供气泡上下文,并同步更新全局API * * @param value - 要提供的上下文值(计算属性) */ export const useBubbleContextProvider = (value: ComputedRef) => { // 向子组件提供上下文 provide(BubbleContextKey, value); // 监听上下文变化,同步更新全局API watch( value, () => { globalBubbleContextApi.value = unref(value); // 触发响应式更新 triggerRef(globalBubbleContextApi); }, { immediate: true, deep: true }, // 立即执行,深度监听 ); }; /** * 气泡上下文注入Hook * 从父组件或全局API获取气泡上下文 * * @returns 气泡上下文(计算属性) */ export const useBubbleContextInject = () => { return inject( BubbleContextKey, // 如果没有找到注入的上下文,使用全局API作为后备 computed(() => globalBubbleContextApi.value || {}), ); }; /** * 气泡上下文提供者组件 * 用于在模板中提供气泡上下文,简化使用方式 */ export const BubbleContextProvider = defineComponent({ props: { // 上下文值,支持对象类型验证 value: objectType(), }, setup(props, { slots }) { // 使用计算属性包装props.value,确保响应式 useBubbleContextProvider(computed(() => props.value)); // 渲染默认插槽内容 return () => { return slots.default?.(); }; }, }); export default BubbleContextProvider;