lingji-work-fe/src/components/xt-chat/xt-bubble/context.ts

/*
 * @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<ComputedRef<BubbleContextProps>> =
  Symbol('BubbleContext');

/**
 * 全局气泡上下文API
 * 提供全局访问气泡上下文的能力，用于跨组件通信
 */
export const globalBubbleContextApi = shallowRef<BubbleContextProps>();

/**
 * 气泡上下文提供者Hook
 * 向子组件提供气泡上下文，并同步更新全局API
 * 
 * @param value - 要提供的上下文值（计算属性）
 */
export const useBubbleContextProvider = (value: ComputedRef<BubbleContextProps>) => {
  // 向子组件提供上下文
  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<BubbleContextProps>(),
  },
  setup(props, { slots }) {
    // 使用计算属性包装props.value，确保响应式
    useBubbleContextProvider(computed(() => props.value));
    
    // 渲染默认插槽内容
    return () => {
      return slots.default?.();
    };
  },
});

export default BubbleContextProvider;