提交

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
     "antd": "^5.16.1",
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   antd:
     specifier: ^5.16.1
     version: 5.16.1(react-dom@18.2.0)(react@18.2.0)
+  axios:
+    specifier: ^1.6.8
+    version: 1.6.8
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -3552,6 +3555,16 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /axios@1.6.8:
+    resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /axobject-query@3.2.1:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
     dependencies:
@@ -5674,6 +5687,15 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -8866,6 +8888,10 @@ packages:
       ipaddr.js: 1.9.1
     dev: false
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: false

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/api/api.d.ts

@@ -0,0 +1,4 @@
+interface api_login_params {
+  username: string;
+  password: string;
+}

src/api/index.tsx

@@ -0,0 +1,13 @@
+import axios from 'axios';
+import { api } from '../config/index';
+
+export const _axios = axios.create({
+  baseURL: api.url,
+  timeout: api.timeout,
+  headers: {
+      ...api.default_header
+  }
+});
+
+
+

src/api/system.tsx

@@ -0,0 +1,14 @@
+import { _axios } from './index';
+import { message } from 'antd';
+const [messageApi] = message.useMessage();
+
+export const api_login = (params: api_login_params) => {
+  return _axios.post('/user/login2', params).catch(err => {
+    console.log(err.response.data.status);
+    const {} = err.response.data;
+    messageApi.open({
+      type: 'error',
+      content: `错误代码：`
+    });
+  });
+};

src/config/index.tsx

@@ -0,0 +1,7 @@
+export const api = {
+  url: 'http://ssp-server.smcic.net',
+  timeout: 10000,
+  default_header: {
+    Authorization: localStorage.getItem('token')
+  }
+};

src/index.css

@@ -1,13 +1,21 @@
-body {
+* {
+  box-sizing: border-box;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+html,
+#root,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

src/index.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+// import reportWebVitals from './reportWebVitals';
 
-root.render(
+import RouterView from './router/index';
+
+const router = createHashRouter(RouterView);
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  // 严格模式
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();

src/router/index.tsx

@@ -0,0 +1,23 @@
+// 引入页面
+import Login from '../view/login/index';
+import Home from '../view/home/index';
+
+// 引入骨架页
+import Skeleton from '../view/skeleton/index';
+import { Children } from 'react';
+
+const router = [
+  {
+    path: '/',
+    element: <Login />
+  },
+  {
+    path: '/home',
+    element: <Skeleton />,
+    children: [
+        { path: '', element: <Home /> }
+    ]
+  }
+];
+
+export default router;

src/view/home/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.css';
+
+const Home: React.FC = () => {
+  return <div className='home'>34</div>;
+};
+
+export default Home;

src/view/login/index.css

@@ -0,0 +1,15 @@
+.login {
+  width: 100%;
+  height: 100%;
+  padding-top: 25%;
+}
+
+.login_main {
+  width: 50%;
+  height: 50%;
+  margin: 0 auto;
+}
+
+.login_main .login-form-button {
+  width: 100%;
+}

src/view/login/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form, Input } from 'antd';
+
+import { api_login } from "../../api/system";
+
+import './index.css';
+
+
+const Login: React.FC = () => {
+  const onFinish = (values: any) => {
+    api_login(values).then(r=>{
+        console.log(r)
+    })
+  };
+  return (
+    <div className='login'>
+      <div className='login_main'>
+        <Form
+          name='normal_login'
+          className='login-form'
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+        >
+          <Form.Item
+            name='username'
+            rules={[{ required: true, message: '请输入用户名!' }]}
+          >
+            <Input
+              prefix={<UserOutlined className='site-form-item-icon' />}
+              placeholder='用户名'
+            />
+          </Form.Item>
+          <Form.Item
+            name='password'
+            rules={[{ required: true, message: '请输入密码!' }]}
+          >
+            <Input
+              prefix={<LockOutlined className='site-form-item-icon' />}
+              type='password'
+              placeholder='密码'
+            />
+          </Form.Item>
+
+          <Form.Item>
+            <Button type='primary' htmlType='submit' className='login-form-button' >
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/App.tsx → src/view/skeleton/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import { ConfigProvider, Breadcrumb, Layout, Menu, theme } from 'antd';
+import { Outlet } from 'react-router-dom';
 
 const { Header, Content, Sider } = Layout;
 
@@ -30,12 +31,12 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   }
 );
 
-const App: React.FC = () => {
+const Skeleton: React.FC = () => {
   const {
     token: { colorBgContainer, borderRadiusLG }
   } = theme.useToken();
   return (
-    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
+    <ConfigProvider theme={{ token: { colorPrimary: '#ff0000' } }}>
       <Layout>
         <Header style={{ display: 'flex', alignItems: 'center' }}>
           <div className='demo-logo' />
@@ -47,7 +48,7 @@ const App: React.FC = () => {
             style={{ flex: 1, minWidth: 0 }}
           />
         </Header>
-        <Layout style={{height: 'calc(100vh - 80px)'}}>
+        <Layout style={{ height: 'calc(100vh - 80px)' }}>
           <Sider width={200} style={{ background: colorBgContainer }}>
             <Menu
               mode='inline'
@@ -61,8 +62,7 @@ const App: React.FC = () => {
             <Breadcrumb
               style={{ margin: '16px 0' }}
               items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
-            >
-            </Breadcrumb>
+            ></Breadcrumb>
             <Content
               style={{
                 padding: 24,
@@ -72,7 +72,9 @@ const App: React.FC = () => {
                 borderRadius: borderRadiusLG
               }}
             >
-              Content
+              <div id='detail'>
+                <Outlet />
+              </div>
             </Content>
           </Layout>
         </Layout>
@@ -81,4 +83,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default Skeleton;