状态管理

interface GeneratorState {
  // 状态
  currentImage: Image | null;
  images: Image[];
  activeSelector: SelectorType | null;
  isProcessing: boolean;

  // Actions
  setCurrentImage: (image: Image) => void;
  addImage: (image: Image) => void;
  openSelector: (type: SelectorType) => void;
  closeSelector: () => void;
  setProcessing: (value: boolean) => void;
}

export const useGeneratorStore = create<GeneratorState>((set) => ({
  currentImage: null,
  images: [],
  activeSelector: null,
  isProcessing: false,

  setCurrentImage: (image) => set({ currentImage: image }),
  addImage: (image) => set((state) => ({ images: [...state.images, image] })),
  openSelector: (type) => set({ activeSelector: type }),
  closeSelector: () => set({ activeSelector: null }),
  setProcessing: (value) => set({ isProcessing: value }),
}));

interface UserState {
  user: User | null;
  plan: 'free' | 'pro' | 'max';
  credits: number;

  setUser: (user: User) => void;
  updateCredits: (credits: number) => void;
}

// 组件中使用
function ImagePanel() {
  const { currentImage, setCurrentImage } = useGeneratorStore();

  return <img src={currentImage?.url} />;
}