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

在原来的 antd-admin 的页面里,应该是属于 SPA 式的后台应用的。而 CRM 这样比较大的系统,完全 SPA 可能有点太大了。所以我就把第个模块拆出来做为一组 pages,这一组 pages 构成一个 SPA。这样,就需要在原来的右上导航条里添加一个主导航菜单区。而右边则常用的消息 badge,比如站内信,比如日程。
对于一组 pages 构成的一个 SPA,二级导航会放在左边的导航条上。当然,右边的一大块区域就是主功能区了。一般是表格,也会有一些 modal 和图什么的。
为了方便以后查看,我还创建了 wiki,对页面的设计做了对比阐述。项目的 project 功能也用起来了。
CoreCRM 开发实录 —— 基于 AntDesign 的新 UI的更多相关文章
- CoreCRM 开发实录——开始之新项目的技术选择
2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...
- CoreCRM 开发实录 —— 前后端分离的重构
虽然2月初就回来了,可 CoreCRM 一直到5月才开始恢复开发,期间是各种生活中的意外和不方便. 1. 为什么要重构 首先是一件很值得高兴的事情:CoreCRM 有了第一位 contributor! ...
- CoreCRM 开发实录 —— 单元测试、测试驱动开发和在线服务
测试不是问题,问题是怎么测试. ## 单元测试 我认为单元测试已经是无可争议的最佳开发实践之一.但是很多人并不同意这个观点.他们的说法无非是:写测试需要花很多时间,需求又经常变动,一但变动,一大片测试 ...
- CoreCRM 开发实录 —— Profile
再简单的功能,也需要一坨代码的支持.Profile 的编辑功能主要就是修改个人的信息.比如用户名.头像.性别.电话--虽然只是一个编辑界面,但添加下来,涉及了6个文件的修改和7个新创建的文件.各种生成 ...
- CoreCRM 开发实录——Travis-CI 实现 .NET Core 程度在 macOS 上的构建和测试 [无水干货]
上一篇文章我提到:为了使用"国货",我把 Linux 上的构建和测试委托给了 DaoCloud,而 Travis-CI 不能放着不用啊.还好,这货支持 macOS 系统.所以就把 ...
- CoreCRM 开发实录——想用国货不容易
昨天(2016年12月29日)发了开始开发的文章.本来晚上准备在 Coding.NET 上添加几个任务开始搞起了.可是真的开始用的时候才发现:Coding.NET 的任务功能只针对私有的任务开放.我想 ...
- CoreCRM 开发实录 —— 单元测试之 Mock UserManager 和 SignInManager
单元测试的核心就是:只测试眼前的逻辑.这就要求所有的依赖项都要使用仿类来代替,也就是所谓的 Mock Object.在测试 ProfileRepository 和 AccountController ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
- DailyTick 开发实录 —— UI 设计
上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...
随机推荐
- HTML各个版本以及对应doctype
HTML发布的正式历史版本: 1.HTML2.0 2.HTML3.2 3.HTML4.0 4.HTML4.01 5.XHTML1.0 6.XHTML1.1 7.XHTML2.0 中途放弃,未完成 8 ...
- ios webview下footer部分fixed失效问题
场景: 如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区 然后footer的css一般是这样的 footer{ position:fixed; bottom:; left:; ...
- Kubernetes-1
master 节点负责管理整个集群,管理的控制面板,全局的角色和调度 3个组件 API Server : 统一入口 kubectl 客户端管理工具 Etcd 数据库 Scheduler 集群的调度 C ...
- Iptables-redhat/centos
6用iptables 7默认用firewalld firewalld 与 iptables 过滤点,表 做nat是使用postrouting,prerouting表 Samba服务所使用的端口和协议: ...
- 使用Qt开发绘制多个设备的流量曲线图(附带项目图)
一.说明: 在实际项目中,主要是使用Qt开发CS程序,当然主要是客户端.公司项目中有这个需求是实时显示多个设备的流量曲线图,设备将流量信息发给服务端,服务端再将信息通过Socket发给Qt客户端,Qt ...
- Spring Boot开启的 2 种方式
Spring Boot依赖 使用Spring Boot很简单,先添加基础依赖包,有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent> < ...
- Jenkins和gitlab集成自动构建
Jenkins安装插件 Jenkins上需要安装如下插件 Gitlab Hook Plugin,GitLab Plugin Job配置 在需要自动触发的Job中 选择Build Triggers进行如 ...
- JavaScript中的关于this
this在js中是一个特别的关键字,被自动保存在所有函数的作用域中. 为什么要用this this提供一个对象方式隐式传递一个对象的引用,因此可以将api设计的简洁并且容易复用.看下面两段代码的比较: ...
- 在向一个ArrayList中添加大量元素前,可以使用ensureCapacity方法来增加ArrayList的容量
参考http://www.jianshu.com/p/f174d49b391c ensureCapacity(),该方法就是 ArrayList 的扩容方法.在前面就提过 ArrayList 每次新增 ...
- 自动生成getter setter
如何使用java黑魔法给一个entity生成getter,setter方法? 由于java是一门静态语言,要给一个类动态添加方法,看似是不可能的.但牛B的程序员会让任何事情发生.我只知道有两种方式可以 ...