feat: 开发中

5 months ago · 41b9805b80
37 changed files with 1680 additions and 148 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,13 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": false,
+    "singleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "printWidth": 140,
+    "htmlWhitespaceSensitivity": "ignore",
+    "proseWrap": "preserve",
+    "endOfLine": "auto"
+}
--- a/README.md
+++ b/README.md
@ -1,50 +1,5 @@
-# React + TypeScript + Vite
+## Learn React

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+### 主题切换功能

-Currently, two official plugins are available:
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+[switch theme](https://css-tricks.org.cn/theming-and-theme-switching-with-react-and-styled-components/)
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
--- a/package.json
+++ b/package.json
@ -3,6 +3,9 @@
  "private": true,
  "version": "0.0.0",
  "type": "module",
+  "resolutions": {
+    "styled-components": "^5"
+  },
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
@ -13,12 +16,16 @@
    "@blueprintjs/core": "^5.14.2",
    "@blueprintjs/icons": "^5.14.0",
    "@blueprintjs/table": "^5.2.5",
+    "@types/lodash": "^4.17.13",
    "@types/react-router-dom": "^5.3.3",
    "framer-motion": "^11.11.17",
+    "lodash": "^4.17.21",
    "normalize.css": "^8.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-router-dom": "^5.3.4"
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^6.1.13"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,9 +1,5 @@
 import AppRouter from "@/router/AppRouter"

 export default function App() {
-  return (
-    <>
-      <AppRouter></AppRouter>
-    </>
-  )
+    return <AppRouter></AppRouter>
 }
--- a/src/base/withPage.tsx
+++ b/src/base/withPage.tsx
@ -0,0 +1,25 @@
+import { FC, ReactNode } from "react"
+import { LeftIn, OpacityIn } from "@/effect"
+import styled from "styled-components"
+
+interface PageProps {
+    meta: Record<string, any>
+    children: ReactNode
+}
+
+const StyleAnim = styled(OpacityIn)`
+    position: relative;
+`
+
+function withPage(WrappedComponent: FC<PageProps>) {
+    return function WithAuthorizationComponent(props: PageProps) {
+        return (
+            <StyleAnim>
+                <WrappedComponent {...props} />
+            </StyleAnim>
+        )
+    }
+}
+
+export { withPage }
+export default withPage
--- a/src/components/PageScroll/PageScrollContext.ts
+++ b/src/components/PageScroll/PageScrollContext.ts
@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const PageScrollContext = createContext(() => {});
--- a/src/components/PageScroll/index.tsx
+++ b/src/components/PageScroll/index.tsx
@ -0,0 +1,37 @@
+import { FC, ReactNode, useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import util from "lodash"
+import { PageScrollContext } from "./PageScrollContext"
+
+/**
+ * https://zhuanlan.zhihu.com/p/390378572
+ */
+
+const ScrollToPosition: FC<{ children: ReactNode }> = ({ children }) => {
+    const location = useLocation()
+    const { pathname } = location
+    const scrollTo = () => {
+        const scrollY = sessionStorage.getItem(pathname)
+        // 为了避免scrollY为0引起的滚动到顶部后没有记录的bug，将交互改为在150px内直接滚动到顶部
+        if (scrollY) {
+            const scrollResult = Number(scrollY) < 150 ? 0 : Number(scrollY)
+            window.scrollTo(0, scrollResult)
+        }
+    }
+    // 路由切换时重新绑定一次最新的pathname
+    useEffect(() => {
+        const scrollHandler = util.throttle(() => {
+            // 点击切换路由时会触发一次scroll，此时 scrollY为0
+            if (window.scrollY > 0) {
+                sessionStorage.setItem(pathname, String(window.scrollY))
+            }
+        })
+        window.addEventListener("scroll", scrollHandler)
+        return () => {
+            // 做好清理
+            window.removeEventListener("scroll", scrollHandler)
+        }
+    }, [pathname])
+    return <PageScrollContext.Provider value={scrollTo}>{children}</PageScrollContext.Provider>
+}
+export default ScrollToPosition
--- a/src/components/ScrollManager.tsx
+++ b/src/components/ScrollManager.tsx
@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react"
+import { useLocation } from "react-router-dom"
+
+const ScrollManager = () => {
+    const location = useLocation()
+    const prevLocationRef = useRef(location)
+
+    useEffect(() => {
+        const prevLocation = prevLocationRef.current
+        prevLocationRef.current = location
+
+        if (prevLocation.pathname !== location.pathname) {
+            const scrollPosition = sessionStorage.getItem(location.pathname)
+
+            if (scrollPosition) {
+                window.scrollTo(0, parseInt(scrollPosition, 10))
+            } else {
+                window.scrollTo(0, 0)
+            }
+        }
+
+        const handleScroll = () => {
+            sessionStorage.setItem(location.pathname, window.scrollY.toString())
+        }
+
+        window.addEventListener("scroll", handleScroll)
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll)
+        }
+    }, [location])
+
+    return null
+}
+
+export default ScrollManager
--- a/src/effect/index.tsx
+++ b/src/effect/index.tsx
@ -1,4 +1,5 @@
 import { motion } from "framer-motion"
+import styled from "styled-components"

 export function OpacityIn({ children, className }: any) {
    return (
@ -9,8 +10,8 @@ export function OpacityIn({ children, className }: any) {
            variants={{
                visible: { opacity: 1 },
                hidden: { opacity: 0 },
-            }
-            }>
+            }}
+        >
            {children}
        </motion.div>
    )
@ -25,9 +26,9 @@ export function LeftIn({ children, className }: any) {
            variants={{
                visible: { opacity: 1, x: 0 },
                hidden: { opacity: 0, x: -100 },
-            }
-            }>
+            }}
+        >
            {children}
        </motion.div>
    )
-}
+}
--- a/src/index.css
+++ b/src/index.css
@ -1,4 +1,12 @@
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import "@blueprintjs/table/lib/css/table.css";
+@import "@blueprintjs/table/lib/css/table.css";
+
+/* html,
+body {
+    height: 100%;
+}
+#root {
+    min-height: 100%;
+} */
--- a/src/layout/GlobalStyles.ts
+++ b/src/layout/GlobalStyles.ts
@ -0,0 +1,7 @@
+import { createGlobalStyle } from "styled-components"
+
+export const GlobalStyles = createGlobalStyle`
+    html,body, #root{
+        height: 100%;
+    }
+`
--- a/src/layout/base.tsx
+++ b/src/layout/base.tsx
@ -0,0 +1,81 @@
+import { Alignment, Button, Dialog, DialogBody, DialogFooter, Menu, MenuDivider, MenuItem, Navbar, Popover } from "@blueprintjs/core"
+import { FC, ReactNode, useState } from "react"
+import { NavLink, useHistory } from "react-router-dom"
+import styled from "styled-components"
+import { GlobalStyles } from "./GlobalStyles"
+
+interface PageProps {
+    children: ReactNode
+}
+
+const PageWrapper = styled.div`
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+`
+const ContentWrapper = styled.div`
+    position: relative;
+    flex: 1;
+    height: 0;
+    overflow-x: hidden;
+`
+
+function BaseLayout(props: PageProps) {
+    const [isOpen, setIsOpen] = useState(false)
+    const [isOpenAbout, setIsOpenAbout] = useState(false)
+
+    const router = useHistory()
+
+    return (
+        <PageWrapper>
+            <GlobalStyles />
+            <Navbar>
+                <Navbar.Group align={Alignment.LEFT}>
+                    <Navbar.Heading>东风天堂</Navbar.Heading>
+                    <Navbar.Divider />
+                    <NavLink to={"/"}>
+                        <Button className="bp5-minimal" icon="home" text="Home" />
+                    </NavLink>
+                    <Popover
+                        isOpen={isOpen}
+                        interactionKind="click"
+                        onInteraction={isOpen => setIsOpen(isOpen)}
+                        content={
+                            <Menu>
+                                <MenuItem icon="graph" text="/project" onClick={() => router.push("/project")} />
+                                <MenuItem icon="map" text="/project/child" onClick={() => router.push("/project/child")} />
+                                <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+                                <MenuItem icon="zoom-to-fit" text="Browser" disabled={true} />
+                                <MenuDivider />
+                                <MenuItem icon="cog" text="Settings...">
+                                    <MenuItem icon="add" text="Add new application" disabled={true} />
+                                    <MenuItem icon="remove" text="Remove application" />
+                                </MenuItem>
+                            </Menu>
+                        }
+                        fill={true}
+                        placement="bottom"
+                    >
+                        <Button className="bp5-minimal" icon="document" text="Files" rightIcon={isOpen ? "caret-down" : "caret-right"} />
+                    </Popover>
+                </Navbar.Group>
+                <Navbar.Group align={Alignment.RIGHT}>
+                    <Button className="bp5-minimal" icon="settings" />
+                    <Navbar.Divider />
+                    {/* <NavLink to={"/about"}> */}
+                        <Button onClick={()=>setIsOpenAbout(true)} className="bp5-minimal" icon="person" text="关于" />
+                    {/* </NavLink> */}
+                </Navbar.Group>
+            </Navbar>
+            <ContentWrapper>{props.children}</ContentWrapper>
+            <Dialog isOpen={isOpenAbout} title="通知" icon="info-sign" onClose={() => setIsOpenAbout(false)}>
+                <DialogBody>{/* body contents here */}</DialogBody>
+                <DialogFooter actions={<Button intent="primary" text="关闭" onClick={() => setIsOpenAbout(false)} />} />
+            </Dialog>
+        </PageWrapper>
+    )
+}
+
+export { BaseLayout }
+export default BaseLayout
--- a/src/plugins/axios/axios.handleError.js
+++ b/src/plugins/axios/axios.handleError.js
@ -0,0 +1,51 @@
+
+export default (err) => {
+    const { response } = err
+
+    if (!response.status) {
+        err.code = ''
+        err.message = '有response但没有response.status的情况'
+    }
+    err.code = response.status
+    switch (response.status) {
+        case 200:
+            err.message = '错误响应也会有状态码为200的情况'
+            break
+        case 400:
+            err.message = '请求错误(400)'
+            break
+        case 401:
+            err.message = '未授权，请重新登录(401)'
+            break
+        case 403:
+            err.message = '拒绝访问(403)'
+            break
+        case 404:
+            err.message = '请求出错(404)'
+            break
+        case 408:
+            err.message = '请求超时(408)'
+            break
+        case 500:
+            err.message = '服务器错误(500)'
+            break
+        case 501:
+            err.message = '服务未实现(501)'
+            break
+        case 502:
+            err.message = '网络错误(502)'
+            break
+        case 503:
+            err.message = '服务不可用(503)'
+            break
+        case 504:
+            err.message = '网络超时(504)'
+            break
+        case 505:
+            err.message = 'HTTP版本不受支持(505)'
+            break
+        default:
+            err.message = `连接出错，状态码：(${err.response.status})!`
+    }
+    return err
+}
--- a/src/plugins/axios/axios.handleResponse.js
+++ b/src/plugins/axios/axios.handleResponse.js
@ -0,0 +1,42 @@
+
+// 处理响应错误码
+export default (response) => {
+    const status = response.status
+    // 如果http响应状态码response.status正常，则直接返回数据
+    if ((status >= 200 && status <= 300) || status === 304) {
+        return response
+    }
+    // status不正常的话，根据与后端约定好的code，做出对应的提示与处理
+    // 返回一个带有code和message属性的对象
+    else {
+        const code = parseInt(response.data && response.data.code)
+        // msg为服务端返回的错误信息，字段名自定义，此处以msg为例
+        let message = (response.data || {}).msg
+
+        switch (code) {
+            case 400:
+                break
+            case 4001:
+                if (process.server) return
+                message = message || '登录设备数量超出限制'
+                // store.commit('savehttpResult', { res: response.data })
+                break
+            case 403:
+                message = message || '未登录'
+                break
+            case 404:
+                message = message || '请求地址错误'
+                break
+            case 412:
+                message = message || '未找到有效session'
+                break
+            default:
+                // message = message || err.response.data.msg
+                break
+        }
+        return {
+            code,
+            message
+        }
+    }
+}
--- a/src/plugins/axios/axios.setConfig.js
+++ b/src/plugins/axios/axios.setConfig.js
@ -0,0 +1,31 @@
+
+/**
+ * @param {axios} axios实例
+ * @param {config} 自定义配置对象，可覆盖掉默认的自定义配置
+ */
+export default (axios, config = {}) => {
+
+    const defaultConfig = {
+        baseURL: process.env.VUE_APP_BASEURL,
+        timeout: 10000,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8',
+            'custom-defined-header-key': 'custom-defined-header-value',
+            // 自定义请求头：对所有请求方法生效
+            common: {
+                'common-defined-key-b': 'custom value: for all methods'
+            },
+            // 自定义请求头：只对post方法生效
+            post: {
+                'post-custom-key': 'custom value: only for post method'
+            },
+            // 自定义请求头：只对get方法生效
+            get: {
+                'get-custom-key': 'custom value: only for get method'
+            }
+        }
+    }
+
+    Object.assign(axios.defaults, defaultConfig, config)
+    return axios
+}
--- a/src/plugins/axios/index.js
+++ b/src/plugins/axios/index.js
@ -0,0 +1,127 @@
+import axios from "axios"
+import setConfig from "@/plugins/axios/axios.setConfig.js"
+import handleResponse from "@/plugins/axios/axios.handleResponse.js"
+import handleError from "@/plugins/axios/axios.handleError.js"
+// import store from '@/store/index'
+// import router from '@/router/index.js'
+// import { Message } from "element-ui"
+const showTip = tip => {
+    // Message({
+    //     type: "warning",
+    //     message: tip || "请求出错啦",
+    //     duration: 1500,
+    // })
+}
+
+/**
+ * intactRequest是只在axios基础上更改了请求配置。
+ * 而request是基于axios创建的实例，实例只有常见的数据请求方法，没有axios.isCancel/ axios.CancelToken等方法，
+ * 也就是没有**取消请求**和**批量请求**的方法。
+ * 所以如果需要在实例中调用取消某个请求的方法（例如取消上传），请用intactRequest。
+ */
+let intactRequest = setConfig(axios)
+let request = setConfig(intactRequest.create())
+
+// 请求中的api
+let pendingPool = new Map()
+
+/**
+ * 请求拦截
+ */
+const requestInterceptorId = request.interceptors.request.use(
+    config => {
+        // 对于异常的响应也需要在pendingPool中将其删除，但响应拦截器中的异常响应有些获取不到请求信息，这里将其保存在实例上
+        request.config = Object.assign({}, config)
+        // 在发送请求之前做些什么
+        // config.headers.common['cookie-id'] = cookieId
+        config.cancelToken = new axios.CancelToken(cancelFn => {
+            pendingPool.has(config.url)
+                ? cancelFn(`${config.url}请求重复`)
+                : pendingPool.set(config.url, { cancelFn, global: config.global })
+        })
+        return config
+    },
+    err => {
+        console.log("请求拦截err:", err)
+        // 对请求错误做些什么
+        return Promise.reject(err)
+    },
+)
+/**
+ * 响应拦截
+ */
+const responseInterceptorId = request.interceptors.response.use(
+    response => {
+        const { config } = response
+        pendingPool.delete(config.url)
+
+        // console.log('响应response suc:', response)
+        showTip(err.message)
+        return Promise.resolve(handleResponse(response))
+    },
+    // 对异常响应处理
+    err => {
+        const { config } = request
+        if (!axios.isCancel(err)) pendingPool.delete(config.url)
+
+        if (!err) return Promise.reject(err)
+
+        if (err.response) {
+            err = handleError(err)
+        }
+        // 没有response(没有状态码)的情况
+        // eg: 超时；断网；请求重复被取消；主动取消请求；
+        else {
+            // 错误信息err传入isCancel方法，可以判断请求是否被取消
+            if (axios.isCancel(err)) {
+                throw new axios.Cancel(err.message || `请求'${request.config.url}'被取消`)
+            } else if (err.stack && err.stack.includes("timeout")) {
+                err.message = "请求超时!"
+            } else {
+                err.message = "连接服务器失败!"
+            }
+        }
+
+        showTip(err.message)
+        return Promise.reject(err)
+    },
+)
+
+// 移除全局的请求拦截器
+function removeRequestInterceptor() {
+    request.interceptors.request.eject(requestInterceptorId)
+}
+
+// 移除全局的响应拦截器
+function removeResponseInterceptor() {
+    request.interceptors.response.eject(responseInterceptorId)
+}
+
+/**
+ * 清除所有pending状态的请求
+ * @param {Array} whiteList 白名单，里面的请求不会被取消
+ * 返回值 被取消了的api请求
+ */
+function clearPendingPool(whiteList = []) {
+    if (!pendingPool.size) return
+
+    // const pendingUrlList = [...pendingPool.keys()].filter((url) => !whiteList.includes(url))
+    const pendingUrlList = Array.from(pendingPool.keys()).filter(url => !whiteList.includes(url))
+    if (!pendingUrlList.length) return
+
+    pendingUrlList.forEach(pendingUrl => {
+        // 清除掉所有非全局的pending状态下的请求
+        if (!pendingPool.get(pendingUrl).global) {
+            pendingPool.get(pendingUrl).cancelFn()
+            pendingPool.delete(pendingUrl)
+        }
+    })
+
+    return pendingUrlList
+}
+
+request.removeRequestInterceptor = removeRequestInterceptor
+request.removeResponseInterceptor = removeResponseInterceptor
+request.clearPendingPool = clearPendingPool
+
+export { intactRequest, request }
--- a/src/plugins/axios/readme.md
+++ b/src/plugins/axios/readme.md
@ -0,0 +1,126 @@
+https://segmentfault.com/a/1190000027078266#item-9
+
+在路由的配置文件src/router/idnex.js中，引入request，并在路由全局前置守卫中执行clearPendingPool方法：
+```
+
+import { request } from '@/plugins/axios/index'
+
+// 路由全局前置守卫
+router.beforeEach((to, from, next) => {
+    // 路由变化时取消当前所有非全局的pending状态的请求
+    request.clearPendingPool()
+    next()
+})
+```
+
+到这里就实现了路由切换取消pending状态的请求。可以通过两种方式指定某些api不被取消：
+
+执行clearPendingPool时传入一个白名单列表：
+const globalApi = [
+    '/global/banner',
+    '/global/activity'
+]
+request.clearPendingPool(globalApi)
+发起请求的时候携带global参数，默认为false：
+this.$request.get('/global/banner',{
+    params:{page: 1},
+    global: true
+})
+
+this.$request.post('/user/login',{
+    name: 'xxx',
+    pwd:'123456'
+},{
+    global:  true
+})
+
+根目录下新建一个src/api/index.js文件：
+
+```
+/**api管理页面
+ * apiMap: 统一管理所有api地址、对应的请求方式及自定义别名
+ * 导出一个对象requestMap，属性名为apiMap中定义的别名，也就是调用时的名称，值为实际请求方法
+ * 方法接收两个对象参数，第一个为需要传递的数据，第二个为请求头的配置信息。
+ * 语法： api[alias](paramsOrData, headersConfig)
+ * 第一个参数：如果为put/post/patch方法中的一种，会被转化为data属性；其余则是params
+ * 第二个参数：请求头信息
+ *
+ * let xx = await this.$api.getBanner({ account: '18038018084', psw: '2' })
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' })
+ *
+ * 如果类似post的方法需要通过url后缀形式传递参数，在第二个参数config加上params属性即可：
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' },{ params: {} })
+ *
+ * 自定义请求头信息：
+ * let xx = await this.$api.getBanner({}, {timeout: 1000, headers:{ aaa: 111 }})
+ */
+import { request } from '@/plugins/axios/index'
+// import qs from 'qs'
+// console.log('qs:', qs)
+
+const apiMap = {
+    getBanner: { method: 'get', url: '/home/banner' },
+    login: { method: 'post', url: '/login' }
+}
+
+function injectRequest(apiObj) {
+    const requestMap = {}
+    Object.keys(apiObj).forEach((alias) => {
+        let { method, url, config } = apiObj[alias]
+        method = method.toUpperCase()
+        requestMap[alias] = (dataOrParams = {}, instanceConf = {}) => {
+            const keyName = ['PUT', 'POST', 'PATCH'].includes(method) ? 'data' : 'params'
+            return request({
+                method,
+                url,
+                // [keyName]: method === 'POST' ? qs.stringify(dataOrParams) : dataOrParams,
+                [keyName]: dataOrParams,
+                ...Object.assign(config || {}, instanceConf)
+            })
+        }
+    })
+    return requestMap
+}
+
+export default injectRequest(apiMap)
+
+```
+
+在mains.js中引入并挂载到vue实例：
+
+import Vue from 'vue'
+import api from '@/api/index.js'
+
+Vue.prototype.$api = api
+调用示例：
+
+
+// 请求头信息
+const headersConfig = {
+    timeout: 5000,
+    global: true,
+    headers:{
+        aaa: 'vvv'
+    }
+}
+
+// get请求
+this.$api.getBanner({
+    page: 1,
+})
+// get请求，自定义请求头信息
+this.$api.getBanner({
+    page: 1,
+}, headersConfig)
+
+// post请求
+this.$api.login({
+    account: 'laowang',
+    pwd: 'xxxx'
+})
+
+// post请求，自定义请求头信息
+this.$api.login({
+    account: 'laowang',
+    pwd: 'xxxx'
+}, headersConfig)
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@ -1,8 +1,9 @@
 import { HashRouter as Router, Switch, Redirect, Route } from "react-router-dom"
-import React, { Fragment } from "react"
-
-import Auth from "./Auth"
-import routes, { Loading } from "./route"
+import React, { Fragment, ReactNode } from "react"
+import AuthRoute from "./AuthRoute"
+import routes from "./route"
+import Loading from "./Loading"
+import BaseLayout from "@/layout/base"

 function LoadWrapper(props: any) {
    if (props.isLazy) {
@ -22,22 +23,22 @@ function RouteMap(props: any) {
                const isAuth = !!route.meta?.auth
                if (route.redirect) {
                    return (
-                        <Auth key={index} needAuth={isAuth} path={route.path} exact={exact}>
+                        <AuthRoute key={index} needAuth={isAuth} path={route.path} exact={exact}>
                            <Route key={index} path={route.path} exact={exact}>
                                <Redirect to={route.redirect}></Redirect>
                            </Route>
-                        </Auth>
+                        </AuthRoute>
                    )
                }
                if (route.component) {
                    return (
-                        <Auth key={index} needAuth={isAuth} path={route.path} exact={exact}>
+                        <AuthRoute key={index} needAuth={isAuth} path={route.path} exact={exact}>
                            <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
                                <route.component meta={route.meta}>
                                    {route.children && <RouteMap routes={route.children}></RouteMap>}
                                </route.component>
                            </LoadWrapper>
-                        </Auth>
+                        </AuthRoute>
                    )
                }
            })}
@ -48,7 +49,9 @@ function RouteMap(props: any) {
 export default function AppRouter() {
    return (
        <Router>
-            <RouteMap routes={routes}></RouteMap>
+            <BaseLayout>
+                <RouteMap routes={routes}></RouteMap>
+            </BaseLayout>
        </Router>
    )
-}
+}
--- a/src/router/Auth.tsx
+++ b/src/router/Auth.tsx
@ -1,46 +1,33 @@
-import { Component } from "react"
-// 高阶组件，就是对原来的组件进行封装
-import { Route, NavLink } from "react-router-dom"
+import { Component, ReactNode } from "react"

 interface IProps {
-    needAuth?: boolean
-    path: string
-    exact?: boolean
-    children: any
+    children: ReactNode
 }

 class Auth extends Component<IProps, { isLogin: boolean }> {
    constructor(props: IProps) {
        super(props)
        this.state = {
-            isLogin: false
+            isLogin: false,
        }
    }

    login() {
        this.setState({
-            isLogin: true
+            isLogin: true,
        })
    }

    render() {
-        const { path, needAuth = false, exact = false } = this.props
-        if (!needAuth || (needAuth && this.state.isLogin)) {
-            return (
-                // 如果已经登陆，就直接显示原来的组件
-                <Route exact={exact} path={path}>
-                    {this.props.children}
-                </Route>
-            )
+        if (this.state.isLogin) {
+            return <>{this.props.children}</>
        }
        return (
            <div>
-                {/* <NavLink to="/login">你还有没有登陆好吧！</NavLink> */}
                <div onClick={() => this.setState({ isLogin: true })}>你还有没有登陆好吧！</div>
-                {/* <Redirect to={{ pathname: '/login', state: { from: { path }} }} > </Redirect> */}
            </div>
        )
    }
 }

-export default Auth
+export default Auth
--- a/src/router/AuthRoute.tsx
+++ b/src/router/AuthRoute.tsx
@ -0,0 +1,46 @@
+import { Component } from "react"
+// 高阶组件，就是对原来的组件进行封装
+import { Route } from "react-router-dom"
+
+interface IProps {
+    needAuth?: boolean
+    path: string
+    exact?: boolean
+    children: any
+}
+
+class Auth extends Component<IProps, { isLogin: boolean }> {
+    constructor(props: IProps) {
+        super(props)
+        this.state = {
+            isLogin: false
+        }
+    }
+
+    login() {
+        this.setState({
+            isLogin: true
+        })
+    }
+
+    render() {
+        const { path, needAuth = false, exact = false } = this.props
+        if (!needAuth || (needAuth && this.state.isLogin)) {
+            return (
+                // 如果已经登陆，就直接显示原来的组件
+                <Route exact={exact} path={path}>
+                    {this.props.children}
+                </Route>
+            )
+        }
+        return (
+            <div>
+                {/* <NavLink to="/login">你还有没有登陆好吧！</NavLink> */}
+                <div onClick={() => this.setState({ isLogin: true })}>你还有没有登陆好吧！</div>
+                {/* <Redirect to={{ pathname: '/login', state: { from: { path }} }} > </Redirect> */}
+            </div>
+        )
+    }
+}
+
+export default Auth
--- a/src/router/Loading.tsx
+++ b/src/router/Loading.tsx
@ -0,0 +1,51 @@
+import { createRef, ReactNode, useEffect, useState } from "react"
+import styled from "styled-components"
+
+interface IProps {}
+
+const LoadingComp = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #00000033;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    &:after {
+        content: "";
+        animation: aa 1.2s ease-in infinite;
+    }
+    @keyframes aa {
+        0% {
+            content: "";
+        }
+
+        25% {
+            content: ".";
+        }
+
+        50% {
+            content: "..";
+        }
+
+        100% {
+            content: "...";
+        }
+    }
+`
+
+export default function Loading(props: IProps): ReactNode {
+    const [show, setShow] = useState(false)
+    useEffect(() => {
+        const timeId = setTimeout(() => {
+            setShow(true)
+        }, 800)
+        return () => {
+            clearTimeout(timeId)
+        }
+    }, [])
+    return <>{show && <LoadingComp>加载中</LoadingComp>}</>
+}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,6 +1,6 @@
 import { useLocation } from "react-router-dom"
 import allRoutes from "./route"
-import Page404 from "@/viewsSys/404/Page404"
+import Page404 from "@/viewsSys/404"

 export function foundRoute(route: any, name: string, arrIndex?: number[]): any {
    if (!arrIndex) {
@ -67,4 +67,4 @@ export default function useRoute() {
        }
    }
    return [curA, curB]
-}
+}
--- a/src/router/route.tsx
+++ b/src/router/route.tsx
@ -1,9 +1,7 @@
-import Page404 from "@/viewsSys/404/Page404"
+import Page404 from "@/viewsSys/404"

 import { lazy } from "react"

-export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
-
 /**
 * 延时加载，示例：
 * lazy(delay(() => import("@/views/Project"), 2000))
@ -31,13 +29,19 @@ const routesArray = [
        path: "/",
        exact: true,
        root: true,
-        redirect: "/project",
+        redirect: "/home",
+    },
+    {
+        path: "/home",
+        component: lazy(() => import("@/views/Home")),
+        exact: false,
+        // loading: () => <Loading color="blue"></Loading>,
+        root: true,
    },
    {
        path: "/project",
        component: lazy(() => import("@/views/Project")),
        exact: false,
-        loading: () => <Loading color="blue"></Loading>,
        root: true,
        meta: {
            auth: false,
@ -47,19 +51,17 @@ const routesArray = [
                path: "/project/child",
                component: lazy(() => import("@/views/Child")),
                exact: true,
-                loading: () => <Loading color="blue"></Loading>,
                children: [],
                meta: {
                    auth: true,
                },
-            }
+            },
        ],
    },
    {
-        path: "/playground",
-        component: lazy(() => import("@/views/PlayGround")),
+        path: "/about",
+        component: lazy(() => import("@/views/About")),
        exact: true,
-        loading: () => <Loading color="blue"></Loading>,
        root: true,
        children: [],
    },
--- a/src/views/About.tsx
+++ b/src/views/About.tsx
@ -0,0 +1,18 @@
+import withPage from "@/base/withPage";
+import { Button, Dialog, DialogBody, DialogFooter } from "@blueprintjs/core";
+import { useCallback, useState } from "react";
+
+function About() {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOverlay = useCallback(() => setIsOpen(open => !open), [setIsOpen]);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    return <>
+        <Button text="点击打开美丽的按钮" onClick={toggleOverlay} />
+        <Dialog isOpen={isOpen} title="关于我" icon="info-sign" onClose={handleClose}>
+            <DialogBody>{/* body contents here */}</DialogBody>
+            <DialogFooter actions={<Button intent="primary" text="关闭" onClick={handleClose} />} />
+        </Dialog>
+    </>
+}
+
+export default withPage(About)
--- a/src/views/Child.tsx
+++ b/src/views/Child.tsx
@ -1,15 +1,10 @@
 import { Button, Dialog, DialogBody, DialogFooter } from "@blueprintjs/core";
 import { useCallback, useState } from "react";

-export default function Child() {
-    const [isOpen, setIsOpen] = useState(false);
-    const toggleOverlay = useCallback(() => setIsOpen(open => !open), [setIsOpen]);
-    const handleClose = useCallback(() => setIsOpen(false), []);
+function Child() {
    return <>
-        <Button text="点击打开美丽的按钮" onClick={toggleOverlay} />
-        <Dialog isOpen={isOpen} title="通知" icon="info-sign" onClose={handleClose}>
-            <DialogBody>{/* body contents here */}</DialogBody>
-            <DialogFooter actions={<Button intent="primary" text="关闭" onClick={handleClose} />} />
-        </Dialog>
+        <Button text="点击打开美丽的按钮"/>
    </>
-}
+}
+
+export default Child
--- a/src/views/Home/index.md
+++ b/src/views/Home/index.md
@ -0,0 +1,7 @@
+
+## asda
+
+*React-Markdown* is **Awesome**
+```
+   sads
+```
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@ -0,0 +1,52 @@
+import withPage from "@/base/withPage"
+import { useHistory } from "react-router-dom"
+import styled from "styled-components"
+import ReactMarkdown from "react-markdown"
+import MdText from "./index.md?raw"
+
+const Title = styled.h1`
+    font-size: 1.5em;
+    text-align: center;
+    color: #bf4f74;
+`
+
+const Wrapper = styled.section`
+    padding: 4em;
+    background: papayawhip;
+`
+
+export default withPage(function Project({ children }) {
+    const router = useHistory()
+    function toChild() {
+        router.push("/project/child")
+    }
+    return (
+        <>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <Wrapper>
+                <Title>HOME</Title>
+            </Wrapper>
+            <ReactMarkdown>{MdText}</ReactMarkdown>
+            <div>
+                <div onClick={toChild} style={{ height: "200px" }}>
+                    vaas
+                </div>
+                {children}
+            </div>
+        </>
+    )
+})
--- a/src/views/PlayGround.tsx
+++ b/src/views/PlayGround.tsx
@ -1,6 +1,11 @@
+import withPage from "@/base/withPage"

-export default function PlayGround() {
-    return <>
-        <div>PlayGround</div>
-    </>
-}
+function PlayGround() {
+    return (
+        <>
+            <div>PlayGround</div>
+        </>
+    )
+}
+
+export default withPage(PlayGround)
--- a/src/views/Project.tsx
+++ b/src/views/Project.tsx
@ -1,13 +1,34 @@
+import withPage from "@/base/withPage"
+import { useHistory } from "react-router-dom"
+import styled from "styled-components"

-export default function Project(props: any) {
-    console.log(props);
+const Title = styled.h1`
+    font-size: 1.5em;
+    text-align: center;
+    color: #bf4f74;
+`

-    return <>
-        <div>
-            Project
+const Wrapper = styled.section`
+    padding: 4em;
+    background: papayawhip;
+`
+
+export default withPage(function Project({ children }) {
+    const router = useHistory()
+    function toChild() {
+        router.push("/project/child")
+    }
+    return (
+        <>
+            <Wrapper>
+                <Title>Hello World!</Title>
+            </Wrapper>
            <div>
-                {props?.children}
+                <div onClick={toChild} style={{ height: "200px" }}>
+                    vaas
+                </div>
+                {children}
            </div>
-        </div>
-    </>
-}
+        </>
+    )
+})
--- a/src/viewsSys/404.tsx
+++ b/src/viewsSys/404.tsx
@ -0,0 +1,12 @@
+import { LeftIn } from "@/effect"
+
+export default function Page404() {
+    return (
+        <div className="h-1/1 flex" style={{display: "flex",alignItems: "center", justifyContent: "center", height: "100%"}}>
+            <LeftIn className="m-auto">
+                404
+                {/* <img className="p-40px" src="static/404.jpg" alt="" /> */}
+            </LeftIn>
+        </div>
+    )
+}
--- a/src/viewsSys/404/Page404.tsx
+++ b/src/viewsSys/404/Page404.tsx
@ -1,11 +0,0 @@
-import { LeftIn } from "@/effect"
-
-export default function Page404() {
-    return (
-        <div className="h-1/1 flex">
-            <LeftIn className="m-auto">
-                <img className="p-40px" src="static/404.jpg" alt="" />
-            </LeftIn>
-        </div>
-    )
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,13 +1,13 @@
-import { defineConfig } from 'vite'
-import { join } from 'path'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite"
+import { join } from "path"
+import react from "@vitejs/plugin-react-swc"

 // https://vite.dev/config/
 export default defineConfig({
-  resolve: {
-    alias: {
-      "@": join(__dirname, "src"),
+    resolve: {
+        alias: {
+            "@": join(__dirname, "src"),
+        },
    },
-  },
-  plugins: [react()],
+    plugins: [react()],
 })