feat: 把 style 转为 Tailwind CSS

src/main.jsx

@@ -41,6 +41,8 @@ import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA, PERM_AIR_TICKET,
 
 import './i18n'
 
+const { createRoot } = ReactDOM
+
 const initRouter = async () => {
   return createBrowserRouter([
     {
@@ -92,7 +94,7 @@ const initAppliction = async () => {
 
   const router = await initRouter()
 
-  ReactDOM.createRoot(document.getElementById('root')).render(
+  createRoot(document.getElementById('root')).render(
     //<React.StrictMode>
     <ThemeContext.Provider value={{ colorPrimary: '#00b96b', borderRadius: 4 }}>
       <RouterProvider

src/views/App.jsx

@@ -101,8 +101,7 @@ function App() {
         >{t('Submit')}</Button></Space>
 
       </Modal>
-				<Layout
-					className='min-h-screen'>
+				<Layout className='min-h-screen'>
 					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='end' align='middle'>
 							<Col span={16}>

src/views/Login.jsx

@@ -38,7 +38,7 @@ function Login() {
   }
 
   return (
-    <Row justify='center' align='middle' style={{ minHeight: 500 }}>
+    <Row justify='center' align='middle' className='min-h-96'>
       <Form
         name='basic'
         form={form}
@@ -49,9 +49,7 @@ function Login() {
         wrapperCol={{
           span: 16,
         }}
-        style={{
-          maxWidth: 600,
-        }}
+        className='max-w-xl'
         initialValues={{
           remember: true,
         }}
@@ -89,7 +87,7 @@ function Login() {
             span: 16,
           }}
         >
-          <Button type='primary' htmlType='submit' style={{width: '100%'}}>
+          <Button type='primary' htmlType='submit' className='w-full'>
             {t('Login')}
           </Button>
         </Form.Item>

src/views/Standlone.jsx

@@ -25,28 +25,19 @@ function Standlone() {
 				algorithm: theme.defaultAlgorithm,
 			}}>
 			<AntApp>
-				<Layout
-					style={{
-						minHeight: '100vh',
-					}}>
+				<Layout className='min-h-screen'>
 					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='center'>
 							<Col span={4}>
               <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={18}><h1 className='text-white'>Global Highlights Hub</h1></Col>
 							<Col span={2}>
                 <Language />
 							</Col>
 						</Row>
 					</Header>
-					<Content
-						style={{
-							padding: 24,
-							margin: 0,
-							minHeight: 280,
-							background: colorBgContainer,
-						}}>
+					<Content className='p-6 m-0 min-h-72 bg-white'>
 						<Outlet />
 					</Content>
 					<Footer></Footer>

src/views/account/ChangePassword.jsx

@@ -41,15 +41,13 @@ function ChangePassword() {
 
   return (
     <>
-    <Row justify="center" align="middle" style={{ minHeight: 500 }}>
+    <Row justify="center" align="middle" className='min-h-96'>
       <Form
         name="basic"
         form={form}
         layout="vertical"
         size="large"
-        style={{
-          maxWidth: 600,
-        }}
+        className='max-w-xl'
         onFinish={onFinish}
         onFinishFailed={onFinishFailed}
         autoComplete="off"

src/views/account/RoleList.jsx

@@ -169,9 +169,7 @@ function RoleList() {
             form={roleForm}
             layout='vertical'
             size='large'
-            style={{
-              maxWidth: 600,
-            }}
+            className='max-w-xl'
             onFinish={onRoleFinish}
             onFinishFailed={onRoleFailed}
             autoComplete='off'
@@ -198,10 +196,7 @@ function RoleList() {
           name='res_array'
         >
           <TreeSelect treeData={permissionTreeData} value={permissionValue}
-            dropdownStyle={{
-              maxHeight: 600,
-              overflow: 'auto',
-            }}
+            popupClassName='max-w-xl overflow-auto'
             placement='bottomLeft'
             showSearch
             allowClear

src/views/reservation/Detail.jsx

@@ -167,12 +167,12 @@ function Detail() {
       <Row gutter={{ md: 24 }}>
         <Col span={12} className='w-full'>
         <iframe id='msdoc-iframe-reservation' title='msdoc-iframe-reservation'
-        src={reservationPreviewUrl} frameBorder='0' style={{height: '600px'}} className='w-full'></iframe>
+        src={reservationPreviewUrl} frameBorder='0' className='w-full h-[600px]'></iframe>
           <Button type='link' target='_blank' href={reservationUrl}>{t('Download')} Itinerary</Button>
         </Col>
         <Col span={12} className='w-full'>
         <iframe id='msdoc-iframe-name-card' title='msdoc-iframe-name-card'
-        src={nameCardPreviewUrl} frameBorder='0' style={{height: '600px'}} className='w-full'></iframe>
+        src={nameCardPreviewUrl} frameBorder='0' className='w-full h-[600px]'></iframe>
           <Button type='link' target='_blank' href={nameCardUrl}>{t('Download')} Name Card</Button>
         </Col>
       </Row>