Internship's first live, that looks Ant Design of the official website to learn, and then to write Ant Design a fake Microsoft ToDo.
Not teaching purposes, just record it.
1, learning
Ant Design is a component library, you want to be used, at least to know React and ES6.
Ant Design's official website: https://ant.design/index-cn
You can take a look at the official website of practical teaching: https://www.yuque.com/ant-design/course
Ant Design Pro a more complete open source project, see the inside of a lot of things you can learn: https://pro.ant.design/index-cn
To be honest, the first contact with Ant Design really look ignorant force.
At that time I became aware of the tip is no longer learning to learn html + css + javascript.
The first time I saw NodeJS, React ... (ah, the original dish I so real thing)
In fact, their own learning process is to look at the actual teaching, according to the teaching of the things to write again, to understand a few more key points inside.
Layout and routing, model, props and states.
2, task
Imitative Microsoft ToDo: http://www.gxtodo.com/web/
Ideal look like this:
2.1 Microsoft ToDo task interface
The reality is like this:
2.1 write their own copy of Microsoft ToDo task interface
Some functions are not realized, such as logging, as well as overtime, map interface. In fact, a lot (cai) is.
3, analysis
Ideas:
The main layout and routing wrote the first, then you can achieve specific content.
The entire project will need data are used to mock.
1) layout
On the left navigation bar is narrow, mainly avatar, tasks, notes, projects, locations, tags, search (e-mail and ... did not write)
On the right is the content. Distribution format of the content is above the title or time, the following content.
2) Function
Tasking capabilities:
①上部分是任务时间（根据时间展示任务）、任务展示方式（四象限或时间轴）、任务完成（已完成、未完成、全部）、添加新任务（就是那个 +）
②下部分默认四象限展示4种不同紧急程度的任务、点击任务前面的圆圈可以完成任务、单击任务名右边弹出任务详细，可修改删除。
③新增表单中项目、标签、位置提供已有的。
3.1 任务界面新增功能
便签功能：
①上部分标题
②下部分输入内容然后组合键生成右边的小便签
③小便签提供一个删除按钮
3.2 便签界面
项目功能：
①上部分一个tab和添加项目功能
②下部分列出已有项目（项目里的任务数和完成数），点击项目会从右边弹出项目中的任务。
3.3 项目界面
地点、标签功能与项目类似，但是比项目简单一些。
搜索功能只做了简单的根据任务名搜索。
4、实现
由于代码比较多，而且我写的挺乱的，所以取部分功能的代码贴出来。
贴的代码中，主要是组件的使用方式，方法没有贴上去。
1）配置布局和路由
const plugins = [
['umi-plugin-react', {
antd: true,
dva: true,
}],
];
export default {
plugins,
routes: [
{
path: '/',
component: '../layouts/BaseLayout',
routes: [
{ path: '/', component: './task/Task' },
{ path: '/task', component: './task/Task' },
{ path: '/note', component: './note/Note' },
{ path: '/project', component: './project/Project' },
{ path: '/tag', component: './tag/Tag' },
{ path: '/position', component: './position/Position' },
{ path: '/search', component: './search/SearchText' },
]
}
],
};
布局方面：
SiderMenu是自己写的侧边栏组件，这里children会默认加载路由里component中的内容。
render() {
const { children } = this.props;
return (
<div>
<Layout>
<SiderMenu />
<Layout>
<Content>{children}</Content>
</Layout>
</Layout>
</div>
);
};
2）任务功能
这个功能，本来是写在一个js文件中的，但是参考了 Ant Design Pro 后，把一个js拆开了，写了几个组件。
render() {
const { cardWidth, visible, buttonType, showType, radioChecked, showDate, } = this.state;
const { taskAll, position, tag, project, form } = this.props;
const { level1, level2, level3, level4, task, taskChoice } = taskAll;
const task_level = [level1, level2, level3, level4];
const otherField = {
project: project,
tag: tag,
position: position,
radioChecked: radioChecked,
};
// 头部标题
const cardTitle = (
<Suspense fallback={null}>
<CardTitle
showDate={showDate}
buttonType={buttonType}
handleChangeButton={this.handleChangeButton}
/>
</Suspense>
);
// 陈列方式菜单
const Menu_how = (
<Menu>
<Menu.Item key='四象限' onClick={this.handleShow}>四象限{showType === '四象限' ? <Icon type='check' /> : null}</Menu.Item>
<Menu.Item key='时间轴' onClick={this.handleShow}>时间轴{showType === '时间轴' ? <Icon type='check' /> : null}</Menu.Item>
</Menu>
);
// 陈列类型菜单
const Menu_show = (
<Menu>
<Menu.Item key='全部'>全部<Icon type='check' /></Menu.Item>
<Menu.Item key='已完成'>已完成<Icon type='null' /></Menu.Item>
<Menu.Item key='未完成'>未完成<Icon type='null' /></Menu.Item>
</Menu>
);
// 右侧按钮组件
const cardExtra = (
<Fragment>
<Dropdown overlay={Menu_how} trigger={['click']} style={{ padding: '0' }}>
<Button>{showType}<Icon type='caret-down' /></Button>
</Dropdown>
<Space></Space>
<Dropdown overlay={Menu_show} trigger={['click']}>
<Button>全部<Icon type='caret-down' /></Button>
</Dropdown>
<Space></Space>
<Button style={buttonBorderStyle}
type='primary' ghost size='large'
onClick={() => this.showDrawer()}><Icon type='plus' /></Button>
</Fragment>
);
//抽屉按钮
const DrawerButton = ({ button1_Click, button1_text, button2_Click, button2_text }) => (
<Fragment>
<Avatar icon='user'></Avatar>
<Button.Group>
<Button style={buttonBorderStyle}><Icon type='file' /></Button>
<Button style={buttonBorderStyle}><Icon type='bars' /></Button>
<Button style={buttonBorderStyle}><Icon type='retweet' /></Button>
</Button.Group>
<Space /><Space />
<Button style={buttonBorderStyle} onClick={button1_Click}>{button1_text}</Button>
<Button style={buttonBorderStyle} ghost type='primary' onClick={button2_Click}>{button2_text}</Button>
</Fragment>
);
// 抽屉标题按钮
const drawerTitle = taskChoice && (taskChoice.taskId === null) ?
(
<DrawerButton
button1_Click={this.onClose}
button1_text={'取消'}
button2_Click={this.handleSave}
button2_text={'保存'}
></DrawerButton>
) : (
<DrawerButton
button1_Click={this.handleRemove}
button1_text={'删除'}
button2_Click={this.onClose}
button2_text={'关闭'}
></DrawerButton>
);
return (
<div>
<Card
headStyle={{ height: '65px' }}
title={cardTitle}
extra={cardExtra}
style={cardWidth}
>
<Suspense fallback={null}>
{showType === '四象限' ?
<CardList
dataSource={task_level}
showDrawer={this.showDrawer}
finished={this.handleFinished} />
:
<TimelineList
dataSource={task}
showDrawer={this.showDrawer}
finished={this.handleFinished} />
}
</Suspense>
</Card>
<Drawer
title={drawerTitle}
placement='right'
mask={false}
width={400}
closable={false}
visible={visible}
>
<Suspense fallback={null}>
<TaskForm
{...otherField}
onChange={this.onChangeRadio}
form={form}
taskC={taskChoice}
handleSubmit={this.handleSave}
></TaskForm>
</Suspense>
</Drawer>
</div>
);
}
头部标题：
const CardTitle = ({ handleChangeButton, buttonType, showDate }) => (
<Fragment>
<Row type='flex' align='middle' gutter={8} justify='start' style={{ width: '480px' }}>
<Col span={6}>
{showDate}
</Col>
<Col span={3}>
<Button.Group>
<Button icon='left' style={buttonBorderStyle} ></Button>
<Button icon='right' style={buttonBorderStyle} ></Button>
</Button.Group>
</Col>
<Col span={4}>
<Button value='day'
type={buttonType === 'day' ? 'primary' : 'default'}
onClick={handleChangeButton}>今天</Button>
</Col>
<Col span={11}>
<Button.Group onClick={handleChangeButton}>
<Button value='day' type={buttonType === 'day' ? 'primary' : 'default'}>日</Button>
<Button value='week' type={buttonType === 'week' ? 'primary' : 'default'}>周</Button>
<Button value='month' type={buttonType === 'month' ? 'primary' : 'default'}>月</Button>
</Button.Group>
</Col>
</Row>
</Fragment>
);
5、总结
哇，这人贼懒，写个东西都不好好写，代码也就贴一丢丢。
emmm。。
等我把项目代码传到github上后给个链接吧。
写完这个其实收获挺多的，但是要我说出来，又一时语塞。
有很多想要表达的东西，通篇写下来发现并没有表达到，自己第一次写博客，也是太菜了。。
嗯。。如果有人一不小心浪费时间翻到这里，给你说个抱歉，哈哈哈。
以后尽量提高自己的博客质量。