使用高级组件在不使用后端的情况下做一个简单的前端鉴权

官方介绍​

mobx中文文档

官方示例理解 MobX

核心原理

1. 整体布局相对侧边栏绝对定位，侧边栏的宽度与内容区域的paddingLeft使用同一变量控制、
2. 侧边栏右侧添加一个透明的竖条，用于控制用户拖拽（捕获鼠标按下去的动作）
3. 用户按下去以后记录距离屏幕左侧的位置，和启动拖拽状态(显示全屏的遮罩监听鼠标移动)
4. 鼠标在遮罩上移动->计算并设置当前的宽度，同时更新开始位置
5. 当鼠标抬起时，关闭拖拽状态，并且将值记录到localStorage

补充：容易联想到可以有一个图标点击之后直接设置宽度为预设的两种状态

mui核心库

material design介绍整个界面风格，他是一种纯粹UI设计和技术无关，该站点内的component同样是在设计层面，可以看到设计的指导思想，注重动画效果抓住用户注意力，帮助用户知道下一步该怎么做

初始化TS项目​

npx create-react-app component_templates --template typescript

指定启动端口

"start": "set PORT=3006 && react-scripts start",

公司使用formily1.0版本，记录下基本的使用方式，包括扩展字段，自定义校验，字段联动，获取提交事件等

原生事件​

监听文本输入框的input事件，在输入法拼写汉字但汉字并未实际填充到文本框中时会触发input事件，代码如下

有如下bug与需求

• 一个富文本内的图片在点击以后显示大图，其中有各种表格文字等
• 一个区域本身绑定了方法，在该区域内hover后弹出的菜单上点击后触发了绑定的方法
• ...

清早 客栈 写书人就坐喝茶

白马：早啊，掌柜的。

写书人：（抱怨）说了别叫我掌柜的，我只是一写书的。（正色道）天南海北四方客，故事听著顺耳的，也便予人方便写个故事以作纪念。白马：哦？你这“缘来客栈”的掌柜倒是做得清闲，一不管账，二不待客，这客栈倒也经营得有声有色呀。

写书人：客栈有客栈的规矩，我这儿跑堂有小二，管账有账房，做菜有师傅，要我这掌柜出马做甚？

公司使用react-dnd作为项目拖拽库，一时兴起做个简单的拖拽demo

npm i react-dnd react-dnd-html5-backend