perf: 优化以前代码

src/modules/query.ts

@@ -1,14 +1,14 @@
 import { QueryClient } from '@kevisual/query';
-import { create } from 'zustand';
-import { QueryLogin } from '@kevisual/query-login';
+import { QueryLoginBrowser } from '@kevisual/query-login';
 import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin.tsx';
-export const query = new QueryClient();
-
+export const query = new QueryClient({
+  io: true,
+});
 /**
  * 登录查询
  */
-export const queryLogin = new QueryLogin({
-  query,
+export const queryLogin = new QueryLoginBrowser({
+  query: query as any,
 });
 // @ts-ignore
 if (window.context) {
@@ -20,51 +20,28 @@ if (window.context) {
     queryLogin,
   };
 }
-// 在请求之前，如果stop了
-query.beforeRequest = async (config) => {
-  if (config.headers) {
-    const token = localStorage.getItem('token');
-    if (token) {
-      config.headers['Authorization'] = 'Bearer ' + token;
-    }
-  }
-  return config;
-};
 query.afterResponse = async (res, ctx) => {
-  if (res?.code === 401) {
-    if (query?.stop) {
-      return { code: 500, success: false, message: '登录已过期' };
-    }
-    query.stop = true;
-    const queryLoginRes = await queryLogin.afterCheck401ToRefreshToken(res, ctx);
-    query.stop = false;
-    if (queryLoginRes.code === 401) {
+  const newRes = await queryLogin.run401Action(res, ctx, {
+    afterAlso401: () => {
       toastLogin();
-    }
-    return queryLoginRes;
-  }
+    },
+  });
 
-  return res as any;
+  return newRes as any;
 };
 export const request = query.post;
 
-export const ws = query.qws?.ws || new WebSocket(query.qws?.url);
-type Store = {
-  connected: boolean;
-  setConnected: (connected: boolean) => void;
-};
-export const useStore = create<Store>((set) => ({
-  connected: false,
-  setConnected: (connected) => set({ connected }),
-}));
+export const ws = query.qws?.ws;
 
 // 当连接成功时
-ws.onopen = () => {
-  console.log('Connected to WebSocket server');
-  useStore.getState().setConnected(true);
-};
+// query.qws.ws.onopen = () => {
+//   console.log('Connected to WebSocket server');
+// };
 
-// 处理 WebSocket 关闭
-ws.onclose = () => {
-  console.log('Disconnected from WebSocket server');
-};
+// // 处理 WebSocket 关闭
+// query.qws.ws.onclose = () => {
+//   console.log('Disconnected from WebSocket server');
+// };
+query.qws.listenConnect(() => {
+  console.log('Connected to WebSocket server');
+});

src/pages/container/preview/index.tsx

@@ -1,16 +1,17 @@
-import { Container, RenderData, ContainerOne } from '@kevisual/container';
+import { Container } from '@kevisual/container';
 import { useEffect, useRef, useState } from 'react';
-import { replace, useParams } from 'react-router';
-import { query, ws, useStore } from '@/modules';
+import { useParams } from 'react-router';
+import { query } from '@/modules';
 
 import { message } from '@/modules/message';
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
-  const connected = useStore((state) => state.connected);
+  const [connected, setConnected] = useState(false);
   // 监听服务器的消息
   useEffect(() => {
     if (!id) return;
     if (!connected) return;
+    const ws = query.qws.ws;
     ws.send(
       JSON.stringify({
         type: 'subscribe',
@@ -31,6 +32,14 @@ export const useListener = (id?: string, opts?: any) => {
       ws.removeEventListener('message', listener);
     };
   }, [id, connected]);
+  const init = async () => {
+    query.qws.listenConnect(() => {
+      setConnected(true);
+    });
+  };
+  useEffect(() => {
+    init();
+  }, []);
   const listener = (event) => {
     const parseIfJson = (data: string) => {
       try {