Skip to content

Commit ba25d32

Browse files
xpioneerxpioneer
committed
add demo mobx with page
1 parent 862fed4 commit ba25d32

File tree

3 files changed

+159
-3
lines changed

3 files changed

+159
-3
lines changed

‎src/components/shared/sider.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,12 @@ const MenuList = [{
4545
key: '5-2', title: '统计图', path: '/home/lottery-chart', icon: 'bar-chart'
4646
}]
4747
},{
48-
key:'99', title:'Demo', path: '/home/demos', icon:'bulb'
48+
key:'99', title:'Demo', icon:'bulb',
49+
children: [{
50+
key: '99-0', title: '示例', path: '/home/demos', icon:'experiment'
51+
},{
52+
key: '99-1', title: '示例mobx', path: '/home/demo-mobx', icon:'experiment'
53+
}]
4954
}]
5055

5156
class SiderComponent extends React.Component<ISiderProps> {
@@ -84,7 +89,10 @@ class SiderComponent extends React.Component<ISiderProps> {
8489
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
8590
{
8691
MenuList.map(m => {
87-
return m.children ? <SubMenu key={m.key} title={<span><Icon type={m.icon} /><span>{m.title}</span></span>}>
92+
return m.children ?
93+
<SubMenu
94+
key={m.key}
95+
title={<span><Icon type={m.icon} /><span>{m.title}</span></span>}>
8896
{
8997
m.children.map(mc => {
9098
return <Item key={mc.key}>
@@ -95,7 +103,8 @@ class SiderComponent extends React.Component<ISiderProps> {
95103
</Item>
96104
})
97105
}
98-
</SubMenu> : <Item key={m.key}>
106+
</SubMenu> :
107+
<Item key={m.key}>
99108
<Link to={m.path}>
100109
<Icon type={m.icon} />
101110
<span>{m.title}</span>

‎src/pages/demo/demoMobx.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import * as React from 'react'
2+
import { observable, action, autorun, runInAction, computed } from 'mobx';
3+
import {inject, observer} from 'mobx-react'
4+
import { Row, Col, Button, Badge, Icon, Form, Input, Select } from 'antd';
5+
6+
const FormItem = Form.Item
7+
const TextArea = Input.TextArea
8+
const Option = Select.Option
9+
10+
const styles = {
11+
block: {
12+
marginBottom: '20px',
13+
boxShadow: 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px',
14+
padding: '10px'
15+
},
16+
flex: {
17+
display: 'flex',
18+
alignItems: 'center'
19+
},
20+
padding: {
21+
padding: '10px 0'
22+
}
23+
}
24+
25+
@observer
26+
export default class DemoMobx extends React.Component<IProps> {
27+
28+
// state = {
29+
// count: 0,
30+
// }
31+
// add = () => {
32+
// this.setState({
33+
// count: ++this.state.count
34+
// })
35+
// }
36+
// dec = () => {
37+
// this.setState({
38+
// count: --this.state.count
39+
// })
40+
// }
41+
42+
@observable count = 66;
43+
44+
@action add = () => { this.count++ }
45+
@action dec = () => { this.count-- }
46+
47+
componentDidMount() {
48+
// console.log($http)
49+
// console.log(this.props)
50+
console.log(this)
51+
}
52+
53+
render(){
54+
// const {count} = this.state
55+
const {count, add, dec} = this
56+
57+
return <div>
58+
<section style={styles.block}>
59+
<h3>mini测试</h3>
60+
<Row style={styles.padding}>
61+
<Col span={24}>
62+
<Button onClick={dec}>
63+
<Icon type="minus" />
64+
</Button>
65+
<Badge count={count} showZero={true}/>
66+
<Button onClick={add}>
67+
<Icon type="plus" />
68+
</Button>
69+
</Col>
70+
</Row>
71+
</section>
72+
73+
{/* <section style={styles.block}>
74+
<h3>接口测试</h3>
75+
<Row style={styles.padding}>
76+
<Col span={24}>
77+
<Form>
78+
<FormItem label="api" labelCol={{span: 4}} wrapperCol={{span: 20}}>
79+
<Row gutter={8}>
80+
<Col span={12}>
81+
<Input placeholder="请输入url" onChange={e => inputApi(e.target.value)} value={apiUrl}/>
82+
</Col>
83+
{
84+
apiType === '/api' ?
85+
<Col span={3}>
86+
<Select value={apiMethod}
87+
onChange={methodChange}>
88+
<Option value="GET">GET</Option>
89+
<Option value="POST">POST</Option>
90+
<Option value="PUT">PUT</Option>
91+
<Option value="DELETE">DELETE</Option>
92+
</Select>
93+
</Col> : ''
94+
}
95+
<Col span={3}>
96+
<Select value={apiType}
97+
onChange={typeChange}>
98+
<Option value="/api">RESTful</Option>
99+
<Option value="/graphql">GraphQL</Option>
100+
</Select>
101+
</Col>
102+
<Col span={6}>
103+
<Button type="primary" onClick={testApi}>发送</Button>
104+
</Col>
105+
</Row>
106+
</FormItem>
107+
<FormItem label="参数(json格式)" labelCol={{span: 4}} wrapperCol={{span: 12}}>
108+
<TextArea rows={6} onChange={e => inputParams(e.target.value)} value={apiParams}/>
109+
</FormItem>
110+
<FormItem label="结果" labelCol={{span: 4}} wrapperCol={{span: 18}}>
111+
<TextArea rows={24} value={apiResult}/>
112+
</FormItem>
113+
</Form>
114+
</Col>
115+
</Row>
116+
</section>
117+
118+
<section style={styles.block}>
119+
<h3>文件上传</h3>
120+
<Row style={styles.padding}>
121+
<Col span={24}>
122+
<Form>
123+
<FormItem label="选择文件" labelCol={{span: 4}} wrapperCol={{span: 20}}>
124+
<Row gutter={8}>
125+
<Col span={12}>
126+
<input type="file" placeholder="请选择文件" onChange={e => fileChange(e)}/>
127+
</Col>
128+
<Col span={6}>
129+
<Button type="primary" onClick={upload}>上传</Button>
130+
<Button onClick={fileChange}>清空</Button>
131+
</Col>
132+
</Row>
133+
</FormItem>
134+
</Form>
135+
</Col>
136+
</Row>
137+
</section>
138+
*/}
139+
</div>
140+
}
141+
}

‎src/routes/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const BallTrend = lazy(() => import( /* webpackChunkName:"ballTrend" */ '@pages/
3232
const BallChart = lazy(() => import( /* webpackChunkName:"ballChart" */ '@pages/lottery/ballChart'))
3333

3434
const Demo = lazy(() => import( /* webpackChunkName:"demo" */ '@pages/demo/demo'))
35+
const DemoMobx = lazy(() => import( /* webpackChunkName:"demo" */ '@pages/demo/demoMobx'))
3536

3637

3738
export const routes: RouteProps[] = [
@@ -165,6 +166,11 @@ export const routes: RouteProps[] = [
165166
exact: true,
166167
component: Demo
167168
},
169+
{
170+
path: '/home/demo-mobx',
171+
exact: true,
172+
component: DemoMobx
173+
},
168174
{
169175
path: '*',
170176
component: NotFound

0 commit comments

Comments
 (0)