topuser
/
vite-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add

master
npmrun 4 years ago
parent
d49615d64a
commit
ddfc3332db
6 changed files with 64 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/AppRouter.tsx
  2. 14
      src/assets/style/common.scss
  3. 17
      src/plugins/pageHoc/index.tsx
  4. 3
      src/route.tsx
  5. 54
      src/views/Home/Header.tsx
  6. 50
      src/views/Home/index.tsx

10
src/AppRouter.tsx
View File

@ -13,8 +13,6 @@ function RouteMap(props: any) {
return ( return (
<Switch> <Switch>
{routes.map((route, index) => { {routes.map((route, index) => {
console.log(route.path, route.exact)
const { exact = false } = route const { exact = false } = route
if (route.redirect) { if (route.redirect) {
return ( return (
@ -26,7 +24,7 @@ function RouteMap(props: any) {
if (route.component) { if (route.component) {
return ( return (
<Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}> <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> </Auth>
) )
} }
@ -40,15 +38,11 @@ export default function () {
return ( return (
<Router> <Router>
{/* <Switch> */}
<Layout <Layout
render={() => { render={() => {
return ( return <RouteMap routes={routes}></RouteMap>
<RouteMap routes={routes}></RouteMap>
)
}} }}
></Layout> ></Layout>
{/* </Switch> */}
</Router> </Router>
) )
} }

14
src/assets/style/common.scss
View File

@ -8,13 +8,13 @@ textarea {
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif; font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
} }
// body{ body{
// background-image: url("@/assets/images/0.jpg"); background-image: url("@/assets/images/0.jpg");
// background-attachment: fixed; background-attachment: fixed;
// background-position: center top 36px; background-position: center top 36px;
// background-repeat: no-repeat; background-repeat: no-repeat;
// background-size: cover; background-size: cover;
// } }
a { a {
// color: initial; // color: initial;
display: inline-block; display: inline-block;

17
src/plugins/pageHoc/index.tsx
View File

@ -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) { export default function (options: any) {
return (WrappedComponent: any) => { return (WrappedComponent: any) => {
const { const {
path, // 页面路径 path, // 页面路径
} = options; } = options
class HOC extends React.Component { class HOC extends React.Component {
constructor(props: any) { constructor(props: any) {
super(props); super(props)
} }
componentDidMount() {} componentDidMount() {}
componentWillUnmount() {} componentWillUnmount() {}
render() { render() {
return <WrappedComponent {...options} {...this.props} />; return <WrappedComponent {...options} {...this.props} />
} }
} }
pageList.push([{ ...options, Component: HOC }]); pageList.push([{ ...options, Component: HOC }])
console.log(pageList); return HOC
return HOC; }
};
} }

3
src/route.tsx
View File

@ -11,7 +11,6 @@ export default [
{ {
path: "/about", path: "/about",
component: About, component: About,
exact: false,
meta: { meta: {
auth: true, auth: true,
}, },
@ -19,14 +18,12 @@ export default [
{ {
path: "/about/test", path: "/about/test",
component: Test, component: Test,
exact: false,
}, },
], ],
}, },
{ {
path: "/home", path: "/home",
component: Home, component: Home,
exact: true,
meta: { meta: {
auth: false, auth: false,
}, },

54
src/views/Home/Header.tsx
View File

@ -1,28 +1,28 @@
import React, {useState} from "react"; import React, { useState } from "react"
export default () => { export default () => {
const title = "秦时明月"; const title = "美女管理后台"
const [leftMenuList, setLeftMenuList] = useState<any[]>([ const [leftMenuList, setLeftMenuList] = useState<any[]>([
{title: "首页", path: "/"}, { title: "首页", path: "/" },
{title: "角色", children: [{title: "月儿", path: "/about"}]}, { title: "角色", children: [{ title: "月儿", path: "/about" }] },
]); ])
const [rightMenuList, setRightMenuList] = useState<any[]>([ const [rightMenuList, setRightMenuList] = useState<any[]>([
{ {
title: "登录/注册", title: "登录/注册",
click: true click: true,
}, },
]); ])
function onLeftClick(e: any, menu: any, allMenu: any) { function onLeftClick(e: any, menu: any, allMenu: any) {
if (menu.click || !menu.path) { if (menu.click || !menu.path) {
e.preventDefault(); e.preventDefault()
} }
} }
function onRightClick(e: any, menu: any, allMenu: any) { function onRightClick(e: any, menu: any, allMenu: any) {
if (menu.click || !menu.path) { if (menu.click || !menu.path) {
e.preventDefault(); e.preventDefault()
} }
} }
@ -30,65 +30,57 @@ export default () => {
<div className=""> <div className="">
<div className="shadow bg-white h-12 leading-12 fixed top-0 left-0 right-0"> <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="container h-full clearfix mx-auto">
<div className="h-full float-left cursor-pointer text-size-25px flex items-center"> <div className="h-full float-left cursor-pointer text-size-25px flex items-center">{title}</div>
{title}
</div>
<ul className="h-full float-left ml-10"> <ul className="h-full float-left ml-10">
{leftMenuList.map((menu, index) => { {leftMenuList.map((menu, index) => {
return ( return (
<li className="h-full float-left group relative" key={index}> <li className="h-full float-left group relative" key={index}>
<a <a
href={menu.path ? menu.path : '#'} href={menu.path ? menu.path : "#"}
onClick={(e) => onLeftClick(e, menu, leftMenuList)} 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" className="h-full px-5 hover:(bg-cool-gray-200 text-black) text-gray-400 text-size-14px flex items-center"
> >
{menu.title} {menu.title}
</a> </a>
{menu.children && menu.children.length && ( {menu.children && menu.children.length && (
<ul <ul className="absolute overflow-hidden transition-all duration-150 max-h-0 group-hover:max-h-500px left-0 top-full shadow">
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) => { {menu.children.map((subMenu: any, jndex: number) => {
return ( return (
<li key={jndex} className="float-left relative"> <li key={jndex} className="float-left relative">
<a <a
href={subMenu.path ? subMenu.path : '#'} href={subMenu.path ? subMenu.path : "#"}
onClick={(e) => onClick={e => onLeftClick(e, subMenu, leftMenuList)}
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" className="h-12 px-5 hover:(bg-cool-gray-200 text-black) text-gray-400 text-size-14px flex items-center"
> >
{subMenu.title} {subMenu.title}
</a> </a>
</li> </li>
); )
})} })}
</ul> </ul>
)} )}
</li> </li>
); )
})} })}
</ul> </ul>
<ul className="float-right h-full"> <ul className="float-right h-full">
{rightMenuList.map((menu, index) => { {rightMenuList.map((menu, index) => {
return ( return (
<li <li key={index} className="h-full float-left relative cursor-pointer">
key={index}
className="h-full float-left relative cursor-pointer"
>
<a <a
href={menu.path ? menu.path : '#'} href={menu.path ? menu.path : "#"}
className="h-full px-5 text-size-14px flex items-center" 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} {menu.title}
</a> </a>
</li> </li>
); )
})} })}
</ul> </ul>
</div> </div>
</div> </div>
<div className="h-12"></div> <div className="h-12"></div>
</div> </div>
); )
}; }

50
src/views/Home/index.tsx
View File

@ -1,13 +1,17 @@
import {addTodo, removeTodo} from "@/store/action/todo"; import { addTodo, removeTodo } from "@/store/action/todo"
import PropTypes from 'prop-types' import React, { FormEvent, useRef, useContext } from "react"
import React, {FormEvent, useRef} from "react"; import { connect } from "react-redux"
import {connect} from "react-redux"; import Header from "./Header"
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 function Home(props: HomeProps) {
const inputRef = useRef<HTMLInputElement>(null); const { todo, add, remove } = props
const inputRef = useRef<HTMLInputElement>(null)
function addOne(e: FormEvent) { function addOne(e: FormEvent) {
e.preventDefault() e.preventDefault()
@ -24,14 +28,18 @@ function Home(props: any) {
<div> <div>
<div className="bg-white min-h-100vh"> <div className="bg-white min-h-100vh">
<div className="container clearfix mx-auto h-500px"> <div className="container clearfix mx-auto h-500px">
<form onSubmit={(e) => addOne(e)}> <form onSubmit={e => addOne(e)}>
<input ref={inputRef} type="text"/> <input ref={inputRef} type="text" />
<button type="submit">添加</button> <button type="submit">添加</button>
</form> </form>
{todo {todo.map((v: ITodo) => {
.map((v: ITodo) => { return (
return <p onClick={() => remove(v.id)} key={v.id}>{v.text}{v.id}</p>; <p onClick={() => remove(v.id)} key={v.id}>
})} {v.text}
{v.id}
</p>
)
})}
</div> </div>
</div> </div>
<div className="min-h-100vh"></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) => { const mapStateToProps = (state: any) => {
console.log(state)
return { return {
todo: state.todo todo: state.todo,
} }
} }
@ -70,4 +68,4 @@ const mapDispatchToProps = (dispatch: any) => ({
remove: (id: string | number) => dispatch(removeTodo(id)), remove: (id: string | number) => dispatch(removeTodo(id)),
}) })
export default connect(mapStateToProps, mapDispatchToProps)(Home); export default connect(mapStateToProps, mapDispatchToProps)(Home)

Write Preview
Loading…
Cancel
Save