feat: new ui

src/store/chat.ts

@@ -0,0 +1,91 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { OpenAiChatEnum } from '@/constants/model';
+
+import { HistoryItemType, ChatType } from '@/types/chat';
+import { getChatHistory } from '@/api/chat';
+
+type State = {
+  history: HistoryItemType[];
+  loadHistory: (data: { pageNum: number; init?: boolean }) => Promise<null>;
+  forbidLoadChatData: boolean;
+  setForbidLoadChatData: (val: boolean) => void;
+  chatData: ChatType;
+  setChatData: (e?: ChatType | ((e: ChatType) => ChatType)) => void;
+  lastChatModelId: string;
+  setLastChatModelId: (id: string) => void;
+  lastChatId: string;
+  setLastChatId: (id: string) => void;
+};
+
+const defaultChatData = {
+  chatId: 'chatId',
+  modelId: 'modelId',
+  model: {
+    name: '',
+    avatar: '/icon/logo.png',
+    intro: '',
+    canUse: false
+  },
+  chatModel: OpenAiChatEnum.GPT35,
+  history: []
+};
+
+export const useChatStore = create<State>()(
+  devtools(
+    persist(
+      immer((set, get) => ({
+        lastChatModelId: '',
+        setLastChatModelId(id: string) {
+          set((state) => {
+            state.lastChatModelId = id;
+          });
+        },
+        lastChatId: '',
+        setLastChatId(id: string) {
+          set((state) => {
+            state.lastChatId = id;
+          });
+        },
+        history: [],
+        async loadHistory({ pageNum, init = false }: { pageNum: number; init?: boolean }) {
+          if (get().history.length > 0 && !init) return null;
+          const data = await getChatHistory({
+            pageNum,
+            pageSize: 20
+          });
+          set((state) => {
+            state.history = data;
+          });
+          return null;
+        },
+        forbidLoadChatData: false,
+        setForbidLoadChatData(val: boolean) {
+          set((state) => {
+            state.forbidLoadChatData = val;
+          });
+        },
+        chatData: defaultChatData,
+        setChatData(e: ChatType | ((e: ChatType) => ChatType) = defaultChatData) {
+          if (typeof e === 'function') {
+            set((state) => {
+              state.chatData = e(state.chatData);
+            });
+          } else {
+            set((state) => {
+              state.chatData = e;
+            });
+          }
+        }
+      })),
+      {
+        name: 'globalStore',
+        partialize: (state) => ({
+          lastChatModelId: state.lastChatModelId,
+          lastChatId: state.lastChatId
+        })
+      }
+    )
+  )
+);

src/store/user.ts

@@ -1,66 +1,116 @@
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
+import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import type { UserType, UserUpdateParams } from '@/types/user';
 import type { ModelSchema } from '@/types/mongoSchema';
-import { setToken } from '@/utils/user';
-import { getMyModels } from '@/api/model';
+import { getMyModels, getModelById } from '@/api/model';
 import { formatPrice } from '@/utils/user';
 import { getTokenLogin } from '@/api/user';
+import { defaultModel } from '@/constants/model';
+import { ModelListItemType } from '@/types/model';
 
 type State = {
   userInfo: UserType | null;
   initUserInfo: () => Promise<null>;
-  setUserInfo: (user: UserType | null, token?: string) => void;
+  setUserInfo: (user: UserType | null) => void;
   updateUserInfo: (user: UserUpdateParams) => void;
-  myModels: ModelSchema[];
-  getMyModels: () => void;
-  setMyModels: (data: ModelSchema[]) => void;
+  lastModelId: string;
+  setLastModelId: (id: string) => void;
+  myModels: ModelListItemType[];
+  myCollectionModels: ModelListItemType[];
+  loadMyModels: (init?: boolean) => Promise<null>;
+  modelDetail: ModelSchema;
+  loadModelDetail: (id: string, init?: boolean) => Promise<ModelSchema>;
+  refreshModel: {
+    freshMyModels(): void;
+    updateModelDetail(model: ModelSchema): void;
+    removeModelDetail(modelId: string): void;
+  };
 };
 
 export const useUserStore = create<State>()(
   devtools(
-    immer((set, get) => ({
-      userInfo: null,
-      async initUserInfo() {
-        const res = await getTokenLogin();
-        get().setUserInfo(res);
-        return null;
-      },
-      setUserInfo(user: UserType | null, token?: string) {
-        set((state) => {
-          state.userInfo = user
-            ? {
-                ...user,
-                balance: formatPrice(user.balance)
-              }
-            : null;
-        });
-        token && setToken(token);
-      },
-      updateUserInfo(user: UserUpdateParams) {
-        set((state) => {
-          if (!state.userInfo) return;
-          state.userInfo = {
-            ...state.userInfo,
-            ...user
-          };
-        });
-      },
-      myModels: [],
-      getMyModels: () =>
-        getMyModels().then((res) => {
+    persist(
+      immer((set, get) => ({
+        userInfo: null,
+        async initUserInfo() {
+          const res = await getTokenLogin();
+          get().setUserInfo(res);
+          return null;
+        },
+        setUserInfo(user: UserType | null) {
           set((state) => {
-            state.myModels = res;
+            state.userInfo = user
+              ? {
+                  ...user,
+                  balance: formatPrice(user.balance)
+                }
+              : null;
+          });
+        },
+        updateUserInfo(user: UserUpdateParams) {
+          set((state) => {
+            if (!state.userInfo) return;
+            state.userInfo = {
+              ...state.userInfo,
+              ...user
+            };
+          });
+        },
+        lastModelId: '',
+        setLastModelId(id: string) {
+          set((state) => {
+            state.lastModelId = id;
+          });
+        },
+        myModels: [],
+        myCollectionModels: [],
+        async loadMyModels(init = false) {
+          if (get().myModels.length > 0 && !init) return null;
+          const res = await getMyModels();
+          set((state) => {
+            state.myModels = res.myModels;
+            state.myCollectionModels = res.myCollectionModels;
+          });
+          return null;
+        },
+        modelDetail: defaultModel,
+        async loadModelDetail(id: string, init = false) {
+          if (id === get().modelDetail._id && !init) return get().modelDetail;
+
+          const res = await getModelById(id);
+          set((state) => {
+            state.modelDetail = res;
           });
           return res;
-        }),
-      setMyModels(data: ModelSchema[]) {
-        set((state) => {
-          state.myModels = data;
-        });
-        return null;
+        },
+        refreshModel: {
+          freshMyModels() {
+            get().loadMyModels(true);
+          },
+          updateModelDetail(model: ModelSchema) {
+            set((state) => {
+              state.modelDetail = model;
+            });
+            get().loadMyModels(true);
+          },
+          removeModelDetail(modelId: string) {
+            if (modelId === get().modelDetail._id) {
+              set((state) => {
+                state.modelDetail = defaultModel;
+                state.lastModelId = '';
+              });
+            }
+            get().loadMyModels(true);
+          }
+        }
+      })),
+      {
+        name: 'userStore',
+        partialize: (state) => ({
+          lastModelId: state.lastModelId
+        })
       }
-    }))
+    )
   )
 );