# 稻田管理后台 v3 + and4

## Project Setup

```node 16.13.2 安装依赖
npm install
```

### Compile and Hot-Reload for Development

```运行
npm run dev
```

### Type-Check, Compile and Minify for Production

```打包
npm run build
```


### css规范
```
1.命名规范
    g_xxx 全局css。
		1）常用css均已放置在 assets/base.css 中，如需改动，提前说
		2）全局变量采用下划线链接
    m-xxx 页面内的模块
		1）页面内类名采用中划线连接
2.排版规范
  尽量采用flex弹性布局进行处理
3.文件命名：见名知意
4.标签命名：
  文件根标签：p-页面名
  文件内部模块名：m-模块功能名
```

### js规范
```
1.方法命名规范
  get 请求事件
  update 更新事件
  delete 删除事件
  edit 编辑事件
  view 查看事件
  handle 主动事件
  共用：采用驼峰命名
2.公共api规范
  常用api均放置在src下的utils中。
  绝对避免同一种功能使用多个方法，比如时间戳转换，比如上传功能
3.当页面中存在定时器或者延迟器时，一定要添加离开页面时清除定时器
4.使用pina进行全局状态处理。
  本地缓存能不用则不用，如果使用，一定要标记好添加和清除的条件
5.弹窗类相关的属性全部放在一个对象中。示例：用户弹窗
  userModel:{
	  id:1,// 用户ID
	  isShow:false,// 是否展示
	  ...
  }
```

### 页面规范
```
1.加载监听
 页面渲染需要分三步走：
 加载前：
	显示loading
 加载后：
	有数据：正常渲染
	无数据：显示空状态
2.每个页面一定要添加注释。示例格式
  * title 页面标题
3.项目中优先使用双引号，若非内嵌，不使用单引号
```

### 分支
```
主分支   master
开发分支 姓氏简称/dev
```

### 公共组件
```
位置：src/views/components
功能：
	image
		swiperPicture: 轮播式图库
		userPicture  : 用户图库
	map
		poi          : poi搜索
	upload
		annex        : 附件上传。多图平铺
		image		 : 单张图片上传。支持身份证识别
	wechat
		job          : 同步显示微信端职位详情页UI
	handleEventl	 : 延迟处理定时器。
	breadcrumb		 : 面包屑导航
```

### 公共表格样式(底部分页器)
```
位置：/merchantManagement/notes
功能：
  table表格样式处理
    <div class="m-table g_mt_20 antd-table table_container">
      <a-table sticky :columns="columns" :data-source="tableData.list" size="middle" :pagination="false" :loading="tableData.loading" class="g_clear_scroll" :scroll="{x:'100%'}">
      </a-table>
      <div class="g_pb_16 g_pt_16 g_pageBottom" v-if="tableData.list.length > 0">
      </div>
    </div>

    css
      .pageBottom {
        position: sticky;
        bottom: -16px;
        width: 100%;
        background-color: #fff;
        z-index: 999;
      }
```