TODO: 添加新的功能.
This commit is contained in:
parent
2a6595c9b1
commit
3e96865ee0
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
18
package-lock.json
generated
18
package-lock.json
generated
|
|
@ -2275,7 +2275,7 @@
|
|||
},
|
||||
"@typescript-eslint/eslint-plugin": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.6.1.tgz?cache=0&sync_timestamp=1604339645055&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.6.1.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.6.1.tgz",
|
||||
"integrity": "sha1-mdd+t6AW/VpedJ0sRKfkwxfrfaM=",
|
||||
"requires": {
|
||||
"@typescript-eslint/experimental-utils": "4.6.1",
|
||||
|
|
@ -5349,9 +5349,9 @@
|
|||
}
|
||||
},
|
||||
"eslint": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npm.taobao.org/eslint/download/eslint-7.12.1.tgz?cache=0&sync_timestamp=1603768145986&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint%2Fdownload%2Feslint-7.12.1.tgz",
|
||||
"integrity": "sha1-vZqB+memz9UWVs24iBLOSczsWAE=",
|
||||
"version": "7.13.0",
|
||||
"resolved": "https://registry.npm.taobao.org/eslint/download/eslint-7.13.0.tgz",
|
||||
"integrity": "sha1-fxgBJsDc3vMnv7VLIR14At7MCNo=",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"@eslint/eslintrc": "^0.2.1",
|
||||
|
|
@ -6212,7 +6212,7 @@
|
|||
},
|
||||
"file-entry-cache": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz?cache=0&sync_timestamp=1604832267816&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffile-entry-cache%2Fdownload%2Ffile-entry-cache-5.0.1.tgz",
|
||||
"integrity": "sha1-yg9u+m3T1WEzP7FFFQZcL6/fQ5w=",
|
||||
"requires": {
|
||||
"flat-cache": "^2.0.1"
|
||||
|
|
@ -6308,7 +6308,7 @@
|
|||
},
|
||||
"flat-cache": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz?cache=0&sync_timestamp=1604831838291&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fflat-cache%2Fdownload%2Fflat-cache-2.0.1.tgz",
|
||||
"integrity": "sha1-XSltbwS9pEpGMKMBQTvbwuwIXsA=",
|
||||
"requires": {
|
||||
"flatted": "^2.0.0",
|
||||
|
|
@ -11472,6 +11472,12 @@
|
|||
"resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz",
|
||||
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
|
||||
},
|
||||
"prettier": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/prettier/download/prettier-2.1.2.tgz?cache=0&sync_timestamp=1600215482255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-2.1.2.tgz",
|
||||
"integrity": "sha1-MFBwDa4uTItnxMP2Zs24r0BeHOU=",
|
||||
"dev": true
|
||||
},
|
||||
"pretty-bytes": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npm.taobao.org/pretty-bytes/download/pretty-bytes-5.4.1.tgz",
|
||||
|
|
|
|||
|
|
@ -44,5 +44,12 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.6.1",
|
||||
"@typescript-eslint/parser": "^4.6.1",
|
||||
"eslint": "^7.13.0",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"prettier": "2.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,83 +1,70 @@
|
|||
import React from 'react';
|
||||
import { Button, Layout, Menu } from 'antd';
|
||||
import React from "react";
|
||||
import { Button, Layout, Menu } from "antd";
|
||||
import {
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
LeftCircleFilled,
|
||||
} from '@ant-design/icons';
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
LeftCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
import "./home.css";
|
||||
import ContentTabs from './tabs';
|
||||
import { HashRouter, Link, Redirect, Route, Switch} from 'react-router-dom';
|
||||
import { any } from 'prop-types';
|
||||
|
||||
import ContentTabs from "./tabs";
|
||||
import { HashRouter, Link, Redirect, Route, Switch } from "react-router-dom";
|
||||
import { Console } from "console";
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
class Home extends React.Component {
|
||||
state = {
|
||||
collapsed: false,
|
||||
};
|
||||
state = {
|
||||
collapsed: false,
|
||||
};
|
||||
|
||||
toggle = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
});
|
||||
};
|
||||
toggle = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
});
|
||||
return;
|
||||
};
|
||||
|
||||
render() {
|
||||
var props:any = this.props;
|
||||
const { match } = props;
|
||||
console.log();
|
||||
return (
|
||||
// var props:any = this.props;
|
||||
|
||||
|
||||
render() {
|
||||
const props: any = this.props;
|
||||
const { match } = props;
|
||||
console.log("home");
|
||||
return (
|
||||
// var props:any = this.props;
|
||||
<HashRouter>
|
||||
<Layout className="site-layout">
|
||||
<Header className="header-layout" style={{ padding: 0 }}>
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={["1"]}>
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
<Link to="/tab1">tab 1</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
<Link to="/tab2">tab 2</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
<Link to="/info">nav 3</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Header>
|
||||
|
||||
<Layout className="site-layout">
|
||||
|
||||
<Header className="header-layout" style={{ padding: 0 }}>
|
||||
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1" icon={<UserOutlined />} >
|
||||
<HashRouter>
|
||||
<Link to="/tab1">tab 1</Link>
|
||||
</HashRouter>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
<HashRouter>
|
||||
<Link to="/tab2">tab 2</Link>
|
||||
</HashRouter>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
<HashRouter>
|
||||
<Link to="/info">nav 3</Link>
|
||||
</HashRouter>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Header>
|
||||
|
||||
<Content
|
||||
className="content-layout"
|
||||
>
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route path={`/:id`} component={ContentTabs}></Route>
|
||||
<Route path="/" >
|
||||
<Redirect to="/tab1">...{console.log("tab1 redirect")}</Redirect>
|
||||
</Route>
|
||||
|
||||
{/* <Route path={`/info/:id`} ></Route> */}
|
||||
</Switch>
|
||||
</HashRouter>
|
||||
|
||||
</Content>
|
||||
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
<Content className="content-layout">
|
||||
<Switch>
|
||||
{/* <Route exact path="/content" component={ContentTabs}></Route> */}
|
||||
<Route path="/">
|
||||
<Redirect from="/" to="/tab1">
|
||||
...{console.log("redirect tab1")}
|
||||
</Redirect>
|
||||
<Route path="/:id" component={ContentTabs}></Route>
|
||||
</Route>
|
||||
|
||||
</Switch>
|
||||
</Content>
|
||||
</Layout>
|
||||
</HashRouter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,47 @@
|
|||
import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
|
||||
import { Tabs } from 'antd';
|
||||
import React from 'react';
|
||||
import { AndroidOutlined, AppleOutlined } from "@ant-design/icons";
|
||||
import { Tabs } from "antd";
|
||||
import React from "react";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class ContentTabs extends React.Component {
|
||||
|
||||
render() {
|
||||
const props: any = this.props;
|
||||
|
||||
|
||||
render() {
|
||||
var props:any = this.props;
|
||||
const {location, match} = props;
|
||||
const {state} = location;
|
||||
console.log(props);
|
||||
var key = match.params.id;
|
||||
console.log(key);
|
||||
const { match } = props;
|
||||
// const {state} = location;
|
||||
// console.log(props);
|
||||
const key = match.params.id === undefined ? "tab1" : match.params.id;
|
||||
|
||||
return (
|
||||
<Tabs defaultActiveKey={key} >
|
||||
<TabPane
|
||||
tab={<span><AppleOutlined />Tab 1</span>}
|
||||
key="tab1"
|
||||
>
|
||||
Tab 1
|
||||
</TabPane>
|
||||
<TabPane tab={<span><AndroidOutlined />Tab 2</span>}
|
||||
key="tab2"
|
||||
>
|
||||
Tab 2
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
console.log(key);
|
||||
|
||||
return (
|
||||
<Tabs defaultActiveKey={key} key={key}>
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<AppleOutlined />
|
||||
Tab 1
|
||||
</span>
|
||||
}
|
||||
key="tab1"
|
||||
>
|
||||
Tab 1
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<AndroidOutlined />
|
||||
Tab 2
|
||||
</span>
|
||||
}
|
||||
key="tab2"
|
||||
>
|
||||
Tab 2
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ContentTabs;
|
||||
export default ContentTabs;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,28 @@
|
|||
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Route, Switch, HashRouter, Redirect, Link } from 'react-router-dom';
|
||||
import React from "react";
|
||||
import {
|
||||
BrowserRouter,
|
||||
Route,
|
||||
Switch,
|
||||
HashRouter,
|
||||
Redirect,
|
||||
Link,
|
||||
} from "react-router-dom";
|
||||
|
||||
|
||||
import Home from '../pages/home';
|
||||
import Home from "../pages/home";
|
||||
|
||||
class HomeRouter extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" >
|
||||
|
||||
<Redirect to={{pathname: "/content"}} >
|
||||
...{console.log("redirect")}
|
||||
</Redirect>
|
||||
|
||||
</Route>
|
||||
<Route path="/content" component={Home}>
|
||||
|
||||
</Route>
|
||||
|
||||
|
||||
|
||||
{/* <Route exact path="/home" component={Home} ></Route> */}
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/content">...{console.log("redirect")}</Redirect>
|
||||
</Route>
|
||||
<Route exact path="/content" component={Home}></Route>
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HomeRouter;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user