# EastWebManager **Repository Path**: eastups/EastWebManager ## Basic Information - **Project Name**: EastWebManager - **Description**: BSUI（软件部web管理后台通用模板） - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 3 - **Created**: 2017-08-01 - **Last Updated**: 2021-11-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # BSUI BSUI 是一套由基本组件构成，包含基本交互逻辑，通过固化、沉淀、梳理以往项目前端经验，而编写的用于 B/S 软件的前端 UI 框架，主要用于 B/S 软件项目，用以减少前端重复工作量，提高开发效率。 ## 定位 1. 适用于后台管理类B/S软件； 2. 包含HTML模板、CSS样式库、JS插件、第三方插件等； 3. 采用模块化开发，可自由组合，可拓展，可按需定制； 4. 有颜值、实用、高效。 ## 浏览器兼容性 - 完美兼容支持HTML5规范的现代浏览器。 - IE最低支持到IE9（放弃IE8及以下版本IE浏览器）。 ## 为什么要“重复造轮子”？ 市面上有很多大而全的 UI 框架，热门的有：[Bootstrap](http://www.bootcss.com/)、[Amaze UI](http://amazeui.org/)、[Element](http://element.eleme.io)、[EasyUI](http://www.jeasyui.net/)、[jQuery UI](https://jqueryui.com/) 等。这些 UI 框架都很强大，也各自有显著的优点，能解决前端 UI 方面的许多问题，但对于实际的 B/S 项目来讲，这些框架都或多或少无法完全普适项目需求，或者很难与现有项目的技术栈相融合： - 这些 UI 框架大都无法较为全面顾及到 B/S 软件复杂的业务场景； - 这些 UI 框架较多地顾及了用户普适性和浏览器兼容性，而大部分 B/S 项目不用过多考虑这些； - Bootstrap 的 UI 侵入性太强，容易与其他 CSS 代码起冲突； - Amaze UI 是移动优先的框架，而 B/S 项目大多是 PC 端的； - Element 基于 Vue 这个 MVVM 框架，而很多 B/S 项目都是采用传统技术栈（基于 DOM），所以目前并不适合； - 传统的 EasyUI 很强大，但颜值明显跟不上时代，显得落伍； - jQuery UI 太重了…… BSUI 不是单纯为了做 UI 组件而做 UI 组件，而是从 B/S 项目的业务场景出发，根据需求反向推导出所需的 UI 组件，再考虑 UI 组件与后台的数据对接，最后进行 UI 组件的设计与编写。例如 Switch（开关）这个 UI 组件的推导过程： 1. B/S 项目中经常会用到一些“开关量”的设置项，例如：启用/禁用某个功能； 2. 以往怎么做？以往都是用两个单选框来做，但这样可视化效果较差，也不直观； 3. 期望怎么做？最直观的表达方式就是做一个“开关”来表示两种对立的状态； 4. 这个“开关”如何与后台对接？还是得用表单控件，这样对接成本最小； 5. 用哪个表单控件合适？可以用 checkbox，勾选表示“开”状态，不勾选表示“关”状态，则对应可传给后台 true 与 false 两种状态量； 6. UI 上如何实现？可以通过 label 响应 checkbox 勾选，用 checked 伪类，搭配伪元素来模拟开关交变…… 7. 有哪些边界情况？有被禁用状态和初始化赋值被禁用，这两种情况要考虑 UI 上的变化…… ## 如何解决样式冲突问题？ 为避免样式冲突，BSUI 采用了一套命名空间，规则如下： > `ns` 为 `namespace` 的缩写形式。 | 命名前缀 | 类型 | 对应的 Sass 变量 | 描述 | | -------- | ------------------------ | ---------------- | ---------- | | `l-` | 布局 (layouts) | `$ns-lyt` | 大的布局区块。例如头部、主栏、侧栏、栅格等。 | | `o-` | 对象 (objects) | `$ns-obj` | 一般是不可再分的较小个体，通常被复用于各个组件、模块中。 | | `c-` | 组件 (components) | `$ns-comp` | 通常是一个语义化的、能实现某个较复杂功能，且可以重复使用的组合整体。例如弹出框、滑块等。 | | `is-` | 状态类 (state classes) | `$ns-is` | 作为对象、组件等的语义化状态类样式的钩子。 | | `has-` | 状态类 (state classes) | `$ns-has` | 同上，区别是 is 表示“是什么”；has 表示“有什么”。 | | `u-` | 实用类 (utility classes) | `$ns-util` | 包含一些使用率较高的常用样式。如清除浮动等。 | ## 项目构成 - **基础 Basic** - [x] *[样式统一](http://eastups.oschina.io/eastwebmanager/demo/basic/reset.html)* - [x] *[字体栈](http://eastups.oschina.io/eastwebmanager/demo/basic/font.html)* - [x] *[打印样式](http://eastups.oschina.io/eastwebmanager/demo/basic/print.html)* - [x] *[图标](http://eastups.oschina.io/eastwebmanager/demo/basic/icon.html)* - [x] *[网格](http://eastups.oschina.io/eastwebmanager/demo/basic/grid.html)* - **表单 Form** - [x] *[表单排版](http://eastups.oschina.io/eastwebmanager/demo/form/form_typography.html)* - [x] *[文本框](http://eastups.oschina.io/eastwebmanager/demo/form/input.html)* - [x] *[数字文本框](http://eastups.oschina.io/eastwebmanager/demo/form/input_number.html)* - [x] *[文件域](http://eastups.oschina.io/eastwebmanager/demo/form/input_file.html)* - [x] *[输入框组](http://eastups.oschina.io/eastwebmanager/demo/form/input_group.html)* - [x] *[选项框](http://eastups.oschina.io/eastwebmanager/demo/form/checkbox.html)* - [x] *[下拉框](http://eastups.oschina.io/eastwebmanager/demo/form/select.html)* - [x] *[按钮](http://eastups.oschina.io/eastwebmanager/demo/form/button.html)* - [x] *[按钮组](http://eastups.oschina.io/eastwebmanager/demo/form/button_group.html)* - [x] *[开关](http://eastups.oschina.io/eastwebmanager/demo/form/switch.html)* - **UI组件 UI** - [ ] *[下拉菜单](#ui_down_menu.html)*（未完成） - [ ] *[滑块](#ui_slider.html)*（未完成） - [ ] *[穿梭框](#ui_transfer.html)*（未完成） - [ ] *[日期选取器](#ui_date_picker.html)*（未完成） - [ ] *[时间选取器](#ui_time_picker.html)*（未完成） - [ ] *[颜色选取器](#ui_color_picker.html)*（未完成） - [ ] *[时间线](#ui_time_line.html)*（未完成） - [ ] *[工具条](#ui_toolbar.html)*（未完成） - [ ] *[抽屉](#ui_drawer.html)*（未完成） - **数据报表 Data** - [x] *[表格](http://eastups.oschina.io/eastwebmanager/demo/data/table.html)* - [ ] *[分页](#data_pagination.html)*（未完成） - [ ] *[列表](#data_list.html)*（未完成） - [ ] *[卡片](#data_card.html)*（未完成） - [ ] *[图表](#data_chart.html)*（未完成） - [ ] *[树菜单](#data_tree.html)*（未完成） - **导航 Nav** - [ ] *[导航菜单](#nav_menu.html)*（未完成） - [ ] *[面包屑](#nav_breadcrumb.html)*（未完成） - [ ] *[步骤条](#nav_step.html)*（未完成） - [x] *[标签页](http://eastups.oschina.io/eastwebmanager/demo/nav/tabs.html)* - **通知提示 Notice** - [ ] *[标记](#notice_badge.html)*（未完成） - [ ] *[加载](#notice_loading.html)*（未完成） - [ ] *[进度条](#notice_progress.html)*（未完成） - [ ] *[消息提示框](#notice_tipmsg.html)*（未完成） - [ ] *[通知](#notice_toast.html)*（未完成） - [x] *[悬停提示框](http://eastups.oschina.io/eastwebmanager/demo/notice/tooltip.html)* - [ ] *[对话框](#notice_dialog.html)*（未完成） - **辅助 Util** - [x] *[情景文本](http://eastups.oschina.io/eastwebmanager/demo/util/text.html)* - [x] *[纸张效果](http://eastups.oschina.io/eastwebmanager/demo/util/paper.html)* - [ ] *[原子类样式](#util_atom.html)*（未完成） - [ ] *[动画](#util_animation.html)*（未完成） ## 文件目录 - **[assets]**（资源） - **dest**（分发资源） - **[css](assets/dest/css)** - **[fonts](assets/dest/fonts)**（iconfont 字体资源） - **[js](assets/dest/js)**（脚本） - **src**（源码资源） - **[icons](assets/src/icons)**（图标svg源文件） - **[js](assets/src/js)** - **[sass](assets/src/sass)** - **build**（构建任务） - **demo**（示例、演示） - **dist**（发布版） - **template**（模板） ## 第三方开源库或插件 - [jQuery](http://jquery.com/) - 简介：迄今为止世界上最流行的 JavaScript 库 - 依赖：无 - 版本：1.11.3 (2015-04-28) - API：[官方API（英文）](http://api.jquery.com/)、[中文在线API](http://jquery.cuishifeng.cn/)、[中文离线版](#) - [SeaJS](https://seajs.github.io/seajs/) - 简介：遵循 CMD 规范的 JavaScript 模块加载框架 - 依赖：无 - 版本：2.1.1 (2013-07-11) - API：[简易API](http://yslove.net/seajs/)、[API快速参考](http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/cheatsheet.html) - [My97DatePicker](http://www.my97.net/) - 简介：日期选取器（原生皮肤比较Low，需要自己做） - 依赖：jQuery - 版本：4.8 Release (2017-07-30) - API：[官方API（中文）](http://www.my97.net/demo/) - [zTree](http://www.treejs.cn) - 简介：树插件 - 依赖：jQuery - 版本：3.5.29 (2017-06-23) - API：[官方API（中文）](http://www.treejs.cn/v3/api.php) - [ECharts](http://echarts.baidu.com) - 简介：Javascript 数据可视化图表库 - 依赖：无 - 版本：3.6.2 Release (2017-06-15) - API：[官方API（中文）](http://echarts.baidu.com/api.html)