PC项目

react-pc-project/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react-pc-project/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

react-pc-project/craco.config.js

@@ -0,0 +1,14 @@
+// 配置别名路径
+
+// 添加自定义对于 webpack 的配置
+const path = require('path')
+
+module.exports = {
+    // webpack 配置
+    webpack: {
+        // 配置别名
+        alias: {
+            '@': path.resolve(__dirname, 'src')
+        }
+    }
+}

react-pc-project/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  }
+}

react-pc-project/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-pc-project",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "antd": "^4.21.7",
+    "axios": "^0.27.2",
+    "echarts": "^5.3.3",
+    "history": "^5.3.0",
+    "mobx": "^6.6.1",
+    "mobx-react-lite": "^3.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^4.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.4.5",
+    "sass": "^1.53.0"
+  }
+}

react-pc-project/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react-pc-project/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react-pc-project/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

react-pc-project/src/App.css

@@ -0,0 +1,3 @@
+.App {
+  height: 100%;
+}

react-pc-project/src/App.js

@@ -0,0 +1,34 @@
+import { unstable_HistoryRouter, BrowserRouter as HistoryRouter, Routes, Route} from 'react-router-dom'
+import { history  } from './utils/history'
+import Layout from '@/pages/Layout'
+import Login from '@/pages/Login'
+import Home from '@/pages/Home'
+import Article from '@/pages/Article'
+import Publish from '@/pages/Publish'
+import { AuthComponent } from '@/components/AuthComponent'
+import './App.css'
+
+function App() {
+  return (
+    // 路由配置
+    <HistoryRouter history={history}>
+    <div className="App">
+      <Routes>
+        {/* 创建路由 path 和组件对应关系 */}
+        {/* Layout 需要鉴权处理， 这里的 Layout 一定不能写死，要根据是否登录进行判断 */}
+        <Route path='/' element={
+          <AuthComponent><Layout/></AuthComponent>
+        }>
+          <Route index element={<Home/>}></Route>
+          <Route path='article' element={<Article/>}></Route>
+          <Route path='publish' element={<Publish/>}></Route>
+        </Route>
+
+        <Route path='/login' element={<Login/>}></Route>
+      </Routes>
+    </div>
+    </HistoryRouter>
+  );
+}
+
+export default App;

react-pc-project/src/components/AuthComponent.js

@@ -0,0 +1,28 @@
+/** 路由鉴权实现
+ * 步骤： 1.判断 token 是否存在
+ *        2.如果存在就直接正常渲染
+ *        3.如果不存在，则重定向到登录路由
+*/
+
+import { getToken } from '@/utils'
+import { Navigate } from 'react-router-dom'
+
+// 封装高阶组件：把一个组件当成另外一个组件的参数传入，然后通过一定的判断，返回到新的组件
+
+function AuthComponent ({ children }) {
+    const isToken = getToken()
+    if (isToken) {
+        return <>{children}</>
+    } else {
+        return <Navigate to="/login" replace />
+    }
+}
+
+/** 例如：<AuthComponent><Layout/></AuthComponent>
+ * 登录状态：返回 Layout 组件  <><Layout/></>
+ * 非登录状态：返回登录页  <Navigate to="/login" replace />
+ */
+
+export {
+    AuthComponent
+}

react-pc-project/src/components/Bar/index.js

@@ -0,0 +1,46 @@
+// 封装图表 bar 组件
+
+import * as echarts from 'echarts'
+import { useEffect, useRef } from 'react';
+
+function Bar ({title, xData, yData, style}) {
+    // 获取一个 DOM 元素
+    const domRef = useRef()
+
+    const chartInit = () => {
+        // 基于准备好的dom，初始化echarts实例
+        const myChart = echarts.init(domRef.current);
+        // 绘制图表
+        myChart.setOption({
+            title: {
+                text: title
+            },
+            tooltip: {},
+            xAxis: {
+                data: xData
+            },
+            yAxis: {},
+            series: [
+                {
+                    name: '销量',
+                    type: 'bar',
+                    data: yData
+                }
+            ]
+        });
+    }
+
+    // 执行初始化函数
+    useEffect(() => {
+        chartInit()
+    }, [])
+
+    return (
+        <div>
+            {/* 准备一个挂载节点 */}
+            <div ref={domRef} style={style}></div>
+        </div>
+    )
+}
+
+export default Bar

react-pc-project/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.scss'
+import 'antd/dist/antd.min.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <App />
+);
+

react-pc-project/src/index.scss

@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+}
+
+#root {
+    height: 100%;
+}

react-pc-project/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

react-pc-project/src/pages/Article/index.js

@@ -0,0 +1,7 @@
+function Article () {
+    return (
+        <div>Article</div>
+    )
+}
+
+export default Article

react-pc-project/src/pages/Home/index.js

@@ -0,0 +1,31 @@
+import './index.scss'
+
+/**
+ * 思路：
+ * 1.看官方文档，把 echarts 加入项目
+ * 2.不抽离定制化的参数，先把最小化的 demo 跑起来
+ * 3.按照需求，哪些参数需要自定义，抽象出来
+ */
+
+import Bar from '@/components/Bar'
+
+function Home() {
+    return (
+        <div>
+            {/* 渲染 Bar 组件 */}
+            <Bar 
+            title='主流框架使用满意的度'
+            xData={['react', 'vue', 'angular']}
+            yData={[30, 40, 50]}
+            style={{ width: '500px', height: '400px' }}/>
+
+<Bar 
+            title='主流框架使用满意的度2'
+            xData={['react', 'vue', 'angular']}
+            yData={[60, 70, 80]}
+            style={{ width: '300px', height: '200px' }}/>
+        </div>
+    )
+}
+
+export default Home

react-pc-project/src/pages/Layout/index.js

@@ -0,0 +1,77 @@
+import { Layout, Menu, Popconfirm } from 'antd'
+import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom'
+import {
+  HomeOutlined,
+  DiffOutlined,
+  EditOutlined,
+  LogoutOutlined
+} from '@ant-design/icons'
+import './index.scss'
+import { useStore } from '@/store'
+import { useEffect } from 'react'
+import { observer } from 'mobx-react-lite'
+
+const { Header, Sider } = Layout
+
+
+const GeekLayout = () => {
+  const { pathname } = useLocation()
+  const { userStore, loginStore } = useStore()
+
+  useEffect( () => {
+    userStore.getUserInfo()
+  }, [userStore])
+
+  // 确定退出
+  const navigate = useNavigate()
+  const onConfirm = () => {
+    // 退出登录：删除 token 、跳回到登录页面
+    loginStore.loginOut()
+    navigate('/login')
+  }
+
+  return (
+    <Layout>
+      <Header className="header">
+        <div className="logo" />
+        <div className="user-info">
+          <span className="user-name">{userStore.useInfo.name}</span>
+          <span className="user-logout">
+            <Popconfirm 
+            onConfirm={onConfirm}
+            title="是否确认退出？" okText="退出" cancelText="取消">
+              <LogoutOutlined /> 退出
+            </Popconfirm>
+          </span>
+        </div>
+      </Header>
+      <Layout>
+        <Sider width={200} className="site-layout-background">
+          {/* 高亮原理： defaultSelectedKeys 对应 Item 的 key，需要获取当前激活的 path 路径 */}
+          <Menu
+            mode="inline"
+            theme="dark"
+            defaultSelectedKeys={[pathname]}
+            style={{ height: '100%', borderRight: 0 }}
+          >
+            <Menu.Item icon={<HomeOutlined />} key="/">
+              <Link to="/">数据概览</Link>
+            </Menu.Item>
+            <Menu.Item icon={<DiffOutlined />} key="/article">
+              <Link to="/article">内容管理</Link>
+            </Menu.Item>
+            <Menu.Item icon={<EditOutlined />} key="/publish">
+              <Link to="/publish">发布文章</Link>
+            </Menu.Item>
+          </Menu>
+        </Sider>
+        <Layout className="layout-content" style={{ padding: 20 }}>
+          {/* 二级路由出口 */}
+          <Outlet />
+          </Layout>
+      </Layout>
+    </Layout>
+  )
+}
+
+export default observer(GeekLayout)

react-pc-project/src/pages/Layout/index.scss

@@ -0,0 +1,37 @@
+.ant-layout {
+    height: 100%;
+  }
+  
+  .header {
+    padding: 0;
+  }
+  
+  .logo {
+    width: 200px;
+    height: 60px;
+    background: url('~@/assets/logo.png') no-repeat center / 160px auto;
+  }
+  
+  .layout-content {
+    overflow-y: auto;
+  }
+  
+  .user-info {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding-right: 20px;
+    color: #fff;
+    
+    .user-name {
+      margin-right: 20px;
+    }
+    
+    .user-logout {
+      display: inline-block;
+      cursor: pointer;
+    }
+  }
+  .ant-layout-header {
+    padding: 0 !important;
+  }

react-pc-project/src/pages/Login/index.js

@@ -0,0 +1,92 @@
+import { Card, Form, Input, Checkbox, Button, message } from 'antd'
+import logo from '@/assets/logo.png'
+import './index.scss'
+import { useStore } from '@/store'
+import { useNavigate } from 'react-router-dom'
+
+function Login() {
+    const { loginStore } = useStore()
+    const navigate = useNavigate()
+    // values: 放置的是所有表单项中用户输入的内容
+    async function onFinish(values) {
+        console.log(values)
+        // 获取登录用户信息
+        await loginStore.getToken({
+            mobile: values.username,
+            code: values.password
+        })
+        // 跳转首页
+        navigate('/', { replace: true })
+        // 提示用户
+        message.success('登录成功')
+    }
+
+    return (
+        <div className="login">
+            <Card className="login-container">
+                <img className="login-logo" src={logo} alt="" />
+                {/* 登录表单 */}
+                {/* 子项用到的触发事件，需要在 From 中都声明才可以使用 */}
+                <Form
+                    validateTrigger={['onBlur', 'onChange']}
+                    // 设置勾选默认
+                    initialValues={{
+                        remember: true,
+                    }}
+                    onFinish={onFinish}
+                >
+                    <Form.Item
+                        name="username"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入手机号',
+                            },
+                            {
+                                // pattern 是正则表达式匹配
+                                pattern: /^1[3-9]\d{9}$/,
+                                message: '请输入正确的手机号',
+                                // validateTrigger 是设置触发验证时机
+                                validateTrigger: 'onBlur'
+                            }
+                        ]}
+                    >
+                        <Input size="large" placeholder="请输入手机号" />
+                    </Form.Item>
+                    <Form.Item
+                        name="password"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入密码',
+                            },
+                            {
+                                len: 6,
+                                message: '请输入6位密码',
+                                validateTrigger: 'onBlur'
+                            },
+                        ]}
+                    >
+                        <Input size="large" placeholder="请输入验证码" />
+                    </Form.Item>
+                    <Form.Item
+                        name="remember"
+                        valuePropName="checked"
+                    >
+                        <Checkbox className="login-checkbox-label">
+                            我已阅读并同意「用户协议」和「隐私条款」
+                        </Checkbox>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" size="large" block>
+                            登录
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+        </div>
+    )
+}
+
+export default Login

react-pc-project/src/pages/Login/index.scss

@@ -0,0 +1,29 @@
+.login {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: center/cover url('~@/assets/login.png');
+    
+    .login-logo {
+      width: 200px;
+      height: 60px;
+      display: block;
+      margin: 0 auto 20px;
+    }
+    
+    .login-container {
+      width: 440px;
+      height: 360px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: 0 0 50px rgb(0 0 0 / 10%);
+    }
+    
+    .login-checkbox-label {
+      color: #1890ff;
+    }
+  }

react-pc-project/src/pages/Publish/index.js

@@ -0,0 +1,7 @@
+function Publish () {
+    return (
+        <div>Publish</div>
+    )
+}
+
+export default Publish

react-pc-project/src/store/index.js

@@ -0,0 +1,20 @@
+// 把所有的模块做统一处理
+// 导出一个统一的方法 useStore
+
+import React from "react";
+import LoginStore from "./login.Store";
+import UserStore from "./user.Store"
+
+class RootStore {
+    constructor() {
+        this.loginStore = new LoginStore()
+        this.userStore = new UserStore()
+    }
+}
+
+// 实例化根，然后导出 useStore context
+const rootStore = new RootStore()
+const context = React.createContext(rootStore)
+const useStore = () => React.useContext(context)
+
+export { useStore }

react-pc-project/src/store/login.Store.js

@@ -0,0 +1,32 @@
+// 登录模块
+
+import { makeAutoObservable } from 'mobx'
+import { http, setToken, getToken, removeToken} from '@/utils'
+
+class LoginStore {
+    // 获取 token，取得到就给本地 localStorage，取不到就给一个空值
+    token = getToken() || ''
+    constructor () {
+        // 响应式
+        makeAutoObservable(this)
+    }
+
+    // 获取 token
+    getToken = async ({ mobile, code }) => {
+        // 调用登录接口
+        const res =  await http.post('http://geek.itheima.net/v1_0/authorizations', { mobile, code })
+        // 存入 token
+        console.log(res.data)
+        this.token = res.data.token
+        // 将 token 存入 localStorage
+        setToken(this.token)
+    }
+
+    // 退出登录，删除 token
+    loginOut = () => {
+        this.token = ''
+        removeToken()
+    }
+}
+
+export default LoginStore

react-pc-project/src/store/user.Store.js

@@ -0,0 +1,16 @@
+import { makeAutoObservable } from "mobx";
+import { http } from '@/utils'
+
+class UserStore {
+    useInfo = {}
+    constructor() {
+        makeAutoObservable(this)
+    }
+    getUserInfo = async () => {
+        // 调用接口获取数据
+        const res = await http.get('/user/profile')
+        this.useInfo = res.data
+    }
+}
+
+export default UserStore

react-pc-project/src/utils/history.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from "history";
+
+const history = createBrowserHistory()
+
+export { history }

react-pc-project/src/utils/http.js

@@ -0,0 +1,39 @@
+// 封装 axios
+
+import axios from 'axios'
+import { getToken } from './token'
+import { history  } from './history'
+
+const http = axios.create({
+  baseURL: 'http://geek.itheima.net/v1_0',
+  timeout: 5000
+})
+// 添加请求拦截器
+http.interceptors.request.use((config)=> {
+  // 将 token 通过请求拦截器注入到请求头中，只要接口发起请求就会获取 token
+  const token = getToken()
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+    return config
+  }, (error)=> {
+    return Promise.reject(error)
+})
+
+// 添加响应拦截器
+http.interceptors.response.use((response)=> {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    return response.data
+  }, (error)=> {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    console.dir(error)
+    if (error.response.status === 401) {
+      // 401状态就跳转回登录页面， 在 reactRouter 默认状态下，并不支持在组件之外完成路由跳转，需要自己手动实现
+      history.push('/login')
+    }
+    return Promise.reject(error)
+})
+
+export { http }

react-pc-project/src/utils/index.js

@@ -0,0 +1,15 @@
+// index.js 文件的作用：先把所有的工具函数导出的模块在这里导入，然后统一导出
+
+import { http } from './http'
+import {
+    setToken,
+    getToken,
+    removeToken
+} from './token'
+
+export {
+    http,
+    setToken,
+    getToken,
+    removeToken
+}

react-pc-project/src/utils/token.js

@@ -0,0 +1,24 @@
+// 封装 localStorage 存取 token
+
+const key = 'pc-key'
+
+// 存取 token
+const setToken = (token) => {
+    return window.localStorage.setItem(key, token)
+}
+
+// 获取 token
+const getToken = () => {
+    return window.localStorage.getItem(key)
+}
+
+// 删除 token
+const removeToken = () => {
+    return window.localStorage.removeItem(key)
+}
+
+export {
+    setToken,
+    getToken,
+    removeToken
+}