quasar-admin-template
基于 Quasar 的管理系统模板
Quasar相比ElementUI,胜在可定制性上比较强,每个组件保留了大量的Slot和Event,可以按自己喜好自定义,同时官网文档也相当详细,看文档能解决绝大多数问题。界面也相对漂亮一些,另外还有一个很大的优势,Quasar对于移动端的适配做得非常棒。
问题是一些国内常用的功能和组件,Quasar缺失,这就需要自己二次开发或用其他js库代替。
代码仓库
主要特点
- 给个
star
吧 - 良好的适配移动端小屏幕
- Dark 和 Light模式自由切换
- 可以分别自定义Dark 和 Light模式下的颜色样式,并保存到LocalStorage里面,关闭浏览器不丢失
- 可自定义左侧菜单栏宽度、背景色、字体色,顶部标题栏颜色、Tab标签栏位置和是否显示 等
- 左侧菜单栏基于路由配置自动生成,可以实现noCache、icon等自定义配置
- 页面路由Tab标签栏
- 演示了几种在页面实现搜索栏的样式(费了我不少时间)
- 增强开发了CoDialog,可以实现拖拽和最大化等
- 增强开发了CoTree,增加了很多功能
- tick-strategy 在原有none strict leaf leaf-filtered的基础上,增加leaf-any-with-parent(子节点大于0个ticked,则增加父节点)、leaf-all-with-parent(子节点全部ticked,则增加父节点)、leaf-all-only-parent(子节点全部ticked,则只取父节点,去掉子节点)
- 增加事件 ticked-label和selected-label,返回选择的节点的label
- 增加一个过滤输入栏
- 增强开发了CoTable,新增了新的loading样式,还有sticky-header、sticky-first-column、sticky-last-column
- 增强开发了CoForm,CoDate、CoInput、CoOptionGroup、CoFormItem,增加一些实用功能
- 新增CoDateSelect
- 新增CoTreeSelect
- 新增CoTreeTable
- 感谢:eladmin-web、vue-element-admin、quasar-admin-crm、quasar-element-pro
TODO co-dialog
- TODO 可移动的dialog的标题栏图标显示移动鼠标光标
- TODO dialog里面内容滚动时,可以不滚动标题栏、底部工具栏
TODO 页面增加字段选择的存储
TODO 页面增加表格大小选择(存储)
TODO 页面总的增删改查工具栏,可以配置为变灰还是消失
TODO 如果不显示 Tab 栏,则所有页面都不 keep-alive(不缓存)
TODO 加快图标页加载速度
TODO 菜单caption 附加文字颜色,改为灰色
TODO 在右侧打开外部url(iframe或其他方案)
TODO 增加“个人设置”页面
TODO 菜单增加“new”标签支持
TODO CoOptionGroup 自定义form项的错误提示
TODO CoDateSelect 可以手工输入日期、可以选择“最近7天、最近30天、本月、。。。”
TODO co-tree selected和ticked,可以设置“只选parent,只选leaf”
为 co-tree 添加 tree-class / tree-style tree-class-mobile tree-style-mobile
CoInput 在popup-proxy 里面时,有时候prepend、append、before、after 的slot会失效
对话框最大化后,取消拖动
TODO BUG 图表dark模式文字颜色
Demo
界面截图
见“UI”目录
PC上的效果
手机上的效果
Install the dependencies(安装依赖)
首先,安装nodejs(注意:只能是12和14版本,更新的版本可能有问题)
然后,安装 quasar 工具:
npm install -g @quasar/cli
安装依赖:
npm install
Start development mode (启动app开发模式)
quasar dev
Lint the files(Lint校验)
npm run lint
Build the production(构建发行版本)
quasar build