为自己编码！

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

README.md

+# 保险移动平台概述

## 1.介绍
+Agera是一套基于React / React Native快速开发保险移动端项目的解决方案。如今在移动保险类App业务发展迅速，需求多样化，复杂度越来越高，开发周期短。能够快速、高质量开发移动端项目对公司显的尤为重要。
+
+近年来公司基于React / React Native开发多个项目：交银e保通、交银爱行销、太平客户通。这些项目基础上开发平台。
+Agera不是简单的整合功能。能灵活应用，组装模块，并能应对不断变化的需求。将各功能尽可能做拆分，分散成多个子项目开发。子项目命名为xx功能包。
+
+Agera一期，要建立稳定的演示环境，演示在线投保（包括空中签名、保单签收），培训，绩效查询，行销工具等，成为公司移动项目销售的敲门砖。
+
+Agera二期，能为项目开发提供现成的组件、工具，减少重复工作，提升项目质量，缩短开发周期。
+
+## 2.需求
+
+### 2.1 在线投保
+
+投保分为：产品详情展示（有试算功能）、产品信息录入、健告、订单详情（支付）、结果页面。
+为了最大程度复用页面，通过配置来控制保险产品对应的页面组件，模版包含产品信息录入的规则、健告内容、页面组件顺序、样式等。
+
+### 2.2 行销工具
+
+保全、理赔、用户分析、电子名片等
+分析目标客户购买倾向，获取客户微信等联系方式，鼓励用户分享资讯。
+行销工具，能方便业务员 随时针对用户情况制定保险计划，依靠匹配模型，历史案例等
+
+### 2.3 人员管理
+
+列表形式展示培训咨询，支持分享
+查询绩效指标，团队排名，时间段查询，地区查询，支持各维度展示业绩。
+
+人员管理功能可参照钉钉。
+
+## 3.前端
+
+支持端:
+
+* 原生App（React Native）
+* Web（React / Taro）
+* xx小程序 (Taro)
+
+前端架构:
+
+![](fontend.jpg)
+
+### 3.1功能包开发
+
+### 3.1.1拆分
+
+功能包区分App功能包和web功能包（小程序归属web）。
+
+按业务分为三个功能包：在线投保功能包、行销工具功能包、人员管理功能包。
+
+除xx业务功能包外，还有基础功能包和命令行工具Agera-cliAgera-cli。
+
+功能包通过npm管理，一行命令就可以控制安装或卸载。
+
+App在线投保功能包：
+
+* 投保试算
+	* 计划书
+	* 保单体检
+* 产品详情
+	* 投保人
+	* 被保险人
+	* 受益人
+* 健康告知
+* 支付
+* 回执签收
+* 订单列表
+* 订单详情
+
+App行销工具功能包：
+
+* 保全
+	* 手机号码变更
+	* 邮箱地址变更
+	* 地址变更
+	* 保单续期
+	* 网点
+* 理赔
+	* 报案
+	* 理赔申请
+	* 理赔查询
+* 活动
+	* 健步行
+	* 抽奖
+	* 商城
+	* 卡片
+	* 评测
+* 用户画像
+* 电子名片
+
+App人员管理功能包：
+
+* 任务管理
+	* 团队管理
+	* 个人任务
+* 客户管理
+* 考勤
+* 培训
+	* 案例分享
+	* 咨询
+* 绩效
+* 会议
+	* 例会
+	* 总结会
+* 日志
+	* 日报
+	* 拜访
+	* 业绩
+* 审批
+	* 请假
+	* 补卡
+
+
+App基础功能包：
+
+原生组件部分：
+
+* 拍照 + 相册
+* 图片缓存
+* 二维码
+* OCR
+* 语音
+* 地图
+* 推送
+* 支付
+* 分享 + 授权登录
+* 唤起小程序
+* 手写板
+* 多图片上传
+* 聊天
+* Lottie动画
+* 下拉刷新长列表
+
+JS组件部分：
+
+* 徽章
+* 角标
+* 多选
+* 单选
+* 按钮
+* 弹框
+* 九宫格
+* toast
+* 自定义选择框
+* 地区选择
+* 时间选择
+* 日历
+* 手风琴
+* 侧滑
+
+JS工具类
+
+web在线投保功能包：
+
+* 投保试算
+	* 计划书
+	* 保单体检
+* 产品详情
+	* 投保人
+	* 被保险人
+	* 受益人
+* 健康告知
+* 支付
+* 回执签收
+* 订单列表
+* 订单详情
+* 空中签名
+
+web行销工具功能包：
+
+* 保全
+	* 手机号码变更
+	* 邮箱地址变更
+	* 地址变更
+	* 保单续期
+	* 网点
+* 理赔
+	* 报案
+	* 理赔申请
+	* 理赔查询
+* 活动
+	* 健步行
+	* 抽奖
+	* 商城
+	* 卡片
+	* 评测
+* 用户画像
+* 电子名片
+
+web人员管理功能包：
+
+* 任务管理
+	* 团队管理
+	* 个人任务
+* 客户管理
+* 考勤
+* 培训
+	* 案例分享
+	* 咨询
+* 绩效
+* 会议
+	* 例会
+	* 总结会
+* 日志
+	* 日报
+	* 拜访
+	* 业绩
+* 审批
+	* 请假
+	* 补卡
+
+web基础功能包：
+
+* 徽章
+* 角标
+* 多选
+* 单选
+* 按钮
+* 弹框
+* 九宫格
+* toast
+* 自定义选择框
+* 地区选择
+* 时间选择
+* 日历
+* 手风琴
+* 侧滑
+
+命令行工具:
+
+* App主工程脚手架
+* web主工程脚手架
+* App组件开发脚手架
+* web组件开发脚手架
+
+#### 3.1.2 App封装
+
+* 组件命名：Agera-App-[功能包名称]-[组件名称]
+* 遵循单一责任原则
+* 尽量使用无状态组件或继承PureComponent
+* UI组件借鉴antd
+* 网络请求使用axios，与web共用
+* 使用TypeScript
+
+拍照相册功能包封装示例
+
+![](publishnpm.jpg)
+
+#### 3.1.3 web封装
+
+
+为适配xx小程序，使用Taro。
+
+[Taro官网](https://taro.aotu.io/)
+
+Taro 以 微信小程序组件库 为标准，结合 jsx 语法规范，定制了一套自己的组件库规范。
+
+基于以上原则，在小程序端，我们可以使用所有的小程序原生组件，而在其他端，我们提供了对应的组件库实现。
+
+Web：@tarojs/components
+
+
+* 需要讨论是否将小程序独立为一个工程
+* 组件命名：Agera-web-[功能包名称]-[组件名称]
+* 遵循单一责任原则
+* 网络请求使用axios，与App共用
+
+
+
+
+#### 3.1.4 文档
+
+readme文档要求：安装步骤、如何使用、代码示例、属性列表、协议
+
+# ==============示例开始==============
+
+## Usage
+
+Import library
+
+```javascript
+import ImagePicker from 'react-native-image-crop-picker';
+```
+
+### Select from gallery
+
+Call single image picker with cropping
+```javascript
+ImagePicker.openPicker({
+  width: 300,
+  height: 400,
+  cropping: true
+}).then(image => {
+  console.log(image);
+});
+```
+
+Call multiple image picker
+
+```javascript
+ImagePicker.openPicker({
+  multiple: true
+}).then(images => {
+  console.log(images);
+});
+```
+
+Select video only from gallery
+
+```javascript
+ImagePicker.openPicker({
+  mediaType: "video",
+}).then((video) => {
+  console.log(video);
+});
+```
+
+**Android: The prop 'cropping' has been known to cause videos not to be display in the gallery on Android. Please do not set cropping to true when selecting videos.**
+
+
+### Select from camera 
+
+#### Image
+
+```javascript
+ImagePicker.openCamera({
+  width: 300,
+  height: 400,
+  cropping: true,
+}).then(image => {
+  console.log(image);
+});
+```
+
+### Crop picture
+
+```javascript
+ImagePicker.openCropper({
+  path: 'my-file-path.jpg',
+  width: 300,
+  height: 400
+}).then(image => {
+  console.log(image);
+});
+```
+
+### Optional cleanup
+
+Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use `clean` to clean all tmp files, or `cleanSingle(path)` to clean single tmp file.
+
+```javascript
+ImagePicker.clean().then(() => {
+  console.log('removed all tmp images from tmp directory');
+}).catch(e => {
+  alert(e);
+});
+```
+
+### Request Object
+
+| Property                                |                   Type                   | Description                           |
+| --------------------------------------- | :--------------------------------------: | :--------------------------------------- |
+| cropping                                |           bool (default false)           | Enable or disable cropping               |
+| width                                   |                  number                  | Width of result image when used with `cropping` option |
+| height                                  |                  number                  | Height of result image when used with `cropping` option |
+| multiple                                |           bool (default false)           | Enable or disable multiple image selection |
+| writeTempFile (ios only)                |           bool (default true)            | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the `includeBase64` option and don't need to read files from disk. |
+| includeBase64                           |           bool (default false)           | When set to true, the image file content will be available as a base64-encoded string in the `data` property. Hint: To use this string as an image source, use it like: ``<Image source={{uri: `data:${image.mime};base64,${image.data}`}} />`` |
+# Install
+
+## Step 1
+
+```bash
+npm i react-native-image-crop-picker --save
+```
+
+## Step 2
+
+### iOS
+
+#### - If you use Cocoapods which is highly recommended:
+
+```bash
+cd ios
+pod init
+```
+
+#### - If you are not using Cocoapods which is not recommended:
+
+```bash
+react-native link react-native-image-crop-picker
+```
+
+### Android
+
+```bash
+react-native link react-native-image-crop-picker
+```
+
+## License
+*MIT*
+
+# ==============示例结束==============
+
+### 3.2 App主工程
+
+* React Native
+* 模块预加载
+* 热更新
+* 路由
+* 请求
+* webview
+* 第三方SDK配置
+* 打包
+
+### 3.3 web主工程
+
+* React
+* 路由
+* 请求
+* 打包
+
+### 3.4 npm
+
+npm私服方案:
+[部署cnpm](https://github.com/cnpm/cnpmjs.org)
+
+
+### 3.5 cli工具开发
+
+我们可以借鉴 vue-cli 的基本思路。vue-cli 是将项目模板放在 git 上，运行的时候再根据用户交互下载不同的模板，经过模板引擎渲染出来，生成项目。这样将模板和脚手架分离，就可以各自维护，即使模板有变动，只需要上传最新的模板即可，而不需要用户去更新脚手架就可以生成最新的项目。
+
+* commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
+* download-git-repo，下载并提取 git 仓库，用于下载项目模板。
+* Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
+* handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。
+* ora，下载过程久的话，可以用于显示下载中的动画效果。
+* chalk，可以给终端的字体加上颜色。
+* log-symbols，可以在终端上显示出 √ 或 × 等的图标。
+
+### 3.5 GitLab 
+
+[代码托管到公司GitLab](http://129.211.99.254:8088)，
+
+Git操作指引
+
+需审核代码
+![](gitmerg.jpg)
+
+不需要审核直接push
+
+![](gitpush.jpg)
+
+更新代码
+![](gitpull.jpg)
+
+### 3.6 持续集成
+
+实现流程自动化或一键操作，邮件通知等。结合shell脚本和Jenkins
+
+[jenkins官网](https://jenkins.io/)
+
+### 3.7 mock
+使用easy mock调试
+
+[本地部署](https://blog.csdn.net/u012878818/article/details/79926117)
+
+[直接使用easy-mock](https://easy-mock.com)
+
+[yapi](https://github.com/YMFE/yapi)
+
+### 3.8 使用
+
+#### 3.8.1大型项目中使用
+
+1.利用Docker镜像安装公司npm私服副本、Gitlab，可自行维护功能包，实现定制化。
+
+2.安装Agera-cli创建主项目
+
+3.nrm 设置npm镜像地址，npm安装功能包
+
+4.搭建easy mock
+
+5.项目开发
+
+![](uselocal.jpg)
+
+
+
+#### 3.8.2小型项目中使用
+
+1.nrm 设置npm镜像地址，直接从公司npm私服安装Agera-cli创建主项目
+
+2.npm安装功能包
+
+3.项目开发
+
+![](usenpm.jpg)
+
+## 4.后端
+
+Spring Cloud微服务框架搭建
+
+### 4.1微服务架构
+
+![](backend.jpg)
+
+### 4.2 SpringCloud
+Spring Cloud 为开发人员提供了快速构建分布式系统的一些工具，包括配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等等。运行环境简单
+
+#### 4.2.1 Spring Boot
+使用 Spring Boot 可以非常方便、快速搭建项目，使我们不用关心框架之间的兼容性，适用版本等各种问题，我们想使用任何东西，仅仅添加一个配置就可以，所以使用 Spring Boot 非常适合构建微服务。
+
+#### 4.2.2 Eureka
+Eureka服务端
+
+    Eureka服务端，即服务注册中心。它同其他服务注册中心一样，支持高可用配置。依托于强一致性提供良好的服务实例可用性，可以应对多种不同的故障场景。
+
+   Eureka服务端支持集群模式部署，当集群中有分片发生故障的时候，Eureka会自动转入自我保护模式。它允许在分片发生故障的时候继续提供服务的发现和注册，当故障分配恢复时，集群中的其他分片会把他们的状态再次同步回来。集群中的的不同服务注册中心通过异步模式互相复制各自的状态，这也意味着在给定的时间点每个实例关于所有服务的状态可能存在不一致的现象。
+
+Eureka客户端
+
+Eureka客户端，主要处理服务的注册和发现。客户端服务通过注册和参数配置的方式，嵌入在客户端应用程序的代码中。在应用程序启动时，Eureka客户端向服务注册中心注册自身提供的服务，并周期性的发送心跳来更新它的服务租约。同时，他也能从服务端查询当前注册的服务信息并把它们缓存到本地并周期行的刷新服务状态。
+
+![](erueka.jpg)
+
+#### 4.2.3 zuul
+
+Zuul可以通过加载动态过滤机制，从而实现以下各项功能：
+
+　　1.验证与安全保障: 识别面向各类资源的验证要求并拒绝那些与要求不符的请求。
+
+　　2.审查与监控: 在边缘位置追踪有意义数据及统计结果，从而为我们带来准确的生产状态结论。
+
+　　3.动态路由: 以动态方式根据需要将请求路由至不同后端集群处。
+
+　　4.压力测试: 逐渐增加指向集群的负载流量，从而计算性能水平。
+
+　　5.负载分配: 为每一种负载类型分配对应容量，并弃用超出限定值的请求。
+
+　　6.静态响应处理: 在边缘位置直接建立部分响应，从而避免其流入内部集群。
+
+　　7.多区域弹性: 跨越AWS区域进行请求路由，旨在实现ELB使用多样化并保证边缘位置与使用者尽可能接近。
+　　
+　　![](zuul.jpg)
+　　
+#### 4.2.4 Hystrix
+   Hystrix是由Netflix开源的一个延迟和容错库，用于隔离访问远程系统、服务或者第三方库，防止级联失败，从而提升系统的可用性、容错性与局部应用的弹性，是一个实现了超市机制和断路器模式的工具类库。当依赖的服务方出现故障不可用时，Hystrix可以将出现问题的服务通过熔断、降级等手段隔离开来，一但打开，就会直接拦截掉对故障服务的调用，从而防止故障进一步扩大。
+
+#### 4.2.5 Redis的哨兵模式
+哨兵模式是一种特殊的模式，首先Redis提供了哨兵的命令，哨兵是一个独立的进程，作为进程，它会独立运行。其原理是哨兵通过发送命令，等待Redis服务器响应，从而监控运行的多个Redis实例。
+
+![](redis.jpg)
+
+#### 4.2.6 Apollo配置中心
+Apollo（阿波罗）是携程框架部门研发的配置管理平台，能够集中化管理应用不同环境、不同集群的配置，配置修改后能够实时推送到应用端。
+
+#### 4.2.7 ELK
+
+ELK 是 elastic 公司旗下三款产品 ElasticSearch 、Logstash 、Kibana 的首字母组合。
+
+ElasticSearch 是一个基于 Lucene 构建的开源，分布式，RESTful 搜索引擎。
+
+Logstash 传输和处理你的日志、事务或其他数据。
+
+Kibana 将 Elasticsearch 的数据分析并渲染为可视化的报表。
+
+对于有一定规模的公司来说，通常会很多个应用，并部署在大量的服务器上。运维和开发人员常常需要通过查看日志来定位问题。如果应用是集群化部署，试想如果登录一台台服务器去查看日志，是多么费时费力。
+
+而通过 ELK 这套解决方案，可以同时实现日志收集、日志搜索和日志分析的功能。
+
+
+#### 4.2.8 Feign
+
+Feign是Netflix开发的声明式、模板化的HTTP客户端， Feign可以帮助我们更快捷、优雅地调用HTTP API。
+
+在Spring Cloud中，使用Feign非常简单——创建一个接口，并在接口上添加一些注解，代码就完成了。Feign支持多种注解，例如Feign自带的注解或者JAX-RS注解等。
+
+
+#### 4.2.9 RabbitMQ
+
+RabbitMQ他是一个消息中间件,主要作用是降低主程序线程压力,是一种非阻塞模式的分布式消息队列服务器，有生产者生产到rabbitmq，消费者消费。
+应用场景如下:
+   1. 系统集成与分布式系统的设计，各种子系统通过消息来对接，这种解决方案也逐步发展成一种架构风格，即“通过消息传递的架构”。
+   2. 异步任务处理结果回调的设计
+   3. 并发请求的压力高可用性设计
+
+## 5.其它方面
+
+优化App，快速响应问题，需要关注以下方面:
+
+* 应用更新（更新策略, 包括 native，rn，profile）
+* 崩溃分析 （crash report）
+* 链路日志  (log report)
+* 性能分析（performance report）
+* 网络连接  (强网，弱网环境下不同的策略，重试机制)  
+* 数据存储（指本地存储的不同策略）
+* 缓存处理 （指自定义 http 缓存策略，自定义图片缓存策略）
+* 下载处理（重试机制，协议策略，下载大容量文件的处理策略）
+* 消息推送 （推送策略）
+* 数据分析（用户行为日志，app 主要行为日志【比如启动】，不同渠道。
+
+
+
+
+
\ No newline at end of file