初始化模版工程

components/nova-sdk/store/useEventStore.ts

@@ -0,0 +1,48 @@
+import { create } from 'zustand'
+import type { ApiEvent } from '../hooks/useNovaEvents'
+import type { ExtendedEvent, TaskArtifact } from '../types'
+
+export interface EventStoreState {
+  /** 所有事件 */
+  events: ApiEvent[]
+  /** processEvents */
+  processEvents: ExtendedEvent[]
+  /** 所有 artifacts（文件和工具调用） */
+  artifacts: TaskArtifact[]
+  /** 选中的事件（用于预览） */
+  selectedEvent: ApiEvent | null
+
+  /** 设置事件列表 */
+  setEvents: (events: ApiEvent[]) => void
+  /** 设置 artifacts 列表 */
+  setArtifacts: (artifacts: TaskArtifact[]) => void
+  /** 选中一个事件 */
+  selectEvent: (event: ApiEvent | null) => void
+  /** 清空所有数据 */
+  reset: () => void
+  /**  */
+  setProcessEvents: (processEvents: ExtendedEvent[]) => void
+}
+
+/**
+ * 事件状态管理 Store
+ * 用于在组件之间传递和共享事件数据和 artifacts
+ */
+export const useEventStore = create<EventStoreState>((set) => ({
+  events: [],
+  processEvents: [],
+  artifacts: [],
+  selectedEvent: null,
+
+  setEvents: (events) => set({ events }),
+
+  setArtifacts: (artifacts) => set({ artifacts }),
+
+  selectEvent: (event) => set({ selectedEvent: event }),
+
+  reset: () => set({ events: [], artifacts: [], selectedEvent: null }),
+
+  setProcessEvents: (processEvents) => set({ processEvents }),
+}))
+
+export default useEventStore

components/nova-sdk/store/useImages.ts

@@ -0,0 +1,32 @@
+import useEventStore from '@/components/nova-sdk/store/useEventStore';
+import { TaskArtifact } from '../types';
+import { RefObject, useEffect } from 'react';
+import { ImageEditorHandle } from '@/components/image-editor';
+
+export const useImages = (imageEditorRef: RefObject<ImageEditorHandle | null>) => {
+  const processEvents = useEventStore((store) => store.processEvents);
+  // 提取事件流中的图片产物资源
+  const images = processEvents.reduce((pre, cur) => {
+    const renderProps = cur.renderProps || {};
+    const imageAttachment = renderProps.imageAttachment;
+    if (imageAttachment) {
+      const taskArtifacts = imageAttachment.map((item: any) => {
+        return {
+          path: item.path,
+          file_name: item.file_name,
+          file_type:
+            item.file_type || (item.file_name || '').split('.').pop() || '',
+        };
+      });
+      pre.push(...taskArtifacts);
+    }
+    return pre;
+  }, [] as TaskArtifact[]);
+
+  // 响应式监听图片资源变化，并批量同步至编辑器
+  useEffect(() => {
+    if (images.length > 0) {
+      imageEditorRef.current?.addArtifacts(images);
+    }
+  }, [images, imageEditorRef]);
+}