feat: 重构页面逻辑&更新路由

Sioncovy · Mar 23, 2024 · ada4630 · ada4630
1 parent c0a8c54
commit ada4630
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 102 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
-VITE_REACT_APP_API='http://127.0.0.1:4523/m1/3434069-0-default'
+# VITE_REACT_APP_API='http://127.0.0.1:4523/m1/3434069-0-default'
+VITE_REACT_APP_API='http://127.0.0.1:1122'
diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx
@@ -0,0 +1,72 @@
+import { MessageOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'
+import { ConfigProvider, Layout, Menu } from 'antd'
+import { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useAppStore } from '@/hooks'
+import { AUTH_TOKEN_KEY } from '@/config'
+import Loading from '@/components/Loading'
+
+function BasicLayout(props: any) {
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const [theme] = useAppStore(state => [state.theme])
+  const [loading, setLoading] = useState(true)
+
+  const selectedKey = pathname.split('/')[1]
+
+  useEffect(() => {
+    setLoading(true)
+    const token = localStorage.getItem(AUTH_TOKEN_KEY)
+    if (!token)
+      navigate('/login', { replace: true })
+    setLoading(false)
+  }, [])
+
+  if (loading)
+    return <Loading height="100vh" />
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#8090f0',
+        },
+      }}
+    >
+      <Layout style={{ height: '100vh' }}>
+        <Layout.Sider theme={theme} collapsible>
+          <Menu
+            selectedKeys={[selectedKey]}
+            style={{ height: '100%' }}
+            items={[
+              {
+                key: 'chat',
+                title: '聊天',
+                label: '聊天',
+                icon: <MessageOutlined />,
+                onClick: () => navigate('/chat'),
+              },
+              {
+                key: 'contact',
+                title: '联系人',
+                label: '联系人',
+                icon: <UserOutlined />,
+                onClick: () => navigate('/contact'),
+              },
+              {
+                key: 'setting',
+                title: '设置',
+                label: '设置',
+                icon: <SettingOutlined />,
+                onClick: () => navigate('/setting'),
+              },
+            ]}
+          />
+        </Layout.Sider>
+        {props.children}
+      </Layout>
+    </ConfigProvider>
+  )
+}
+
+export default BasicLayout
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -1,88 +1,30 @@
-import { ConfigProvider, Layout, Menu } from 'antd'
-import { MessageOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'
-import { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Layout } from 'antd'
 import SplitPane from 'react-split-pane'
-import { useAppStore, useSplitPane, useThemeToken } from '@/hooks'
-import { AUTH_TOKEN_KEY } from '@/config'
-import Loading from '@/components/Loading'
-import Sider from '@/components/Sider'
+import { useSplitPane, useThemeToken } from '@/hooks'
 
 function MainLayout(props: any) {
   const { token } = useThemeToken()
-  const navigate = useNavigate()
-  const { pathname } = useLocation()
-  const [theme] = useAppStore(state => [state.theme])
-  const [loading, setLoading] = useState(true)
-
-  const selectedKey = pathname.split('/')[1]
-
-  useEffect(() => {
-    setLoading(true)
-    const token = localStorage.getItem(AUTH_TOKEN_KEY)
-    if (!token)
-      navigate('/login', { replace: true })
-    setLoading(false)
-  }, [])
-
   const { props: splitPaneProps } = useSplitPane({
     color: token.colorBorder,
     minSize: 160,
     dragMinSize: 160,
     defaultSize: 300,
     maxSize: 500,
     key: 'main',
+    pane1Style: {
+      height: '100%',
+    },
+    pane2Style: {
+      height: '100%',
+    },
   })
 
-  if (loading)
-    return <Loading height="100vh" />
-
   return (
-    <ConfigProvider
-      theme={{
-        token: {
-          colorPrimary: '#00b96b',
-        },
-      }}
-    >
-      <Layout>
-        <Layout.Sider theme={theme} collapsible>
-          <Menu
-            selectedKeys={[selectedKey]}
-            style={{ height: '100%' }}
-            items={[
-              {
-                key: 'chat',
-                title: '聊天',
-                label: '聊天',
-                icon: <MessageOutlined />,
-                onClick: () => navigate('/chat'),
-              },
-              {
-                key: 'contact',
-                title: '联系人',
-                label: '联系人',
-                icon: <UserOutlined />,
-                onClick: () => navigate('/contact'),
-              },
-              {
-                key: 'setting',
-                title: '设置',
-                label: '设置',
-                icon: <SettingOutlined />,
-                onClick: () => navigate('/setting'),
-              },
-            ]}
-          />
-        </Layout.Sider>
-        <Layout style={{ position: 'relative', height: '100vh', backgroundColor: token.colorBgContainer }}>
-          <SplitPane {...splitPaneProps}>
-            <Sider />
-            {props.children}
-          </SplitPane>
-        </Layout>
-      </Layout>
-    </ConfigProvider>
+    <Layout style={{ position: 'relative', height: '100vh', backgroundColor: token.colorBgContainer }}>
+      <SplitPane {...splitPaneProps}>
+        {props.children}
+      </SplitPane>
+    </Layout>
   )
 }
 

diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
@@ -1,18 +1,16 @@
-import { Typography } from 'antd'
 import { useParams } from 'react-router-dom'
-import styles from './index.module.less'
-import type { Friend } from '@/typings'
+import ChatSider from '@/components/Sider/ChatSider'
+import MainLayout from '@/layouts/MainLayout'
 
 function Chat() {
   const params = useParams()
-  console.log('✨  ~ Chat ~ params:', params)
+  const chatId = params.id
 
   return (
-    <div>
-      <div className={styles.header}>
-        {/* <Typography.Text>{friend.note || friend.nickname}</Typography.Text> */}
-      </div>
-    </div>
+    <MainLayout>
+      <ChatSider />
+      <div>哈哈</div>
+    </MainLayout>
   )
 }
 

diff --git a/src/pages/Contact/index.tsx b/src/pages/Contact/index.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
+import ContactSider from '@/components/Sider/ContactSider'
+import MainLayout from '@/layouts/MainLayout'
 
 function Contact() {
   return (
-    <div>Contact</div>
+    <MainLayout>
+      <ContactSider />
+      <div>联系人</div>
+    </MainLayout>
   )
 }
 

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
+import { Flex } from 'antd'
+import { useThemeToken } from '@/hooks'
 
 function Home() {
+  const { token } = useThemeToken()
   return (
-    <div>Home</div>
+    <Flex justify="center" align="center" style={{ height: '100%', width: '100%' }}>
+      <span style={{ fontSize: token.fontSizeHeading4 }}>对你思念的人诉说吧~</span>
+    </Flex>
   )
 }
 

diff --git a/src/pages/Login/index.module.less b/src/pages/Login/index.module.less
@@ -0,0 +1,7 @@
+.bar {
+  display: block;
+  width: 4px;
+  height: 30px;
+  background-color: #6cf;
+  border-radius: 4px;
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -1,7 +1,8 @@
 import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Button, Card, Flex, Form, Input, message } from 'antd'
+import { Button, Card, Flex, Form, Input, Space, message } from 'antd'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import styles from './index.module.less'
 import { login } from '@/apis'
 import { AUTH_TOKEN_KEY } from '@/config'
 import { useAppStore, useThemeToken } from '@/hooks'
@@ -18,9 +19,12 @@ function Login() {
     <Flex vertical justify="center" align="center" style={{ height: '100vh' }}>
       {messageContext}
       <Card style={{ width: 400, boxShadow: token.boxShadow }}>
-        <div style={{ margin: 20, fontSize: 22 }}>
-          登录 Mailpen
-        </div>
+        <Space size={8} style={{ margin: '20px 0' }}>
+          <div className={styles.bar} />
+          <div style={{ fontSize: 22 }}>
+            登录 Mailpen
+          </div>
+        </Space>
         <Form<Pick<User, 'username' | 'password'>> onFinish={(values) => {
           setLoading(true)
           login(values).then((res) => {

diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
+import SettingSider from '@/components/Sider/SettingSider'
+import MainLayout from '@/layouts/MainLayout'
 
 function Setting() {
   return (
-    <div>Setting</div>
+    <MainLayout>
+      <SettingSider />
+      <div>设置</div>
+    </MainLayout>
   )
 }
 

diff --git a/src/router/index.tsx → src/router/index.ts b/src/router/index.tsx → src/router/index.ts
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
@@ -1,13 +1,11 @@
-import { lazy } from 'react'
 import type { RouteObject } from 'react-router-dom'
 import { Outlet } from 'react-router-dom'
-import MainLayout from '@/layouts/MainLayout'
-
-const Login = lazy(() => import('../pages/Login'))
-const Home = lazy(() => import('../pages/Home'))
-const Chat = lazy(() => import('../pages/Chat'))
-const Contact = lazy(() => import('../pages/Contact'))
-const Setting = lazy(() => import('../pages/Setting'))
+import MainLayout from '@/layouts/BasicLayout'
+import Chat from '@/pages/Chat'
+import Contact from '@/pages/Contact'
+import Home from '@/pages/Home'
+import Login from '@/pages/Login'
+import Setting from '@/pages/Setting'
 
 const routes: RouteObject[] = [
   {
@@ -25,16 +23,34 @@ const routes: RouteObject[] = [
         element: <Home />,
       },
       {
-        path: 'chat/:id',
+        path: 'chat',
         element: <Chat />,
+        children: [
+          {
+            path: ':id',
+            element: <Chat />,
+          },
+        ],
       },
       {
-        path: 'contact/:id',
+        path: 'contact',
         element: <Contact />,
+        children: [
+          {
+            path: ':id',
+            element: <Contact />,
+          },
+        ],
       },
       {
-        path: 'setting/:group',
+        path: 'setting',
         element: <Setting />,
+        children: [
+          {
+            path: ':group',
+            element: <Setting />,
+          },
+        ],
       },
     ],
   },

diff --git a/vite.config.ts b/vite.config.ts
@@ -11,4 +11,11 @@ export default defineConfig({
       '@': path.resolve(__dirname, 'src'),
     },
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
 })