feat: 迁移类样式到 Tailwind CSS

src/assets/global.css

@@ -1,23 +1,3 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-
-.logo {
-  float: left;
-  height: 36px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.reservation-highlight {
-  color: rgba(255, 255, 255, 1);
-  background-color: rgba(255, 0, 0, 0.6);
-}
-
-#error-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}

src/views/App.jsx

@@ -14,7 +14,7 @@ import ErrorBoundary from '@/components/ErrorBoundary'
 import { BUILD_VERSION,  } from '@/config';
 import useNoticeStore from '@/stores/Notice';
 import useAuthStore from '@/stores/Auth'
-import { fetchUserDetail} from '@/stores/Auth'
+import { useThemeContext } from '@/stores/ThemeContext'
 import { usingStorage } from '@/hooks/usingStorage'
 
 import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA, PERM_AIR_TICKET } from '@/config'
@@ -24,7 +24,9 @@ const { Title } = Typography;
 
 function App() {
 
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslation()
+
+  const { colorPrimary } = useThemeContext()
 
   const [password, setPassword] = useState('')
 
@@ -76,7 +78,7 @@ function App() {
 		<ConfigProvider locale={antdLng}
 			theme={{
 				token: {
-					colorPrimary: '#00b96b',
+					colorPrimary: colorPrimary,
 				},
 				algorithm: theme.defaultAlgorithm,
 			}}>
@@ -105,11 +107,11 @@ function App() {
 					style={{
 						minHeight: '100vh',
 					}}>
-					<Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='end' align='middle'>
 							<Col span={16}>
 								<NavLink to='/'>
-									<img src={AppLogo} className='logo' alt='App logo' />
+                <img src={AppLogo} className='float-left h-9 my-4 mr-6 ml-0 bg-white/30' alt='App logo' />
 								</NavLink>
 								<Menu
 									theme='dark'

src/views/Standlone.jsx

@@ -2,6 +2,7 @@ import { Outlet } from 'react-router-dom'
 import { Layout, ConfigProvider, theme, Typography, Row, Col, App as AntApp } from 'antd'
 import 'antd/dist/reset.css'
 import AppLogo from '@/assets/logo-gh.png'
+import { useThemeContext } from '@/stores/ThemeContext'
 import Language from '../i18n/LanguageSwitcher'
 
 const { Title } = Typography
@@ -9,6 +10,8 @@ const { Header, Content, Footer } = Layout
 
 function Standlone() {
 
+  const { colorPrimary } = useThemeContext()
+
 	const {
 		token: { colorBgContainer },
 	} = theme.useToken()
@@ -17,7 +20,7 @@ function Standlone() {
 		<ConfigProvider
 			theme={{
 				token: {
-					colorPrimary: '#00b96b',
+					colorPrimary: colorPrimary,
 				},
 				algorithm: theme.defaultAlgorithm,
 			}}>
@@ -26,10 +29,10 @@ function Standlone() {
 					style={{
 						minHeight: '100vh',
 					}}>
-					<Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='center'>
 							<Col span={4}>
-								<img src={AppLogo} className='logo' alt='App logo' />
+              <img src={AppLogo} className='float-left h-9 my-4 mr-6 ml-0 bg-white/30' alt='App logo' />
 							</Col>
 							<Col span={18}><Title style={{ color: 'white', marginTop: '3.5px' }}>Global Highlights Hub</Title></Col>
 							<Col span={2}>

src/views/reservation/Newest.jsx

@@ -21,7 +21,7 @@ function Newest() {
         const lastDayjs = dayjs().subtract(1, 'day');
         const arrivalDatejs = dayjs(record.arrivalDate);
         const requiredHighlight = (arrivalDatejs.isAfter(lastDayjs) && arrivalDatejs.isBefore(after3Dayjs, 'day')) && isEmpty(record.guide);
-        const linkClassName = requiredHighlight ? 'reservation-highlight' : '';
+        const linkClassName = requiredHighlight ? 'text-white bg-red-500' : '';
         return (
           <NavLink className={linkClassName} to={`/reservation/${record.reservationId}`}>{text}</NavLink>
         )