feat: use react-router-dom's Link

gui/src/App.tsx

@@ -5,6 +5,7 @@ import { Routes, Route } from "react-router-dom";
 import { Layout } from "components/Layout";
 import { Home } from "pages/Home";
 import { Settings } from "pages/Settings";
+import { Guide } from 'pages/Guide';
 
 function App() {
   useEffect(() => {
@@ -19,6 +20,7 @@ function App() {
       <Route path='/' element={<Layout />}>
         <Route index element={<Home />} />
         <Route path='/settings' element={<Settings />} />
+        <Route path='/guide' element={<Guide />} />
       </Route>
     </Routes>
   );

gui/src/components/Loading.tsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { AiOutlineLoading3Quarters } from 'react-icons/ai';
 
 type LoadingProps = {
+  className?: string
 }
 
-export const Loading: React.FC<LoadingProps> = () => {
+export const Loading: React.FC<LoadingProps> = ({ className }) => {
-  return <AiOutlineLoading3Quarters className='animate-spin my-2 mx-auto' />
+  return <AiOutlineLoading3Quarters className={`animate-spin my-2 mx-auto ${className}`} />
 }

gui/src/pages/Guide.tsx

@@ -0,0 +1,3 @@
+export const Guide: React.FC = () => {
+  return <></>
+}

gui/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next';
+import { Link } from "react-router-dom";
 
 export const Home: React.FC = () => {
   const { t } = useTranslation();
@@ -7,7 +8,7 @@ export const Home: React.FC = () => {
   return <>
     <div className='card m-2 h-full'>
       {t('欢迎!')}
-      <a href='/settings' className='btn btn-primary'>{t('配置')}</a>
+      <Link to='/settings' className='btn btn-primary'>{t('配置')}</Link>
     </div>
   </>
 }

gui/src/pages/Settings.tsx

@@ -1,3 +1,4 @@
+import { Loading } from 'components/Loading';
 import { usePromise } from 'hooks/usePromise';
 import React from 'react'
 import { useTranslation } from 'react-i18next';
@@ -13,7 +14,7 @@ export const Settings: React.FC = () => {
   }
 
   if (loading) {
-    return <div className='card m-2 h-full'>{t('加载中...')}</div>
+    return <div className='h-full flex items-center justify-center'><Loading /></div>
   }
 
   return <>