fix: zustand

labring · Jan 16, 2024 · 63717b6 · 63717b6
1 parent b52ca84
commit 63717b6
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 38 deletions.
diff --git a/frontend/plugins/kubepanel/src/hooks/useLoading.tsx b/frontend/plugins/kubepanel/src/hooks/useLoading.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
-import { Spinner, Flex } from '@chakra-ui/react';
-
+import { Flex } from '@chakra-ui/react';
+import { Spin } from 'antd';
 export const useLoading = (props?: { defaultLoading: boolean }) => {
   const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
 
@@ -19,7 +19,7 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
           justifyContent={'center'}
           visibility={isLoading || loading ? 'visible' : 'hidden'}
         >
-          <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+          <Spin size="large" spinning={loading} />
         </Flex>
       );
     },

diff --git a/frontend/plugins/kubepanel/src/pages/_app.tsx b/frontend/plugins/kubepanel/src/pages/_app.tsx
@@ -2,8 +2,7 @@ import type { AppProps } from 'next/app';
 import { Router, useRouter } from 'next/router';
 import NProgress from 'nprogress';
 import { useGlobalStore } from '@/store/global';
-import { useLoading } from '@/hooks/useLoading';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { useConfirm } from '@/hooks/useConfirm';
 import { throttle } from 'lodash';
 import { sealosApp, createSealosApp } from 'sealos-desktop-sdk/app';
@@ -15,15 +14,15 @@ import { monacoTheme } from '@/constants/theme';
 import 'nprogress/nprogress.css';
 import '@/styles/globals.css';
 
-//Binding events.
+//Binding router events.
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
 Router.events.on('routeChangeError', () => NProgress.done());
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  const { setScreenWidth, loading, setLastRoute } = useGlobalStore();
-  const { Loading } = useLoading();
+  const { setScreenWidth, setLastRoute } = useGlobalStore();
+  // const { Loading } = useLoading();
   const { openConfirm, ConfirmChild } = useConfirm({
     title: '跳转提示',
     content: '该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。'
@@ -37,8 +36,10 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }, [monaco]);
 
+  // app init
   useEffect(() => {
     NProgress.start();
+
     const response = createSealosApp();
 
     (async () => {
@@ -87,7 +88,6 @@ export default function App({ Component, pageProps }: AppProps) {
       setLastRoute(router.asPath);
     };
   }, [router.asPath, router.pathname, setLastRoute]);
-
   return (
     <>
       <Head>
@@ -98,7 +98,6 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Component {...pageProps} />
       <ConfirmChild />
-      <Loading loading={loading} />
     </>
   );
 }
diff --git a/frontend/plugins/kubepanel/src/services/request.ts b/frontend/plugins/kubepanel/src/services/request.ts
@@ -53,13 +53,15 @@ export function GET<T = any>(
     ...config
   });
 }
+
 export function POST<T = any>(
   url: string,
   data?: { [key: string]: any },
   config?: AxiosRequestConfig
 ): Promise<T> {
   return request.post(url, data, config);
 }
+
 export function DELETE<T = any>(
   url: string,
   data?: { [key: string]: any },
@@ -70,6 +72,7 @@ export function DELETE<T = any>(
     ...config
   });
 }
+
 export function PUT<T = any>(
   url: string,
   data?: { [key: string]: any },

diff --git a/frontend/plugins/kubepanel/src/store/global.ts b/frontend/plugins/kubepanel/src/store/global.ts
@@ -1,37 +1,15 @@
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 
 type State = {
   screenWidth: number;
   setScreenWidth: (e: number) => void;
-  loading: boolean;
-  setLoading: (val: boolean) => void;
   lastRoute: string;
   setLastRoute: (val: string) => void;
 };
 
-export const useGlobalStore = create<State>()(
-  devtools(
-    immer((set, get) => ({
-      screenWidth: 1440,
-      setScreenWidth(e: number) {
-        set((state) => {
-          state.screenWidth = e;
-        });
-      },
-      loading: false,
-      setLoading(val: boolean) {
-        set((state) => {
-          state.loading = val;
-        });
-      },
-      lastRoute: '/',
-      setLastRoute(val) {
-        set((state) => {
-          state.lastRoute = val;
-        });
-      }
-    }))
-  )
-);
+export const useGlobalStore = create<State>()((set) => ({
+  screenWidth: 1440,
+  setScreenWidth: (e) => set({ screenWidth: e }),
+  lastRoute: '/',
+  setLastRoute: (val) => set({ lastRoute: val })
+}));
diff --git a/frontend/plugins/kubepanel/src/styles/globals.css b/frontend/plugins/kubepanel/src/styles/globals.css
@@ -71,6 +71,9 @@
   top: 0;
   padding-bottom: 0;
 }
+.ant-modal-content {
+  border-radius: 0% !important;
+}
 .ant-modal-body {
   height: calc(100vh - 85px);
   overflow-y: auto;