Quasar-Sika-Design 开箱即用的中台前端 / 设计解决方案

文章第一级插图-1.png

项目介绍:

Quasar Sika Design 是一个企业级中后台前端 / 设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板 / 业务组件 / 配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板 / 组件 / 业务场景的最佳实践,也十分期待你的参与和共建。


项目初衷:

  • 起于 Ant Design,不止于 Ant Design,每一个细节都是极致体验
  • 愿景:开源改变世界,Sika Design 让世界没有难写的代码。

项目特色:

  • 优雅美观:基于 Ant Design 体系精心设计
  • 常见设计模式:开源改变世界,Sika Design 让世界没有难写的代码。
  • 最新技术栈:使用 Quasar&Vue&echarts 等前端前沿技术开发
  • 响应式:针对不同屏幕大小设计
  • 主题:可配置的主题满足多样化的品牌诉求
  • 最佳实践:良好的工程实践助你持续产出高质量代码
  • Mock 数据:实用的本地数据调试方案

我们基于上述目标、初衷及特色提供了以下的典型模板,并据此构建了一套基于 Quasar Vue 的中后台管理控制台的脚手架,它可以帮助你快速搭建企业级中后台产品原型

- 仪表盘
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 用户列表
  - 商品列表
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表(项目/应用/文章)
- 详情页
  - 基础详情页
  - 高级详情页
- 结果页
  - 成功页
  - 失败页
- 异常页
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功

生命周期

  • V 1.0.0 -- 2020 年 10 月 ~ 2020 年 12 月(基础功能完成)
  • V 1.1.0 -- 2020 年 12 月 ~ 2021 年 2 月(添加图表组件及编辑器组件)
  • V 1.2.0 -- 2021 年 3 月 ~ 2021 年 5 月(数据基于 Mock 组件获取)
  • V 2.0.0 -- 2021 年 6 月 ~ 2021 年 9 月(前端使用 QuasarSikaDesign;后端服务使用【sikaCode】提供动态数据交互,起于设计而不止于设计,构建完整的后台管理系统)
  • V 3.0.0 -- 2021 年 9 月 ~ 2021 年 12 月(基于【QuasarSikaDesign】【SikaCode】构建完整的博客应用)
  • V 4.0.0 -- 2021 年 12 月 ~ (基于 QuasarSikaDesign 开发一套完整的企业级应用)

开发环境:

  • Quasar 版本为 V1.7.2 + ( 可以查看 Quasar 官网,来编辑 QuasarSikaDesign 代码:Quasar 官网)
  • Vue 版本为 V 2.6.0 +(尽量不要使用 Vue3,因为开发环境没有使用 Vue3,不知道会出现什么问题)

构建命令:

  • 下载代码:
git clone https://github.com/dq-open-cloud/quasar-sika-design.git
cd quasar-sika-design
  • 安装依赖
yarn install
  • 开发模式运行
quasar dev
  • 编译项目
quasar build
  • Lints and fixes files
yarn run lint

浏览器兼容:

  • Chrome for Android >= 87
  • Firefox for Android >= 83
  • Android >= 81
  • Chrome >= 77
  • Edge >= 84
  • Firefox >= 74
  • iOS >= 10.3
  • Opera >= 68
  • Safari >= 11

页面鉴赏:

PC 端

dashboard_analysis.png
list_search_projects.png
dashboard_monitor.png


移动端

user_login.png
dashboard_analysis.png
account_center.png