增加vue的hooks函数

package.json

@@ -115,7 +115,8 @@
     "stylelint": "^15",
     "ts-json-schema-generator": "^1.4.0",
     "typescript": "^5",
-    "vitest": "^1"
+    "vitest": "^1",
+    "vue": "^3.4.27"
   },
   "peerDependencies": {
     "react": ">=18",

src/client/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useOnStandalonePluginInit';
 export * from './usePluginSettings';
 export * from './usePluginState';
 export * from './useWatchPluginMessage';
+export * as vue from './vue';

src/client/hooks/vue/index.ts

@@ -0,0 +1,4 @@
+export * from './useOnStandalonePluginInit';
+export * from './usePluginSettings';
+export * from './usePluginState';
+export * from './useWatchPluginMessage';

src/client/hooks/vue/useOnStandalonePluginInit.ts

@@ -0,0 +1,15 @@
+import { onMounted } from 'vue';
+
+import { PluginPayload, lobeChat } from '@/client';
+
+export const useOnStandalonePluginInit = <T = any>(
+  callback: (payload: PluginPayload<T>) => void,
+) => {
+  onMounted(() => {
+    lobeChat.getPluginPayload().then((e) => {
+      if (!e) return;
+
+      callback(e);
+    });
+  });
+};

src/client/hooks/vue/usePluginSettings.ts

@@ -0,0 +1,26 @@
+import { UnwrapRef, onMounted, ref, watch } from 'vue';
+
+import { lobeChat } from '@/client';
+
+export const usePluginSettings = <T>(initialValue: T) => {
+  const value = ref(initialValue);
+  onMounted(() => {
+    lobeChat.getPluginSettings().then((e) => {
+      if (!e) return;
+      value.value = e;
+    });
+  });
+
+  const updateValue = (newValue: T) => {
+    value.value = newValue as UnwrapRef<T>;
+  };
+
+  watch(
+    () => value.value,
+    (newValue) => {
+      lobeChat.setPluginSettings(newValue);
+    },
+  );
+
+  return [value.value, updateValue] as const;
+};

src/client/hooks/vue/usePluginState.ts

@@ -0,0 +1,28 @@
+import { UnwrapRef, ref, watch, watchEffect } from 'vue';
+
+import { lobeChat } from '@/client';
+
+export const usePluginState = <T>(key: string, initialValue: T) => {
+  const value = ref(initialValue);
+
+  watchEffect(() => {
+    lobeChat.getPluginState(key).then((e) => {
+      if (!e) return;
+
+      value.value = e;
+    });
+  });
+
+  const updateValue = (newValue: T) => {
+    value.value = newValue as UnwrapRef<T>;
+  };
+
+  watch(
+    () => value.value,
+    (newValue) => {
+      lobeChat.setPluginState(key, newValue);
+    },
+  );
+
+  return [value.value, updateValue] as const;
+};

src/client/hooks/vue/useWatchPluginMessage.ts

@@ -0,0 +1,30 @@
+import { UnwrapRef, onMounted, onUnmounted, ref } from 'vue';
+
+import { PluginChannel } from '../../const';
+import { PluginRenderProps } from '../../type';
+import { onReceiveData } from '../../utils';
+
+export const useWatchPluginMessage = <T = any>() => {
+  const result = ref<{ data: T; loading: boolean }>({
+    data: undefined as T,
+    loading: true,
+  });
+
+  const receiverData = (e: MessageEvent) => {
+    onReceiveData(e, (data: PluginRenderProps<T>) => {
+      result.value = { data: data.content as UnwrapRef<T>, loading: false };
+    });
+  };
+
+  onMounted(() => {
+    window?.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+  });
+
+  onUnmounted(() => {
+    window?.removeEventListener('message', receiverData);
+  });
+
+  return result.value;
+};