add

4 years ago · ddfc3332db
6 changed files with 64 additions and 84 deletions
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@ -13,8 +13,6 @@ function RouteMap(props: any) {
  return (
    <Switch>
      {routes.map((route, index) => {
-        console.log(route.path, route.exact)
-
        const { exact = false } = route
        if (route.redirect) {
          return (
@ -26,7 +24,7 @@ function RouteMap(props: any) {
        if (route.component) {
          return (
            <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
-              <route.component>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
+              <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
            </Auth>
          )
        }
@ -40,15 +38,11 @@ export default function () {

  return (
    <Router>
-      {/* <Switch> */}
      <Layout
        render={() => {
-          return (
-            <RouteMap routes={routes}></RouteMap>
-          )
+          return <RouteMap routes={routes}></RouteMap>
        }}
      ></Layout>
-      {/* </Switch> */}
    </Router>
  )
 }
--- a/src/assets/style/common.scss
+++ b/src/assets/style/common.scss
@ -8,13 +8,13 @@ textarea {
  font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
 }

-// body{
-//   background-image: url("@/assets/images/0.jpg");
-//   background-attachment: fixed;
-//   background-position: center top 36px;
-//   background-repeat: no-repeat;
-//   background-size: cover;
-// }
+body{
+  background-image: url("@/assets/images/0.jpg");
+  background-attachment: fixed;
+  background-position: center top 36px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 a {
  // color: initial;
  display: inline-block;
--- a/src/plugins/pageHoc/index.tsx
+++ b/src/plugins/pageHoc/index.tsx
@ -1,28 +1,27 @@
-import React, { Component } from "react";
+import React, { Component } from "react"

-export const pageList:any[] = [];
+export const pageList: any[] = []

 export default function (options: any) {
  return (WrappedComponent: any) => {
    const {
      path, // 页面路径
-    } = options;
+    } = options

    class HOC extends React.Component {
      constructor(props: any) {
-        super(props);
+        super(props)
      }
      componentDidMount() {}

      componentWillUnmount() {}

      render() {
-        return <WrappedComponent {...options} {...this.props} />;
+        return <WrappedComponent {...options} {...this.props} />
      }
    }

-    pageList.push([{ ...options, Component: HOC }]);
-    console.log(pageList);
-    return HOC;
-  };
+    pageList.push([{ ...options, Component: HOC }])
+    return HOC
+  }
 }
--- a/src/route.tsx
+++ b/src/route.tsx
@ -11,7 +11,6 @@ export default [
  {
    path: "/about",
    component: About,
-    exact: false,
    meta: {
      auth: true,
    },
@ -19,14 +18,12 @@ export default [
      {
        path: "/about/test",
        component: Test,
-        exact: false,
      },
    ],
  },
  {
    path: "/home",
    component: Home,
-    exact: true,
    meta: {
      auth: false,
    },
--- a/src/views/Home/Header.tsx
+++ b/src/views/Home/Header.tsx
@ -1,28 +1,28 @@
-import React, {useState} from "react";
+import React, { useState } from "react"

 export default () => {
-  const title = "秦时明月";
+  const title = "美女管理后台"
  const [leftMenuList, setLeftMenuList] = useState<any[]>([
-    {title: "首页", path: "/"},
-    {title: "角色", children: [{title: "月儿", path: "/about"}]},
-  ]);
+    { title: "首页", path: "/" },
+    { title: "角色", children: [{ title: "月儿", path: "/about" }] },
+  ])

  const [rightMenuList, setRightMenuList] = useState<any[]>([
    {
      title: "登录/注册",
-      click: true
+      click: true,
    },
-  ]);
+  ])

  function onLeftClick(e: any, menu: any, allMenu: any) {
    if (menu.click || !menu.path) {
-      e.preventDefault();
+      e.preventDefault()
    }
  }

  function onRightClick(e: any, menu: any, allMenu: any) {
    if (menu.click || !menu.path) {
-      e.preventDefault();
+      e.preventDefault()
    }
  }

@ -30,65 +30,57 @@ export default () => {
    <div className="">
      <div className="shadow bg-white h-12 leading-12 fixed top-0 left-0 right-0">
        <div className="container h-full clearfix mx-auto">
-          <div className="h-full float-left cursor-pointer text-size-25px flex items-center">
-            {title}
-          </div>
+          <div className="h-full float-left cursor-pointer text-size-25px flex items-center">{title}</div>
          <ul className="h-full float-left ml-10">
            {leftMenuList.map((menu, index) => {
              return (
                <li className="h-full float-left group relative" key={index}>
                  <a
-                    href={menu.path ? menu.path : '#'}
-                    onClick={(e) => onLeftClick(e, menu, leftMenuList)}
+                    href={menu.path ? menu.path : "#"}
+                    onClick={e => onLeftClick(e, menu, leftMenuList)}
                    className="h-full px-5 hover:(bg-cool-gray-200 text-black) text-gray-400 text-size-14px flex items-center"
                  >
                    {menu.title}
                  </a>
                  {menu.children && menu.children.length && (
-                    <ul
-                      className="absolute overflow-hidden transition-all duration-150 max-h-0 group-hover:max-h-500px left-0 top-full shadow">
+                    <ul className="absolute overflow-hidden transition-all duration-150 max-h-0 group-hover:max-h-500px left-0 top-full shadow">
                      {menu.children.map((subMenu: any, jndex: number) => {
                        return (
                          <li key={jndex} className="float-left relative">
                            <a
-                              href={subMenu.path ? subMenu.path : '#'}
-                              onClick={(e) =>
-                                onLeftClick(e, subMenu, leftMenuList)
-                              }
+                              href={subMenu.path ? subMenu.path : "#"}
+                              onClick={e => onLeftClick(e, subMenu, leftMenuList)}
                              className="h-12 px-5 hover:(bg-cool-gray-200 text-black) text-gray-400 text-size-14px flex items-center"
                            >
                              {subMenu.title}
                            </a>
                          </li>
-                        );
+                        )
                      })}
                    </ul>
                  )}
                </li>
-              );
+              )
            })}
          </ul>
          <ul className="float-right h-full">
            {rightMenuList.map((menu, index) => {
              return (
-                <li
-                  key={index}
-                  className="h-full float-left relative cursor-pointer"
-                >
+                <li key={index} className="h-full float-left relative cursor-pointer">
                  <a
-                    href={menu.path ? menu.path : '#'}
+                    href={menu.path ? menu.path : "#"}
                    className="h-full px-5 text-size-14px flex items-center"
-                    onClick={(e) => onRightClick(e, menu, rightMenuList)}
+                    onClick={e => onRightClick(e, menu, rightMenuList)}
                  >
                    {menu.title}
                  </a>
                </li>
-              );
+              )
            })}
          </ul>
        </div>
      </div>
      <div className="h-12"></div>
    </div>
-  );
-};
+  )
+}
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@ -1,13 +1,17 @@
-import {addTodo, removeTodo} from "@/store/action/todo";
-import PropTypes from 'prop-types'
-import React, {FormEvent, useRef} from "react";
-import {connect} from "react-redux";
-import Header from "./Header";
+import { addTodo, removeTodo } from "@/store/action/todo"
+import React, { FormEvent, useRef, useContext } from "react"
+import { connect } from "react-redux"
+import Header from "./Header"

-function Home(props: any) {
+export interface HomeProps {
+  add(text: string): void
+  todo: ITodo[]
+  remove(id: number): void
+}

-  const {todo, add, remove} = props
-  const inputRef = useRef<HTMLInputElement>(null);
+function Home(props: HomeProps) {
+  const { todo, add, remove } = props
+  const inputRef = useRef<HTMLInputElement>(null)

  function addOne(e: FormEvent) {
    e.preventDefault()
@ -24,14 +28,18 @@ function Home(props: any) {
      <div>
        <div className="bg-white min-h-100vh">
          <div className="container clearfix mx-auto  h-500px">
-            <form onSubmit={(e) => addOne(e)}>
-              <input ref={inputRef} type="text"/>
+            <form onSubmit={e => addOne(e)}>
+              <input ref={inputRef} type="text" />
              <button type="submit">添加</button>
            </form>
-            {todo
-              .map((v: ITodo) => {
-                return <p onClick={() => remove(v.id)} key={v.id}>{v.text}{v.id}</p>;
-              })}
+            {todo.map((v: ITodo) => {
+              return (
+                <p onClick={() => remove(v.id)} key={v.id}>
+                  {v.text}
+                  {v.id}
+                </p>
+              )
+            })}
          </div>
        </div>
        <div className="min-h-100vh"></div>
@ -49,19 +57,9 @@ function Home(props: any) {
  )
 }

-Home.propTypes = {
-  todo: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    text: PropTypes.string.isRequired
-  }).isRequired).isRequired,
-  add: PropTypes.func.isRequired,
-  remove: PropTypes.func.isRequired
-}
-
 const mapStateToProps = (state: any) => {
-  console.log(state)
  return {
-    todo: state.todo
+    todo: state.todo,
  }
 }

@ -70,4 +68,4 @@ const mapDispatchToProps = (dispatch: any) => ({
  remove: (id: string | number) => dispatch(removeTodo(id)),
 })

-export default connect(mapStateToProps, mapDispatchToProps)(Home);
+export default connect(mapStateToProps, mapDispatchToProps)(Home)