feat: bubble组件封装

src/components/xt-chat/xt-bubble/context.ts

@@ -0,0 +1,81 @@
+/*
+ * @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;