上一篇说到，因为有新朋友加入，对前端开发有了新的要求。原来基于 Bootstrap 的 UI 就不要了。在网上（其实是 GitHub 上）逛了几圈，最后使用了 antd-admin 这个框架做为基础模板，然后根据悟空 CRM 的特色进行了一些改变：

在原来的 antd-admin 的页面里，应该是属于 SPA 式的后台应用的。而 CRM 这样比较大的系统，完全 SPA 可能有点太大了。所以我就把第个模块拆出来做为一组 pages，这一组 pages 构成一个 SPA。这样，就需要在原来的右上导航条里添加一个主导航菜单区。而右边则常用的消息 badge，比如站内信，比如日程。

对于一组 pages 构成的一个 SPA，二级导航会放在左边的导航条上。当然，右边的一大块区域就是主功能区了。一般是表格，也会有一些 modal 和图什么的。

为了方便以后查看，我还创建了 wiki，对页面的设计做了对比阐述。项目的 project 功能也用起来了。

CoreCRM 开发实录 —— 基于 AntDesign 的新 UI的更多相关文章

  1. CoreCRM 开发实录——开始之新项目的技术选择

    2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...

  2. CoreCRM 开发实录 —— 前后端分离的重构

    虽然2月初就回来了,可 CoreCRM 一直到5月才开始恢复开发,期间是各种生活中的意外和不方便. 1. 为什么要重构 首先是一件很值得高兴的事情:CoreCRM 有了第一位 contributor! ...

  3. CoreCRM 开发实录 —— 单元测试、测试驱动开发和在线服务

    测试不是问题,问题是怎么测试. ## 单元测试 我认为单元测试已经是无可争议的最佳开发实践之一.但是很多人并不同意这个观点.他们的说法无非是:写测试需要花很多时间,需求又经常变动,一但变动,一大片测试 ...

  4. CoreCRM 开发实录 —— Profile

    再简单的功能,也需要一坨代码的支持.Profile 的编辑功能主要就是修改个人的信息.比如用户名.头像.性别.电话--虽然只是一个编辑界面,但添加下来,涉及了6个文件的修改和7个新创建的文件.各种生成 ...

  5. CoreCRM 开发实录——Travis-CI 实现 .NET Core 程度在 macOS 上的构建和测试 [无水干货]

    上一篇文章我提到:为了使用"国货",我把 Linux 上的构建和测试委托给了 DaoCloud,而 Travis-CI 不能放着不用啊.还好,这货支持 macOS 系统.所以就把 ...

  6. CoreCRM 开发实录——想用国货不容易

    昨天(2016年12月29日)发了开始开发的文章.本来晚上准备在 Coding.NET 上添加几个任务开始搞起了.可是真的开始用的时候才发现:Coding.NET 的任务功能只针对私有的任务开放.我想 ...

  7. CoreCRM 开发实录 —— 单元测试之 Mock UserManager 和 SignInManager

    单元测试的核心就是:只测试眼前的逻辑.这就要求所有的依赖项都要使用仿类来代替,也就是所谓的 Mock Object.在测试 ProfileRepository 和 AccountController ...

  8. 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具

    认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...

  9. DailyTick 开发实录 —— UI 设计

    上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...

随机推荐

  1. 项目Alpha冲刺（团队4/10）

    项目Alpha冲刺(团队4/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

  3. css插入背景图片底部有白边的解决方法

    相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图:   个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...

  4. Shell-7--环境变量配置文件

    环境变量配置文件修改后需要重启才生效,如果想不重启生效,需要 source 配置文件 . 配置文件

  5. C语言中const关键字的用法

    关键字const用来定义常量,如果一个变量被const修饰,那么它的值就不能再被改变,我想一定有人有这样的疑问,C语言中不是有#define吗,干嘛还要用const呢,我想事物的存在一定有它自己的道理 ...

  6. Linux - 结合正则表达式使用grep命令

    Grep with Regular Expression grep命令基本用法 grep [-acinv] [--color=auto] [-A n] [-B n] '搜寻字符串' 文件名参数说明: ...

  7. tomcat-四种运行模式和三种部署模式（优化）

    四中运行模式如下: 1-bio: 传统的Java I/O操作,同步且阻塞IO. 2-nio: JDK1.4开始支持,同步阻塞或同步非阻塞IO 3-aio(nio.2): JDK7开始支持,异步非阻塞I ...

  8. FF笔试题

    一.单选题 1.下列关于继承的描述错误的是(  ) A.  在Java中允许定义一个父类的引用,指向子类对象 B.  在Java中继承是通过extends关键字来描述的,而且只允许继承自一个直接父类 ...

  9. Django--中间件相关

    一 什么是中间件 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...

  10. 第六章：声明式服务调用：Spring Cloud Feign

    Spring Cloud Feign 是基于 Netflix Feign 实现的,整合了 Spring Cloud Ribbon 和 Spring Cloud Hystrix,除了提供这两者的强大功能 ...