# EastWebManager

**Repository Path**: mpd/EastWebManager

## Basic Information

- **Project Name**: EastWebManager
- **Description**: BSUI（软件部web管理后台通用模板）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2017-11-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BSUI
BSUI 是一套由基本组件构成，包含基本交互逻辑，通过固化、沉淀、梳理以往项目前端经验，而编写的用于 B/S 软件的前端 UI 框架，主要用于 B/S 软件项目，用以减少前端重复工作量，提高开发效率。

## 为什么要“重复造轮子”？
市面上有很多大而全的 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 上的变化……

## 定位
1. 适用于后台管理类B/S软件；
2. 包含HTML模板、CSS样式库、第三方插件等可复用组件；
3. 组件采用模块化开发，可拓展，可自定义风格；
4. 有颜值、简洁、高效。

## 浏览器兼容性
- 完美兼容支持HTML5规范的现代浏览器。
- IE最低支持到IE9（放弃IE8及以下版本IE浏览器）。

## 界面截图
暂无

## 项目构成
- **排版**
    - *[样式统一](#basic_reset.html)*
    - *[颜色](#basic_color.html)*
    - *[布局](#basic_layout.html)*
    - *[字体栈](#basic_font.html)*
    - *[打印样式](#basic_print.html)*
- **表单**
    - ~~*[表单排版](#form_typography.html)*~~（未完成）
    - *[按钮](#form_button.html)*
    - ~~*[按钮组](#form_button-group.html)*~~（未完成）
    - *[文本框](#form_input.html)*
    - *[数字文本框](#form_input-number.html)*
    - ~~*[输入框组](#form_input-group.html)*~~（未完成）
    - *[单选框](#form_radio.html)*
    - *[复选框](#form_checkbox.html)*
    - *[开关](#form_switch.html)*
    - ~~*[下拉框](#form_select.html)*~~（未完成）
    - ~~*[文件上传](#form_upload.html)*~~（未完成）
    - ~~*[滑块](#form_slider.html)*~~（未完成）
    - ~~*[穿梭框](#form_transfer.html)*~~（未完成）
    - ~~*[时间选取器](#form_timePicker.html)*~~（未完成）
    - ~~*[颜色选取器](#form_colorPicker.html)*~~（未完成）
- **报表**
    - ~~*[表格](#data_table.html)*~~（未完成）
    - ~~*[分页](#data_pagination.html)*~~（未完成）
    - ~~*[列表](#data_list.html)*~~（未完成）
    - ~~*[树控件，重定义ztree](#data_ztree.html)*~~（未完成）
    - ~~*[面板](#data_panel.html)*~~（未完成）
    - ~~*[磁贴](#data_tile.html)*~~（未完成）
- **导航**
    - ~~*[导航菜单](#nav_menu.html)*~~（未完成）
    - ~~*[面包屑](#nav_breadcrumb.html)*~~（未完成）
    - ~~*[步骤条](#nav_steps.html)*~~（未完成）
    - ~~*[标签页](#nav_tabs.html)*~~（未完成）
- **提示**
    - ~~*[标记](#notice_badge.html)*~~（未完成）
    - ~~*[加载](#notice_loading.html)*~~（未完成）
    - ~~*[通知](#notice_notification.html)*~~（未完成）
    - *[悬停提示框](#notice_tooltip.html)*
    - ~~*[模态框](#notice_modal.html)*~~（未完成）
- **辅助**
    - *[情景文本](#util_text.html)*
    - ~~*[原子类常用样式](#util_atom.html)*~~（未完成）
    - ~~*[动画](#util_animation.html)*~~（未完成）


## 文件目录
- **build**（构建资源）
    - **dist**（分发资源）
        - **[css](nav/css.md)**
        - **[fonts](build/dist/fonts)**（iconfont 字体资源）
        - **[js](nav/js.md)**（seajs 封装的脚本）
    - **source**（源码资源）
        - **[css-sass](nav/css-sass.md)**
        - **[js](nav/js-source.md)**（未封装的脚本）
        - *[bsui-all.scss](#)*
- **doc**（文档）
    - **[images](doc/images/)**
    - **[basic](doc/basic/)**
    - **[form](doc/form/)**
    - **[data](doc/data/)**
    - **[nav](doc/nav/)**
    - **[notice](doc/notice/)**
    - **[util](doc/util/)**
    - *[doc.css](#)*
    - *[nav.html](#)*
    - *[index.html](#)*
- **template**（模板）
- *index.html*

## 第三方开源库或插件
- [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)

## 更新日志
[更新日志](nav/update.md)