refactor: extract components

gui/src/components/Header.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { AiOutlineLeft } from 'react-icons/ai';
+import { useNavigate } from 'react-router-dom';
+
+type HeaderProps = {
+  title?: React.ReactNode
+}
+
+export const Header: React.FC<HeaderProps> = ({ title }) => {
+  const navigate = useNavigate();
+  return <>
+    <h2 className="card-title" data-tauri-drag-region><button onClick={() => navigate('/')}><AiOutlineLeft /></button>{title}</h2>
+  </>
+}

gui/src/main.css

@@ -40,3 +40,7 @@ body {
 .flex-auto-all > * {
   @apply flex-auto;
 }
+
+.full-card {
+  @apply card m-2 h-full;
+}

gui/src/pages/Home.tsx

@@ -29,7 +29,7 @@ export const Home: React.FC = () => {
   }
 
   return <>
-    <div className='card m-2 h-full'>
+    <div className='full-card'>
       <h1 className='mb-4'>{t('欢迎!')}</h1>
       <div className='flex flex-col gap-2'>
         <Link to='/settings' className='btn btn-primary'>{t('配置')}</Link>

gui/src/pages/Settings.tsx

@@ -3,19 +3,17 @@ import { Loading } from 'components/Loading';
 import { usePromise, usePromiseLazy } from 'hooks/usePromise';
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next';
-import { AiOutlineLeft } from 'react-icons/ai';
-import { useNavigate } from 'react-router-dom';
 import { Config, getConfig, getProfile, Profile, setConfig, setProfile } from 'services/config';
 import { composeLoadable } from 'utils/composeLoadable';
 import classNames from 'classnames';
 import { useLogin } from 'services/s3si';
 import { STAT_INK } from 'constant';
+import { Header } from 'components/Header';
 
 const Page: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  return <div className='full-card'>
-  return <div className='card m-2 h-full'>
+    <Header title={t('配置')} />
-    <h2 className="card-title" data-tauri-drag-region><button onClick={() => navigate('/')}><AiOutlineLeft /></button>{t('配置')}</h2>
     {children}
   </div>
 }