❤
npm
Sign UpSign In

east414-ui

0.1.1 • Public • Published

rt-admin

Project setup

yarn install

Compiles and hot-reloads for development

*** fist run should import the base data with .json file from 'server/dbsData'
*** 首次运行需要基础数据, 需要导入server/dbsData下的.json到mongoDB

node server/app.js
yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

For product team

1.设计稿大小

Chrome: 1920×1080实际可用分辨率1920×946,1366×768实际可用分辨率1366×633
Firefox: 1920×1080实际可用分辨率1920×937,1366×768实际可用分辨率1366×625
建议：
1.高度按照1366实际可用分辨率设计
2.宽度小于1366px显示滚动条(纵向横向两条)
5.自定义主题色 https://element.eleme.cn/#/zh-CN/theme
6.纵向滚动条只能出现在内容区

2.设计工具

原型: Axure

推荐元件库: http://www.pmdaniu.com/cloud/16338/1a5f78ff7419db331d6a3b5dd721e784-10869/start.html#g=1&p=%E7%BB%84%E4%BB%B6%E6%B1%87%E6%80%BB
PS: 该元件库收费70元,产品和设计团队评估是否购买

3.组件使用说明

参考/public/doc/README.md

4.开发规范

4.1HTML

4.1.1属性顺序

id  
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

4.1.2引号

属性的定义，统一使用双引号。

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

4.2CSS

4.2.1声明块格式

  • 选择器分组时，保持独立的选择器占用一行；
  • 声明块的左括号 { 前添加一个空格；
  • 声明块的右括号 } 应单独成行；
  • 声明语句中的 : 后应添加一个空格；
  • 声明语句应以分号 ; 结尾；
  • 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
  • rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
  • 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

参考模板

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}

4.2.2声明顺序

相关属性应为一组，推荐的样式编写顺序

  1. Positioning

  2. Box model

  3. Typographic

  4. Visual

     .declaration-order {
   /* Positioning */
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
 
   /* Box model */
   display: block;
   box-sizing: border-box;
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
   margin: 10px;
   float: right;
   overflow: hidden;
 
   /* Typographic */
   font: normal 13px "Helvetica Neue", sans-serif;
   line-height: 1.5;
   text-align: center;
 
   /* Visual */
   background-color: #f5f5f5;
   color: #fff;
   opacity: .8;
 
   /* Other */
   cursor: pointer;
 }

4.2.3媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

4.2.4无需添加浏览器厂商前缀

使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。 Autoprefixer 通过 Can I use，按兼容的要求，对相应的 CSS 代码添加浏览器厂商前缀。

4.2.5模块组织

原则上通用组件按照规范来,业务代码方便优先

Naming elements （元素命名）

Elements 的类名应尽可能仅有一个单词。用中划线 - 连接

On multiple words （多个单词）

尽量用 > 连接符

.profile-box {
    > .firstname { /* ... */ }
    > .lastname { /* ... */ }
    > .avatar { /* ... */ }
  }
Naming variants （变体命名）

一个基本样式, 多个变体样式
.like-button { &.-wide { /* ... / } &.-short { / ... / } &.-disabled { / ... */ } }

4.2.6性能优化

参考https://www.w3cschool.cn/webdevelopment/og63nozt.html

4.3 Javascript

4.3.1注释

原则上不在业务代码写注释, mixins/directives/utils添加注释
文件注释

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author tanyugang@rt.com
 * Copyright 2018 Robustel Inc. All Rights Reserved.
 */

函数注释

/** 
* @Description: 可选
* @param 入参类型,默认值
* @return 可选,如有返回值,写出参类型
* @date 2019-07-29
* @author 美琪
* /

4.3.2函数命名前缀

  • can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true：可执行；false：不可执行
  • has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
  • is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
  • get 获取某个值 函数返回一个非布尔值
  • set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
  • load 加载某些数据 无返回值或者返回是否加载完成的结果

4.3.3遍历

data () {
	return { dicMap: new Map() }
}
getTableData () {
	const {data: {result}} = await this.$http.get(url)
	result.length && result.map(v => {
		dicMap.set(v.dicCode, v.dicValue)
	})
}

4.3.4枚举类Map

1: new
	(1)let dicMap = new Map()
	(2)let dicMap = new Map(['name', 'JJ'], ['age', 18])
2: set
	(1)dicMap.set('name', 'JJ')
			.set('age', 18)
3: size
	console.log(dicMap.size)
	// 2
4: get
	dicMap.get('name')
	// 'JJ'
5: has
	dicMap.has('muchMoney')
	// false
6: delete
	dicMap.delete('age')
	dicMap.has('age')
	// false
7: clear
	dicMap.clear()
	dicMap.size
	// 0
8: 遍历
	.values()
	.keys()
	.forEach()

5.Element-ui使用约定

日期控件不允许输入, :editable="false",
日期区间不允许关联, :unlink-panels="true",

6.前端页面自检清单

加载顺序

登录缓存

全局多语言
全局字典

页面跳转

重新请求全局多语言
重新请求全局字典

mixins

菜单多语言
菜单字典

组件created/mounted

  1. 表格字段
  2. 字典
  3. 表格数据

loading项

  • table
  • form提交按钮(表单valid, button的loading=true, 否则loading=false)

button

  • 除了有弹出dialog的button, 原则上都要加disabled判断

增删改查

  • 删除/条件搜索必须设置pageNum=1

7.发布组件库

进入 /packages 查看 README.md

8.项目架构

基于git做分支管理

业务模块简称

branch命名约定

  1. master

    前端项目基本架构

  2. modules/bpl

    类似二级路由, 可选择模块初始化业务模块

  3. ice/master

    类似二级路由, 应该由modules/bpl分支创建, merge其他modules分支后作为master, ice为项目名称, 提测ok后可打包到正式环境, 有问题也不回滚版本

  4. ice/master_Mario_bug1234, ice/master_Mario_need6789

    约定 [ 开发人 + _bug + 编号 ] 为bug分支, [ 开发人 + _need + 编号 ] 为需求分支, 由ice/master分支创建, 创建后只允许commit和push, 不允许fetch, pull, merge

  5. ice/dev

    dev分支, 由ice/master分支创建, 合并bug和需求分支提到测试环境

  6. ice/publish

    发版分支, 由master checkout所得, merge测试ok的bug和need分支, 次日merge到master分支

  7. 添加远程仓库作为分支

运行命令行git merge bpl/modules/bpl --allow-unrelated-histories

Readme

Keywords

none

Package Sidebar

Install

npm i east414-ui

Weekly Downloads

0

Version

0.1.1

License

none

Unpacked Size

3.3 MB

Total Files

143

Last publish

Collaborators

  • east414
Try on RunKit
Report malware