beautyinnorth / interview-demo Goto Github PK

npm install 
npm start

浏览器访问 http://localhost:3000

墨刀面试作业，目前所有数据都是假数据，色值取值于作业题，前端UI框架使用Ant Design。

思路整理：

在写代码之前我先分析作业题上页面的整体布局，并做了功能上的区分。

大概分了以下功能模块，我把单个方块视图抽象成一个App的概念

• App过滤组件，当切换不同类型的应用时，负责切换不同应用的数据源。
• App列表模块，负责显示一个或者多个符合条件的应用
  1. 这里每个应用的显示和数据封装到AppCard组件,这样比较好控制逻辑，感觉上也符合封装的概念
  2. “新创建应用”虽然外观和单个App一样，但是作用却不一样所以我做了一个CreateApp的组件来单独实现。这样可以把逻辑分开，方便以后的扩展