diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..6cf63216f
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-2"
+  ],
+  "plugins": [[
+	  "transform-runtime",
+	  {
+	    "helpers": false,
+	    "polyfill": false,
+	    "regenerator": true,
+	    "moduleName": "babel-runtime"
+	  }
+	]]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 9a82a1138..79d23d759 100644
--- a/.gitignore
+++ b/.gitignore
@@ -86,3 +86,4 @@ typings/
 
 .DS_Store
 .idea/*
+.forgeplus-react.sublime-workspace
diff --git a/build.tar.gz b/build.tar.gz
new file mode 100644
index 000000000..1131b78ab
Binary files /dev/null and b/build.tar.gz differ
diff --git a/forgeplus-react.sublime-workspace b/forgeplus-react.sublime-workspace
new file mode 100644
index 000000000..08ec48f4e
--- /dev/null
+++ b/forgeplus-react.sublime-workspace
@@ -0,0 +1,317 @@
+{
+	"auto_complete":
+	{
+		"selected_items":
+		[
+			[
+				"samp",
+				"samp2_method"
+			],
+			[
+				"modu",
+				"module_method"
+			],
+			[
+				"cu",
+				"currentTerm"
+			],
+			[
+				"req",
+				"requestVote"
+			],
+			[
+				"reque",
+				"RequestVote"
+			],
+			[
+				"App",
+				"AppendEntries"
+			],
+			[
+				"hea",
+				"heartBeatInterval"
+			],
+			[
+				"time",
+				"timeOut"
+			],
+			[
+				"ele",
+				"electionTimeout"
+			],
+			[
+				"R",
+				"Raft"
+			],
+			[
+				"vote",
+				"votedFor"
+			],
+			[
+				"Ra",
+				"RaftState"
+			],
+			[
+				"is",
+				"isleader"
+			]
+		]
+	},
+	"buffers":
+	[
+		{
+			"file": "src/redux/actions/actionTypes.js",
+			"settings":
+			{
+				"buffer_size": 5688,
+				"encoding": "UTF-8",
+				"line_ending": "Unix"
+			}
+		}
+	],
+	"build_system": "",
+	"build_system_choices":
+	[
+	],
+	"build_varint": "",
+	"command_palette":
+	{
+		"height": 0.0,
+		"last_filter": "",
+		"selected_items":
+		[
+		],
+		"width": 0.0
+	},
+	"console":
+	{
+		"height": 171.0,
+		"history":
+		[
+			"ls"
+		]
+	},
+	"distraction_free":
+	{
+		"menu_visible": true,
+		"show_minimap": false,
+		"show_open_files": false,
+		"show_tabs": false,
+		"side_bar_visible": false,
+		"status_bar_visible": false
+	},
+	"expanded_folders":
+	[
+		"/home/qyzh/new_trustie/forgeplus-react"
+	],
+	"file_history":
+	[
+		"/home/qyzh/OSS/forgeplus/app/models/user.rb",
+		"/home/qyzh/OSS/forgeplus/db/structure.sql",
+		"/home/qyzh/OSS/forgeplus/app/controllers/settings_controller.rb",
+		"/home/qyzh/OSS/forgeplus/app/controllers/application_controller.rb",
+		"/home/qyzh/OSS/Trustie/app/controllers/projects_controller.rb",
+		"/home/qyzh/temp.sh",
+		"/home/qyzh/OSS/Trustie/Gemfile",
+		"/home/qyzh/.npm/_logs/2020-06-07T02_42_06_886Z-debug.log",
+		"/home/qyzh/OSS/forgeplus/app/controllers/users_controller.rb",
+		"/home/qyzh/OSS/forgeplus/app/controllers/accounts_controller.rb",
+		"/home/qyzh/custom/conf/app.ini",
+		"/home/qyzh/OSS/Trustie_old/Gemfile.lock",
+		"/home/qyzh/OSS/Trustie/Gemfile.lock",
+		"/home/qyzh/ruby_study/test.rb",
+		"/home/qyzh/RubymineProjects/myblog/app/controller/users_controller.rb",
+		"/home/qyzh/OSS/forgeplus/app/libs/limit_forbid_control.rb",
+		"/home/qyzh/OSS/forgeplus/log/development.log",
+		"/home/qyzh/NJU-DisSys-2017/src/raft/raft.go",
+		"/home/qyzh/OSS/forgeplus/config/application.rb",
+		"/home/qyzh/RubymineProjects/demo/app/helpers/welcome_helper.rb",
+		"/home/qyzh/RubymineProjects/demo/app/controllers/welcome_controller.rb",
+		"/home/qyzh/RubymineProjects/demo/config/routes.rb",
+		"/home/qyzh/RubymineProjects/demo/app/views/welcome/index.html.erb",
+		"/home/qyzh/trustie/Gemfile",
+		"/home/qyzh/trustie/Gemfile.lock",
+		"/home/qyzh/ruby_study/test",
+		"/home/qyzh/NJU-DisSys-2017/src/labrpc/test_test.go",
+		"/home/qyzh/NJU-DisSys-2017/src/labrpc/labrpc.go",
+		"/home/qyzh/NJU-DisSys-2017/src/raft/test_test.go",
+		"/home/qyzh/NJU-DisSys-2017/src/raft/persister.go",
+		"/home/qyzh/NJU-DisSys-2017/src/raft/util.go",
+		"/home/qyzh/NJU-DisSys-2017/src/raft/config.go"
+	],
+	"find":
+	{
+		"height": 29.0
+	},
+	"find_in_files":
+	{
+		"height": 0.0,
+		"where_history":
+		[
+		]
+	},
+	"find_state":
+	{
+		"case_sensitive": true,
+		"find_history":
+		[
+			"current_user",
+			"user_set",
+			"login",
+			"platform",
+			"Platform不包含于列表中",
+			"find_by_",
+			"find_by",
+			"3.2.22",
+			"bug",
+			"persister",
+			"currentTerm",
+			"currentTern",
+			"term",
+			"your",
+			"electionInterval",
+			"your",
+			"if",
+			"your",
+			"Persister",
+			"make",
+			"Your code here",
+			"Call",
+			"labrpc",
+			"main"
+		],
+		"highlight": true,
+		"in_selection": false,
+		"preserve_case": false,
+		"regex": false,
+		"replace_history":
+		[
+		],
+		"reverse": false,
+		"show_context": true,
+		"use_buffer2": true,
+		"whole_word": false,
+		"wrap": true
+	},
+	"groups":
+	[
+		{
+			"selected": 0,
+			"sheets":
+			[
+				{
+					"buffer": 0,
+					"file": "src/redux/actions/actionTypes.js",
+					"semi_transient": false,
+					"settings":
+					{
+						"buffer_size": 5688,
+						"regions":
+						{
+						},
+						"selection":
+						[
+							[
+								0,
+								0
+							]
+						],
+						"settings":
+						{
+							"syntax": "Packages/JavaScript/JavaScript.sublime-syntax",
+							"tab_size": 2,
+							"translate_tabs_to_spaces": true
+						},
+						"translation.x": 0.0,
+						"translation.y": 0.0,
+						"zoom_level": 1.0
+					},
+					"stack_index": 0,
+					"type": "text"
+				}
+			]
+		}
+	],
+	"incremental_find":
+	{
+		"height": 29.0
+	},
+	"input":
+	{
+		"height": 0.0
+	},
+	"layout":
+	{
+		"cells":
+		[
+			[
+				0,
+				0,
+				1,
+				1
+			]
+		],
+		"cols":
+		[
+			0.0,
+			1.0
+		],
+		"rows":
+		[
+			0.0,
+			1.0
+		]
+	},
+	"menu_visible": true,
+	"output.find_results":
+	{
+		"height": 0.0
+	},
+	"pinned_build_system": "",
+	"project": "forgeplus-react.sublime-project",
+	"replace":
+	{
+		"height": 54.0
+	},
+	"save_all_on_build": true,
+	"select_file":
+	{
+		"height": 0.0,
+		"last_filter": "",
+		"selected_items":
+		[
+		],
+		"width": 0.0
+	},
+	"select_project":
+	{
+		"height": 0.0,
+		"last_filter": "",
+		"selected_items":
+		[
+		],
+		"width": 0.0
+	},
+	"select_symbol":
+	{
+		"height": 0.0,
+		"last_filter": "",
+		"selected_items":
+		[
+		],
+		"width": 0.0
+	},
+	"selected_group": 0,
+	"settings":
+	{
+	},
+	"show_minimap": true,
+	"show_open_files": false,
+	"show_tabs": true,
+	"side_bar_visible": true,
+	"side_bar_width": 288.0,
+	"status_bar_visible": true,
+	"template_settings":
+	{
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index 2c5f2c418..0c961a831 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,11 @@
         "warning": "^4.0.3"
       }
     },
+    "@ant-design/css-animation": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.3.tgz",
+      "integrity": "sha512-LrX0OGZtW+W6iLnTAqnTaoIsRelYeuLZWsrmBJFUXDALQphPsN8cE5DCsmoSlL0QYb94BQxINiuS70Ar/8BNgA=="
+    },
     "@ant-design/icons": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-2.1.1.tgz",
@@ -380,22 +385,21 @@
       "resolved": "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.1.0.tgz",
       "integrity": "sha512-W90Q79EuCYT++39aT/VKGyk7hUt2gPN3rN+ifPUvY4rdjgZlfwdCg9q7yzj04hke/zgdHsbXFfyFijBvrRuU5A=="
     },
+    "@reach/observe-rect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
+      "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA=="
     },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
-    },
     "@types/glob": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
+      "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==",
       "requires": {
-        "@types/events": "*",
         "@types/minimatch": "*",
         "@types/node": "*"
       }
@@ -1238,12 +1242,18 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
     "axios": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
-      "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
+        "follow-redirects": "^1.10.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+          "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+        }
       }
     },
     "axobject-query": {
@@ -1254,6 +1264,55 @@
         "ast-types-flow": "0.0.7"
       }
     },
+    "babel-cli": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-cli/download/babel-cli-6.26.0.tgz",
+      "integrity": "sha1-UCq1SHTX24itALiHoGODzgPQAvE=",
+      "dev": true,
+      "requires": {
+        "babel-core": "^6.26.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-register": "^6.26.0",
+        "babel-runtime": "^6.26.0",
+        "chokidar": "^1.6.1",
+        "commander": "^2.11.0",
+        "convert-source-map": "^1.5.0",
+        "fs-readdir-recursive": "^1.0.0",
+        "glob": "^7.1.2",
+        "lodash": "^4.17.4",
+        "output-file-sync": "^1.1.2",
+        "path-is-absolute": "^1.0.1",
+        "slash": "^1.0.0",
+        "source-map": "^0.5.6",
+        "v8flags": "^2.1.1"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-1.7.0.tgz?cache=0&sync_timestamp=1602585438968&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-1.7.0.tgz",
+          "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "^1.3.0",
+            "async-each": "^1.0.0",
+            "fsevents": "^1.0.0",
+            "glob-parent": "^2.0.0",
+            "inherits": "^2.0.1",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^2.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1273,8 +1332,8 @@
     },
     "babel-core": {
       "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.0.tgz",
-      "integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=",
+      "resolved": "https://registry.npm.taobao.org/babel-core/download/babel-core-6.26.0.tgz",
+      "integrity": "sha512-FSiqfr4SYrH5Zv5KgWahyY99VC+Aod1ioMRNvL1lPS4WTUqvPAdYo7ioWEhDHEDqZADapbJZMX0sBuRsc93bDQ==",
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-generator": "^6.26.0",
@@ -1299,8 +1358,8 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1605791507452&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
+          "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
           "requires": {
             "ms": "2.0.0"
           }
@@ -1345,6 +1404,17 @@
         }
       }
     },
+    "babel-helper-bindify-decorators": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-bindify-decorators/download/babel-helper-bindify-decorators-6.24.1.tgz",
+      "integrity": "sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
     "babel-helper-builder-binary-assignment-operator-visitor": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz",
@@ -1397,6 +1467,18 @@
         "babel-types": "^6.24.1"
       }
     },
+    "babel-helper-explode-class": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-explode-class/download/babel-helper-explode-class-6.24.1.tgz",
+      "integrity": "sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=",
+      "dev": true,
+      "requires": {
+        "babel-helper-bindify-decorators": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
     "babel-helper-function-name": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
@@ -1585,11 +1667,23 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
       "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU="
     },
+    "babel-plugin-syntax-async-generators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-async-generators/download/babel-plugin-syntax-async-generators-6.13.0.tgz",
+      "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=",
+      "dev": true
+    },
     "babel-plugin-syntax-class-properties": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
       "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
     },
+    "babel-plugin-syntax-decorators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-decorators/download/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
+      "dev": true
+    },
     "babel-plugin-syntax-dynamic-import": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
@@ -1620,6 +1714,17 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
       "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM="
     },
+    "babel-plugin-transform-async-generator-functions": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-transform-async-generator-functions/download/babel-plugin-transform-async-generator-functions-6.24.1.tgz",
+      "integrity": "sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=",
+      "dev": true,
+      "requires": {
+        "babel-helper-remap-async-to-generator": "^6.24.1",
+        "babel-plugin-syntax-async-generators": "^6.5.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
     "babel-plugin-transform-async-to-generator": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz",
@@ -1641,6 +1746,19 @@
         "babel-template": "^6.24.1"
       }
     },
+    "babel-plugin-transform-decorators": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-transform-decorators/download/babel-plugin-transform-decorators-6.24.1.tgz",
+      "integrity": "sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=",
+      "dev": true,
+      "requires": {
+        "babel-helper-explode-class": "^6.24.1",
+        "babel-plugin-syntax-decorators": "^6.13.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
@@ -1935,8 +2053,8 @@
     },
     "babel-plugin-transform-runtime": {
       "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
-      "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz",
+      "integrity": "sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==",
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -1950,6 +2068,25 @@
         "babel-types": "^6.24.1"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-polyfill/download/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz?cache=0&sync_timestamp=1595456367497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
+          "dev": true
+        }
+      }
+    },
     "babel-preset-env": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.1.tgz",
@@ -1987,6 +2124,38 @@
         "semver": "^5.3.0"
       }
     },
+    "babel-preset-es2015": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-preset-es2015/download/babel-preset-es2015-6.24.1.tgz",
+      "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-check-es2015-constants": "^6.22.0",
+        "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
+        "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
+        "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
+        "babel-plugin-transform-es2015-classes": "^6.24.1",
+        "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
+        "babel-plugin-transform-es2015-destructuring": "^6.22.0",
+        "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
+        "babel-plugin-transform-es2015-for-of": "^6.22.0",
+        "babel-plugin-transform-es2015-function-name": "^6.24.1",
+        "babel-plugin-transform-es2015-literals": "^6.22.0",
+        "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+        "babel-plugin-transform-es2015-object-super": "^6.24.1",
+        "babel-plugin-transform-es2015-parameters": "^6.24.1",
+        "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
+        "babel-plugin-transform-es2015-spread": "^6.22.0",
+        "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
+        "babel-plugin-transform-es2015-template-literals": "^6.22.0",
+        "babel-plugin-transform-es2015-typeof-symbol": "^6.22.0",
+        "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
+        "babel-plugin-transform-regenerator": "^6.24.1"
+      }
+    },
     "babel-preset-flow": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz",
@@ -2005,8 +2174,8 @@
     },
     "babel-preset-react": {
       "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-react/-/babel-preset-react-6.24.1.tgz",
-      "integrity": "sha1-umnfrqRfw+xjm2pOzqbhdwLJE4A=",
+      "resolved": "https://registry.npm.taobao.org/babel-preset-react/download/babel-preset-react-6.24.1.tgz",
+      "integrity": "sha512-phQe3bElbgF887UM0Dhz55d22ob8czTL1kbhZFwpCE6+R/X9kHktfwmx9JZb+bBSVRGphP5tZ9oWhVhlgjrX3Q==",
       "requires": {
         "babel-plugin-syntax-jsx": "^6.3.13",
         "babel-plugin-transform-react-display-name": "^6.23.0",
@@ -2036,6 +2205,31 @@
         "babel-preset-react": "6.24.1"
       }
     },
+    "babel-preset-stage-2": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-preset-stage-2/download/babel-preset-stage-2-6.24.1.tgz",
+      "integrity": "sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-decorators": "^6.24.1",
+        "babel-preset-stage-3": "^6.24.1"
+      }
+    },
+    "babel-preset-stage-3": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npm.taobao.org/babel-preset-stage-3/download/babel-preset-stage-3-6.24.1.tgz",
+      "integrity": "sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+        "babel-plugin-transform-async-generator-functions": "^6.24.1",
+        "babel-plugin-transform-async-to-generator": "^6.24.1",
+        "babel-plugin-transform-exponentiation-operator": "^6.24.1",
+        "babel-plugin-transform-object-rest-spread": "^6.22.0"
+      }
+    },
     "babel-register": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
@@ -2583,9 +2777,9 @@
       },
       "dependencies": {
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
           "dev": true
         }
       }
@@ -3306,9 +3500,9 @@
       "integrity": "sha1-RocMyMGlDQm61TmzOpg9vUqjSx4="
     },
     "codemirror": {
-      "version": "5.53.2",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.53.2.tgz",
-      "integrity": "sha512-wvSQKS4E+P8Fxn/AQ+tQtJnF1qH5UOlxtugFLpubEZ5jcdH2iXTVinb+Xc/4QjshuOxRm4fUsU2QPF1JJKiyXA=="
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.61.0.tgz",
+      "integrity": "sha512-D3wYH90tYY1BsKlUe0oNj2JAhQ9TepkD51auk3N7q+4uz7A/cgJ5JsWHreT0PqieW1QhOuqxQ2reCXV1YXzecg=="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -3652,11 +3846,10 @@
       }
     },
     "create-react-class": {
-      "version": "15.6.3",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
-      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
       "requires": {
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
       }
@@ -4216,11 +4409,47 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
     "d3-color": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
       "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
     },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+          "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        }
+      }
+    },
+    "d3-delaunay": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
+      "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+      "requires": {
+        "delaunator": "4"
+      }
+    },
     "d3-dispatch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
@@ -4231,6 +4460,36 @@
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
       "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
     },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+          "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        }
+      }
+    },
+    "d3-hexbin": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+      "integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
     "d3-interpolate": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
@@ -4239,11 +4498,79 @@
         "d3-color": "1"
       }
     },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-sankey": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.7.1.tgz",
+      "integrity": "sha1-0imDImj8aaf+yEgD6WwiVqYUxSE=",
+      "requires": {
+        "d3-array": "1",
+        "d3-collection": "1",
+        "d3-shape": "^1.2.0"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+          "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        }
+      }
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      },
+      "dependencies": {
+        "d3-interpolate": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+          "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+          "requires": {
+            "d3-color": "1 - 2"
+          }
+        }
+      }
+    },
     "d3-selection": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
       "integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
     },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
     "d3-timer": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
@@ -4262,6 +4589,11 @@
         "d3-timer": "1"
       }
     },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -4513,6 +4845,11 @@
         }
       }
     },
+    "delaunator": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
+      "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -4797,9 +5134,9 @@
       }
     },
     "dot-prop": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+      "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
       "requires": {
         "is-obj": "^1.0.0"
       }
@@ -4898,18 +5235,26 @@
       "integrity": "sha512-vhGNxT87PdZA6Ak4E0QhArwGzNcSPUwSN7n9wCFLeBlY2NNuuiwguQuQIp7P5oB65PLJ892yKcHiqz1xLWeiug=="
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
       "dev": true,
       "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
         "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
       }
     },
     "emoji-regex": {
@@ -6888,6 +7233,12 @@
         "minipass": "^3.0.0"
       }
     },
+    "fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/fs-readdir-recursive/download/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha1-4y/AMKLM7kSmtTcTCNpUvgs5fSc=",
+      "dev": true
+    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -7734,9 +8085,9 @@
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
     },
     "handlebars": {
-      "version": "4.7.6",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
-      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
       "requires": {
         "minimist": "^1.2.5",
         "neo-async": "^2.6.0",
@@ -7746,13 +8097,10 @@
       },
       "dependencies": {
         "uglify-js": {
-          "version": "3.9.1",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.1.tgz",
-          "integrity": "sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==",
-          "optional": true,
-          "requires": {
-            "commander": "~2.20.3"
-          }
+          "version": "3.13.6",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.6.tgz",
+          "integrity": "sha512-rRprLwl8RVaS+Qvx3Wh5hPfPBn9++G6xkGlUupya0s5aDmNjI7z3lnRLB3u7sN4OmbB0pWgzhM9BEJyiWAwtAA==",
+          "optional": true
         },
         "wordwrap": {
           "version": "1.0.0",
@@ -7979,6 +8327,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoek": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8011,9 +8364,9 @@
       "dev": true
     },
     "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "hpack.js": {
       "version": "2.1.6",
@@ -8148,15 +8501,10 @@
         }
       }
     },
-    "http-parser-js": {
-      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
-      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
-    },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -8164,9 +8512,9 @@
       },
       "dependencies": {
         "eventemitter3": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
-          "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
+          "version": "4.0.7",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+          "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
         }
       }
     },
@@ -8711,9 +9059,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
       "version": "3.3.0",
@@ -8775,6 +9123,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "interpret": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
@@ -8839,11 +9192,6 @@
         "binary-extensions": "^1.0.0"
       }
     },
-    "is-buffer": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-      "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
-    },
     "is-builtin-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
@@ -10091,9 +10439,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash-es": {
       "version": "4.17.15",
@@ -10828,9 +11176,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
     },
     "node-gyp": {
       "version": "3.8.0",
@@ -11339,6 +11687,17 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "output-file-sync": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/output-file-sync/download/output-file-sync-1.1.2.tgz",
+      "integrity": "sha1-0KM+7+YaIF+suQCS6CZZjVJFznY=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.4",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.0"
+      }
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -11616,19 +11975,19 @@
       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
     },
     "portfinder": {
-      "version": "1.0.25",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
-      "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==",
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
       "requires": {
         "async": "^2.6.2",
         "debug": "^3.1.1",
-        "mkdirp": "^0.5.1"
+        "mkdirp": "^0.5.5"
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
             "ms": "^2.1.1"
           }
@@ -13848,9 +14207,9 @@
       "dev": true
     },
     "querystringify": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
-      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
     "quill": {
       "version": "1.3.7",
@@ -14378,18 +14737,14 @@
       },
       "dependencies": {
         "rc-animate": {
-          "version": "3.0.0-rc.6",
-          "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0-rc.6.tgz",
-          "integrity": "sha512-oBLPpiT6Q4t6YvD/pkLcmofBP1p01TX0Otse8Q4+Mxt8J+VSDflLZGIgf62EwkvRwsQUkLPjZVFBsldnPKLzjg==",
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.1.1.tgz",
+          "integrity": "sha512-8wg2Zg3EETy0k/9kYuis30NJNQg1D6/WSQwnCiz6SvyxQXNet/rVraRz3bPngwY6rcU2nlRvoShiYOorXyF7Sg==",
           "requires": {
-            "babel-runtime": "6.x",
-            "classnames": "^2.2.5",
-            "component-classes": "^1.2.6",
-            "fbjs": "^0.8.16",
-            "prop-types": "15.x",
+            "@ant-design/css-animation": "^1.7.2",
+            "classnames": "^2.2.6",
             "raf": "^3.4.0",
-            "rc-util": "^4.5.0",
-            "react-lifecycles-compat": "^3.0.4"
+            "rc-util": "^4.15.3"
           }
         },
         "warning": {
@@ -14449,18 +14804,14 @@
           },
           "dependencies": {
             "rc-animate": {
-              "version": "3.0.0-rc.6",
-              "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0-rc.6.tgz",
-              "integrity": "sha512-oBLPpiT6Q4t6YvD/pkLcmofBP1p01TX0Otse8Q4+Mxt8J+VSDflLZGIgf62EwkvRwsQUkLPjZVFBsldnPKLzjg==",
+              "version": "3.1.1",
+              "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.1.1.tgz",
+              "integrity": "sha512-8wg2Zg3EETy0k/9kYuis30NJNQg1D6/WSQwnCiz6SvyxQXNet/rVraRz3bPngwY6rcU2nlRvoShiYOorXyF7Sg==",
               "requires": {
-                "babel-runtime": "6.x",
-                "classnames": "^2.2.5",
-                "component-classes": "^1.2.6",
-                "fbjs": "^0.8.16",
-                "prop-types": "15.x",
+                "@ant-design/css-animation": "^1.7.2",
+                "classnames": "^2.2.6",
                 "raf": "^3.4.0",
-                "rc-util": "^4.5.0",
-                "react-lifecycles-compat": "^3.0.4"
+                "rc-util": "^4.15.3"
               }
             }
           }
@@ -14529,6 +14880,18 @@
         "tiny-invariant": "^1.0.4"
       }
     },
+    "react-charts": {
+      "version": "2.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/react-charts/-/react-charts-2.0.0-beta.7.tgz",
+      "integrity": "sha512-iUspg9rnx7kD0H/wsK67HNUioOgKgJ8WRXr/Tk3EGP2qcFb9Vo7pjDk4oz1jH12TC+mqL+HFxNYraMkhWd6CUw==",
+      "requires": {
+        "@reach/observe-rect": "^1.1.0",
+        "d3-delaunay": "^5.2.1",
+        "d3-scale": "^3.2.1",
+        "d3-shape": "^1.3.7",
+        "d3-voronoi": "^1.1.2"
+      }
+    },
     "react-codemirror": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-codemirror/-/react-codemirror-1.0.0.tgz",
@@ -14932,6 +15295,23 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
     "react-onclickoutside": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
@@ -14940,7 +15320,7 @@
     "react-player": {
       "version": "1.15.3",
       "resolved": "https://registry.npm.taobao.org/react-player/download/react-player-1.15.3.tgz",
-      "integrity": "sha1-0AzxRfnIYYTLCgcaH7+Oy3tomH8=",
+      "integrity": "sha512-8fc0R1AipFIy7l4lKgnIg+gMU2IY32ZMxxBlINjXAq/YnN3HUP3hOaE+aQ0lQv+a1/MMZgbekWD86ZGDO7kB8g==",
       "requires": {
         "deepmerge": "^4.0.0",
         "load-script": "^1.0.0",
@@ -14986,7 +15366,7 @@
     "react-resizable": {
       "version": "1.10.1",
       "resolved": "https://registry.npm.taobao.org/react-resizable/download/react-resizable-1.10.1.tgz",
-      "integrity": "sha1-8MLPHYOzRwuHZ2zm1rArvj9NjNQ=",
+      "integrity": "sha512-Jd/bKOKx6+19NwC4/aMLRu/J9/krfxlDnElP41Oc+oLiUWs/zwV1S9yBfBZRnqAwQb6vQ/HRSk3bsSWGSgVbpw==",
       "requires": {
         "prop-types": "15.x",
         "react-draggable": "^4.0.3"
@@ -15125,6 +15505,70 @@
         }
       }
     },
+    "react-vis": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.11.7.tgz",
+      "integrity": "sha512-vJqS12l/6RHeSq8DVl4PzX0j8iPgbT8H8PtgTRsimKsBNcPjPseO4RICw1FUPrwj8MPrrna34LBtzyC4ATd5Ow==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "^1.0.3",
+        "d3-color": "^1.0.3",
+        "d3-contour": "^1.1.0",
+        "d3-format": "^1.2.0",
+        "d3-geo": "^1.6.4",
+        "d3-hexbin": "^0.2.2",
+        "d3-hierarchy": "^1.1.4",
+        "d3-interpolate": "^1.1.4",
+        "d3-sankey": "^0.7.1",
+        "d3-scale": "^1.0.5",
+        "d3-shape": "^1.1.0",
+        "d3-voronoi": "^1.1.2",
+        "deep-equal": "^1.0.1",
+        "global": "^4.3.1",
+        "hoek": "4.2.1",
+        "prop-types": "^15.5.8",
+        "react-motion": "^0.5.2"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+          "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        },
+        "d3-format": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        },
+        "d3-scale": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+          "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+          "requires": {
+            "d3-array": "^1.2.0",
+            "d3-collection": "1",
+            "d3-color": "1",
+            "d3-format": "1",
+            "d3-interpolate": "1",
+            "d3-time": "1",
+            "d3-time-format": "2"
+          }
+        },
+        "d3-time": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+          "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "d3-time-format": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+          "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+          "requires": {
+            "d3-time": "1"
+          }
+        }
+      }
+    },
     "react-zmage": {
       "version": "0.8.5-beta.31",
       "resolved": "https://registry.npmjs.org/react-zmage/-/react-zmage-0.8.5-beta.31.tgz",
@@ -16270,11 +16714,11 @@
       "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
@@ -16614,9 +17058,9 @@
           }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
         },
         "yargs": {
           "version": "14.2.3",
@@ -16934,12 +17378,13 @@
       }
     },
     "sockjs": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
-      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
+      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
       "requires": {
         "faye-websocket": "^0.10.0",
-        "uuid": "^3.0.1"
+        "uuid": "^3.4.0",
+        "websocket-driver": "0.6.5"
       }
     },
     "sockjs-client": {
@@ -16956,9 +17401,9 @@
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
             "ms": "^2.1.1"
           }
@@ -17010,8 +17455,8 @@
     },
     "source-map-support": {
       "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
-      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+      "resolved": "https://registry.npm.taobao.org/source-map-support/download/source-map-support-0.4.18.tgz?cache=0&sync_timestamp=1587719517036&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map-support%2Fdownload%2Fsource-map-support-0.4.18.tgz",
+      "integrity": "sha1-Aoam3ovkJkEzhZTpfM6nXwosWF8=",
       "requires": {
         "source-map": "^0.5.6"
       },
@@ -17069,11 +17514,11 @@
       },
       "dependencies": {
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "ms": {
@@ -17097,11 +17542,11 @@
       },
       "dependencies": {
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "ms": {
@@ -17930,10 +18375,13 @@
           "dev": true
         },
         "serialize-javascript": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-          "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-          "dev": true
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
         },
         "ssri": {
           "version": "7.1.0",
@@ -18209,9 +18657,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "ua-parser-js": {
-      "version": "0.7.21",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
-      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
     },
     "uglify-js": {
       "version": "2.8.29",
@@ -18412,9 +18860,9 @@
           }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
           "dev": true
         },
         "yallist": {
@@ -18578,9 +19026,9 @@
       }
     },
     "urijs": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.2.tgz",
-      "integrity": "sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w=="
+      "version": "1.19.6",
+      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.6.tgz",
+      "integrity": "sha512-eSXsXZ2jLvGWeLYlQA3Gh36BcjF+0amo92+wHPyN1mdR8Nxf75fuEuYTd9c0a+m/vhCjRK0ESlE9YNLW+E1VEw=="
     },
     "urix": {
       "version": "0.1.0",
@@ -18645,9 +19093,9 @@
       }
     },
     "url-parse": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -18666,6 +19114,12 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "user-home": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/user-home/download/user-home-1.1.1.tgz",
+      "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
+      "dev": true
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -18717,6 +19171,15 @@
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
       "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w=="
     },
+    "v8flags": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/v8flags/download/v8flags-2.1.1.tgz?cache=0&sync_timestamp=1590964281452&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8flags%2Fdownload%2Fv8flags-2.1.1.tgz",
+      "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=",
+      "dev": true,
+      "requires": {
+        "user-home": "^1.1.1"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -19640,9 +20103,9 @@
           }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
         },
         "yargs": {
           "version": "13.2.4",
@@ -19686,16 +20149,16 @@
       },
       "dependencies": {
         "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
+          "version": "2.4.6",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
         }
       }
     },
     "webpack-dev-server": {
-      "version": "3.10.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz",
-      "integrity": "sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz",
+      "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==",
       "requires": {
         "ansi-html": "0.0.7",
         "bonjour": "^3.5.0",
@@ -19705,37 +20168,37 @@
         "debug": "^4.1.1",
         "del": "^4.1.1",
         "express": "^4.17.1",
-        "html-entities": "^1.2.1",
+        "html-entities": "^1.3.1",
         "http-proxy-middleware": "0.19.1",
         "import-local": "^2.0.0",
         "internal-ip": "^4.3.0",
         "ip": "^1.1.5",
         "is-absolute-url": "^3.0.3",
         "killable": "^1.0.1",
-        "loglevel": "^1.6.6",
+        "loglevel": "^1.6.8",
         "opn": "^5.5.0",
         "p-retry": "^3.0.1",
-        "portfinder": "^1.0.25",
+        "portfinder": "^1.0.26",
         "schema-utils": "^1.0.0",
         "selfsigned": "^1.10.7",
         "semver": "^6.3.0",
         "serve-index": "^1.9.1",
-        "sockjs": "0.3.19",
+        "sockjs": "0.3.20",
         "sockjs-client": "1.4.0",
-        "spdy": "^4.0.1",
+        "spdy": "^4.0.2",
         "strip-ansi": "^3.0.1",
         "supports-color": "^6.1.0",
         "url": "^0.11.0",
         "webpack-dev-middleware": "^3.7.2",
         "webpack-log": "^2.0.0",
         "ws": "^6.2.1",
-        "yargs": "12.0.5"
+        "yargs": "^13.3.2"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "camelcase": {
           "version": "5.3.1",
@@ -19743,50 +20206,31 @@
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         },
         "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
           },
           "dependencies": {
             "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
               "requires": {
-                "ansi-regex": "^3.0.0"
+                "ansi-regex": "^4.1.0"
               }
             }
           }
         },
-        "cross-spawn": {
-          "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-          "requires": {
-            "nice-try": "^1.0.4",
-            "path-key": "^2.0.1",
-            "semver": "^5.5.0",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          },
-          "dependencies": {
-            "semver": {
-              "version": "5.7.1",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-            }
-          }
-        },
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "del": {
@@ -19803,19 +20247,10 @@
             "rimraf": "^2.6.3"
           }
         },
-        "execa": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-          "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^4.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
         },
         "find-up": {
           "version": "3.0.0",
@@ -19825,13 +20260,10 @@
             "locate-path": "^3.0.0"
           }
         },
-        "get-stream": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-          "requires": {
-            "pump": "^3.0.0"
-          }
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
         },
         "globby": {
           "version": "6.1.0",
@@ -19852,11 +20284,6 @@
             }
           }
         },
-        "invert-kv": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
-        },
         "is-path-cwd": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -19878,14 +20305,6 @@
             "path-is-inside": "^1.0.2"
           }
         },
-        "lcid": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-          "requires": {
-            "invert-kv": "^2.0.0"
-          }
-        },
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -19900,16 +20319,6 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
-        "os-locale": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-          "requires": {
-            "execa": "^1.0.0",
-            "lcid": "^2.0.0",
-            "mem": "^4.0.0"
-          }
-        },
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -19941,6 +20350,11 @@
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
           "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
         },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -19956,6 +20370,26 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -19969,6 +20403,26 @@
           "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
           "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
         },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
         "ws": {
           "version": "6.2.1",
           "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
@@ -19977,29 +20431,32 @@
             "async-limiter": "~1.0.0"
           }
         },
+        "y18n": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
+        },
         "yargs": {
-          "version": "12.0.5",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "requires": {
-            "cliui": "^4.0.0",
-            "decamelize": "^1.2.0",
+            "cliui": "^5.0.0",
             "find-up": "^3.0.0",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^3.0.0",
+            "get-caller-file": "^2.0.1",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
+            "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
+            "string-width": "^3.0.0",
             "which-module": "^2.0.0",
-            "y18n": "^3.2.1 || ^4.0.0",
-            "yargs-parser": "^11.1.1"
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "requires": {
             "camelcase": "^5.0.0",
             "decamelize": "^1.2.0"
@@ -20049,19 +20506,17 @@
       }
     },
     "websocket-driver": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
-      "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+      "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
       "requires": {
-        "http-parser-js": ">=0.4.0 <0.4.11",
-        "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
     },
     "webworkify": {
       "version": "1.5.0",
diff --git a/package.json b/package.json
index 0b17601d9..a44c24755 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,7 @@
     "antd": "^3.26.15",
     "array-flatten": "^2.1.2",
     "autoprefixer": "7.1.6",
-    "axios": "^0.18.1",
-    "babel-core": "6.26.0",
+    "axios": "^0.21.1",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
@@ -24,7 +23,7 @@
     "classnames": "^2.2.5",
     "clipboard": "^2.0.6",
     "code-prettify": "^0.1.0",
-    "codemirror": "^5.53.0",
+    "codemirror": "^5.61.0",
     "connected-react-router": "4.4.1",
     "css-loader": "^3.5.2",
     "dotenv": "4.0.0",
@@ -47,7 +46,7 @@
     "jest": "20.0.4",
     "js-base64": "^2.5.2",
     "katex": "^0.11.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "loglevel": "^1.6.8",
     "marked": "^1.0.0",
     "material-ui": "^1.0.0-beta.40",
@@ -75,6 +74,7 @@
     "rc-upload": "^2.9.4",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^10.0.4",
+    "react-charts": "^2.0.0-beta.7",
     "react-codemirror": "^1.0.0",
     "react-codemirror2": "^6.0.1",
     "react-color": "^2.18.0",
@@ -94,6 +94,7 @@
     "react-router-dom": "^4.2.2",
     "react-split-pane": "^0.1.91",
     "react-url-query": "^1.5.0",
+    "react-vis": "^1.11.7",
     "react-zmage": "^0.8.5-beta.31",
     "redux": "^4.0.5",
     "redux-thunk": "2.3.0",
@@ -108,7 +109,7 @@
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "^2.2.0",
     "whatwg-fetch": "2.0.3",
     "wrap-md-editor": "^0.2.20"
@@ -182,7 +183,13 @@
   "port": "3007",
   "devDependencies": {
     "@babel/runtime": "7.0.0-beta.51",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-plugin-import": "^1.13.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "compression-webpack-plugin": "^1.1.12",
     "concat": "^1.0.3",
     "happypack": "^5.0.1",
diff --git a/public/css/edu-purge.css b/public/css/edu-purge.css
index 5279a0c4b..80fb12a64 100644
--- a/public/css/edu-purge.css
+++ b/public/css/edu-purge.css
@@ -2325,6 +2325,9 @@ input::-ms-clear {
   background-color: #F5F5F5;
 }
 
+.ant-modal-close{
+  top:8px!important;
+}
 
 .newContainer {
   min-height: 100%;
@@ -2658,7 +2661,7 @@ a.color-green:hover {
 
 /*百分比宽度*/
 .width100 {
-  width: 100%;
+  width: 100% !important;
 }
 
 .width89 {
diff --git a/public/css/merge.css b/public/css/merge.css
new file mode 100755
index 000000000..b6d923ced
--- /dev/null
+++ b/public/css/merge.css
@@ -0,0 +1,111 @@
+
+.CodeMirror-merge {
+  position: relative;
+  white-space: pre;
+}
+
+.CodeMirror-merge, .CodeMirror-merge .CodeMirror {
+  min-height:50px;
+}
+
+.CodeMirror-merge-2pane .CodeMirror-merge-pane { width: 48%; }
+.CodeMirror-merge-2pane .CodeMirror-merge-gap { width: 4%; }
+.CodeMirror-merge-3pane .CodeMirror-merge-pane { width: 31%; }
+.CodeMirror-merge-3pane .CodeMirror-merge-gap { width: 3.5%; }
+
+.CodeMirror-merge-pane {
+  display: inline-block;
+  white-space: normal;
+  vertical-align: top;
+}
+.CodeMirror-merge-pane-rightmost {
+  position: absolute;
+  right: 0px;
+  z-index: 1;
+}
+
+.CodeMirror-merge-gap {
+    z-index: 2;
+    display: inline-block;
+    height: 100%;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    background: #515151;
+}
+
+.CodeMirror-merge-scrolllock-wrap {
+  position: absolute;
+  bottom: 0; left: 50%;
+}
+.CodeMirror-merge-scrolllock {
+  position: relative;
+  left: -50%;
+  cursor: pointer;
+  color: #d8d8d8;
+  line-height: 1;
+}
+
+.CodeMirror-merge-copybuttons-left, .CodeMirror-merge-copybuttons-right {
+  position: absolute;
+  left: 0; top: 0;
+  right: 0; bottom: 0;
+  line-height: 1;
+}
+
+.CodeMirror-merge-copy {
+  position: absolute;
+  cursor: pointer;
+  color: #ce374b;
+  z-index: 3;
+}
+
+.CodeMirror-merge-copy-reverse {
+  position: absolute;
+  cursor: pointer;
+  color: #44c;
+}
+
+.CodeMirror-merge-copybuttons-left .CodeMirror-merge-copy { left: 2px; }
+.CodeMirror-merge-copybuttons-right .CodeMirror-merge-copy { right: 2px; }
+
+.CodeMirror-merge-r-inserted, .CodeMirror-merge-l-inserted {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAGUlEQVQI12MwuCXy3+CWyH8GBgYGJgYkAABZbAQ9ELXurwAAAABJRU5ErkJggg==);
+  background-position: bottom left;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-merge-r-deleted, .CodeMirror-merge-l-deleted {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAGUlEQVQI12M4Kyb2/6yY2H8GBgYGJgYkAABURgPz6Ks7wQAAAABJRU5ErkJggg==);
+  background-position: bottom left;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-merge-r-chunk { background: #9a6868; }
+.CodeMirror-merge-r-chunk-start { /*border-top: 1px solid #ee8; */}
+.CodeMirror-merge-r-chunk-end {/* border-bottom: 1px solid #ee8; */}
+.CodeMirror-merge-r-connect { fill:#9a6868;}
+
+.CodeMirror-merge-l-chunk { background: #eef; }
+.CodeMirror-merge-l-chunk-start { border-top: 1px solid #88e; }
+.CodeMirror-merge-l-chunk-end { border-bottom: 1px solid #88e; }
+.CodeMirror-merge-l-connect { fill: #eef; stroke: #88e; stroke-width: 1px; }
+
+.CodeMirror-merge-l-chunk.CodeMirror-merge-r-chunk { background: #dfd; }
+.CodeMirror-merge-l-chunk-start.CodeMirror-merge-r-chunk-start { border-top: 1px solid #4e4; }
+.CodeMirror-merge-l-chunk-end.CodeMirror-merge-r-chunk-end { border-bottom: 1px solid #4e4; }
+
+.CodeMirror-merge-collapsed-widget:before {
+  content: "(...)";
+}
+.CodeMirror-merge-collapsed-widget {
+  cursor: pointer;
+  color: #88b;
+  background: #eef;
+  border: 1px solid #ddf;
+  font-size: 90%;
+  padding: 0 3px;
+  border-radius: 4px;
+}
+.CodeMirror-merge-collapsed-line .CodeMirror-gutter-elt { display: none; }
diff --git a/public/index.html b/public/index.html
index 1969fa0e0..f039d86ef 100755
--- a/public/index.html
+++ b/public/index.html
@@ -8,18 +8,9 @@
   <meta name=”Description” Content=”持续构建协同、共享、可信的软件创建生态开源创作与软件生产相结合，支持大规模群体开展软件协同创新活动”>
   <meta name="theme-color" content="#000000">
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <!-- <script type="text/javascript">
-    window.__isR = true;
-    if (
-      (navigator.userAgent.indexOf('MSIE 9') != -1
-        || navigator.userAgent.indexOf('MSIE 10') != -1)
-      &&
-      location.pathname.indexOf("/compatibility") == -1) {
-      location.href = '/compatibility.html'
-    }
-  </script> -->
-  <link rel=" stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
-  <link rel=" stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
+  
+  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
+  <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
   <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/editormd.min.css">
   <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css">
   <%= htmlWebpackPlugin.tags.headTags %>
@@ -30,6 +21,7 @@
   <div id="root" class="page -layout-v -fit widthunit"></div>
   <div id="picture_display" style="display: none;"></div>
   <script src="%PUBLIC_URL%js/jquery-1.8.3.min.js"></script>
+  <script src="%PUBLIC_URL%js/js_min_all.js"></script>
   <script src="%PUBLIC_URL%js/codemirror/codemirror.js"></script>
   <script src="%PUBLIC_URL%js/editormd/editormd.min.js"></script>
   <script src="%PUBLIC_URL%js/codemirror/merge/merge.js"></script>
diff --git a/src/App.js b/src/App.js
index 28ec0d5f5..d488d3315 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,13 +9,7 @@ import {
 } from 'react-router-dom';
 import axios from 'axios';
 import LoginDialog from './modules/login/LoginDialog';
-import Notcompletedysl from './modules/user/Notcompletedysl';
-import Trialapplicationysl from './modules/login/Trialapplicationysl';
-import Trialapplicationreview from './modules/user/Trialapplicationreview';
-import AccountProfile from "./modules/user/AccountProfile";
-import Accountnewprofile from './modules/user/Accountnewprofile';
-import Certifiedprofessional from './modules/modals/Certifiedprofessional';
-
+import 'babel-polyfill';
 import Loading from './Loading'
 
 import Loadable from 'react-loadable';
@@ -30,6 +24,7 @@ import { SnackbarHOC } from 'educoder'
 import { initAxiosInterceptors } from './AppConfig'
 import { Provider } from 'react-redux';
 import configureStore from './redux/stores/configureStore';
+import { load } from 'react-cookies';
 const store = configureStore();
 window.marked = marked;
 const theme = createMuiTheme({
@@ -76,6 +71,20 @@ const OrganizeIndex = Loadable({
 	loader: () => import('./forge/Team/Index'),
 	loading: Loading,
 })
+// Sponsor
+const Sponsor = Loadable({
+	loader: () => import('./forge/sponsor/Sponsor'),
+	loading: Loading,
+})
+// Sponsor Confirmation
+const SponsorConfirmation = Loadable({
+	loader: () => import('./forge/sponsor/SponsorConfirmation'),
+	loading: Loading,
+})
+const EducoderLogin = Loadable({
+	loader: () => import('./modules/login/EducoderLogin'),
+	loading: Loading,
+})
 
 class App extends Component {
 	constructor(props) {
@@ -213,18 +222,12 @@ class App extends Component {
 			<Provider store={store}>
 				<ConfigProvider locale={zhCN}>
 					<MuiThemeProvider theme={theme}>
-						{/* <Accountnewprofile {...this.props}{...this.state} /> */}
 						<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
-						{/* <Notcompletedysl {...this.props} {...this.state}></Notcompletedysl> */}
-						{/* <Trialapplicationysl  {...this.props} {...this.state}></Trialapplicationysl> */}
-						{/* <Trialapplicationreview  {...this.props} {...this.state}></Trialapplicationreview> */}
-						{/* <AccountProfile {...this.props} {...this.state} /> */}
-						{/* <Certifiedprofessional {...this.props} {...this.state} ModalCancelsy={this.ModalCancelsy} ModalshowCancelsy={this.ModalshowCancelsy} /> */}
 						<Router>
 							<Switch>
 								{/*项目*/}
 								<Route
-									path={"/projects/:projectId/ops/:opsId/detail"}
+									path={"/projects/:owner/:projectId/devops/:opsId/detail"}
 									render={
 										(props) => {
 											return (<OpsDetail {...this.props} {...props} {...this.state} />)
@@ -240,7 +243,15 @@ class App extends Component {
 										}
 									}>
 								</Route>
-								
+								<Route
+									path="/register"
+									render={
+										(props) => {
+
+											return (<EducoderLogin {...this.props} {...props} {...this.state} />)
+										}
+									}
+								/>
 								{/*403*/}
 								<Route path="/403" component={Shixunauthority} />
 
@@ -260,7 +271,17 @@ class App extends Component {
 										(props) => {
 											return (<InfosIndex {...this.props} {...this.state} />)
 										}
-								}></Route>
+									}></Route>
+								<Route exact path="/sponsor_confirmation/:username/:tier_id"
+									render={
+										(props) => (<SponsorConfirmation  {...this.props}{...this.state}></SponsorConfirmation>)
+									}>
+								</Route>
+								<Route exact path="/sponsor/:username"
+									render={
+										(props) => (<Sponsor  {...this.props}{...this.state}></Sponsor>)
+									}>
+								</Route>	
 								<Route exact path="/"
 									render={
 										(props) => (
diff --git a/src/AppConfig.js b/src/AppConfig.js
index cd01c04b7..24b0e97d2 100644
--- a/src/AppConfig.js
+++ b/src/AppConfig.js
@@ -28,7 +28,7 @@ if (isDev) {
   debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
     window.location.search.indexOf('debug=s') !== -1 ? 'student' :
       window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
-}
+}                 
 function clearAllCookie() {
   cookie.remove('_educoder_session', { path: '/' });
   cookie.remove('autologin_trustie', { path: '/' });
@@ -38,7 +38,6 @@ clearAllCookie();
 function setpostcookie() {
   const str = window.location.pathname;
   if (str.indexOf("/wxcode") !== -1) {
-    console.log("123")
     cookie.remove('_educoder_session', { path: '/' });
     cookie.remove('autologin_trustie', { path: '/' });
     const _params = window.location.search;
@@ -57,9 +56,10 @@ window._debugType = debugType;
 export function initAxiosInterceptors(props) {
   initOnlineOfflineListener()
   // TODO 避免重复的请求 https://github.com/axios/axios#cancellation
-  var
-    proxy = "http://localhost:3000"
-    proxy = "https://testforgeplus.trustie.net"
+  var 
+  // proxy = "http://172.27.144.138:3000/"
+  proxy = "http://localhost:3000"
+  // proxy = "https://testforgeplus.trustie.net"
 
   const requestMap = {};
   window.setfalseInRequestMap = function (keyName) {
@@ -71,7 +71,7 @@ export function initAxiosInterceptors(props) {
       setpostcookie()
       clearAllCookie()
 
-      if (config.url.indexOf(proxy) !== -1 || config.url.indexOf(':') !== -1) {
+      if (config.url.indexOf(proxy) !== -1) {
         return config
       }
       requestProxy(config)
diff --git a/src/Loading.js b/src/Loading.js
index f5ada7022..f99057471 100644
--- a/src/Loading.js
+++ b/src/Loading.js
@@ -1,7 +1,4 @@
 import React, { Component } from 'react';
-
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-
 import { Spin } from 'antd';
 
 class Loading extends Component {
@@ -12,7 +9,6 @@ class Loading extends Component {
 	}
 
 	render() {
-		// Loading
 		return (
 			<div className="App" style={{ minHeight: '800px', width: "100%" }}>
 				<style>
diff --git a/src/common/UrlTool.js b/src/common/UrlTool.js
index 7980ed0ce..5b101e7a6 100644
--- a/src/common/UrlTool.js
+++ b/src/common/UrlTool.js
@@ -11,15 +11,11 @@ export function getImageUrl(path) {
 	// https://www.educoder.net
 	// https://testbdweb.trustie.net
   // const local = 'http://localhost:3000'
-	const local = 'https://testforgeplus.trustie.net/';
-	if(path.indexOf("http://")===-1){
-		if (isDev) {
-			return `${local}/${path}`
-		}
-		return `/${path}`;
-	}else{
-		return path;
+	const local = 'https://testforgeplus.trustie.net';
+	if (isDev) {
+		return `${local}/${path}`
 	}
+	return `/${path}`;
 }
 
 export function getImage(path) {
diff --git a/src/common/components/comment/util.js b/src/common/components/comment/util.js
index 8694161a3..d81c4ee46 100644
--- a/src/common/components/comment/util.js
+++ b/src/common/components/comment/util.js
@@ -38,13 +38,11 @@ export const formatDelta = (deltas) => {
             alt="${alt}"
           />
         `;
-        // text = "<img src="+url+" width='60px' height='30px' onclick='' alt="+alt+"/>";
       }
     }
 
     formatted.push(text);
   });
-  console.log(formatted);
   return formatted.join('');
 }
 
diff --git a/src/forge/About/Index.jsx b/src/forge/About/Index.jsx
index cc7e67adf..964c4e0a2 100644
--- a/src/forge/About/Index.jsx
+++ b/src/forge/About/Index.jsx
@@ -71,7 +71,7 @@ function Index(props){
       <div className="aboutContent">
         <AlignCenterBetween style={{padding:"14px 0px"}}>
           <span className="font-16"><i className="iconfont icon-xiangmujianjie mr5 font-16 color-blue"></i>项目简介</span>
-          { editOpration && <a onClick={editContent} className="color-blue">编辑</a> }
+          { editOpration && !edit && <a onClick={editContent} className="color-blue">编辑</a> }
         </AlignCenterBetween>
         {
           edit ? 
diff --git a/src/forge/Activity/Activity.js b/src/forge/Activity/Activity.js
index f52758270..163495bdb 100644
--- a/src/forge/Activity/Activity.js
+++ b/src/forge/Activity/Activity.js
@@ -177,7 +177,7 @@ class Activity extends Component{
               }
             </div>
             :
-            <NoneData _html="暂时还没有相关数据哦!" />
+            <NoneData _html="暂时还没有相关数据!" />
           }
         </Spin>
         {
diff --git a/src/forge/Branch/Select.jsx b/src/forge/Branch/Select.jsx
index 6d97d7b56..55bb03457 100644
--- a/src/forge/Branch/Select.jsx
+++ b/src/forge/Branch/Select.jsx
@@ -4,7 +4,7 @@ import './branch.css';
 import { getBranch , getTag } from '../GetData/getData';
 
 
-export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
+export default (({ projectsId , branch , owner , history , changeBranch })=>{
   const [ showValue , setShowValue ] = useState(branch);
   const [ inputValue , setInputValue] = useState(undefined);
   const [ nav , setNav ] = useState(0);
@@ -17,10 +17,11 @@ export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
   useEffect(()=>{
     setShowValue(branch);
   },[branch])
+
   useEffect(()=>{
     document.body.addEventListener('click', e => {
       let name = e.target.className;
-      let turn = name == "ant-input OptionsInput" || name == "navli active"|| name == "navli" || name == "padding10 bor-bottom-greyE";
+      let turn = name === "ant-input OptionsInput" || name === "navli active"|| name === "navli" || name === "padding10 bor-bottom-greyE";
       if(turn){
         return;
       }else{
@@ -31,7 +32,7 @@ export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
 
   useEffect(()=>{
     getBranchs(projectsId,owner);
-  },[projectsId])
+  },[owner])
 
 
   async function getBranchs(id,owner){
@@ -63,7 +64,7 @@ export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
     }
   }
   function chooseitem(value){
-    setShowValue(value);
+    // setShowValue(value);
     changeBranch(value);
   }
 
diff --git a/src/forge/Branch/branch.css b/src/forge/Branch/branch.css
index b6dbd124e..ff65db541 100644
--- a/src/forge/Branch/branch.css
+++ b/src/forge/Branch/branch.css
@@ -51,7 +51,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  width: 240px;
+  min-width: 240px;
 }
 .branch-tagBox-list .ant-popover-arrow{
   display: none;
diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss
index 9a58f5a25..202cdd0db 100644
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@@ -8,6 +8,10 @@ li.ant-menu-item{
   margin:0px!important;
   border-bottom: 1px solid #eee;
 }
+.flags{
+  border: 1px solid red;
+  border-radius: 5px;
+}
 // Cards
 .cards{
   display: flex;
@@ -72,6 +76,7 @@ li.ant-menu-item{
   border-radius:11px;
   color: #fff;
   margin-left: 5px;
+  font-size: 12px;
   &.running{
     background:#5091FF;
     color: #F1F8FF;
@@ -88,6 +93,10 @@ li.ant-menu-item{
     background:#F73030;
     color:#FCEEEE ;
   }
+  &.killed{
+    background:#eee;
+    color:#999 ;
+  }
 }
 .handleBox{
   position: fixed;
@@ -95,6 +104,7 @@ li.ant-menu-item{
   right:240px;
   z-index: 10000;
 }
+
 @media screen and (max-width: 1800px){
   .handleBox{
     right:190px;
diff --git a/src/forge/Component/Keys.jsx b/src/forge/Component/Keys.jsx
index 9d05905b6..fb493cf68 100644
--- a/src/forge/Component/Keys.jsx
+++ b/src/forge/Component/Keys.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-
-
 export default ({title , value , className})=>{
   const Keys = styled.span`
     display:flex;
-    align-item:center;
+    align-items:center;
     & span{
       display:block;
       height:20px;
diff --git a/src/forge/Component/Modal.jsx b/src/forge/Component/Modal.jsx
new file mode 100644
index 000000000..aac589116
--- /dev/null
+++ b/src/forge/Component/Modal.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Modal , Button } from 'antd';
+import './Component.scss';
+
+function Modals({visible,title,content,onOk,onCancel}){
+  return(
+    <Modal
+      className="modalsStyle"
+      visible={visible}
+      title={title}
+      onCancel={onCancel}
+      closable={true}
+      footer={
+        <div>
+          <Button onClick={onCancel}>取消</Button>
+          <Button type={"primary"} style={{marginLeft:"20px"}} onClick={onOk}>确定</Button>
+        </div>
+      }
+    >
+      <div style={{fontSize:"16px"}}>{content}</div>
+    </Modal>
+  )
+}
+export default Modals;
diff --git a/src/forge/Component/OpsFileLanguage.jsx b/src/forge/Component/OpsFileLanguage.jsx
new file mode 100644
index 000000000..b3940e85a
--- /dev/null
+++ b/src/forge/Component/OpsFileLanguage.jsx
@@ -0,0 +1,61 @@
+import React , { useState , useEffect } from 'react';
+import { Select } from 'antd';
+import { getUrl } from 'educoder';
+
+import axios from 'axios';
+const Option = Select.Option;
+
+export default (({ language , select_language })=>{
+  const [ six , setSix ] = useState(undefined);
+  const [ languages , setLanguage ] = useState(undefined);
+
+  useEffect(()=>{
+    const url = '/ci/languages.json';
+    axios.get(url).then(result=>{
+      if(result){
+        setLanguage(result.data);
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  },[])
+
+  function changelanguage(value){
+    let array = value ? languages.filter(item=>item.name === value) :undefined;
+    select_language(value,array && array[0]);
+  }
+
+  useEffect(()=>{
+    const url = '/ci/languages/common.json';
+    axios.get(url).then(result=>{
+      if(result){
+        setSix(result.data);
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  },[])
+
+  return(
+    <React.Fragment>
+      {
+        six &&
+        <ul className="language">
+          {
+            six.map((item,key)=>{
+              return(
+                key < 6 ? <li className={language ===item.name ? "active":""} onClick={()=>changelanguage(item.name)}><img alt="" src={item.cover_url && getUrl(item.cover_url)} /></li> : ""
+              )
+            })
+          }
+        </ul>
+      }
+      <Select showSearch={true} placeholder={"请选择文本语言"} style={{ width: 200 }} value={language} onChange={changelanguage}>
+        <Option value={undefined}>请选择文本语言</Option>
+        {languages && languages.map((item, key) => {
+          return <Option value={item.name}>{item.name}</Option>;
+        })}
+      </Select>
+    </React.Fragment>
+  )
+})
\ No newline at end of file
diff --git a/src/forge/Component/OpsStatus.jsx b/src/forge/Component/OpsStatus.jsx
index 02883bd67..38dac0493 100644
--- a/src/forge/Component/OpsStatus.jsx
+++ b/src/forge/Component/OpsStatus.jsx
@@ -3,42 +3,54 @@ import './Component.scss';
 
 export const Tags = (status)=>{
   switch(status){
-    case 1:
+    case "running":
       return(
         <span className="statusColor running">运行中</span>
       );
-    case 2:
+    case "failure":case"error":
       return (
         <span className="statusColor failed">未通过</span>
       );
-    case 3:
+    case "success":
       return (
         <span className="statusColor pass">已通过</span>
       );
-    default:
+    case "pending":
       return (
         <span className="statusColor Preparing">准备中</span>
       );
+    case 'killed':
+      return (
+        <span className="statusColor killed">已撤销</span>
+      );
   }
 }
 
 export const TagsLine = (status)=>{
   switch(status){
-    case 1:
+    case "running":
       return(
         <span className="statuslineColor running">运行中</span>
       );
-    case 2:
+    case "failure":case "error":
       return (
         <span className="statuslineColor failed">未通过</span>
       );
-    case 3:
+    case "success":
       return (
         <span className="statuslineColor pass">已通过</span>
       );
-    default:
+    case "pending":
       return (
         <span className="statuslineColor Preparing">准备中</span>
       );
+    case 'killed':
+      return (
+        <span className="statuslineColor killed">已撤销</span>
+      );
+    case 'skipped':
+      return (
+        <span className="statuslineColor skipped">已跳过</span>
+      );
   }
-}
\ No newline at end of file
+}
diff --git a/src/forge/Component/PasswordAuthority.jsx b/src/forge/Component/PasswordAuthority.jsx
new file mode 100644
index 000000000..9951f32e0
--- /dev/null
+++ b/src/forge/Component/PasswordAuthority.jsx
@@ -0,0 +1,45 @@
+import React ,{ useState } from 'react';
+import { Modal , Input , Spin } from 'antd';
+import { AlignCenter } from "./layout";
+import axios from 'axios';
+import './Component.scss';
+
+function PasswordAuthority({ authorityValBox , successFunc , cancelFunc }){
+  const [ authorityVal , setAuthorityVal ] = useState(undefined);
+  const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
+  const [ isSpin , setIsSpin ] = useState(false);
+
+  // 取消授权-登录密码的输入
+  function cancelAuthority(){
+    cancelFunc();
+  }
+  // 确认授权
+  function okAuthority(){
+    if(!authorityVal){
+      setAuthorityValFlag(true);
+      return;
+    }
+    setIsSpin(true);
+    const url = `/users/ci/oauth_grant.json`;
+    axios.get(url,{
+      params:{password:authorityVal}
+    }).then(result=>{
+      setIsSpin(false);
+      if(result){
+        successFunc(result.data.step);
+      }
+    }).catch(error=>{setIsSpin(false);});
+  }
+  return(
+    <Modal visible={authorityValBox} centered={true} title="授权" onCancel={cancelAuthority} onOk={okAuthority}>
+      <Spin spinning={isSpin}>
+        <p style={{textAlign:"center"}}>请输入您的登录密码，确认授权DevOps应用</p>
+        <AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
+          <span>密码：</span>
+          <Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
+        </AlignCenter>
+      </Spin>
+    </Modal>
+  )
+}
+export default PasswordAuthority;
\ No newline at end of file
diff --git a/src/forge/DevOps/About.jsx b/src/forge/DevOps/About.jsx
index d606e71f9..d3e5c1847 100644
--- a/src/forge/DevOps/About.jsx
+++ b/src/forge/DevOps/About.jsx
@@ -1,27 +1,66 @@
-import React , { forwardRef , useCallback } from 'react';
-import activate from '../Images/activate.png';
-import { Blueback } from '../Component/layout';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-import { Form , Input } from 'antd';
-import axios from 'axios';
+import React, { forwardRef, useCallback, useState , useEffect } from "react";
+import activate from "../Images/activate.png";
+import { Blueback , AlignCenter } from "../Component/layout";
+import PasswordAuthority from "../Component/PasswordAuthority";
+import styled from "styled-components";
+import { Form, Input , Spin , Modal } from "antd";
+import axios from "axios";
 
-const P = styled.p`{
-  width:200px;
-  line-height:30px;
-  font-size:16px;
-  color:#333;
-  text-align:center;
-  margin-top:30px;
-  margin-bottom:30px!important;
-}`;
-function About( props , ref){
-  const { form: { getFieldDecorator , validateFields } } = props;
+const P = styled.p`
+   {
+    width: 230px;
+    line-height: 30px;
+    font-size: 16px;
+    color: #333;
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px !important;
+  }
+`;
+function About(props, ref) {
+  const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
+  const [isSpining, setIsSpining] = useState(true);
+  const [ authorityValBox , setAuthorityValBox ] = useState(false);
+  const [ authorityVal , setAuthorityVal ] = useState(undefined);
+  const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
+  //0: 标识未开启devops
+  //1: 标识用户已填写了云服务器相关信息，但并未开启认证
+  const [step, setStep] = useState(undefined);
+  // step大于1时：为true，不能再修改服务器信息
+  const owner = props.match.params.owner;
+  const projectsId = props.match.params.projectsId;
+
+
+  const AuthorLogin = props.author && props.author.login;
+  const CurrentLogin = props.current_user && props.current_user.login;
+  useEffect(()=>{
+    if(CurrentLogin === AuthorLogin){
+      auth('get');
+    }else{
+      setIsSpining(false);
+    }
+  },[AuthorLogin,CurrentLogin])
+
+  function auth(type){
+    const url = `/${owner}/${projectsId}/ci_authorize.json`;
+    axios({
+      method:`${type}`,
+      url
+    }).then(result=>{
+      if(result && result.data ){
+        setIsSpining(false);
+        setStep(result.data.step);
+        setFieldsValue({...result.data.cloud_account});
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  }
 
   const helper = useCallback(
     (label, name, rules, widget, isRequired) => (
       <React.Fragment>
-        <span className={isRequired?"required":""}>{label}</span>
+        <span className={isRequired ? "required" : ""}>{label}</span>
         <Form.Item>
           {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
         </Form.Item>
@@ -29,52 +68,122 @@ function About( props , ref){
     ),
     []
   );
-
-  function startActive(){
-    let projectsId = props.match.params.projectsId;
-    validateFields((error,values)=>{
-      if(!error){
-        const url = `/dev_ops/cloud_accounts.json`;
-        axios.post(url,{
-          ...values,
-          project_id:projectsId
-        }).then(result=>{
-          if(result && result.data.redirect_url){
-            window.location.href = result.data.redirect_url;
-          }
-        }).catch(error=>{
-          console.log(error);
-        })
+  // 下一步
+  function goStep() {
+    validateFields((error, values) => {
+      if (!error) {
+        if(step > 0){
+          setAuthorityValBox(true);
+        }else{
+          setIsSpining(true);
+          const url = `/${owner}/${projectsId}/cloud_accounts.json`;
+          axios.post(url, {...values,ip_num:values.ip}).then((result) => {
+            setIsSpining(false);
+            if (result && result.data.redirect_url) {
+              props.showNotification("服务器信息配置完成！");
+              setStep(1);
+              setAuthorityValBox(true);
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            setIsSpining(false);
+          });
+        }
       }
+    });
+  }
+
+  // 开始激活
+  function startActive(){
+    setIsSpining(true);
+    const url = `/${owner}/${projectsId}/activate.json`;
+    axios.post(url).then(result=>{
+      setIsSpining(false);
+      if(result && result.data.status === 0){
+        props.history.push(`/projects/${owner}/${projectsId}/devops/dispose`);
+        // 需要将顶部的open_devops修改
+        let { changeOpenDevops } = props;
+        changeOpenDevops && changeOpenDevops(true);
+      }
+    }).catch(error=>{
+      console.log(error);
+      setIsSpining(false);
     })
   }
-  return(
-    <div className="activatePanel">
-      <img src={activate} alt="" width="250px"/>
-      <P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
-      <Link to={""} style={{color:"#5091FF",marginBottom:"20px"}}>了解什么是DevOps？</Link>
-      <Form>
-        {helper(
-          "服务器IP地址：",
-          "ip_num",
-          [{ required: true, message: "请输入服务器IP地址" }],
-          <Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
-        )}
-        {helper(
-          "服务器用户名：",
-          "account",
-          [{ required: true, message: "请输入服务器用户名" }],
-          <Input placeholder="请输入服务器用户名" size="large" />,true
-        )}
-        {helper(
-          "服务器密码：",
-          "secret",
-          [{ required: true, message: "请输入服务器密码" }],
-          <Input.Password placeholder="请输入服务器密码" size="large" />,true
-        )}
-      </Form>
-      <Blueback onClick={startActive}>开始激活</Blueback>
-    </div>
-  )
+  // 取消授权-登录密码的输入
+  function cancelAuthority(){
+    setAuthorityValBox(false);
+  }
+  // 确认授权
+  function okAuthority(step){
+    setAuthorityValBox(false);
+    setStep(step);
+  }
+  return (
+    <Spin spinning={isSpining}>
+      <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
+      <div className="activatePanel">
+        <img src={activate} alt="" width="250px" />
+        <P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
+        {
+          CurrentLogin !== AuthorLogin &&  (step === undefined || (step && step < 1)) &&
+          <div className="noOperation">DevOps开启功能暂未对项目创建者以外的角色开放，可以联系项目创建者进行开启，开启后便可查看构建信息。</div>
+        }
+        <a href={"https://forum.trustie.net/forums/3080/detail"} target="_blank" style={{ color: "#5091FF"}}>
+          了解什么是DevOps？
+        </a>
+        <a href={"https://forum.trustie.net/forums/3110/detail"} target="_blank" style={{ color: "#5091FF"}}>
+          如何使用DevOps？
+        </a>
+        {
+          AuthorLogin === CurrentLogin ?
+          <React.Fragment>
+            { step <=1 ?
+            <React.Fragment>
+              <Input.Password style={{display:'none'}} size="large" />
+              <Form style={{marginTop:"20px"}}>
+                <p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
+                {helper(
+                  "服务器IP地址：",
+                  "ip",
+                  [{ required: true, message: "请输入服务器IP地址" }],
+                  <Input
+                    placeholder="请输入服务器IP地址"
+                    style={{ width: "368px" }}
+                    size="large"
+                    disabled={step > 0}
+                  />,
+                  true
+                )}
+                {helper(
+                  "服务器用户名：",
+                  "account",
+                  [{ required: true, message: "请输入服务器用户名" }],
+                  <Input placeholder="请输入服务器用户名" size="large" disabled={step > 0}/>,
+                  true
+                )}
+                {helper(
+                  "服务器密码：",
+                  "secret",
+                  [{ required: true, message: "请输入服务器密码" }],
+                  <Input.Password placeholder="请输入服务器密码" size="large" disabled={step > 0}/>,
+                  true
+                )}
+              </Form>
+              <Blueback onClick={goStep}>下一步</Blueback>
+            </React.Fragment>
+            :""}
+            {step > 1 &&
+              <div style={{textAlign:'center',marginTop:"20px"}}>
+                <Blueback onClick={startActive} className="mt20">开始激活</Blueback>
+              </div>
+            }
+          </React.Fragment>
+          :""
+        }
+      </div>
+    </Spin>
+  );
 }
-export default Form.create()(forwardRef(About));
\ No newline at end of file
+export default Form.create()(forwardRef(About));
diff --git a/src/forge/DevOps/Dispose.jsx b/src/forge/DevOps/Dispose.jsx
index 1b4f8bacd..f8aad2ebd 100644
--- a/src/forge/DevOps/Dispose.jsx
+++ b/src/forge/DevOps/Dispose.jsx
@@ -1,53 +1,45 @@
 import React , { useState , useEffect } from 'react';
+import { Spin } from 'antd';
 import { Blueback } from '../Component/layout';
 import Editor from "react-monaco-editor";
 import Modals from './DisposeModal';
-import FileLanguage from '../Component/FileLanguage';
+import FileLanguage from '../Component/OpsFileLanguage';
 import axios from 'axios';
 
 
 function Dispose(props){
-  const [ info , setInfo ] = useState(undefined);
+  const [ spining , setSpining ] = useState(true);
+  const [ info , setInfo ] = useState('.trustie-pipeline.yml');
   const [ visible , setVisible ] = useState(false);
   const [ ymlValue , setYmlValue ] = useState("");
-  const [ six , setSix ] = useState(undefined);
+  const [ sha , setSha ] = useState(undefined);
   const [ fileLanguage , setFileLanguage ] = useState(undefined);
   const [ first , setFirst ] = useState(false);
 
   let projectsId = props.match.params.projectsId; 
   let owner = props.match.params.owner; 
-
   useEffect(()=>{
     if(projectsId){
-      const url = '/dev_ops/builds/get_trustie_pipeline.json';
+      const url = `/${owner}/${projectsId}/get_trustie_pipeline.json`;
       axios.get(url,{
         params:{
           project_id:projectsId
         }
       }).then(result=>{
         if(result && result.data.content){
-          setInfo(result.data);
+          setInfo(result.data.name);
           setYmlValue(result.data.content);
           setFirst(true);
+          setSha(result.data.sha);
         }else{
           setFirst(false);
         }
+        setSpining(false);
       }).catch(error=>{
         console.log(error);
       })
     }
-  },[])
-
-  useEffect(()=>{
-    const url = '/dev_ops/languages/common.json';
-    axios.get(url).then(result=>{
-      if(result){
-        setSix(result.data);
-      }
-    }).catch(error=>{
-      console.log(error);
-    })
-  },[])
+  },[projectsId])
 
   // 修改文件内容
   function changeEditor(value){
@@ -57,25 +49,25 @@ function Dispose(props){
   // 切换语言
   function select_language(value,array){
     setFileLanguage(value);
-    // console.log(array);
     setYmlValue( array && array.content);
   }
 
   // 确定提交
   function submit(){
     let url = '';
+    const { defaultBranch } = props;
     let params = {
-      branch: "master",
+      branch: defaultBranch,
       content:ymlValue,
-      filepath:info && info.name,
+      filepath:info,
       message:''
     }
     if(first){
       // 为true，则是编辑否则是新建
-      url = `/${owner}/${projectsId}/update_file.json`;
+      url = `/${owner}/${projectsId}/update_trustie_pipeline.json`;
       axios.put(url,{
         ...params,
-        sha:info && info.sha
+        sha
       }).then(result=>{
         if(result){
           setVisible(true);
@@ -95,37 +87,24 @@ function Dispose(props){
     }
   }
   function suresubmit(){
-    props.history.push(`/projects/${owner}/${projectsId}/ops/list`);
+    setVisible(false);
+    props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
   }
   
   return(
-    <React.Fragment>
+    <Spin spinning={spining}>
       <Modals visible={visible} closeFunc={(flag)=>setVisible(flag)} sureFunc={suresubmit}></Modals>
       <p>编程语言：</p>
-      {
-        six &&
-        <ul className="language">
-          {
-            six && six.map((item,key)=>{
-              return(
-                key < 6 ? <li><img alt="" src={item.cover_url} /></li> : ""
-              )
-            })
-          }
-        </ul>
-      }
+      
       <div className="mt20 mb20">
         <FileLanguage language={fileLanguage} select_language={select_language}/>
       </div>
       <p>配置脚本：</p>
       <div className="editorBody">
-        <p className="editorHead">
-          <span>{info && info.name}</span>
-          <a><i className="iconfont icon-bianji6 font-14"></i></a>
-        </p>
+        <p className="editorHead">{info}</p>
         <Editor
           height="300px"
-          language={"java"}
+          language={"yml"}
           theme={"vs-grey"}
           defaultValue="请输入内容"
           value={ymlValue}
@@ -134,7 +113,7 @@ function Dispose(props){
         ></Editor>
       </div>
       <Blueback onClick={submit}>确定提交</Blueback>
-    </React.Fragment>
+    </Spin>
   )
 }
 export default Dispose;
\ No newline at end of file
diff --git a/src/forge/DevOps/DisposeModal.jsx b/src/forge/DevOps/DisposeModal.jsx
index 1ef263c7f..67aa72c45 100644
--- a/src/forge/DevOps/DisposeModal.jsx
+++ b/src/forge/DevOps/DisposeModal.jsx
@@ -8,7 +8,7 @@ const Div = styled.div`{
   text-align:center;
   color:#333;
 }`
-export default (({visible , closeFunc , suresubmit})=>{
+export default (({visible , closeFunc , sureFunc})=>{
   return(
     <Modal
       title="提示"
@@ -17,7 +17,7 @@ export default (({visible , closeFunc , suresubmit})=>{
       footer={
         <div>
           <Button onClick={()=>closeFunc(false)}>取消</Button>
-          <Button type={"primary"} onClick={suresubmit} style={{marginLeft:"20px"}}>确定</Button>
+          <Button type={"primary"} onClick={()=>sureFunc()} style={{marginLeft:"20px"}}>确定</Button>
         </div>
       }
       onCancel={()=>closeFunc(false)}
diff --git a/src/forge/DevOps/Index.jsx b/src/forge/DevOps/Index.jsx
index 8ccc61c8f..77b82eb0c 100644
--- a/src/forge/DevOps/Index.jsx
+++ b/src/forge/DevOps/Index.jsx
@@ -18,17 +18,17 @@ export default ((props)=>{
   return(
     <WhiteBack className="opsPanel">
       <Switch {...props}>
-        <Route path="/projects/:projectsId/ops/dispose"
+        <Route path="/projects/:owner/:projectsId/devops/dispose"
           render={
             () => (<Infos {...props} />)
           }
         ></Route>
-        <Route path="/projects/:projectsId/ops/list"
+        <Route path="/projects/:owner/:projectsId/devops/list"
           render={
             () => (<Infos {...props} />)
           }
         ></Route>
-        <Route path="/projects/:projectsId/ops"
+        <Route path="/projects/:owner/:projectsId/devops"
           render={
             () => (<About {...props} />)
           }
diff --git a/src/forge/DevOps/Infos.jsx b/src/forge/DevOps/Infos.jsx
index 26a4b6e41..eb9848c57 100644
--- a/src/forge/DevOps/Infos.jsx
+++ b/src/forge/DevOps/Infos.jsx
@@ -1,4 +1,4 @@
-import React , { useEffect , useState } from 'react';
+import React , { useEffect , useState , useRef } from 'react';
 import { Banner } from '../Component/layout';
 import { Link } from 'react-router-dom';
 
@@ -11,27 +11,46 @@ const Div = styled.div`{
   padding:24px 30px;
 }`;
 export default ((props)=>{
-  const [ menu , setMenu ] = useState(undefined);
+  const [ menu , setMenu ] = useState(false);
+  const [ permission , setPermission ] = useState("");
+  const childRef = useRef();
 
   const path = props.location.pathname;
+  const owner = props.match.params.owner;
+  const projectsId = props.match.params.projectsId;
+
+  const projectDetail = props.projectDetail;
   useEffect(()=>{
-    // console.log(props.match.params.projectsId)
-    if(path === `/projects/${props.match.params.projectsId}/ops/list`){
+    if(path === `/projects/${owner}/${projectsId}/devops/list`){
       setMenu(true);
     }else{
       setMenu(false);
     }
   },[path])
 
+  useEffect(()=>{
+    if(projectDetail){
+      setPermission(props.projectDetail.permission);
+    }
+  },[projectDetail])
+
+  const updateChildState = () => {
+    // changeVal就是子组件暴露给父组件的方法
+    if (childRef.current) {
+      childRef.current.changeVal();
+    }
+  }
+
   return(
     <div className="disposePanel">
       <Banner>
-        <Link to={`/projects/${props.match.params.projectsId}/ops/dispose`}>工作流配置</Link>
-        { menu ? <Link to={`/projects/${props.match.params.projectsId}/ops/list`} style={{ marginLeft:"66px",color:"#5091FF" }}>构建列表</Link>:""}
+        { permission !=="Reporter" && <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/dispose`} className={menu===false && "color-blue"} style={{ marginRight:"66px"}}>工作流配置</Link>}
+        <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/list`}className={menu===true && "color-blue"}>构建列表</Link>
+        { menu===true && <a onClick={updateChildState} style={{float:"right",fontSize:"14px",color:"#FF6E21",marginTop:"5px"}}>刷新</a>}
       </Banner>
       <Div>
-        { menu && menu === true && <Structure {...props}/> }
-        { menu && menu === false && <Dispost {...props}/> }
+        { menu === true && <Structure {...props}  wrappedComponentRef={(form) => childRef.current = form} ref={childRef}/> }
+        { menu === false && permission !=="Reporter" && <Dispost {...props}/> }
       </Div>
     </div>
   )
diff --git a/src/forge/DevOps/OpsDetailLeftpanel.jsx b/src/forge/DevOps/OpsDetailLeftpanel.jsx
index 427f0c992..9d9fefd9c 100644
--- a/src/forge/DevOps/OpsDetailLeftpanel.jsx
+++ b/src/forge/DevOps/OpsDetailLeftpanel.jsx
@@ -1,42 +1,127 @@
-import React from 'react';
-import { FlexAJ , Blueline , AlignCenter } from '../Component/layout';
-import styled from 'styled-components';
-import { Menu } from 'antd';
-import { TagsLine } from '../Component/OpsStatus';
+import React, { useEffect, useState } from "react";
+import { FlexAJ, Blueline, AlignCenter } from "../Component/layout";
+import styled from "styled-components";
+import { Menu, Popconfirm } from "antd";
+import { TagsLine } from "../Component/OpsStatus";
+import { Time } from "../Utils/Time";
+import { truncateCommitId } from "../common/util";
+import { getUrl } from 'educoder';
 
 const SubMenu = Menu.SubMenu;
-const Img = styled.img`{
-  width:25px;
-  height:25px;
-  border-radius:50%;
-  margin-right:10px;
-}`
-export default (()=>{
-  return(
+const Img = styled.img`
+   {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+`;
+export default ({ data, repeatSet , chooseSteps }) => {
+  const [tamp, setTamp] = useState(undefined);
+  const [sha, setSha] = useState(undefined);
+  useEffect(() => {
+    if (data && data.started) {
+      let t = parseInt(data.started) * 1000;
+      let time = Time(t);
+      setTamp(time);
+    }
+    if (data && data.after) {
+      setSha(truncateCommitId(data.after));
+    }
+  }, [data]);
+
+  function renderStatusBtn() {
+    let status = data && data.status;
+    let number = data && data.number;
+    if (status === "failure" || status === "error" || status === "success") {
+      return "";
+    }else if(status === "killed"){
+      return(
+        <Popconfirm
+          title="确认重新构建？"
+          onConfirm={(e) => repeatSet(e,'repeat',number)}
+          onCancel={(e)=>{e.stopPropagation()}}
+          cancelText="取消"
+          okText="确定"
+        >
+          <Blueline onClick={(e)=>{e.stopPropagation()}}>重新构建</Blueline>
+        </Popconfirm>
+      );
+    } else {
+      return (
+        <Popconfirm
+          title="确认撤销构建？"
+          onConfirm={(e) => repeatSet(e,'cancel',number)}
+          onCancel={(e)=>{e.stopPropagation()}}
+          cancelText="取消"
+          okText="确定"
+        >
+          <Blueline onClick={(e)=>{e.stopPropagation()}}>撤销构建</Blueline>
+        </Popconfirm>
+      );
+    }
+  }
+
+  function clickSub(e,stageN,stepN){
+    chooseSteps(stageN,stepN);
+  }
+
+  return (
     <div>
       <FlexAJ className="leftheader">
         <AlignCenter>
-          <Img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2091711702,2468700162&fm=111&gp=0.jpg"/>
-          <span className="nest">开始时间：<span>2020.07.10 15:30</span></span>
-          <span className="nest">运行时间：<span>20s</span></span>
+          <Img src={getUrl(`/images/${data && data.author && data.author.image_url}`)} />
+          {data && data.started &&
+            <span className="nest">
+              开始时间：<span> {data.started}</span>
+            </span>
+          }
+          {
+            data && data.duration_time &&
+            <span className="nest">
+              运行时间：<span>{data.duration_time}</span>
+            </span>
+          }
         </AlignCenter>
-        <Blueline>重新创建</Blueline>
+        {renderStatusBtn()}
       </FlexAJ>
       <div className="leftMainContent">
         <AlignCenter className="contentBranch">
           <i className="iconfont icon-fenzhi1"></i>
           <span>分支：</span>
-          <span className="branchname">master</span>
-          <span className="branchsha">8b3476f5</span>
+          <span className="branchname">{data && data.branch_target}</span>
+          <span className="branchsha">{data && truncateCommitId(data.build_after_sha)}</span>
         </AlignCenter>
       </div>
-      <Menu mode='inline' className="leftMenu">
-        <SubMenu title={<div><i className="iconfont icon-gongzuoliu font-14 mr4"></i><span>CI</span></div>}>
-          <Menu.Item>
-            <FlexAJ><span>Build setup 01 {TagsLine(1)}</span><span>20s</span></FlexAJ>
-          </Menu.Item>
-        </SubMenu>
+      <Menu mode="inline" className="leftMenu" defaultOpenKeys={[`0`]} defaultSelectedKeys={[`0`]}>
+        {data && data.stages ? data.stages.map((item, key) => {
+            return item.steps && item.steps.length > 0 ?
+              <SubMenu
+                title={
+                  <div>
+                    <i className="iconfont icon-gongzuoliu font-14 mr4"></i>
+                    <span>{item.name}</span>
+                  </div>
+                }
+                key={`${key}`}
+              >
+                {item.steps.map((i, k) => {
+                  return (
+                    <Menu.Item key={`${k}`} onClick={(e)=>clickSub(e,item.number,i.id)}>
+                      <FlexAJ>
+                        <span>
+                          {i.name} {i.status ? TagsLine(i.status) : ""}
+                        </span>
+                        <span>{i.duration_time}</span>
+                      </FlexAJ>
+                    </Menu.Item>
+                  );
+                })}
+              </SubMenu>
+            : "";
+          })
+        : ""}
       </Menu>
     </div>
-  )
-})
\ No newline at end of file
+  );
+};
diff --git a/src/forge/DevOps/OpsDetailRightpanel.jsx b/src/forge/DevOps/OpsDetailRightpanel.jsx
index a7f0f11e9..1e0ed86ad 100644
--- a/src/forge/DevOps/OpsDetailRightpanel.jsx
+++ b/src/forge/DevOps/OpsDetailRightpanel.jsx
@@ -1,21 +1,107 @@
-import React from 'react';
-import { FlexAJ , AlignCenter } from '../Component/layout';
+import React, { useState, useEffect } from "react";
+import { Spin } from "antd";
+import { FlexAJ, AlignCenter } from "../Component/layout";
+import axios from "axios";
 
-export default (()=>{
-  return(
-    <div className="rightMainContent">
-      <div>
-        <FlexAJ className="items">
-          <span>Build setup 01</span>
-          <AlignCenter>20<i className="iconfont icon-triangle"></i></AlignCenter>
-        </FlexAJ>
+export default ({
+  data,
+  stepN,
+  stageN,
+  projectId,
+  owner,
+  opsId,
+  rightSpin,
+}) => {
+  const [coders, setCoders] = useState(undefined);
+  const [empty, setEmpty] = useState(false);
+  const [spining, setSpining] = useState(true);
+  const [stage, setStage] = useState(undefined);
+  const [step, setStep] = useState(undefined);
+  useEffect(() => {
+    setSpining(rightSpin);
+  }, [rightSpin]);
+
+  useEffect(() => {
+    if (data) {
+      let stages = data.stages;
+      if (stages && stages.length > 0) {
+        let pre = stageN
+          ? stages.filter((item) => item.number === stageN)[0]
+          : stages[0];
+        setStage(pre);
+        let p = pre && pre.steps;
+        let sub = stepN
+          ? p && p.length > 0 && p.filter((item) => item.id === stepN)[0]
+          : p[0];
+
+        setStep(sub);
+        if (sub && sub.status !== "skipped") {
+          getStep(pre.number, sub.number);
+        }
+        // 如果状态是skipped就不用去调用接口查询对应的out信息了
+        if(sub.status === "skipped"){
+          setCoders(undefined);
+          setEmpty(true);
+          setSpining(false);
+        }
+      } else {
+        setSpining(false);
+      }
+    }
+  }, [data, stageN, stepN]);
+
+  function getStep(stageN, stepN) {
+    if (stageN && stepN) {
+      const url = `/${owner}/${projectId}/builds/${opsId}/logs/${stageN}/${stepN}.json`;
+      axios.get(url).then((result) => {
+        if (result) {
+          setCoders(result.data);
+          setSpining(false);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    }
+  }
+  return (
+    <Spin spinning={spining}>
+      <div className="rightMainContent">
+        {data && data.status !== "error" ? (
+          <div>
+            <FlexAJ className="items">
+              <span>{step && step.name}</span>
+              <AlignCenter>
+                {step && step.duration_time}
+                <i className="iconfont icon-sanjiaoxing-down"></i>
+              </AlignCenter>
+            </FlexAJ>
+            <div>
+              {coders && coders.length > 0 ? (
+                coders.map((item, key) => {
+                  return (
+                    <div className="opsDetailOut">
+                      <span>{key + 1}</span>
+                      <p>{item.out}</p>
+                    </div>
+                  );
+                })
+              ) : empty ? (
+                <div className="opsDetailOut">
+                  <span>1</span>
+                  <p>
+                    {stage && stage.name} – {step && step.name}: Skipped
+                  </p>
+                </div>
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+        ) : (
+          <div style={{ color: "red" }}>error:{data && data.error}</div>
+        )}
       </div>
-      <div>
-        <FlexAJ className="items"></FlexAJ>
-      </div>
-      <div>
-        <FlexAJ className="items"></FlexAJ>
-      </div>
-    </div>
-  )
-})
\ No newline at end of file
+    </Spin>
+  );
+};
diff --git a/src/forge/DevOps/Structure.jsx b/src/forge/DevOps/Structure.jsx
index d7bcde6aa..87a2b6cc9 100644
--- a/src/forge/DevOps/Structure.jsx
+++ b/src/forge/DevOps/Structure.jsx
@@ -1,240 +1,320 @@
-import React , { useState , useEffect } from 'react';
-import { FlexAJ , AlignCenter , Blueback } from '../Component/layout';
-import { Table , Pagination } from 'antd';
-import { truncateCommitId } from '../common/util';
-import styled from 'styled-components';
-import axios from 'axios';
+import React, { useState, useEffect , useImperativeHandle ,forwardRef } from "react";
+import { FlexAJ, AlignCenter } from "../Component/layout";
+import { Table, Pagination, Popconfirm } from "antd";
+import { truncateCommitId } from "../common/util";
+import {getUrl} from 'educoder';
+import axios from "axios";
 
 const STATUS = [
-  {name:"所有",value:"1"},
-  {name:"准备中",value:"2"},
-  {name:"运行中",value:"3"},
-  {name:"已完成",value:"4"}
-]
-const LIMIT = 15;
-const datasource = [
-  {
-    status:2,
-    author:"caishi",
-    message:{
-      branch:"master",
-      sha:"8b3476f5",
-      image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
-      message:"将分支“ 221063-improve-buy-ci-minutes-link”"
-    },
-    begin:"2020-07-08",
-    run:"20s"
-  },
-  {
-    status:1,
-    author:"caishi",
-    message:{
-      branch:"master",
-      sha:"8b3476f5",
-      image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
-      message:"将分支“ 221063-improve-buy-ci-minutes-link”"
-    },
-    begin:"2020-07-08",
-    run:""
-  }
+  { name: "所有"},
+  { name: "运行中", value: "running" },
+  { name: "已撤销", value: "killed" },
+  { name: "构建失败", value: "failure" },
+  { name: "已完成", value: "success" },
 ];
+const LIMIT = 15;
+function Structure(props,ref){
+  const [status, setStatus] = useState(undefined);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [data, setData] = useState(undefined);
+  const [tableLoading, setTableLoading] = useState(true);
 
-const Img = styled.img`{
-  border-radius:50%;
-  margin-rigth:10px;
-  width:25px;
-  height:25px;
-}`
-export default ((props)=>{
-  const [ status ,setStatus ] = useState("1");
-  const [ page ,setPage ] = useState(1);
-  const [ total ,setTotal ] = useState(10);
-  const [ data , setData ] = useState(undefined);
+  let projectsId = props.match.params.projectsId;
+  let owner = props.match.params.owner;
+  const permission = props.projectDetail && props.projectDetail.permission;
 
-  let projectsId = props.match.params.projectsId; 
-
-  useEffect(()=>{
-    if(projectsId){
-      const url ='/dev_ops/builds.json';
-      axios.get(url,{
-        params:{
-          project_id:projectsId
-        }
-      }).then(result=>{
-        if(result){
-          let list = result.data && result.data.map((item,key)=>{
-            return {
-              status:item.status,
-              author:item.sender,
-              message:{
-                branch:item.source,
-                image:item.author_avatar,
-                message:item.message,
-                sha:truncateCommitId(item.after)
-              },
-              started:item.started,
-              timestamp:item.timestamp
-            }
-          })
-          setData(list);
-        }
-      }).catch(error=>{
-        console.log(error);
-      })
+  useImperativeHandle(ref, () => ({
+    changeVal: () => {
+      setTableLoading(true);
+      Init();
     }
-  },[])
+  }))
 
-  function ChangeStatus(value){
-    setStatus(value)
+  useEffect(() => {
+    if (projectsId) {
+      Init();
+    }
+  }, [page]);
+
+  let current_user = props.current_user;
+  function Init(status) {
+    const url = `/${owner}/${projectsId}/builds.json`;
+    axios.get(url,{
+      params:{
+        search:status,
+        page,limit:LIMIT
+      }
+    }).then((result) => {
+      if (result && result.data) {
+        let list = result.data.builds && result.data.builds.map((item, key) => {
+          return {
+            ...item,
+            author:item.author && item.author.name,
+            message: {
+              branch: item.branch_target,
+              message: item.message,
+              sha: truncateCommitId(item.build_after_sha),
+            },
+            started: item.started || "--"
+          };
+        });
+        setTotal(result.data.total_count);
+        setData(list);
+        setTableLoading(false);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+  function ChangeStatus(value) {
+    setStatus(value);
+    Init(value);
   }
   // 切换分页
-  function ChangePage(page){
-    setPage(page)
+  function ChangePage(page) {
+    setPage(page);
   }
   function renderStatus() {
-    return(
+    return (
       <ul className="listNav">
-        {
-          STATUS.map((item,key)=>{
-            return <li onClick={()=>ChangeStatus(item.value)} className={ status === item.value ? "active":""}>{item.name}</li>            
-          })
-        }
+        {STATUS.map((item, key) => {
+          return (
+            <li
+              onClick={() => ChangeStatus(item.value)}
+              className={status === item.value ? "active" : ""}
+            >
+              {item.name}
+            </li>
+          );
+        })}
       </ul>
-    )
+    );
   }
-  function renderStatusBtn(status){
-    if(status === "failure" || status ==="success"){
+  function renderStatusBtn(status, number) {
+    if (status === "error" || status === "success") {
+      return "";
+    }else if(status === "killed" || status === "failure"){
       return(
-        <a className="color-blue">重新构建</a>
-      )
-    }else{
-      return(
-        <a className="color-red">撤销构建</a>
-      )
+        <Popconfirm
+          title="确认重新构建？"
+          onConfirm={(e) => repeatSet(e,number)}
+          onCancel={(e)=>{e.stopPropagation()}}
+          cancelText="取消"
+          okText="确定"
+        >
+          <a className="color-blue" onClick={(e)=>{e.stopPropagation()}}>重新构建</a>
+        </Popconfirm>
+      );
+    } else {
+      return (
+        <Popconfirm
+          title="确认撤销构建？"
+          onConfirm={(e) => cancelSet(e,number)}
+          onCancel={(e)=>{e.stopPropagation()}}
+          cancelText="取消"
+          okText="确定"
+        >
+          <a className="color-red" onClick={(e)=>{e.stopPropagation()}}>撤销构建</a>
+        </Popconfirm>
+      );
     }
   }
-  function renderTableStatus (status){
-    switch (status){
+  // 重新构建
+  function repeatSet(e,number) {
+    e.stopPropagation();
+    setTableLoading(true);
+    const url = `/${owner}/${projectsId}/builds/${number}/restart.json`;
+    axios.post(url).then((result) => {
+      if (result) {
+        props.showNotification("工作流正在重新构建！");
+        Init();
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+  // 撤销构建
+  function cancelSet(e,number) {
+    e.stopPropagation();
+    setTableLoading(true);
+    const url = `/${owner}/${projectsId}/builds/${number}/stop.json`;
+    axios.delete(url).then((result) => {
+      if (result) {
+        props.showNotification("撤销构建成功！");
+        Init(projectsId);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+  function renderTableStatus(status) {
+    switch (status) {
       case "running":
-        return(
-          <span className="statusTag running"><i className="iconfont icon-yunhangzhong"></i>运行中</span>
-        );
-      case "failure":
         return (
-          <span className="statusTag failed"><i className="iconfont icon-weitongguo"></i>未通过</span>
+          <span className="statusTag running">
+            <i className="iconfont icon-yunhangzhong"></i>运行中
+          </span>
+        );
+      case "failure": case 'error':
+        return (
+          <span className="statusTag failed">
+            <i className="iconfont icon-weitongguo"></i>未通过
+          </span>
         );
       case "success":
         return (
-          <span className="statusTag pass"><i className="iconfont icon-yitongguo"></i>已通过</span>
+          <span className="statusTag pass">
+            <i className="iconfont icon-yitongguo"></i>已通过
+          </span>
         );
-      default:
+      case 'killed':
         return (
-          <span className="statusTag Preparing"><i className="iconfont icon-zhunbeizhong"></i>准备中</span>
+          <span className="statusTag killed">
+            <i className="iconfont icon-weitongguo"></i>已撤销
+          </span>
+        );
+      case 'pending':
+        return (
+          <span className="statusTag Preparing">
+            <i className="iconfont icon-zhunbeizhong"></i>准备中
+          </span>
         );
     }
   }
+
+  function clickRows(event,e){
+    props.history.push(`/projects/${owner}/${projectsId}/devops/${e.number}/detail`);
+  }
   const column = [
     {
-      title:'序号',
-      dataIndex:"No",
-      key:"No",
-      width:"8%",
-      render:(item,value,key)=>{
-        return(
-          <span>#{key+1}</span>
-        )
-      }
+      title: "序号",
+      dataIndex: "number",
+      key: "number",
+      width: "8%",
+      render: ( value, item, key) => {
+        return <span>#{value}</span>;
+      },
     },
     {
-      title:'状态',
-      dataIndex:"status",
-      key:"status",
-      width:"12%",
-      render:(value,item,key)=>{
-        return(renderTableStatus(value))
-      }
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      width: "12%",
+      render: (value, item, key) => {
+        return renderTableStatus(value);
+      },
     },
     {
-      title:'构建人',
-      dataIndex:"author",
-      key:"author",
-      width:"12%",
-      align:"center"
+      title: "构建人",
+      dataIndex: "author",
+      key: "author",
+      width: "12%",
+      align: "center",
     },
     {
-      title:'提交信息',
-      dataIndex:"message",
-      key:"message",
-      width:"30%",
-      render:(value,item,key)=>{
+      title: "提交信息",
+      dataIndex: "message",
+      key: "message",
+      width: "30%",
+      render: (value, item, key) => {
         let meg = item.message;
-        return ( 
+        return (
           <React.Fragment>
             <div>
-              { meg.branch && <span className="mr10 color-grey-8"><i className="iconfont icon-fenzhi1 font-16 mr5"></i>分支{meg.branch}</span>}
-              { meg.sha && <span className="color-orange">{meg.sha}</span>}
+              {meg.branch && (
+                <span className="mr10 color-grey-8">
+                  <i className="iconfont icon-fenzhi1 font-16 mr5"></i>分支
+                  {meg.branch}
+                </span>
+              )}
+              {meg.sha && <span className="color-orange">{meg.sha}</span>}
             </div>
             <AlignCenter>
-              <Img src={meg.image} />
-              <div className="task-hide ml5" style={{maxWidth:"300px"}}>{meg.message}</div>
+              <img style={{borderRadius:"50%",marginRight:"10px",width:"25px",height:"25px"}} src={`${current_user && getUrl(`/images/${current_user.image_url}`)}`} />
+              <div className="task-hide ml5" style={{ maxWidth: "300px" }}>
+                {meg.message}
+              </div>
             </AlignCenter>
           </React.Fragment>
-        )
-      }
+        );
+      },
     },
     {
-      title:'开始时间',
-      dataIndex:"started",
-      key:"started",
-      width:"15%",
-      render:(value,item,key)=>{
-        return ( 
-        <span>{value || "--"}</span>
-        )
-      }
+      title: "开始时间",
+      dataIndex: "started",
+      key: "started",
+      width: "15%",
+      render: (value, item, key) => {
+        return <span>{value || "--"}</span>;
+      },
     },
     {
-      title:'运行时间',
-      dataIndex:"timestamp",
-      key:"timestamp",
-      width:"15%",
-      render:(value,item,key)=>{
-        return ( 
-        <span>{value || value === 0 ? `${value}s` : "--"}</span>
-        )
-      }
+      title: "运行时间",
+      dataIndex: "duration_time",
+      key: "duration_time",
+      width: "15%",
+      render: (value, item, key) => {
+        return <span>{value || "--"}</span>;
+      },
     },
     {
-      title:'操作',
-      dataIndex:"operation",
-      key:"operation",
-      render:(value,item,key)=>{
-        return(renderStatusBtn(item.status));
-      }
-    }
-  ]
-  return(
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      render: (value, item, key) => {
+        if(permission === "Admin" || permission === "Owner"){
+          return renderStatusBtn(item.status, item.number);
+        }else{
+          return "--";
+        }
+      },
+    },
+  ];
+  return (
     <div className="listPart">
       <FlexAJ>
         {renderStatus()}
-        <span>
-          <Blueback className="mr30">手动创建</Blueback>
-          <span className="mr30"><i className="iconfont icon-fenzhi1 font-16 mr5 color-blue"></i>分支</span>
-          <span><i className="iconfont icon-biaoqian3 font-16 mr5 color-blue"></i>标签</span>
-        </span>
+        {/* <Blueback>手动创建</Blueback> */}
+          {/* <span className="mr30">
+            <i className="iconfont icon-fenzhi1 font-16 mr5 color-blue"></i>分支
+          </span>
+          <span>
+            <i className="iconfont icon-biaoqian3 font-16 mr5 color-blue"></i>
+            标签
+          </span> */}
       </FlexAJ>
       <Table
+        onRow={(record,index)=>{
+          return{
+            onClick:(event)=>clickRows(event,record)
+          }
+        }}
         columns={column}
         className="normalTable"
         dataSource={data}
         pagination={false}
+        loading={tableLoading}
       ></Table>
-      {
-        total > LIMIT ?
-        <div style={{textAlign:'center',margin:"30px 50px"}}>
-          <Pagination showQuickJumper defaultCurrent={page} total={total} pageSize={LIMIT} onChange={ChangePage}></Pagination>
-        </div>:""
-      }
+      {total > LIMIT ? 
+        <div style={{ textAlign: "center", margin: "30px 50px" }}>
+          <Pagination
+            showQuickJumper
+            defaultCurrent={page}
+            total={total}
+            pageSize={LIMIT}
+            onChange={ChangePage}
+          ></Pagination>
+        </div> 
+        : 
+      "" }
     </div>
-  )
-})
\ No newline at end of file
+  );
+};
+export default forwardRef(Structure);
diff --git a/src/forge/DevOps/ops.scss b/src/forge/DevOps/ops.scss
index b9dcafccb..7a98d240a 100644
--- a/src/forge/DevOps/ops.scss
+++ b/src/forge/DevOps/ops.scss
@@ -12,8 +12,14 @@
   .disposePanel{
     .language{
       display: flex;
+      margin-bottom: 20px;
       li{
         margin-right: 20px;
+        cursor: pointer;
+        border:1px solid #fff;
+        &.active{
+          border:1px solid #5091FF;
+        }
       }
     }
     .editorBody{
@@ -36,6 +42,7 @@
       top:7px;
     }
     .listPart{
+      min-height: 400px;
       .listNav{
         display: flex;
         li{
@@ -63,6 +70,7 @@
         .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
           padding:10px 5px;
           color:#333;
+          cursor: pointer;
         }
         .ant-table-thead{
           border:1px solid rgba(238,238,238,1)
@@ -70,6 +78,9 @@
       }
     }
   }
+  .ant-modal-close{
+    top:7px;
+  }
   // 列表
   .listPart{
     .statusTag{
@@ -103,8 +114,13 @@
         border:1px solid #F73030;
         color:#F73030 ;
       }
+      &.killed{
+        background:#eee;
+        border:1px solid #999;
+        color:#999 ;
+      }
     }
-    
+
   }
 
 }
@@ -205,6 +221,14 @@
             border:1px solid rgba(255,110,33,1);
             color:rgba(255,110,33,1);
           }
+          &.killed{
+            border:1px solid #999;
+            color:#999;
+          }
+          &.skipped{
+            border:1px solid #d4d9de;
+            color:#798390;
+          }
         }
       }
       &.rightSection{
@@ -212,6 +236,8 @@
         background-color: #081930;
         .rightMainContent{
           padding:24px 30px;
+          height:100vh;
+          overflow-y: auto;
           & > div{
             margin-bottom: 12px;
             .items{
@@ -264,4 +290,27 @@
       cursor: col-resize;
     }
   }
+}
+.opsDetailOut{
+  display: flex;
+  color: #fff;
+  line-height: 22px;
+  align-items: flex-start;
+  margin-top: 5px;
+  &>span{
+    margin-right: 10px;
+    min-width: 20px;
+    text-align: left;
+    padding-left: 3px;
+  }
+  &>p{
+    margin-bottom: 0px;
+  }
+}
+.noOperation{
+  margin-bottom:20px;
+  width:380px;
+  text-align:center;
+  line-height:22px;
+  color:#666;
 }
\ No newline at end of file
diff --git a/src/forge/DevOps/opsDetail.jsx b/src/forge/DevOps/opsDetail.jsx
index efb6f846f..92f620a74 100644
--- a/src/forge/DevOps/opsDetail.jsx
+++ b/src/forge/DevOps/opsDetail.jsx
@@ -1,33 +1,114 @@
-import React from 'react';
-import './ops.scss';
-import { FlexAJ, AlignCenter } from '../Component/layout';
-import { Tags } from '../Component/OpsStatus';
-import SplitPane from 'react-split-pane';
-import LeftPanel from './OpsDetailLeftpanel';
-import RightPanel from './OpsDetailRightpanel';
+import React, { useEffect, useState, useRef, useContext } from "react";
+import "./ops.scss";
+import { FlexAJ, AlignCenter } from "../Component/layout";
+import { Tags } from "../Component/OpsStatus";
+import SplitPane from "react-split-pane";
+import LeftPanel from "./OpsDetailLeftpanel";
+import RightPanel from "./OpsDetailRightpanel";
+import axios from "axios";
+import { Spin } from "antd";
+import { Link } from "react-router-dom";
 
+export default (props) => {
+  const [data, setData] = useState(undefined);
+  const [stageN, setStageN] = useState(undefined);
+  const [stepN, setStepN] = useState(undefined);
+  const [rightSpin, setRightSpin] = useState(false);
+  const [spinning, setSpinning] = useState(true);
 
-export default (()=>{
-  return(
-    <div className="opsDetailPanel">
-      <FlexAJ className="opsInfos">
-        <AlignCenter>
-          <span>#1</span>
-          <span className="ml10">将分支“221063-improve-buy-ci-minutes-link”合并到“221063-improve-buy-ci-minutes-link"</span>
-          {Tags(1)}
-        </AlignCenter>
-        <a style={{color:"#ddd"}}><i className="iconfont icon-yiguanbi font-15  mr5"></i>退出</a>
-      </FlexAJ>
-      <div className="opsSection">
-        <SplitPane className="outer-split-pane" split="vertical" minSize={468} maxSize={-350} defaultSize="40%">
-          <section className="leftSection">
-            <LeftPanel />
-          </section>
-          <section className="rightSection">
-            <RightPanel />
-          </section>
-        </SplitPane>
+  let projectId = props.match.params.projectId;
+  let owner = props.match.params.owner;
+  let opsId = props.match.params.opsId;
+
+  useEffect(() => {
+    if (opsId && projectId) {
+      Init();
+    }
+  }, [opsId]);
+
+  function Init() {
+    const url = `/${owner}/${projectId}/builds/${opsId}.json`;
+    axios.get(url).then((result) => {
+      if (result && result.data) {
+        setSpinning(false);
+        setData(result.data);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      setSpinning(false);
+    });
+  }
+
+  // 重新构建
+  function repeatSet(e,type,number) {
+    if(type==="repeat"){
+      // 重新构建
+      const url = `/${owner}/${projectId}/builds/${number}/restart.json`;
+      axios.post(url).then((result) => {
+        if (result && result.data) {
+          props.showNotification("工作流正在重新构建！");
+          props.history.push(`/projects/${owner}/${projectId}/devops/${result.data.number}/detail`);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    }else{
+      // 撤销构建
+      const url = `/${owner}/${projectId}/builds/${number}/stop.json`;
+      axios.delete(url).then((result) => {
+        if (result) {
+          props.showNotification("撤销构建成功！");
+          Init();
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    }
+  }
+
+  function chooseSteps(pre,sub){
+    if(pre && sub){
+      setStepN(sub);
+      setStageN(pre);
+      setRightSpin(true);
+    }
+  }
+  return (
+    <Spin spinning={spinning}>
+      <div className="opsDetailPanel">
+        <FlexAJ className="opsInfos">
+          <AlignCenter>
+            <span>#{data && data.number}</span>
+            <span className="ml10">{data && data.message}</span>
+            {Tags(`${data && data.status}`)}
+          </AlignCenter>
+          <Link
+            style={{ color: "#ddd" }}
+            to={`/projects/${owner}/${projectId}/devops/list`}
+          >
+            <i className="iconfont icon-yiguanbi font-15 mr5"></i>退出
+          </Link>
+        </FlexAJ>
+        <div className="opsSection">
+          <SplitPane
+            className="outer-split-pane"
+            split="vertical"
+            minSize={468}
+            maxSize={-350}
+            defaultSize="40%"
+          >
+            <section className="leftSection">
+              <LeftPanel data={data} repeatSet={repeatSet} chooseSteps={chooseSteps} />
+            </section>
+            <section className="rightSection">
+              <RightPanel data={data} rightSpin={rightSpin} stepN={stepN} stageN={stageN} owner={owner} projectId={projectId} opsId={opsId} />
+            </section>
+          </SplitPane>
+        </div>
       </div>
-    </div>
-  )
-});
\ No newline at end of file
+    </Spin>
+  );
+};
diff --git a/src/forge/Images/banner_list_old.png b/src/forge/Images/banner_list_old.png
new file mode 100644
index 000000000..0f16930fa
Binary files /dev/null and b/src/forge/Images/banner_list_old.png differ
diff --git a/src/forge/Images/forgeBanner.png b/src/forge/Images/forgeBanner.png
new file mode 100644
index 000000000..14d2e8f14
Binary files /dev/null and b/src/forge/Images/forgeBanner.png differ
diff --git a/src/forge/Main/CoderRootBranch.js b/src/forge/Main/CoderRootBranch.js
index f2fe27b38..4369d2fe5 100644
--- a/src/forge/Main/CoderRootBranch.js
+++ b/src/forge/Main/CoderRootBranch.js
@@ -32,9 +32,9 @@ export default ((props)=>{
               return(
                 <li key={key}>
                   <div>
-                    <Link to={`/projects/${owner}/${projectsId}?branch=${item.name}`} className="color-blue font-15" style={{"maxWidth":"100px"}}>{item.name}</Link>
+                    <Link to={`/projects/${owner}/${projectsId}/branch/${item.name}`} className="color-blue font-15" style={{"maxWidth":"100px"}}>{item.name}</Link>
                     <p className="f-wrap-alignCenter mt15">
-                      <span className="mr5 commitKey" style={{marginLeft:0}}>{item.last_commit && truncateCommitId(item.last_commit.sha)}</span>
+                      <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.last_commit.sha}`)}`} className="mr5 commitKey" style={{marginLeft:0}}>{item.last_commit && truncateCommitId(item.last_commit.sha)}</Link>
                       <span className="color-grey-3 hide-1 messages leftPoint">{item.last_commit && item.last_commit.message}</span>
                       <span className="color-grey-8 ml30">最后更新于{item.last_commit && item.last_commit.time_from_now}</span>
                     </p>
diff --git a/src/forge/Main/CoderRootCommit.js b/src/forge/Main/CoderRootCommit.js
index 916af5b29..0b3526ac0 100644
--- a/src/forge/Main/CoderRootCommit.js
+++ b/src/forge/Main/CoderRootCommit.js
@@ -1,7 +1,7 @@
 import React , { Component } from 'react';
 import { Spin , Pagination } from 'antd';
 import { getImageUrl } from 'educoder';
-import { truncateCommitId } from '../common/util'
+import { truncateCommitId } from '../common/util';
 import SelectBranch from '../Branch/Select';
 import Nodata from '../Nodata';
 
@@ -12,7 +12,6 @@ class CoderRootCommit extends Component{
   constructor(props){
     super(props)
     this.state={
-      branch:"master",
       commitDatas:undefined,
       dataCount:undefined,
       limit:20,
@@ -22,11 +21,23 @@ class CoderRootCommit extends Component{
   }
 
   componentDidMount=()=>{
-    const { branch , page , limit } = this.state;
+    this.Init();
+  }
+
+  componentDidUpdate=(prevProps)=>{
+    const { location } = this.props;
+    const prevlocation = prevProps && prevProps.location;
+    if (location !== prevlocation) {
+      this.Init();
+    }
+  }
+  Init =()=>{
+    const { branchName } = this.props.match.params;
+    const { page , limit } = this.state;
     this.setState({
       isSpining:true
     })
-    this.getCommitList( branch , page , limit );
+    this.getCommitList( branchName , page , limit );
   }
 
   getCommitList=(branch , page , limit)=>{
@@ -68,26 +79,28 @@ class CoderRootCommit extends Component{
 
   // 切换分支 search:tag为根据标签搜索
   changeBranch=(value)=>{
-    const { page , limit } = this.state;
-    const { getTopCount } = this.props;
-    this.setState({
-      isSpining:true,
-      branch:value,
-    })
-    this.getCommitList(value , page , limit);
-    getTopCount && getTopCount(value);
+    // const { page , limit } = this.state;
+    // const { getTopCount } = this.props;
+    // this.setState({
+    //   isSpining:true,
+    //   branch:value,
+    // })
+    // this.getCommitList(value , page , limit);
+    // getTopCount && getTopCount(value);
+    const { projectsId , owner } = this.props.match.params;
+    this.props.history.push(`/projects/${owner}/${projectsId}/commits/branch/${value}`);
   }
 
   ChangePage=(page)=>{
-    
-    const { branch , limit } = this.state;
-    this.getCommitList(branch , page , limit);
+    const { branchName } = this.props.match.params;
+    const { limit } = this.state;
+    this.getCommitList(branchName , page , limit);
   }
   render(){
-    const { branch , commitDatas , dataCount , limit , page , isSpining } = this.state;
-    const { branchs , projectDetail, commit_class } = this.props;
-    const { projectsId , owner } = this.props.match.params;
-
+    const { commitDatas , dataCount , limit , page , isSpining } = this.state;
+    const { projectDetail, commit_class , defaultBranch } = this.props;
+    const { projectsId , owner , branchName } = this.props.match.params;
+    let branch = branchName || defaultBranch;
     return(
       <React.Fragment>
         <div className={commit_class}>
@@ -98,6 +111,7 @@ class CoderRootCommit extends Component{
               branch={branch}
               changeBranch={this.changeBranch}
               owner={owner}
+              history={this.props.history}
             ></SelectBranch>
           </div>
           <Spin spinning={isSpining}>
@@ -113,8 +127,8 @@ class CoderRootCommit extends Component{
                     return(
                       <div key={k}>
                         <p className="f-wrap-alignCenter">
-                          <span className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</span>
-                          <span className="flex1 ml20 font-16 color-grey-3">{item.message}</span>
+                          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</Link>
+                          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="flex1 ml20 font-16 color-grey-3">{item.message}</Link>
                         </p>
                         <p className="f-wrap-alignCenter mt15">
                           <Link to={`/users/${item.login}`} className="show-user-link">
diff --git a/src/forge/Main/CoderRootDirectory.js b/src/forge/Main/CoderRootDirectory.js
index 26b688b30..21a6a59f9 100644
--- a/src/forge/Main/CoderRootDirectory.js
+++ b/src/forge/Main/CoderRootDirectory.js
@@ -15,7 +15,6 @@ import Nodata from '../Nodata';
 import axios from "axios";
 /**
  * address:http和SSH，http_url(对应git地址)
- * branch:当前分支
  * filePath:点击目录时当前目录的路径
  * subfileType:保存当前点击目录的文件类型（显示目录列表时才显示新建文件，如果点击的是文件就不显示新建文件按钮）
  * readMeContent:根目录下面的readme文件内容
@@ -34,7 +33,6 @@ class CoderRootDirectory extends Component {
     super(props);
     this.state = {
       address: "http",
-      branch: "master",
       filePath: undefined,
       subFileType: undefined,
       readMeContent: undefined,
@@ -79,32 +77,27 @@ class CoderRootDirectory extends Component {
 
   Init = () => {
     let { search } = this.props.history.location;
-    let branchName = undefined;
-    if (search && search.indexOf("?branch=") > -1) {
-      branchName = search.split("?branch=")[1];
-      this.setState({
-        branch: branchName,
-      });
-    }
-    if (search && search.indexOf("?url=") > -1) {
-      let url = search.split("?url=")[1];
-      this.setState({
-        filePath: decodeURI(url),
-      });
-      this.getFileDetail(decodeURI(url));
+    const { branchName } = this.props.match.params;
+    const { defaultBranch } = this.props;
+    let branch = branchName || defaultBranch;
+    if (search && (search.indexOf("?url=") > -1 || search.indexOf("&url=") > -1)) {
+      let url = search.split("url=")[1];
+      if(url && decodeURI(url).indexOf("&")){
+        url=decodeURI(url).split("&")[0];
+      }
+      this.getFileDetail(decodeURI(url),branch);
     } else {
-      const { branch } = this.state;
-      this.getProjectRoot(branchName || branch);
+      this.getProjectRoot(branch);
     }
   };
 
   // 页面地址返回到主目录
   returnMain = (branch) => {
-    const { projectsId , owner } = this.props.match.params;
+    const { projectsId , owner , branchName } = this.props.match.params;
     this.setState({
       readOnly:true
     })
-    this.props.history.push(`/projects/${owner}/${projectsId}`);
+    this.props.history.push(`/projects/${owner}/${projectsId}${branchName?`/branch/${branchName}`:""}`);
     this.getProjectRoot(branch);
   };
 
@@ -182,48 +175,55 @@ class CoderRootDirectory extends Component {
 
   // 获取子目录
   getFileDetail = (path, ref) => {
-    const { projectsId ,owner } = this.props.match.params;
-    const { branch } = this.state;
+    this.setState({
+      filePath: decodeURI(path),
+    });
+    const { projectsId , owner , branchName } = this.props.match.params;
+    const { chooseType } = this.state;
     const url = `/${owner}/${projectsId}/sub_entries.json`;
-
     axios.get(url,{
       params:{
         filepath:path,
-        ref:ref || branch
+        ref:ref || branchName,
+        type:chooseType
       }
     }).then((result)=>{
       let entries = result.data && result.data.entries;
       this.setState({
         isSpin:false
       })
-      if( entries && entries.length > 0){
-        let { chooseType } = this.state;
-        // 当前返回的子目录只有一条数据，且这条数据返回的是文件类型
-        if(entries.length === 1 && entries[0].type === "file" && chooseType ==="file"){
-          this.setState({
-            fileDetail:entries,
-            rootList:undefined,
-            subFileType:false
-          })
+      if(result){
+        if(entries){
+          // 返回对象entries.type则是文件类型，否则是文件夹
+          if(entries.type){
+            this.setState({
+              fileDetail:[entries],
+              rootList:undefined,
+              subFileType:false
+            })
+          }else{
+            this.setState({
+              fileDetail:undefined,
+              rootList:entries,
+              branchLastCommit:result.data.last_commit && result.data.last_commit.commit,
+              lastCommitAuthor:result.data.last_commit && (result.data.last_commit.author || (result.data.last_commit.commit && result.data.last_commit.commit.author))
+            })
+            this.renderData(entries);
+          }
         }else{
           this.setState({
             fileDetail:undefined,
-            rootList:entries,
-            branchLastCommit:result.data.last_commit && result.data.last_commit.commit,
-            lastCommitAuthor:result.data.last_commit && (result.data.last_commit.author || (result.data.last_commit.commit && result.data.last_commit.commit.author))
+            rootList:undefined,
+            isSpin:false,
+            subFileType:false
           })
-          this.renderData(entries);
         }
-      }else{
-        this.setState({
-          fileDetail:undefined,
-          rootList:undefined,
-          isSpin:false,
-          subFileType:false
-        })
       }
     })
     .catch((error) => {
+      this.setState({
+        isSpin:false
+      })
       console.log(error);
     });
   };
@@ -255,8 +255,8 @@ class CoderRootDirectory extends Component {
     this.setState({
       chooseType:type
     })
-    const { projectsId, owner } = this.props.match.params;
-    this.props.history.push(`/projects/${owner}/${projectsId}?url=${path}`);
+    const { projectsId, owner , branchName } = this.props.match.params;
+    this.props.history.push(`/projects/${owner}/${projectsId}${branchName?`/branch/${branchName}`:""}?url=${path}`);
     if(filename.substring(filename.length - 3) === ".md"){
       this.setState({
         md:true
@@ -309,24 +309,18 @@ class CoderRootDirectory extends Component {
 
   // 选择分支
   changeBranch = (value) => {
-    this.setState({
-      branch: value,
-      isSpin: true,
-      readOnly:true
-    });
-    const { getTopCount } = this.props;
-    getTopCount && getTopCount(value);
-
     let { search } = this.props.history.location;
-    if (search && search.indexOf("?url=") > -1) {
-      let url = search.split("?url=")[1];
-      this.setState({
-        filePath: decodeURI(url),
-      });
-      this.getFileDetail(decodeURI(url), value);
-    } else {
-      this.getProjectRoot(value);
+    const { projectsId , owner } = this.props.match.params;
+
+    let url = `/projects/${owner}/${projectsId}${value && `/branch/${value}`}`;
+    if (search && (search.indexOf("?url=") > -1 || search.indexOf("&url=") > -1)) {
+      let u = search.split("url=")[1];
+      if(u && decodeURI(u).indexOf("&")){
+        u=decodeURI(u).split("&")[0];
+      }
+      url += `?url=${u}`;
     }
+    this.props.history.push(url);
   }
 
   // 子目录路径返回链接
@@ -364,6 +358,7 @@ class CoderRootDirectory extends Component {
 
   title = (branchLastCommit,lastCommitAuthor) => {
     if (branchLastCommit) {
+      const { projectsId , owner } = this.props.match.params;
       return (
         <div className="f-wrap-alignCenter">
           {lastCommitAuthor ? (
@@ -389,13 +384,13 @@ class CoderRootDirectory extends Component {
           ) : (
             ""
           )}
-          <span className="color-blue flex-1 hide-1">
+          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="color-blue flex-1 hide-1">
             {branchLastCommit.message}
-          </span>
+          </Link>
           <span>{branchLastCommit.time_from_now}</span>
-          <span className="commitKey">
+          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="commitKey">
             {truncateCommitId(branchLastCommit.sha)}
-          </span>
+          </Link>
         </div>
       );
     }else{
@@ -404,31 +399,36 @@ class CoderRootDirectory extends Component {
   }
 
   render(){
-    const { branchLastCommit , lastCommitAuthor , rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
-    const { isManager , isDeveloper , projectDetail } = this.props;
-    const { projectsId , owner } = this.props.match.params;
+    const { branchLastCommit , lastCommitAuthor , rootList ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
+    const { isManager , isDeveloper , projectDetail , platform , defaultBranch } = this.props;
+
+    const { projectsId , owner , branchName } = this.props.match.params;
+    let branch = branchName || defaultBranch;
     const columns = [
       {
+        key:"name",
         dataIndex: 'name',
         width:"30%",
         render: (text,item) => (
           <a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
-            <i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5":"iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
+            <i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5" : "iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
           </a>
         ),
       },
       {
-        dataIndex: "commit",
+        key:"message",
+        dataIndex: "message",
         width: "60%",
         render: (text, item) =>
           item.commit && item.commit.message ? 
-            <span title={item.commit.message} className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
+            <Link  to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit.sha}`)}`} title={item.commit.message} className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
               {item.commit.message}
-            </span>
+            </Link>
           : ""
       },
       {
-        dataIndex: "commit",
+        key:"time_from_now",
+        dataIndex: "time_from_now",
         width: "10%",
         className: "edu-txt-right",
         render: (text, item) =>
@@ -447,13 +447,20 @@ class CoderRootDirectory extends Component {
         <div className="main">
           <div className="f-wrap-between mb20">
             <div className="f-wrap-alignCenter">
-              <SelectBranch
-                repo_id={projectDetail && projectDetail.repo_id}
-                projectsId={projectsId}
-                branch={branch}
-                changeBranch={this.changeBranch}
-                owner={owner}
-              ></SelectBranch>
+              {
+                platform ?
+                <SelectBranch
+                  repo_id={projectDetail && projectDetail.repo_id}
+                  projectsId={projectsId}
+                  branch={branch}
+                  changeBranch={this.changeBranch}
+                  owner={owner}
+                  history={this.props.history}
+                ></SelectBranch>
+                :
+                <span>分支：<span className="color-grey-6">master</span></span>
+              }
+              
 
               {filePath && (
                 <span className="ml20 font-16">
@@ -480,7 +487,7 @@ class CoderRootDirectory extends Component {
               )}
             </div>
             <div className="f-wrap-alignCenter">
-              {subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && (
+              {subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && platform && (
                 <div>
                   <span>
                     <Link to={`/projects/${owner}/${projectsId}/${branch}/uploadfile${urlRoot}`} >
@@ -527,7 +534,6 @@ class CoderRootDirectory extends Component {
           {
             !rootList && !fileDetail && <Nodata _html="暂未发现当前文件！"/>
           }
-          {/* readme.txt (isManager || isDeveloper)*/}
           { rootList && this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
         </div>
       </Spin>
diff --git a/src/forge/Main/CoderRootFileDetail.js b/src/forge/Main/CoderRootFileDetail.js
index 218806ba4..343d2826f 100644
--- a/src/forge/Main/CoderRootFileDetail.js
+++ b/src/forge/Main/CoderRootFileDetail.js
@@ -165,12 +165,12 @@ class CoderRootFileDetail extends Component {
       isManager,
       isDeveloper,
       md,
-      currentBranch
+      currentBranch,
+      platform
     } = this.props;
     const { language, languages, description } = this.state;
     let flag = current_user && current_user.login && (isManager || isDeveloper);
     const Option = Select.Option;
-
     return (
       <div className="mb20">
         <div className="grid-item branchTitle">
@@ -180,7 +180,7 @@ class CoderRootFileDetail extends Component {
             </span>
           </div>
           <p className="text-right">
-            {flag && (
+            {flag && platform && (
               <div>
                 {readOnly ? (
                   <span>
diff --git a/src/forge/Main/CoderRootIndex.js b/src/forge/Main/CoderRootIndex.js
index 51762c998..27dbbb9db 100644
--- a/src/forge/Main/CoderRootIndex.js
+++ b/src/forge/Main/CoderRootIndex.js
@@ -55,12 +55,20 @@ class CoderRootIndex extends Component{
   }
 
   componentDidMount=()=>{
-    let { search } = this.props.history.location;
-    let branchName = undefined;
-    if (search && search.indexOf("?branch=") > -1) {
-      branchName = search.split("?branch=")[1];
+    this.Init();
+  }
+  componentDidUpdate=(prevProps)=>{
+    const { location } = this.props;
+    const prevlocation = prevProps && prevProps.location;
+    if (location !== prevlocation) {
+      this.Init();
     }
-    this.getTopCount(branchName);
+  }
+
+  Init=()=>{
+    const { branchName } = this.props.match.params;
+    const { defaultBranch } = this.props;
+    this.getTopCount(branchName || defaultBranch);
   }
 
   getTopCount=(branch)=>{
@@ -97,17 +105,23 @@ class CoderRootIndex extends Component{
               (props) => (<FileNew {...this.props} {...props} {...this.state} getTopCount={this.getTopCount} />)
             }
           ></Route>
+
+          {/* diff */}
+          <Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
+            render={
+              (props) => (<CoderRootCommit {...this.props} {...props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
+            }
+          ></Route>
+          <Route path="/projects/:owner/:projectsId/commits/:sha"
+            render={
+              (props) => (<Diff {...this.props} {...props} {...this.state}/>)
+            }
+          ></Route>
           <Route path="/projects/:owner/:projectsId/commits"
             render={
               () => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
             }
           ></Route>
-          {/* diff */}
-          <Route path="/projects/:owner/:projectsId/diff/:sha"
-            render={
-              () => (<Diff {...this.props} {...this.state}/>)
-            }
-          ></Route>
 
           <Route path="/projects/:owner/:projectsId/releases/:versionId/update"
             render={
@@ -125,12 +139,18 @@ class CoderRootIndex extends Component{
               () => (<CoderRootVersion {...this.props} {...this.state} />)
             }
           ></Route>
+
           <Route path="/projects/:owner/:projectsId/tag"
             render={
               () => (<CoderRootTag {...this.props} {...this.state} />)
             }
           ></Route>
-          <Route path="/projects/:owner/:projectsId/branch"
+          <Route path="/projects/:owner/:projectsId/branch/:branchName"
+            render={
+              (props) => (<CoderRootDirectory {...this.props} {...this.state} getTopCount={this.getTopCount} />)
+            }
+          ></Route>
+          <Route path="/projects/:owner/:projectsId/branchs"
             render={
               () => (<CoderRootBranch {...this.props} {...this.state} />)
             }
diff --git a/src/forge/Main/CoderRootTag.js b/src/forge/Main/CoderRootTag.js
index e295a6cdc..6a035fee8 100644
--- a/src/forge/Main/CoderRootTag.js
+++ b/src/forge/Main/CoderRootTag.js
@@ -3,13 +3,12 @@ import axios from 'axios';
 import { Spin } from 'antd';
 import { truncateCommitId } from '../common/util';
 import Nodata from '../Nodata';
-
+import { Link } from 'react-router-dom'
 
 export default (( props, { projectDetail }) => {
   const [isSpin, setSpin] = useState(true);
   const [data, setData] = useState(undefined);
 
-  const repo_id = projectDetail && projectDetail.repo_id;
   const { projectsId , owner } = props.match.params;
 
   useEffect(() => {
@@ -49,7 +48,7 @@ export default (( props, { projectDetail }) => {
                           <span className="font-16">{item.name}</span>
                         </span>
                         <span className="ul_tbody_third">
-                          <span className="commitKey" style={{ "marginLeft": 0 }}>{truncateCommitId(`${item.id}`)}</span>
+                          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.id}`)}`} className="commitKey" style={{ "marginLeft": 0 }}>{truncateCommitId(`${item.id}`)}</Link>
                         </span>
                         <span className="ul_tbody_forth">
                           <a href={item.tarball_url} style={{ color: "#4CC1DA" }} className="mr30"><i className="iconfont icon-TAR font-18 mr5"></i>TAR</a>
diff --git a/src/forge/Main/Detail.js b/src/forge/Main/Detail.js
index 334103aef..685e297dc 100644
--- a/src/forge/Main/Detail.js
+++ b/src/forge/Main/Detail.js
@@ -140,6 +140,8 @@ function checkPathname(pathname){
       name="activity"
     }else if(pathname.indexOf("/setting")>-1){
       name="setting"
+    }else if(pathname.indexOf("/devops")>-1){
+      name="devops"
     }
   }
   return name;
@@ -165,6 +167,12 @@ class Detail extends Component {
       project: null,
       firstSync:false,
       secondSync:false,
+      open_devops:false,
+      // 默认分支
+      defaultBranch:undefined,
+
+      // 非本平台项目
+      platform:false
     }
   }
 
@@ -186,8 +194,22 @@ class Detail extends Component {
     axios.get(url).then((result) => {
       if (result && result.data) {
         this.setState({
-          project: result.data
+          project: result.data,
+          open_devops:result.data.open_devops,
+          platform:result.data.platform && result.data.platform !== 'educoder'
         })
+
+        // 工作流：两种状态进入的链接不同
+        const pathname = this.props.history.location.pathname;
+        let p = checkPathname(pathname);
+        if(p==="devops"){
+          if(result.data.open_devops && pathname === `/projects/${owner}/${projectsId}/devops`){
+            this.props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
+          }else if(result.data.open_devops===false && pathname !== `/projects/${owner}/${projectsId}/devops`){
+            this.props.history.push(`/projects/${owner}/${projectsId}/devops`);
+          }
+        }
+
         if (result.data.type !== 0 && result.data.mirror_status === 1) {
           console.log("--------start channel --------");
           // 是镜像项目，且未完成迁移
@@ -213,6 +235,13 @@ class Detail extends Component {
       }
     })
   }
+
+  // 工作流激活后修改状态
+  changeOpenDevops=(flag)=>{
+    this.setState({
+      open_devops:flag
+    })
+  }
   canvasChannel = () => {
     const name = window.location.hostname === "localhost" ? "testforgeplus.trustie.net" : window.location.hostname;
     const actioncable = require("actioncable");
@@ -240,11 +269,11 @@ class Detail extends Component {
     const { projectsId , owner } = this.props.match.params;
     const url = `/${owner}/${projectsId}.json`;
     axios.get(url).then((result) => {
-      if (result) {
+      if (result && result.data) {
         this.setState({
           projectDetail: result.data,
           project_id: result.data.project_id,
-          isManager: result.data.permission && (result.data.permission === "Manager"|| result.data.permission === "Admin" || result.data.permission === "Owner"),
+          isManager: result.data.permission && (result.data.permission === "Manager" || result.data.permission === "Admin" || result.data.permission === "Owner"),
           isReporter: result.data.permission && result.data.permission === "Reporter",
           isDeveloper: result.data.permission && result.data.permission === "Developer",
           http_url: result.data.clone_url,
@@ -254,6 +283,7 @@ class Detail extends Component {
           watchers_count: result.data.watchers_count,
           praises_count: result.data.praises_count,
           forked_count: result.data.forked_count,
+          defaultBranch:result.data.default_branch
         })
       }
     }).catch((error) => { })
@@ -261,8 +291,10 @@ class Detail extends Component {
 
   // 关注和取消关注
   focusFunc = (flag) => {
-    const { project_id } = this.state;
+    const { platform } = this.state;
+    if(!platform)return;
 
+    const { project_id } = this.state;
     axios({
       method: flag ? 'delete' : 'post',
       url: `/watchers/${flag ? 'unfollow' : 'follow'}.json`,
@@ -282,6 +314,8 @@ class Detail extends Component {
 
   // 点赞和取消点赞
   pariseFunc = (flag) => {
+    const { platform } = this.state;
+    if(!platform)return;
     const { project_id } = this.state;
     axios({
       method: flag ? 'delete' : 'post',
@@ -312,6 +346,8 @@ class Detail extends Component {
 
   // fork项目
   forkFunc = () => {
+    const { platform } = this.state;
+    if(!platform)return;
     const { current_user } = this.props
     const { projectsId , owner } = this.props.match.params;
     const url = `/${owner}/${projectsId}/forks.json`;
@@ -327,6 +363,8 @@ class Detail extends Component {
 
   // 同步镜像
   synchronismMirror = () => {
+    const { platform } = this.state;
+    if(!platform)return;
     const { projectsId , owner } = this.props.match.params;
     const url = `/${owner}/${projectsId}/sync_mirror.json`;
     axios.post(url).then(result => {
@@ -343,7 +381,10 @@ class Detail extends Component {
   
 
   render() {
-    const { projectDetail, watchers_count, praises_count, forked_count, firstSync , secondSync , isManager, watched, praised, project } = this.state;
+    const { projectDetail, watchers_count, praises_count, 
+      forked_count, firstSync , secondSync , 
+      isManager, watched, praised, 
+      project , open_devops , platform , defaultBranch } = this.state;
     const url = this.props.history.location.pathname;
     const urlArr = url.split("/");
     const urlFlag = (urlArr.length === 3);
@@ -352,8 +393,6 @@ class Detail extends Component {
     const { projectsId , owner } = this.props.match.params;
 
     const { state } = this.props.history.location;
-    const { current_user } = this.props;
-    const checkLogin = current_user && current_user.login;
     
     const text = (
       projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
@@ -365,9 +404,10 @@ class Detail extends Component {
         </React.Fragment> : ""
     );
     
-
     const common = {
-      getDetail: this.getDetail
+      getDetail: this.getDetail,
+      changeOpenDevops:this.changeOpenDevops,
+      defaultBranch
     }
     return (
       <div>
@@ -397,10 +437,11 @@ class Detail extends Component {
                     projectDetail.type === 2 ?
                     <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
                       <i className="iconfont icon-banbenku font-18 mt6" style={{ color: "#8D90E3" }}/>
-                    </Tooltip>:
+                    </Tooltip>
+                    :
                     <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
-                    <i className="iconfont icon-jingxiang font-18 color-green mt6" />
-                  </Tooltip>
+                      <i className="iconfont icon-jingxiang font-18 color-green mt6" />
+                    </Tooltip>
                     :""
                   }
                 </span>
@@ -413,30 +454,45 @@ class Detail extends Component {
                       <a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
                   }
                   <span className="detail_tag_btn">
-                    <a className="detail_tag_btn_name" onClick={() => this.focusFunc(watched)}>
+                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
                       <i className={watched ? "iconfont icon-shixing color-orange font-16 mr3":"iconfont icon-kongxing color-grey-9 font-16 mr3"}></i>
                       <span>{watched ? '取消关注' : '关注'}</span>
                     </a>
-                    <Link className="detail_tag_btn_count" style={{color:`${watched?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/watchers`, state }}>
-                      {watchers_count}
-                    </Link>
+                    {
+                      platform ?
+                      <Link className="detail_tag_btn_count" style={{color:`${watched?"#2878FF":"#666"}`}} to={platform?{ pathname: `/projects/${owner}/${projectsId}/watchers`, state }:""}>
+                        {watchers_count}
+                      </Link>
+                      :
+                      <span className="detail_tag_btn_count">{watchers_count}</span>
+                    }
+                   
                   </span>
                   <span className="detail_tag_btn">
-                    <a className="detail_tag_btn_name" onClick={() => this.pariseFunc(praised)}>
+                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.pariseFunc(praised)}>
                       <i className={praised ? "iconfont icon-weibiaoti105 color-orange font-14 mr3":"iconfont icon-guanzhu color-grey-9 font-14 mr3"}></i>
                       <span>{praised ? '取消点赞' : '点赞'}</span>
                     </a>
-                    <Link className="detail_tag_btn_count" style={{color:`${praised?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/stargazers`, state }}>
-                      {praises_count}
-                    </Link>
+                    {
+                      platform ?
+                      <Link className="detail_tag_btn_count" style={{color:`${praised?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/stargazers`, state }}>
+                        {praises_count}
+                      </Link>:
+                      <span className="detail_tag_btn_count">{praises_count}</span>
+                    }
                   </span>
                   <span className="detail_tag_btn">
-                    <a className="detail_tag_btn_name" onClick={this.forkFunc}>
+                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={this.forkFunc}>
                       <i className="iconfont icon-fork color-grey-9 mr3"></i>Fork
                     </a>
-                    <Link className="detail_tag_btn_count" to={{ pathname: `/projects/${owner}/${projectsId}/fork_users`, state }}>
-                      {forked_count}
-                    </Link>
+                    {
+                      platform ?
+                      <Link className="detail_tag_btn_count" to={{ pathname: `/projects/${owner}/${projectsId}/fork_users`, state }}>
+                        {forked_count}
+                      </Link>
+                      :
+                      <span className="detail_tag_btn_count">{praises_count}</span>
+                    }
                   </span>
                 </span>
               }
@@ -465,7 +521,7 @@ class Detail extends Component {
                     </Link>
                   </li>
                   {
-                    projectDetail && parseInt(projectDetail.type) !== 2 &&
+                    projectDetail && parseInt(projectDetail.type) !== 2 && platform &&
                     <li className={pathname==="pulls" ? "active" : ""}>
                       <Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
                         <i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
@@ -474,12 +530,16 @@ class Detail extends Component {
                       </Link>
                     </li>
                   }
-                  {/* <li className={url.indexOf("/ops") > -1 ? "active" : ""}>
-                    <Link to={{ pathname: `/projects/${owner}/${projectsId}/ops`, state }}>
-                      <i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流
-                      {projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""} 
-                    </Link>
-                  </li> */}
+                  {
+                     platform &&
+                     <li className={pathname==="devops" ? "active" : ""}>
+                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/list`:""}`, state }}>
+                        <i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
+                        {projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""} 
+                      </Link>
+                    </li>
+                  }
+                  
                   <li className={pathname==="milestones" ? "active" : ""}>
                     <Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
                         <i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
@@ -494,7 +554,7 @@ class Detail extends Component {
                     </Link>
                   </li>
                   {
-                    isManager &&
+                    isManager && platform &&
                     <li className={url.indexOf("/setting") > 0 ? "active" : ""}>
                       <Link to={`/projects/${owner}/${projectsId}/setting`}>
                         <i className={url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
@@ -523,7 +583,7 @@ class Detail extends Component {
                 }
               ></Route>
               {/* 工作流 */}
-              <Route path="/projects/:owner/:projectsId/ops"
+              <Route path="/projects/:owner/:projectsId/devops"
                 render={
                   () => (<DevIndex {...this.props} {...this.state} {...common} />)
                 }
@@ -652,6 +712,16 @@ class Detail extends Component {
                   (props) => (<ForkUsers {...this.props} {...props} {...this.state} {...common} />)
                 }
               ></Route>
+              <Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
+                render={
+                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
+                }
+              ></Route>
+              <Route path="/projects/:owner/:projectsId/branch/:branchName"
+                render={
+                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
+                }
+              ></Route>
               <Route path="/projects/:owner/:projectsId"
                 render={
                   (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
diff --git a/src/forge/Main/DetailTop.js b/src/forge/Main/DetailTop.js
index bf6fc4c40..260ff1e61 100644
--- a/src/forge/Main/DetailTop.js
+++ b/src/forge/Main/DetailTop.js
@@ -3,27 +3,53 @@ import { Link } from 'react-router-dom';
 
 class DetailTop extends Component {
   render() {
-    const { coderCount } = this.props;
+    const { coderCount , platform } = this.props;
     const { projectsId, owner } = this.props.match.params;
     const { pathname } = this.props.location;
     return (
       <p className="branch-wrapper">
-        <Link to={`/projects/${owner}/${projectsId}/commits`} className={pathname.indexOf("/commits") > 0 ? "active" : ""}>
-          <i className="iconfont icon-tijiaojilu font-20 mr3 font-bd"></i>
-          <span>{(coderCount && coderCount.commits_count) || 0}</span>个提交
-        </Link>
-        <Link to={`/projects/${owner}/${projectsId}/branch`} className={pathname.indexOf("/branch") > 0 ? "active" : ""}>
-          <i className="iconfont icon-fenzhi1 font-18 mr3"></i>
-          <span>{(coderCount && coderCount.branches_count) || 0}</span>个分支
-        </Link>
-        <Link to={`/projects/${owner}/${projectsId}/tag`} className={pathname.indexOf("/tag") > 0 ? "active" : ""}>
-          <i className="iconfont icon-biaoqian3 font-18 mr3"></i>
-          <span>{(coderCount && coderCount.tags_count) || 0}</span>个标签
-        </Link>
-        <Link to={`/projects/${owner}/${projectsId}/releases`} className={pathname.indexOf("/releases") > 0 ? "active" : ""}>
-          <i className="iconfont icon-fahangban font-18 mr3"></i>
-          <span>{(coderCount && coderCount.version_releasesed_count) || 0}</span>个发行版
-        </Link>
+        
+        {
+          platform ?
+          <React.Fragment>
+            <Link to={`/projects/${owner}/${projectsId}/commits`} className={pathname.indexOf("/commits") > 0 ? "active" : ""}>
+              <i className="iconfont icon-tijiaojilu font-20 mr3 font-bd"></i>
+              <span>{(coderCount && coderCount.commits_count) || 0}</span>个提交
+            </Link>
+            <Link to={`/projects/${owner}/${projectsId}/branchs`} className={pathname.indexOf("/branchs") > 0 ? "active" : ""}>
+              <i className="iconfont icon-fenzhi1 font-18 mr3"></i>
+              <span>{(coderCount && coderCount.branches_count) || 0}</span>个分支
+            </Link>
+            <Link to={`/projects/${owner}/${projectsId}/tag`} className={pathname.indexOf("/tag") > 0 ? "active" : ""}>
+              <i className="iconfont icon-biaoqian3 font-18 mr3"></i>
+              <span>{(coderCount && coderCount.tags_count) || 0}</span>个标签
+            </Link>
+            <Link to={`/projects/${owner}/${projectsId}/releases`} className={pathname.indexOf("/releases") > 0 ? "active" : ""}>
+              <i className="iconfont icon-fahangban font-18 mr3"></i>
+              <span>{(coderCount && coderCount.version_releasesed_count) || 0}</span>个发行版
+            </Link>
+          </React.Fragment>
+          :
+          <React.Fragment>
+            <a href="javscript:void(0)" style={{cursor:"default"}}>
+              <i className="iconfont icon-tijiaojilu font-20 mr3 font-bd"></i>
+              <span>{(coderCount && coderCount.commits_count) || 0}</span>个提交
+            </a>
+            <a href="javscript:void(0)" style={{cursor:"default"}}>
+              <i className="iconfont icon-fenzhi1 font-18 mr3"></i>
+              <span>{(coderCount && coderCount.branches_count) || 0}</span>个分支
+            </a>
+            <a href="javscript:void(0)" style={{cursor:"default"}}>
+              <i className="iconfont icon-biaoqian3 font-18 mr3"></i>
+              <span>{(coderCount && coderCount.tags_count) || 0}</span>个标签
+            </a>
+            <a href="javscript:void(0)" style={{cursor:"default"}}>
+              <i className="iconfont icon-fahangban font-18 mr3"></i>
+              <span>{(coderCount && coderCount.version_releasesed_count) || 0}</span>个发行版
+            </a>
+          </React.Fragment>
+        }
+        
         <a href="javscript:void(0)" style={{cursor:"default"}}>
           <i className="iconfont icon-cangku font-18 mr3"></i>
           仓库 <span className="ml3">{(coderCount && coderCount.size) || 0}</span>
diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx
index 28abe4206..8007e1fc8 100644
--- a/src/forge/Main/Diff.jsx
+++ b/src/forge/Main/Diff.jsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button ,Spin } from "antd";
 import { truncateCommitId } from '../common/util';
-import Nodata from '../Nodata';
+import { getImageUrl } from 'educoder';
+import Files from '../Merge/Files';
 
 import User from "../Component/User";
 import Keys from "../Component/Keys";
@@ -11,65 +12,34 @@ import axios from "axios";
 
 const Infos = styled.div`
   border: 1px solid #dddddd;
+  margin-bottom:15px;
   & .commitinfos {
     background-color: #f1f8ff;
     border-bottom: 1px solid #ddd;
     padding: 20px;
   }
   & > .f-wrap-between {
-    padding: 10px 24px;
+    padding: 10px 20px;
   }
 `;
-const Operation = styled.p`
-  border-bottom: 1px solid #eee;
-  padding: 12px 0px;
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
 
-const FileUl = styled.ul`
-  padding-top: 10px;
-  & li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 20px;
-    line-height: 20px;
-    margin-bottom: 10px;
-  }
-`;
-const DetailP = styled.p`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px 12px 12px;
-  background-color: #fafafa;
-  border: 1px solid #dddddd;
-`;
-
-export default ({ projectDetail, match }) => {
+export default ({ match , history }) => {
   const [data, setData] = useState({undefined});
   const [commit, setCommit] = useState(undefined);
-  const [files, setFiles] = useState(undefined);
   const [parents, setParents] = useState(undefined);
   const [committer, setCommitter] = useState(undefined);
-  const [fileflag , setFileflag] = useState(false);
   const [isSpin, setIsSpin] = useState(true);
 
-  const repo_id = projectDetail && projectDetail.repo_id;
-  const { sha } = match.params;
+  const { sha , projectsId, owner } = match.params;
   useEffect(() => {
-    if (repo_id && sha) {
-      const url = `/repositories/${repo_id}/commits/${sha}.json`;
+    if (projectsId && owner && sha) {
+      const url = `/${owner}/${projectsId}/commits/${sha}.json`;
       axios
         .get(url)
         .then(result => {
           if (result) {
             setData(result.data);
             setCommit(result.data.commit);
-            setFiles(result.data.files);
             setParents(result.data.parents);
             setCommitter(result.data.committer || (result.data.commit && result.data.commit.committer));
             setIsSpin(false);
@@ -79,78 +49,32 @@ export default ({ projectDetail, match }) => {
           console.log(error);
         });
     }
-  }, [repo_id, sha]);
-  const renderFiles = () => {
-    return (
-      <FileUl>
-        {
-          files && files.length > 0 && files.map((item,key)=>{
-            return(
-              <li>
-                <span className="mr30 task-hide flex1">
-                  <i className="iconfont icon-wenjia color-grey-3 font-16 mr8"></i>
-                  {item.Name}
-                </span>
-                <span>
-                  <label className="color-green mr20">+{item.Addition}</label>
-                  <label className="color-red">-{item.Deletion}</label>
-                </span>
-              </li>
-            )
-          })
-        }
-      </FileUl>
-    );
-  };
-
-  function changeFlag(){
-    let flag = !fileflag;
-    setFileflag(flag);
-  }
-
-  const filesDetail = () => {
-    return (
-      <div>
-        <DetailP>
-          <span>
-            <i className="iconfont icon-youjiantou mr4 font-15 color-grey-9"></i>
-            <span className="font-16 color-grey-3">README.md</span>
-          </span>
-          <Button>查看文件</Button>
-        </DetailP>
-      </div>
-    );
-  };
-
+  }, [projectsId , owner, sha]);
   return (
     <div className="main">
       <Spin spinning={isSpin}>
         <Infos>
           <div className="commitinfos">
-            <p className="f-wrap-between">
-              <span className="font-20 color-grey-3">
-                { commit && commit.title }
-              </span>
-              <Button type="primary">浏览代码</Button>
-            </p>
-            {commit && commit.message ? (
-              <pre className="mt10">{commit.message}</pre>
-            ) : (
-              ""
-            )}
+            <div className="f-wrap-between">
+              {commit && commit.message &&
+                <pre className="task-hide" style={{marginBottom:"0px",height:"28px",whiteSpace:"pre-wrap"}}>{commit.message}</pre>
+              }
+              <Button type="primary" onClick={()=>{history.push(`/projects/${owner}/${projectsId}/branch/${truncateCommitId(sha)}`)}} className="ml30">浏览代码</Button>
+            </div>
           </div>
           <div className="f-wrap-between" style={{ alignItems: "center" }}>
             <ul className="df">
               <User
-                url={(committer && committer.image_url)|| "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
+                url={(committer && getImageUrl(`images/${committer.image_url}`))|| "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
                 name={committer && committer.name}
               />
+              {committer && committer.time_from_now && <li className="ml20 mt2">{committer.time_from_now}</li>}
             </ul>
             <li className="df">
               {
                 parents && parents.length > 0 && parents.map((item,key)=>{
                   return(
-                    <Keys title="父节点" value={truncateCommitId(item.sha) } className="mr20"></Keys>
+                    <Keys title="父节点" value={truncateCommitId(item.sha)} key={key} className="mr20"></Keys>
                   )
                 })
               }
@@ -158,35 +82,12 @@ export default ({ projectDetail, match }) => {
             </li>
           </div>
         </Infos>
-        {
-          files && files.length > 0 ?
-          <React.Fragment>
-            <Operation>
-              <span className="files_info" onClick={changeFlag}>
-                <i className={fileflag ? "iconfont icon-sanjiaoxing-down mr8 color-grey-9 font-16":"iconfont icon-triangle mr8 color-grey-9 font-16"}></i>
-                <span className="color-grey-9">
-                  共有<span>{files && files.length}个文件被更改</span>，包括
-                  {data && data.additions ? (
-                    <span className="color-green">{data.additions}次插入</span>
-                  ) : (
-                    ""
-                  )}
-                  {data && data.additions && data.deletions ? "和" : ""}
-                  {data && data.deletions ? (
-                    <span className="color-red">{data.deletions}次删除</span>
-                  ) : (
-                    ""
-                  )}
-                </span>
-              </span>
-              <Button>双栏查看</Button>
-            </Operation>
-            {fileflag && renderFiles()}
-            {filesDetail()}
-          </React.Fragment>
-          :
-          <Nodata _html="暂无文件修改信息！"/>
-        }
+        <Files 
+          history={history} 
+          data={data} 
+          owner={owner} 
+          projectsId={projectsId} 
+        />
       </Spin>
     </div>
   );
diff --git a/src/forge/Main/Index.js b/src/forge/Main/Index.js
index 6a5bb67f1..4952d429d 100644
--- a/src/forge/Main/Index.js
+++ b/src/forge/Main/Index.js
@@ -277,7 +277,7 @@ class Index extends Component {
                     </div>
                     <div className="baseInfo">
                       <span className="look"><i className="iconfont icon-dianjiliang font-12"></i>{item.visits}</span>
-                      <span className="type">项目类型：{item.category && item.category.name}</span>
+                      <span className="type">{item.category && item.category.name}</span>
                     </div>
                   </div>
                 )
diff --git a/src/forge/Main/Index.scss b/src/forge/Main/Index.scss
index 14744ae2f..cb006f67a 100644
--- a/src/forge/Main/Index.scss
+++ b/src/forge/Main/Index.scss
@@ -68,7 +68,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-align: center;
+      text-align: right;
     }
   }
 }
\ No newline at end of file
diff --git a/src/forge/Main/IndexItem.js b/src/forge/Main/IndexItem.js
index 7950d6e1c..87f336b1f 100644
--- a/src/forge/Main/IndexItem.js
+++ b/src/forge/Main/IndexItem.js
@@ -20,9 +20,16 @@ class IndexItem extends Component {
       projects && projects.length > 0 ? projects.map((item, key) => {
         return (
           <div className="p-r-Item" key={key}>
-            <Link to={`/users/${item.author.login}`} className="show-user-link">
-              <img className="p-r-photo" alt="" src={getImage(`${item.author && item.author.image_url}`)} ></img>
-            </Link>
+            {
+              item.platform === "educoder" ?
+              <a href="javascript:void(0)" style={{cursor:"default"}} className="show-user-link">
+                <img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
+              </a>
+              :
+              <Link to={`/users/${item.author.login}`} className="show-user-link">
+                <img className="p-r-photo" alt="" src={getImageUrl(`${item.author && item.author.image_url}`)} ></img>
+              </Link>
+            }
             <div className="p-r-Infos">
               <div className="p-r-name">
                 <Link to={`/projects/${item.author.login}/${item.identifier}`} className="hide-1 color-grey-3 font-18 task-hide " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
@@ -46,16 +53,16 @@ class IndexItem extends Component {
                   }
                 </Link>
                 <span className="p-r-tags">
-                  <span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" />赞 ({item.praises_count})</span>
-                  <span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork ({item.forked_count})</span>
+                  <span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}</span>
+                  <span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}</span>
                 </span>
               </div>
               <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>{item.description}</p>
 
               <div className="p-r-about">
                 <span className="p-r-detail">
-                  <span><label>浏览量：</label>{item.visits}</span>
-                  {item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
+                  {/* <span><label>浏览量：</label>{item.visits}</span> */}
+                  {/* {item.category && item.category.id && <span>{item.category.name}</span>} */}
                   {item.last_update_time ? <span ><label>更新于</label>{item.time_ago}</span> : ""}
                   {item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
                 </span>
diff --git a/src/forge/Main/list.css b/src/forge/Main/list.css
index 6668fd2f4..272583d1c 100644
--- a/src/forge/Main/list.css
+++ b/src/forge/Main/list.css
@@ -261,7 +261,7 @@
 }
 .detail_tag_btn_name{
   padding:0px 10px;
-  color: #666;
+  color: #666!important;
 }
 .detail_tag_btn_name img{
   margin-right: 10px;
@@ -294,6 +294,7 @@
 .branch-wrapper > a >i{
   color: #5091FF;
   margin-right: 5px;
+  cursor: default;
 }
 .branch-wrapper a{
   display: flex;
@@ -411,6 +412,7 @@
   padding: 13px 16px!important;
 }
 .commitKey{
+  cursor: pointer;
   border:1px solid #FD7700;
   background-color:#FFF3DC;
   color: #FD7700!important;
diff --git a/src/forge/Merge/Commits.jsx b/src/forge/Merge/Commits.jsx
new file mode 100644
index 000000000..a7d12073a
--- /dev/null
+++ b/src/forge/Merge/Commits.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { AlignCenter , FlexAJ } from '../Component/layout';
+import User from '../Component/User';
+import { truncateCommitId } from '../common/util';
+import { getImageUrl } from 'educoder';
+import { Link } from 'react-router-dom';
+
+function Commits({ commits , projectsId , owner }){
+  return(
+    <div className="pb20">
+      {
+        commits.map((item,key)=>{
+          return(
+            <div className="prCommits"> 
+              <p className="prCreate">{item.created_at}</p>
+              <div className="prInfo">
+                <FlexAJ>
+                  <AlignCenter>
+                    <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</Link>
+                    <p className="ml15 font-16 color-grey-3 task-hide" style={{maxWidth:"700px"}}>{item.message}</p>
+                  </AlignCenter>
+                  <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(item.sha)}`} className="color-blue">浏览代码</Link>
+                </FlexAJ>
+                <AlignCenter className="mt15">
+                  <User url={getImageUrl(`images/${item.committer && item.committer.image_url}`)} name={`${item.committer && item.committer.name}`}></User><span>：提交于{item.time_from_now}</span>
+                </AlignCenter>
+              </div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+export default Commits;
\ No newline at end of file
diff --git a/src/forge/Merge/Files.jsx b/src/forge/Merge/Files.jsx
new file mode 100644
index 000000000..089832662
--- /dev/null
+++ b/src/forge/Merge/Files.jsx
@@ -0,0 +1,86 @@
+import React ,{useEffect,useState } from 'react';
+import { truncateCommitId } from '../common/util';
+import { AlignCenter , FlexAJ } from '../Component/layout';
+import { Button } from 'antd';
+import './merge.css';
+
+function Files({data,history,owner,projectsId}){
+  const [ files , setFiles ] = useState(data && data.files);
+
+  useEffect(()=>{
+    if(data){
+      setFiles(data.files);
+    }
+  },[data])
+
+  function showDown(flag,index,isBin){
+    if(!isBin){
+      var lists = files.concat();
+      lists[index].flag = !flag ? true : false;
+      lists.splice();
+      setFiles(lists);
+    }
+  }
+
+  return(
+    <div>
+      <AlignCenter className="color-grey-9 pb10" style={{borderBottom:"1px solid #eee"}}>
+        <i className="iconfont icon-sanjiaoxing-down mr5"></i>
+        <span>
+          共有<span className="color-grey-3"> {data && data.files_count} 个文件被更改</span>，包括
+          { data && data.total_addition ? <span className="color-green"> {data && data.total_addition} 次插入</span>:"" }
+          { data && data.total_addition && data.total_deletion ? " 和 ":""}
+          { data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
+        </span>
+      </AlignCenter>
+      {
+        files && files.length>0 &&
+        <div>
+          {
+            files.map((item,key)=>{
+              return(
+                <div className="files" key={key}>
+                  <FlexAJ className="filesInfo" style={{cursor:item.isBin ? "default":"pointer"}} onClick={()=>showDown(item.flag,key,item.isBin)}>
+                    <AlignCenter>
+                      {!item.isBin ? <i className={!item.flag?"iconfont icon-xiajiantou font-16 mr15 color-grey-9":"iconfont icon-youjiantou font-16 mr15 color-grey-9"}></i>:""}
+                      <i className="iconfont icon-wenjia font-16 mr8 color-grey-9"></i>
+                      <span>{item.name}</span>
+                    </AlignCenter>
+                    <span>
+                      <Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}${item.sha ? `/branch/${truncateCommitId(item.sha)}?`:"?"}url=${item.name}`)}}>查看文件</Button>
+                      <span className="color-green">+{item.addition}</span>
+                      <span className="color-red ml20">-{item.deletion}</span>
+                    </span>
+                  </FlexAJ>
+                  {
+                    item.sections && item.sections.length >= 1 && !item.flag &&
+                    <div className="filesContent">
+                      {
+                        item.sections.map((i,k)=>{
+                          return(
+                            i.lines && i.lines.length>0 && i.lines.map((item,key)=>{
+                              return(
+                                <div key={k+key} className={(item.type === 2) ? "linesContent add" : item.type === 3 ? "linesContent reduce": item.type===4?"linesContent translate":"linesContent"}>
+                                  <span className="lines">
+                                    <span>{item.leftIdx && item.leftIdx !=="0" ? item.leftIdx :"" }</span>
+                                    <span>{item.rightIdx && item.rightIdx !=="0" ? item.rightIdx :"" }</span>
+                                  </span>
+                                  <p>{item.content}</p>
+                                </div>
+                              )
+                            })
+                          )
+                        })
+                      }
+                    </div>
+                  }
+                </div>
+              )
+            })
+          }
+        </div>
+      }
+    </div>
+  )
+}
+export default Files;
\ No newline at end of file
diff --git a/src/forge/Merge/MergeDetail.js b/src/forge/Merge/MergeDetail.js
index a075fd52e..a7e2f33e1 100644
--- a/src/forge/Merge/MergeDetail.js
+++ b/src/forge/Merge/MergeDetail.js
@@ -214,7 +214,7 @@ class MergeDetail extends Component {
         )
       } else {
         return (
-          <NoneData _html="暂时还没有相关数据哦!" />
+          <NoneData _html="暂时还没有相关数据!" />
         )
       }
     }
diff --git a/src/forge/Merge/MergeItem.js b/src/forge/Merge/MergeItem.js
index 2585b9d44..77a8a62a7 100644
--- a/src/forge/Merge/MergeItem.js
+++ b/src/forge/Merge/MergeItem.js
@@ -98,7 +98,7 @@ class MergeItem extends Component {
                     <span className="ml15">
                       <Tag className="pr-branch-tag">
                         <Link
-                          to={`/projects/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }?branch=${item.pull_request_head}`}
+                          to={`/projects/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }/branch/${item.pull_request_head}`}
                           className="maxW200px hide-1 ver-middle"
                         >
                           {item.is_original
@@ -116,7 +116,7 @@ class MergeItem extends Component {
                       </span>
                       <Tag className="pr-branch-tag">
                         <Link
-                          to={`/projects/${owner}/${projectsId}?branch=${item.pull_request_base}`}
+                          to={`/projects/${owner}/${projectsId}/branch/${item.pull_request_base}`}
                           className="maxW200px hide-1 ver-middle"
                         >
                           {/* {item.is_fork ? item.pull_request_base : `${item.author_name}:${item.pull_request_base}`} */}
diff --git a/src/forge/Merge/MergeSubmit.js b/src/forge/Merge/MergeSubmit.js
index 9ebb3bb2b..27156f0e0 100644
--- a/src/forge/Merge/MergeSubmit.js
+++ b/src/forge/Merge/MergeSubmit.js
@@ -5,6 +5,7 @@ import axios from 'axios';
 import{ Form , Table , Spin } from 'antd'
 import { getImageUrl } from 'educoder';
 import {Link} from "react-router-dom";
+import { truncateCommitId} from '../common/util';
 class MergeSubmit extends Component{
   constructor(props){
     super(props);
@@ -36,7 +37,6 @@ class MergeSubmit extends Component{
   }
 
   getDetail=()=>{
-
     const { projectsId , mergeId, owner} = this.props.match.params;
     const url = `/projects/${owner}/${projectsId}/pull_requests/${mergeId}.json`;
     axios.get(url).then((result)=>{
@@ -83,8 +83,16 @@ class MergeSubmit extends Component{
     }).catch((error)=>{console.log(error)})
   }
 
+  title =()=>{
+    return(
+      <div className="f-wrap-between" style={{alignItems:"center"}}>
+        <span className="font-16">提交列表</span>
+      </div>
+    )
+  }
 
   render(){
+    const { projectsId , owner } = this.props.match.params;
     const { titledata } = this.state;
     const columns=[{
         title:"作者",
@@ -102,7 +110,7 @@ class MergeSubmit extends Component{
         title:"SHA",
         dataIndex: 'sha',
         render: (text) => (
-          <span className="commitKey">{text}</span>
+          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${text}`)}`} className="commitKey">{text}</Link>
         )
       },{
         title:"备注",
@@ -118,14 +126,6 @@ class MergeSubmit extends Component{
           <span>{text}</span>
         )
       }]
-  
-      const title =()=>{
-        return(
-          <div className="f-wrap-between" style={{alignItems:"center"}}>
-            <span className="font-16">提交列表</span>
-          </div>
-        )
-      }
 
     return(
       <Spin spinning={this.state.isSpin}>
@@ -136,11 +136,9 @@ class MergeSubmit extends Component{
           showHeader={false}
           size="small"
           pagination={false}
-          title={() => title()}
+          title={() => this.title()}
         />
       </Spin>
-      // </div>
-    // </div>
     )
   }
 }
diff --git a/src/forge/Merge/MessageCount.js b/src/forge/Merge/MessageCount.js
index c7052fe72..87f19d380 100644
--- a/src/forge/Merge/MessageCount.js
+++ b/src/forge/Merge/MessageCount.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
+import { Tabs } from 'antd';
 import { Link } from "react-router-dom";
-
+import { AlignCenter } from '../Component/layout';
 import axios from "axios";
 import { getImageUrl } from "educoder";
 import {
@@ -39,6 +40,8 @@ class MessageCount extends Component {
       SpinMerge: false,
       edit_spin: false,
       pr_status: undefined,
+
+      copyVisible:false,
     };
   }
 
@@ -47,7 +50,18 @@ class MessageCount extends Component {
       SpinFlag: true,
     });
     this.getDetail();
+
+    // this.clickBody();
   };
+  clickBody=()=>{
+    document.body.addEventListener('click', e => {
+      let name = e.target.className;
+      if(name.indexOf("notHide")>-1 || name.indexOf("ant-tabs-tab")>-1 || name==="ant-tabs-nav-scroll"){return;}
+      this.setState({
+        copyVisible:false
+      })
+    })
+  }
 
   getDetail = () => {
     const { projectsId, mergeId, owner } = this.props.match.params;
@@ -59,7 +73,7 @@ class MessageCount extends Component {
           this.setState({
             data: result.data,
             SpinFlag: false,
-            pr_status: result.data.pull_request.status,
+            pr_status: result.data && result.data.pull_request && result.data.pull_request.status,
           });
         } else {
           this.setState({ SpinFlag: false });
@@ -198,6 +212,33 @@ class MessageCount extends Component {
     return <RenderHtml className="break_word_comments imageLayerParent" value={v} />;
   };
 
+  setCopyVisible=(e)=>{
+    e.stopPropagation();
+    this.setState({
+      copyVisible:true
+    })
+  }
+
+  copyItem =()=>{
+    return(
+      <div className="copyTab notHide">
+        <Tabs defaultActiveKey="1" className="notHide" animated={false} size={"small"}>
+          <Tabs.TabPane key="1" tab={<span className="notHide">HTTPS</span>}>{this.returnCopyUrl("https://gitee.com/44886/polhttp.git")}</Tabs.TabPane>
+          <Tabs.TabPane key="2" tab={<span className="notHide">SSH</span>}>{this.returnCopyUrl("https://gitee.com/44886/polssh.git")}</Tabs.TabPane>
+        </Tabs>
+      </div>
+    )
+  }
+
+  returnCopyUrl=(url)=>{
+    return(
+      <div className="df notHide">
+        <Input value={url} className="notHide" disabled={true}/>
+        <Button type="primary" ghost className="ml15 notHide">复制</Button>
+      </div>
+    )
+  }
+
   render() {
     const { projectsId, mergeId , owner } = this.props.match.params;
     
@@ -208,6 +249,7 @@ class MessageCount extends Component {
       isSpin,
       ismesrge,
       SpinFlag,
+      copyVisible
     } = this.state;
     const { current_user, projectDetail } = this.props;
     const menu = (
@@ -258,7 +300,7 @@ class MessageCount extends Component {
                       <div className="mt15">
                         <Tag className="pr-branch-tag">
                           <Link
-                            to={`/projects/${owner}/${data.pull_request.is_original?data.pull_request.fork_project_id:projectsId}?branch=${data.pull_request.head}`}
+                            to={`/projects/${owner}/${data.pull_request.is_original?data.pull_request.fork_project_id:projectsId}/branch/${data.pull_request.head}`}
                             className="ver-middle"
                           >
                             {data.pull_request.is_original ? data.pull_request.fork_project_user : data.issue.project_author_name}:{data.pull_request.head}
@@ -273,7 +315,7 @@ class MessageCount extends Component {
                         </span>
                         <Tag className="pr-branch-tag">
                           <Link
-                            to={`/projects/${owner}/${projectsId}?branch=${data.pull_request.base}`}
+                            to={`/projects/${owner}/${projectsId}/branch/${data.pull_request.base}`}
                             className="ver-middle"
                           >
                             {/* {data.pull_request.is_fork ? data.pull_request.base : `${data.pull_request.pull_request_user}:${data.pull_request.base}`} */}
@@ -352,13 +394,20 @@ class MessageCount extends Component {
                     </div>
                   </div>
                   <div className="ml10">
-                    <div className="mt15 text-right">
+                    <div className="mt15 text-right" style={{display:"flex",justifyContent:"flex-end"}}>
+                      {/* <span className="composeButton">
+                        <Dropdown overlay={this.copyItem()} visible={copyVisible} onClick={(e)=>this.setCopyVisible(e)}>
+                          <span>复制</span>
+                        </Dropdown>
+                        <span>下载为<i className="iconfont icon-sanjiaoxing-down color-blue"></i></span>
+                      </span> */}
                       {current_user && projectDetail &&
-                        pr_status !== 2 &&
+                        pr_status === 0 &&
                         projectDetail.permission !=="Reporter" && (
                           <Button
-                            type="success"
+                            type="green"
                             ghost
+                            className="ml20"
                             onClick={()=>{this.props.history.push(`/projects/${owner}/${projectsId}/pulls/${mergeId}/UpdateMerge`);}}
                           >
                             编辑
@@ -369,7 +418,7 @@ class MessageCount extends Component {
                           type="danger"
                           ghost
                           onClick={() => this.closedetail()}
-                          className="ml15"
+                          className="ml20"
                           loading={isSpin}
                         >
                           拒绝
@@ -471,14 +520,12 @@ class MessageCount extends Component {
               </div>
             </div>
 
-            <div className=" main">
-              <MergeFooter
-                footer_type="show"
-                order_id={data && data.issue.id}
-                {...this.props}
-                {...this.state}
-              ></MergeFooter>
-            </div>
+            <MergeFooter
+              footer_type={true}
+              order_id={data && data.issue.id}
+              {...this.props}
+              {...this.state}
+            ></MergeFooter>
           </div>
         ) : (
           ""
diff --git a/src/forge/Merge/NewMerge.js b/src/forge/Merge/NewMerge.js
index 4105f9c23..2ef27efad 100644
--- a/src/forge/Merge/NewMerge.js
+++ b/src/forge/Merge/NewMerge.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Input, Select, Button, Spin, Alert } from "antd";
+import { Input, Select , Spin, Alert } from "antd";
 import axios from "axios";
 import "../Order/order.css";
 import "./merge.css";
@@ -24,21 +24,42 @@ class NewMerge extends Component {
       merge_head: false, // 是否向fork后的源项目发起合并请求
       default_message: "必须选择不同的分支",
       project_id: undefined, // 当前项目的id，也即开始发送合并请求的源项目id
-      merge_project_user: undefined
+      merge_project_user: undefined,
+      oldProject:undefined,//保存选择目标分支、跳转页面后会刷新的project
+      comparesData:undefined,//提交和文件的内容，保存compare接口返回的数据
     };
   }
 
   componentDidMount = () => {
     const { projectsId } = this.props.match.params;
-
     this.getmergelist(projectsId);
+    // 监听回退事件
+    if (window.history && window.history.pushState) {
+      window.addEventListener('popstate', this.handleBack, false);
+    }
   };
 
-  //获取新建分枝数据
+  componentDidUpdate=(preProps)=>{
+    const { project } = this.props;
+    let oldProject = preProps.project;
+    if(project && oldProject && (oldProject.id !== project.id)){
+      this.compareProject(this.state.id,"master","master");
+    }
+  }
+  // 页面销毁取消监听 
+  componentWillUnmount () {
+    window.removeEventListener('popstate', this.handleBack, false);
+  };
+
+  handleBack=()=>{
+    const { projectsId } = this.props.match.params;
+    this.getmergelist(projectsId);
+  }
+
+  //获取新建分支数据
   getmergelist = (projectsId) => {
     this.setState({isSpin: true})
     const { owner } = this.props.match.params;
-
     const url = `/${owner}/${projectsId}/pulls/new.json`;
     axios
       .get(url)
@@ -56,6 +77,7 @@ class NewMerge extends Component {
           this.set_default_pull(result.data.branches);
           this.set_default_merge(result.data.merge_projects);
         }
+        this.compareProject(result.data.id,"master","master");
         this.setState({isSpin: false})
       })
       .catch((error) => {
@@ -64,6 +86,32 @@ class NewMerge extends Component {
       });
   };
 
+  // 获取compare接口
+  compareProject=(baseid , localBranch , mergeBranch)=>{
+    const { project } = this.props;
+    const { owner , projectsId } = this.props.match.params;
+    let url = `/${owner}/${projectsId}/compare`;
+    if(project){
+      if(baseid === project.id){
+        this.setState({
+          oldProject:project
+        })
+        url += `/${localBranch}...${mergeBranch}.json`;
+      }else{
+        const { oldProject } = this.state;
+        const { author , identifier } =oldProject;
+        url += `/${mergeBranch}...${author && author.login}/${identifier}:${localBranch}.json`;
+      }
+      axios.get(url).then(result=>{
+        if(result){
+          this.setState({
+            comparesData:result.data
+          })
+        }
+      }).catch(error=>{})
+    }
+  }
+
   set_default_pull = (branches) => {
     if(branches && branches.length>0){
       let default_pull = branches.filter((e) => e.name === "master")
@@ -117,12 +165,16 @@ class NewMerge extends Component {
   selectBrach = (type, value) => {
     this.state[type] = value;
     this.ischeckmerge();
+    let { id ,merge , pull } = this.state;
+    if(type==="pull"){
+      this.compareProject(id,value,merge);
+    }else{
+      this.compareProject(id,pull,value);
+    }
   };
 
   selectProjectName = (value) => {
-    console.log("value",value)
-    const { project_id, projects_names,id } = this.state;
-    const { owner } = this.props.match.params;
+    const { projects_names,id } = this.state;
     let arr = projects_names && projects_names.filter(item=>item.id===value);
     let identifier = arr && arr[0].project_id;
     let login = arr && arr[0].project_user_login;
@@ -138,7 +190,6 @@ class NewMerge extends Component {
     })
     this.props.history.push(`/projects/${login}/${identifier}/pulls/new`);
     this.newMergelist(login,identifier);
-    
   };
 
   //判断2分支是否可以合并
@@ -146,7 +197,7 @@ class NewMerge extends Component {
   ischeckmerge = () => {
     this.setState({ isSpin: true });
     const { projectsId , owner } = this.props.match.params;
-    const { pull, merge, project_id, merge_head, id } = this.state;
+    const { pull, merge , merge_head, id } = this.state;
     const url = `/${owner}/${projectsId}/pulls/check_can_merge.json`;
     axios.post(url, {
       head: pull,
@@ -194,9 +245,9 @@ class NewMerge extends Component {
       show_message,
       default_message,
       merge_head,
-      projects_names,
+      projects_names,id,comparesData
     } = this.state;
-    const { projectsId } = this.props.match.params;
+    
     const renderBrances = (list, type) => {
       if (list && list.length > 0) {
         return list.map((item, key) => {
@@ -228,29 +279,26 @@ class NewMerge extends Component {
       return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
     };
     let { project } = this.props;
-    console.log("222 ",project);
-    console.log("222111 ",projects_names);
     return (
       <div>
         <div className="main">
           <Spin spinning={isSpin}>
             <div className="merge-header width100 inline-block">
-              <div className="width45 pull-left">
+              <div className="width40 pull-left">
                 <div className="color-grey-3 mb10 fwb">源分支:</div>
                 <Input.Group compact className="display-flex">
                   <Select
-                    defaultValue={project && project.id}
-                    class=" maxW50 hide-1 task-hide"
+                    value={id}
+                    className="hide-1 task-hide flex1"
                     disabled
-                    style={{maxWidth:"200px"}}
                   >
                     {renderProjectNames(projects_names)}
                   </Select>
                   <Select
-                    defaultValue={pull}
+                    value={pull}
                     onSelect={(e) => this.selectBrach("pull", e)}
                     showSearch
-                    className="minW50 merge-flex1"
+                    className="merge-flex1 flex1"
                   >
                     {renderBrances(branches, false)}
                   </Select>
@@ -261,24 +309,22 @@ class NewMerge extends Component {
                   className={"iconfont icon-youjiang color-grey-c font-32"}
                 ></i>
               </div>
-              <div className="width45 pull-left">
+              <div className="width40 pull-left">
                 <div>
                   <div className="color-grey-3 mb10 fwb">目标分支:</div>
                   <Input.Group compact className="display-flex">
                     <Select
-                      defaultValue={project && project.id}
-                      class=" maxW50 hide-1 task-hide"
+                      value={project && project.id}
+                      className="hide-1 task-hide flex1"
                       onSelect={(e) => this.selectProjectName(e)}
-                      style={{maxWidth:"200px"}}
                     >
                       {renderProjectNames(merge_projects)}
                     </Select>
                     <Select
-                      defaultValue={merge}
                       value={merge}
                       onSelect={(e) => this.selectBrach("merge", e)}
                       showSearch
-                      className="minW50 merge-flex1"
+                      className="merge-flex1 flex1"
                     >
                       {renderBrances(merge_branches, merge_head)}
                     </Select>
@@ -297,10 +343,20 @@ class NewMerge extends Component {
                 data={data}
                 merge={merge}
                 pull={pull}
+                files_count={comparesData && comparesData.diff && comparesData.diff.files_count}
+                commits_count={comparesData && comparesData.commits_count}
               ></MergeForm>
             )}
           </Spin>
         </div>
+        <MergeFooter
+          order_id={data && data.issue && data.issue.id}
+          {...this.props}
+          {...this.state}
+          merge={merge}
+          pull={pull}
+          comparesData={comparesData}
+        ></MergeFooter>
       </div>
     );
   }
diff --git a/src/forge/Merge/UpdateMerge.js b/src/forge/Merge/UpdateMerge.js
index c2c4b95c4..8ed8034af 100644
--- a/src/forge/Merge/UpdateMerge.js
+++ b/src/forge/Merge/UpdateMerge.js
@@ -37,11 +37,15 @@ class UpdateMerge extends Component {
             merge: result.data.base,
           });
         } else {
-          this.setState({ isSpin: false });
+          this.setState({
+            isSpin: false,
+          });
         }
       })
       .catch((error) => {
-        this.setState({ isSpin: false });
+        this.setState({
+          isSpin: false,
+        });
         console.log(error);
       });
   };
@@ -52,6 +56,7 @@ class UpdateMerge extends Component {
       <div>
         <div className="main">
           <Spin spinning={isSpin}>
+            {" "}
             {data ? (
               <div>
                 <div className="merge-header width100 inline-block">
@@ -66,17 +71,17 @@ class UpdateMerge extends Component {
                         defaultValue={data.is_original ? `${data.fork_project_user}:${pull}` : `${pull}`}
                         className="minW50 merge-flex1"
                         disabled
-                      ></Select>
-                    </Input.Group>
-                  </div>
+                      ></Select>{" "}
+                    </Input.Group>{" "}
+                  </div>{" "}
                   <div className="width10 pull-left text-center mt25">
                     <i
                       className={"iconfont icon-youjiang color-grey-c font-32"}
-                    ></i>
-                  </div>
+                    ></i>{" "}
+                  </div>{" "}
                   <div className="width45 pull-left">
                     <div>
-                      <div className="color-grey-3 mb10 fwb">目标分支:</div>
+                      <div className="color-grey-3 mb10 fwb"> 目标分支 : </div>{" "}
                       <Input.Group compact className="display-flex">
                         <Button className="merge-header-button  maxW50 hide-1 task-hide">
                           {`${data.project_author}/${data.project_name}`}
@@ -85,19 +90,18 @@ class UpdateMerge extends Component {
                           defaultValue={data.is_original ? `${data.project_login}:${merge}` : `${merge}`}
                           className="minW50 merge-flex1"
                           disabled
-                        ></Select>
-                      </Input.Group>
-                    </div>
-                  </div>
+                        ></Select>{" "}
+                      </Input.Group>{" "}
+                    </div>{" "}
+                  </div>{" "}
                 </div>
-
                 <MergeForm
                   {...this.props}
                   merge_type="edit"
                   data={data}
                   merge={merge}
                   pull={pull}
-                ></MergeForm>
+                ></MergeForm>{" "}
               </div>
             ) : (
               ""
diff --git a/src/forge/Merge/merge.css b/src/forge/Merge/merge.css
index d6a4770e5..5b4cfe988 100644
--- a/src/forge/Merge/merge.css
+++ b/src/forge/Merge/merge.css
@@ -40,4 +40,161 @@ form .ant-cascader-picker, form .ant-select {
 }
 .merge-header-button{
   background:rgba(241,248,255,1);
+}
+.width70{
+  width:70%;
+}
+.width30{
+  width:30%;
+}
+.width40{
+  width:40%;
+}
+.display-flex{
+  display: flex!important;
+}
+.w120{
+  width: 120px;
+}
+.w240{
+  width: 240px;
+}
+
+.custom-commit-tabs .ant-tabs-nav .ant-tabs-tab{
+  padding:14px 0px!important;
+}
+.custom-commit-tabs .ant-tabs-bar{
+  border-bottom: none;
+}
+.custom-commit-tabs .ant-tabs-nav .ant-tabs-tab-active .tabNum{
+  background-color: #EBF4FE;
+}
+.custom-commit-tabs .ant-tabs-ink-bar{
+  width: 34px!important;
+}
+.tabNum{
+  display: inline-block;
+  margin-left:8px ;
+  border-radius: 10px;
+  height: 18px;
+  line-height: 18px;
+  background-color: #eee;
+  padding:0px 9px;
+  font-size: 12px;
+}
+
+/* 复制-下载为，组合按钮 */
+.composeButton{
+  display: flex;
+  border:1px solid #5091FF;
+  border-radius: 5px;
+  height: 34px;
+  line-height: 34px;
+}
+.composeButton > span{
+  display: block;
+  padding:0px 18px;
+  color: #5091FF;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.composeButton > span:hover{
+  background-color: #F1F8FF;
+}
+.composeButton > span:first-child{
+  border-radius: 5px 0px 0px 5px;
+  border-right: 1px solid #5091FF;
+}
+.ant-btn{
+  border-radius: 5px;
+}
+
+/* 绿色按钮-type="green" */
+.ant-btn.ant-btn-green{
+  border:1px solid #28BD6C;
+  color: #28BD6C;
+}
+.copyTab{
+  min-width: 370px;
+  padding:0px 18px 22px 18px;
+  box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
+  background-color: #fff;
+}
+.copyTab .ant-tabs-tab{
+  padding:12px 0px!important;
+}
+
+/* pr--提交tab页面 */
+.prCommits{
+  border:1px solid #ddd;
+  border-top: none;
+}
+.prCommits:first-child{
+  border-top: 1px solid #ddd;
+}
+.prCommits .prCreate{
+  height: 50px;
+  line-height: 50px;
+  padding:0px 25px;
+  background-color:#fafafa;
+  color:#333;
+  font-size: 16px;
+  border-bottom: 1px solid #ddd;
+}
+.prCommits .prInfo{
+  padding:20px 25px;
+}
+/* pr-文件修改信息页面 */
+.files{
+  border:1px solid #ddd;
+  margin-top: 15px;
+  border-radius: 2px;
+}
+.filesInfo{
+  padding:10px 15px;
+  background-color: #fafafa;
+}
+.filesContent{
+  border-top: 1px solid #ddd;
+}
+.linesContent{
+  display: flex;
+  min-height: 30px;
+  line-height: 30px;
+  color: #333;
+  flex-wrap: wrap;
+}
+.linesContent > p{
+  flex:1;
+}
+.linesContent .lines{
+  display: flex;
+  border-right: 1px solid #ddd;
+  width: 100px;
+  padding: 0px 8px;
+  box-sizing: border-box;
+  margin-right: 8px;
+}
+.linesContent .lines > span:first-child{
+  margin-right: 0px;
+}
+.linesContent .lines > span{
+  width: 50%;
+  text-align: right;
+  display: block;
+  color: #888;
+}
+.linesContent.translate{
+  background-color:#F1F8FF;
+}
+.linesContent.translate .lines > span{
+  border-right: 1px solid transparent;
+}
+.linesContent.reduce{
+  background-color:rgba(247, 48, 48, 0.15);;
+}
+.linesContent.add{
+  background: rgba(48, 232, 132, 0.15);
 }
\ No newline at end of file
diff --git a/src/forge/Merge/merge.js b/src/forge/Merge/merge.js
index 0eeb07f6f..12db593ad 100644
--- a/src/forge/Merge/merge.js
+++ b/src/forge/Merge/merge.js
@@ -423,7 +423,7 @@ class merge extends Component {
             </Spin>
           </div>
         ) : (
-          <NoneData _html="暂时还没有相关数据哦!" projectsId={projectsId} owner={owner} />
+          <NoneData _html="暂时还没有相关数据!" projectsId={projectsId} owner={owner} />
         )}
       </div>
     );
diff --git a/src/forge/Merge/merge_footer.js b/src/forge/Merge/merge_footer.js
index 636279775..440434145 100644
--- a/src/forge/Merge/merge_footer.js
+++ b/src/forge/Merge/merge_footer.js
@@ -1,45 +1,169 @@
 import React, { Component } from "react";
-import { Tabs, Empty } from "antd";
+import { Tabs, Spin } from "antd";
 import "../Order/order.css";
 import "./merge.css";
-import CodesCommit from "../Main/CoderRootCommit";
+import Commits from "./Commits";
 import Comments from "../comments/comments";
-
+import Files from "./Files";
+import axios from 'axios';
 const { TabPane } = Tabs;
 
 class MergeFooter extends Component {
-  constructor(props) {
+  constructor(props){
     super(props);
-    this.state = {};
+    this.state={
+      pageData:undefined,
+      commitsData:undefined,
+      filesData:undefined,
+      isSpin:false,
+      activeKey:"1",
+      commitCount:0,
+      filesCount:0
+    }
+  }
+  componentDidMount=()=>{
+    const { footer_type ,data } = this.props;
+    if(footer_type){
+      const { projectsId , owner , mergeId } = this.props.match.params;
+      this.getCommit(owner,projectsId,mergeId);
+      this.getFile(owner,projectsId,mergeId);
+    }
+    this.setState({
+      activeKey:footer_type ? "1" : "2",
+      commitCount:data && data.commits_count,
+      filesCount:data && data.files_count
+    })
+  }
+  componentDidUpdate=(prevProps)=>{
+    const { comparesData } = this.props;
+    const { footer_type } = this.props;
+    if(footer_type){
+      const { data } = this.props;
+      if(data !== prevProps.data){
+        this.setState({
+          commitCount:data && data.commits_count,
+          filesCount:data && data.files_count
+        })
+      }
+    }
+    if(comparesData !== prevProps.comparesData){
+      this.setState({
+        activeKey:footer_type ? "1" : "2"
+      })
+      this.changeTab(footer_type ? "1" : "2");
+    }
+  }
+
+  changeTab=(index)=>{
+    this.setState({
+      isSpin:true
+    })
+    this.setState({
+      activeKey:index
+    })
+    const { footer_type , comparesData } = this.props;
+    const { projectsId , owner , mergeId } = this.props.match.params;
+
+    if(footer_type){
+      if(index === "2"){
+        this.getCommit(owner,projectsId,mergeId);
+      }else if(index === "3"){
+        this.getFile(owner,projectsId,mergeId);
+      }else{
+        this.setState({
+          isSpin:false
+        })
+      }
+    }else{
+      this.setState({
+        commitsData:comparesData.commits,
+        filesData:comparesData.diff,
+        commitCount:comparesData.commits_count,
+        filesCount:comparesData.diff && comparesData.diff.files_count,
+        isSpin:false
+      })
+    }
+  }
+
+  getCommit =(owner,projectsId,mergeId)=>{
+    const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
+    axios.get(url).then(result=>{
+      if(result){
+        this.setState({
+          commitsData:result.data.commits,
+          isSpin:false,
+          commitCount:result.data.commits_count
+        })
+      }
+    }).catch(error=>{})
+  }
+  
+  getFile =(owner,projectsId,mergeId)=>{
+    const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
+    axios.get(url).then(result=>{
+      if(result){
+        this.setState({
+          filesData:result.data,
+          isSpin:false,
+          filesCount:result.data.files_count,
+        })
+      }
+    }).catch(error=>{})
   }
 
   render() {
-    const { footer_type, order_id } = this.props;
+    const { projectsId , owner } = this.props.match.params;
+
+    const { footer_type, order_id, data , comparesData } = this.props;
+    let { isSpin , activeKey , filesCount, commitCount , filesData , commitsData } = this.state;
+
     return (
-      <div>
-        <Tabs
-          defaultActiveKey={footer_type === "show" ? "1" : "2"}
-          className="custom-commit-tabs"
-        >
-          {
-            footer_type === "show" && 
-            <TabPane tab={<span className="ml-3 font-16">评论</span>} key="1">
-            <Comments
-              order_id={order_id}
-              showNotification={this.props.showNotification}
-              only_show_content={true}
-              {...this.props}
-            />
-          </TabPane>
-          }
-          
-          {/* <TabPane tab={<span className="ml-3 font-16">提交</span>} key="2">
-            <CodesCommit {...this.props} main_class="pd10"></CodesCommit>
-          </TabPane> */}
-          {/* <TabPane tab={<span className="ml-3 font-16">文件</span>} key="3">
-            <Empty />
-          </TabPane> */}
-        </Tabs>
+      !footer_type && !comparesData || (comparesData && ((comparesData.commits && comparesData.commits.length===0)||(comparesData && !comparesData.diff)) )?"":
+      <div className="main" style={{paddingTop:"0px"}}>
+        <Spin spinning={isSpin}>
+          <Tabs
+            activeKey={activeKey}
+            className="custom-commit-tabs"
+            animated={false}
+            onChange={this.changeTab}
+          >
+            {
+              footer_type &&
+              <TabPane
+                tab={
+                  <span><span className="font-16">评论</span>
+                    {data && parseInt(data.comments_count) > 0 && <span className="tabNum">{data.comments_count}</span>}
+                  </span>
+                } key="1">
+                <Comments
+                  order_id={order_id}
+                  showNotification={this.props.showNotification}
+                  only_show_content={true}
+                  {...this.props}
+                />
+              </TabPane>
+            }
+            {
+              commitsData && commitsData.length > 0 &&
+              <TabPane tab={<span><span className="font-16">提交</span>
+                {commitCount > 0 && <span className="tabNum">{commitCount}</span>}
+              </span>} key="2">
+                <Commits {...this.props} commits={commitsData} projectsId={projectsId} owner={owner}></Commits>
+              </TabPane>
+            }
+            {
+              filesData && filesData.files && filesData.files.length>0 &&
+              <TabPane tab={
+                  <span><span className="font-16">文件</span>
+                    {filesCount > 0 && <span className="tabNum">{filesCount}</span>}
+                  </span>
+                } key="3">
+                <Files {...this.props} data={filesData} projectsId={projectsId} owner={owner}/>
+              </TabPane>
+            }
+            
+          </Tabs>
+        </Spin>
       </div>
     );
   }
diff --git a/src/forge/Merge/merge_form.js b/src/forge/Merge/merge_form.js
index 5c1b17c66..d8169c5a5 100644
--- a/src/forge/Merge/merge_form.js
+++ b/src/forge/Merge/merge_form.js
@@ -138,7 +138,7 @@ class MergeForm extends Component {
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         const { projectsId, mergeId , owner } = this.props.match.params;
-        const { merge, pull, merge_type, data } = this.props;
+        const { merge, pull, merge_type, data , commits_count , files_count } = this.props;
         if (values.issue_tag_ids && values.issue_tag_ids.length > 0) {
           values.issue_tag_ids = [parseInt(values.issue_tag_ids)];
         } else {
@@ -154,7 +154,9 @@ class MergeForm extends Component {
             base: merge,
             is_original: data && data.is_original,
             fork_project_id: data && data.fork_project_id,
-            merge_user_login: data && data.merge_user_login
+            merge_user_login: data && data.merge_user_login,
+            files_count,
+            commits_count
           })
           .then((result) => {
             if (result) {
@@ -221,7 +223,7 @@ class MergeForm extends Component {
   };
 
   render() {
-    const { merge_type, data } = this.props;
+    const { merge_type } = this.props;
     const { getFieldDecorator } = this.props.form;
     const { projectsId, mergeId ,owner } = this.props.match.params;
     const {
diff --git a/src/forge/Newfile/Index.js b/src/forge/Newfile/Index.js
index 3df1614f8..56eae752d 100644
--- a/src/forge/Newfile/Index.js
+++ b/src/forge/Newfile/Index.js
@@ -51,9 +51,7 @@ class Index extends Component {
               <div className="grid-item">
                 <div className="setInputAddon">
                   <Input
-                    addonBefore={`/${
-                      projectDetail && projectDetail.identifier
-                    }${urlroot}/`}
+                    addonBefore={`/${ projectDetail && projectDetail.identifier }${urlroot}/`}
                     value={filename}
                     onChange={this.changeFileName}
                     placeholder="命名文件..."
diff --git a/src/forge/Newfile/UserSubmitComponent.js b/src/forge/Newfile/UserSubmitComponent.js
index 42e636c19..e24d167b3 100644
--- a/src/forge/Newfile/UserSubmitComponent.js
+++ b/src/forge/Newfile/UserSubmitComponent.js
@@ -54,9 +54,7 @@ class UserSubmitComponent extends Component {
               const { getTopCount } = this.props;
               getTopCount && getTopCount(values.branchname);
             }
-            let url = values.branchname
-              ? `/projects/${owner}/${projectsId}?branch=${values.branchname}`
-              : `/projects/${owner}/${projectsId}`;
+            let url = `/projects/${owner}/${projectsId}${values.branchname ? `/branch/${values.branchname}`: (branch ? `/branch/${branch}` : "")}`;
             this.props.history.push(url);
           }
         })
@@ -73,7 +71,7 @@ class UserSubmitComponent extends Component {
   // 确认修改文件
   UpdateFile = () => {
     this.setState({ isSpin: true });
-    const { branch, detail, content, filepath } = this.props;
+    const { branch, detail, content , currentBranch } = this.props;
     const { projectsId , owner } = this.props.match.params;
     const { submitType } = this.state;
     const url = `/${owner}/${projectsId}/update_file.json`;
@@ -82,7 +80,7 @@ class UserSubmitComponent extends Component {
         axios
           .put(url, {
             filepath: detail.path,
-            branch: branch,
+            branch: submitType === "1" ? undefined : (currentBranch || branch),
             new_branch: submitType === "1" ? values.branchname : undefined,
             content: content,
             sha: detail.sha,
@@ -91,12 +89,10 @@ class UserSubmitComponent extends Component {
           .then((result) => {
             this.setState({ isSpin: false });
             if (result.data && result.data.status === 1) {
-              let url = values.branchname
-                ? `/projects/${owner}/${projectsId}?branch=${values.branchname}`
-                : `/projects/${owner}/${projectsId}`;
-
+              debugger;
+              let url = `/projects/${owner}/${projectsId}${(values.branchname ? `/branch/${values.branchname}` : ((currentBranch || branch) ? `/branch/${currentBranch || branch}`:""))}`;
               this.props.history.push(url);
-              this.props.showNotification("修改成功!");
+              this.props.showNotification("文件修改成功!");
             }
           })
           .catch((error) => {
diff --git a/src/forge/Order/Detail.js b/src/forge/Order/Detail.js
index c22013a33..87d774a5d 100644
--- a/src/forge/Order/Detail.js
+++ b/src/forge/Order/Detail.js
@@ -309,8 +309,10 @@ class Detail extends Component {
           <div className="list-left list-left-padding">
             <div className="list-right-item-padding background-f boder-4">
               <p className="grid-item-left pb15">
-                <span className="issue_detail_info">分支:</span>
-                <span>{data && data.branch_name ? data.branch_name : "--"}</span>
+                <span className="issue_detail_info">负责人:</span>
+                <span>
+                  {data && data.assign_user_name ? data.assign_user_name : "--"}
+                </span>
               </p>
               <p className="grid-item-left pb15">
                 <span className="issue_detail_info">标签:</span>
@@ -344,12 +346,6 @@ class Detail extends Component {
                 <span className="issue_detail_info">分类:</span>
                 <span>{data && data.tracker ? data.tracker : "--"}</span>
               </p>
-              <p className="grid-item-left pb15">
-                <span className="issue_detail_info">负责人:</span>
-                <span>
-                  {data && data.assign_user_name ? data.assign_user_name : "--"}
-                </span>
-              </p>
               <p className="grid-item-left pb15">
                 <span className="issue_detail_info">开始日期:</span>
                 <span>{data && data.start_date ? data.start_date : "--"}</span>
@@ -363,6 +359,10 @@ class Detail extends Component {
                 <span className="issue_detail_info">完成度:</span>
                 <span>{data && data.done_ratio ? data.done_ratio : "--"}</span>
               </p>
+              <p className="grid-item-left pb15">
+                <span className="issue_detail_info">分支:</span>
+                <span>{data && data.branch_name ? data.branch_name : "--"}</span>
+              </p>
             </div>
           </div>
         </div>
diff --git a/src/forge/Order/Milepost.js b/src/forge/Order/Milepost.js
index 413b4edf6..e4a8d4969 100644
--- a/src/forge/Order/Milepost.js
+++ b/src/forge/Order/Milepost.js
@@ -251,7 +251,7 @@ class Milepost extends Component {
                   })
                 }
               </div>
-              : <NoneData _html="暂时还没有相关数据哦!" />
+              : <NoneData _html="暂时还没有相关数据!" />
           }
           {
             data && data.versions_count > limit ?
diff --git a/src/forge/Order/MilepostDetail.js b/src/forge/Order/MilepostDetail.js
index 62b8fd7b6..ce05b6079 100644
--- a/src/forge/Order/MilepostDetail.js
+++ b/src/forge/Order/MilepostDetail.js
@@ -271,7 +271,7 @@ class MilepostDetail extends Component {
             <div className="setItemStyle">
             {
               search_count === 0 ?
-                <NoneData _html="暂时还没有相关数据哦!" />
+                <NoneData _html="暂时还没有相关数据!" />
                 :
                 issues && issues.length>0 && issues.map((item,key)=>{
                   return(
diff --git a/src/forge/Order/OrderItem.js b/src/forge/Order/OrderItem.js
index f0f04be26..150b95d2a 100644
--- a/src/forge/Order/OrderItem.js
+++ b/src/forge/Order/OrderItem.js
@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Popconfirm, Tag } from 'antd'
+import { Popconfirm } from 'antd'
 import { TagInfo } from '../Utils/TagColor';
-
-
 class OrderItem extends Component {
   constructor(props) {
     super(props);
@@ -54,7 +52,7 @@ class OrderItem extends Component {
         {current_user && current_user.login && checkbox}
         <div className="flex-1">
           <p className="mb10 df" style={{alignItems:"center"}}>
-            <Link to={`/projects/${owner}/${projectsId}/issues/${item.id}/detail`} target="_blank" title={item.name} className="hide-1 font-16 color-grey-3 lineh-30 mr10" style={{maxWidth:"300px"}}>{item.name}</Link>
+            <Link to={`/projects/${owner}/${projectsId}/issues/${item.id}/detail`} target="_blank" title={item.name} className="hide-1 font-16 color-grey-3 lineh-30 mr10" style={{maxWidth:"370px"}}>{item.name}</Link>
             {TagInfo(item.priority,"mr10")}
           </p>
           <p className="color-grey-6 font-12">
diff --git a/src/forge/Order/Tags.js b/src/forge/Order/Tags.js
index 0a4c10d34..174891aa6 100644
--- a/src/forge/Order/Tags.js
+++ b/src/forge/Order/Tags.js
@@ -362,7 +362,7 @@ class Tags extends Component {
               </div>
             </div>
             :
-            <NoneData _html="暂时还没有相关数据哦!" />
+            <NoneData _html="暂时还没有相关数据!" />
           }
           {
             data && data.issue_tags_count > limit ?
diff --git a/src/forge/Order/order.js b/src/forge/Order/order.js
index 0e725d2cc..412d74900 100644
--- a/src/forge/Order/order.js
+++ b/src/forge/Order/order.js
@@ -239,6 +239,8 @@ class order extends Component {
     this.setState({
       search: value,
       isSpin: true,
+      checkedValue:[],
+      all:undefined
     });
     const { status_type } = this.state;
 
@@ -258,7 +260,10 @@ class order extends Component {
       assigned_to_ids: "负责人",
       status_ids: "状态",
       done_ratios: "完成度",
+      fixed_version_ids:"里程碑",
       paix: "排序",
+      checkedValue:[],
+      all:undefined
     });
     this.state.select_params = {
       search: undefined,
@@ -324,19 +329,19 @@ class order extends Component {
         id: id,
       },
     })
-      .then((result) => {
-        if (result) {
-          const { status_type } = this.state;
+    .then((result) => {
+      if (result) {
+        const { status_type } = this.state;
 
-          this.getIssueList(status_type);
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+        this.getIssueList(status_type);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
   };
 
-  islogin() {
+  islogin=()=>{
     this.props.showLoginDialog();
   }
   renderNew =()=>{
@@ -349,9 +354,7 @@ class order extends Component {
       )
     }else{
       return(
-        <a className="topWrapper_btn ml10" onClick={this.islogin}>
-          +&nbsp;创建任务
-        </a>
+        <a className="topWrapper_btn ml10" onClick={this.islogin}>+&nbsp;创建任务</a>
       )
     }
   }
@@ -802,7 +805,7 @@ class order extends Component {
 
           </div>
           {search_count === 0 ? (
-            <NoneData _html="暂时还没有相关数据哦!" />
+            <NoneData _html="暂时还没有相关数据!" />
           ) : (
               <div style={{ minHeight: "500px" }}>
                 <Checkbox.Group name="issues" onChange={this.checkIssues} value={checkedValue} style={{ width: "100%" }}>
diff --git a/src/forge/Order/order_form.js b/src/forge/Order/order_form.js
index 2265642d1..66f5803a0 100644
--- a/src/forge/Order/order_form.js
+++ b/src/forge/Order/order_form.js
@@ -34,6 +34,8 @@ class order_form extends Component {
       subject: "",
       get_attachments: undefined,
       show_token: false,
+      cannot_edit: false,
+      issue_current_user: true
     };
   }
   componentDidUpdate=(prevPros)=>{
@@ -263,6 +265,7 @@ class order_form extends Component {
       });
       this.setState({
         done_ratio: "0",
+        issue_current_user: true,
       });
     } else if (e === "3") {
       this.props.form.setFieldsValue({
@@ -270,6 +273,11 @@ class order_form extends Component {
       });
       this.setState({
         done_ratio: "100",
+        issue_current_user: true,
+      });
+    }else if (e === "5") {
+      this.setState({
+        issue_current_user: false,
       });
     }
   };
@@ -371,19 +379,13 @@ class order_form extends Component {
             </div>
             <div className="list-left list-left-padding issue-edit-form-right">
               <div className="pd20 background-f issue-form-right">
-                <Form.Item>
-                  {getFieldDecorator("branch_name", {
-                    rules: []
-                  })(
+                <Form.Item label="指派成员">
+                  {getFieldDecorator("assigned_to_id", {rules: []})(
                     <Select>
-                      <Option value={""}>分支未指定</Option>
-                      {branches && branches.length > 0 && branches.map((item, key) => {
-                        return (
-                          <Option value={item} key={key}>
-                            {item}
-                          </Option>
-                        );
-                      })}
+                      <Option value={""}>未指派成员</Option>
+                      {this.renderSelect(
+                        issue_chosen && issue_chosen.assign_user
+                      )}
                     </Select>
                   )}
                 </Form.Item>
@@ -452,16 +454,6 @@ class order_form extends Component {
                   )}
                 </Form.Item>
 
-                <Form.Item label="指派成员">
-                  {getFieldDecorator("assigned_to_id", {rules: []})(
-                    <Select>
-                      <Option value={""}>未指派成员</Option>
-                      {this.renderSelect(
-                        issue_chosen && issue_chosen.assign_user
-                      )}
-                    </Select>
-                  )}
-                </Form.Item>
                 <Form.Item label="开始日期">
                   <DatePicker
                     value={start_date ? moment(start_date, "YYYY-MM-DD") : null}
@@ -485,28 +477,22 @@ class order_form extends Component {
                     </Select>
                   )}
                 </Form.Item>
-                {/* <Form.Item label="是否上链">
-                  <Switch
-                    checkedChildren="是"
-                    unCheckedChildren="否"
-                    defaultChecked={false}
-                    checked={issue_type && issue_type === "2"}
-                    onChange={this.change_issue_type}
-                  />
+                <Form.Item label="指定分支">
+                  {getFieldDecorator("branch_name", {
+                    rules: []
+                  })(
+                    <Select>
+                      <Option value={""}>分支未指定</Option>
+                      {branches && branches.length > 0 && branches.map((item, key) => {
+                        return (
+                          <Option value={item} key={key}>
+                            {item}
+                          </Option>
+                        );
+                      })}
+                    </Select>
+                  )}
                 </Form.Item>
-                {(show_token || (issue_type && issue_type === "2")) && (
-                  <Form.Item label="token">
-                    {getFieldDecorator("token", {
-                      rules: [
-                        {
-                          required: true,
-                          message: "请填写token值",
-                        },
-                      ],
-                      initialValue: token,
-                    })(<Input placeholder="请填写token值" />)}
-                  </Form.Item>
-                )} */}
               </div>
             </div>
           </Form>
diff --git a/src/forge/Settings/Branch.js b/src/forge/Settings/Branch.js
index 1de276f39..2a391bc6c 100644
--- a/src/forge/Settings/Branch.js
+++ b/src/forge/Settings/Branch.js
@@ -1,9 +1,9 @@
-import React , { useState } from 'react';
+import React , { useEffect, useState } from 'react';
 import SelectBranch from '../Branch/Select';
 import Title from '../Component/Title';
 import styled from 'styled-components';
 import { Blueline , FlexAJ , NumUl , GreenUnder , AlignCenter , WhiteBack } from '../Component/layout';
-
+import axios from 'axios';
 const Div = styled.div`{
   padding:20px 30px;
   min-height:500px;
@@ -14,8 +14,30 @@ export default ((props)=>{
   const { projectsId , owner } = props.match.params;
   const projectDetail = props.projectDetail;
 
-  function resetSetting(){
+  const { defaultBranch } = props;
+  useEffect(()=>{
+    if(defaultBranch){
+      setBranch(defaultBranch);
+    }
+  },[defaultBranch]);
 
+
+  function resetSetting(){
+    const url = `/${owner}/${projectsId}.json`;
+    axios.put(url, {
+      default_branch:branch
+    })
+    .then((result) => {
+      if (result) {
+        props.showNotification(`分支设置成功！`);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+  function settingRule(){
+    props.history.push(`/projects/${owner}/${projectsId}/setting/branch/new`);
   }
   return(
     <WhiteBack>
@@ -31,17 +53,18 @@ export default ((props)=>{
             projectsId={projectsId} 
             changeBranch={setBranch}
             owner={owner}
+            history={props.history}
             />
-            <a className="color-blue ml20" onClick={resetSetting()}>设为默认分支</a>
+            <a className="color-blue ml20" onClick={()=>resetSetting()}>设为默认分支</a>
           </AlignCenter>
         </div>
         <div>
           <FlexAJ className="pt20">
             <span className="color-grey-3">保护分支规则</span>
-            <Blueline>+&nbsp;新建规则</Blueline>
+            <Blueline onClick={()=>settingRule()}>+&nbsp;新建规则</Blueline>
           </FlexAJ>
           <NumUl>
-            <li>限制分支的推送、合并。强制推送相关请去<GreenUnder>仓库设置</GreenUnder>。</li>
+            <li>限制分支的推送、合并。强制推送相关请去<GreenUnder onClick={()=>{props.history.push(`/projects/${owner}/${projectsId}/setting`)}}>仓库设置</GreenUnder>。</li>
             <li>一个分支同时只能有一个保护分支规则生效，越早创建的规则优先级越高。</li>
             <li>保护分支规则只影响状态是【保护分支】的分支。【常规分支】和【只读分支】都不影响。</li>
           </NumUl>
diff --git a/src/forge/Settings/BranchRule.jsx b/src/forge/Settings/BranchRule.jsx
index b6f01d8ed..9cdb951bc 100644
--- a/src/forge/Settings/BranchRule.jsx
+++ b/src/forge/Settings/BranchRule.jsx
@@ -1,20 +1,55 @@
-import React , { forwardRef , useCallback } from 'react';
-import { Form , Input , Select , Button } from 'antd';
-import Title from '../Component/Title';
-import { WhiteBack , Cancel } from '../Component/layout';
-import styled from 'styled-components';
+import React, { forwardRef, useCallback, useState, useEffect } from "react";
+import { Form, Input, Select, Button } from "antd";
+import Title from "../Component/Title";
+import { WhiteBack, Cancel } from "../Component/layout";
+import styled from "styled-components";
+import axios from "axios";
 
-const {Option} = Select;
-const Div = styled.div`{
-  padding:20px 30px;
-}`
+const { Option } = Select;
+const Div = styled.div`
+{
+  padding: 20px 30px;
+}
+`;
 export default Form.create()(
-  forwardRef(( { form })=>{
-    const { getFieldDecorator } = form;
+  forwardRef(({ form, match, history }) => {
+    const [ list, setList ] = useState(undefined);
+    const { projectsId, owner } = match.params;
+    const { getFieldDecorator, validateFields } = form;
+
+    useEffect(() => {
+      const url = `/${owner}/${projectsId}/collaborators.json`;
+      axios.get(url).then((result) => {
+        setList(result.data.members);
+      })
+      .catch((error) => {});
+    }, []);
+
+    function getMember(list) {
+      return (
+        list &&
+        list.length > 0 &&
+        list.map((item, key) => {
+          return (
+            item.role !== "Manager" && (
+              <Option value={item.id}>{item.name}</Option>
+            )
+          );
+        })
+      );
+    }
+
+    function saveBranchRule() {
+      validateFields((error, values) => {
+        if (!error) {
+        }
+      });
+    }
+
     const helper = useCallback(
-      (label, name, rules, widget , className , isRequired ) => (
+      (label, name, rules, widget, className, isRequired) => (
         <div className={className}>
-          <span className={isRequired?"required":""}>{label}</span>
+          <span className={isRequired ? "required" : ""}>{label}</span>
           <Form.Item>
             {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
           </Form.Item>
@@ -22,7 +57,7 @@ export default Form.create()(
       ),
       []
     );
-    return(
+    return (
       <WhiteBack>
         <Title>新建保护分支规则</Title>
         <Div>
@@ -30,31 +65,48 @@ export default Form.create()(
             "设置分支/通配符",
             "sign",
             [{ required: true, message: "请输入分支/通配符" }],
-            <Input placeholder="请输入分支名称或通配符规则" />,'setStyleRule'
+            <Input placeholder="请输入分支名称或通配符规则" />,
+            "setStyleRule"
           )}
-          <p className="color-grey-8 mb20">例如：设置为“master”，则对名称为“master”的分支生效；设置为“*-stable“ 或 ”release*“，则对名称符合此通配符的所有保护分支生效。</p>
+          <p className="color-grey-8 mb20">
+            例如：设置为“master”，则对名称为“master”的分支生效；设置为“*-stable“
+            或 ”release*“，则对名称符合此通配符的所有保护分支生效。
+          </p>
           {helper(
             "可推送代码成员",
             "psuhmember",
-            [],
-            <Select placeholder="请选择仓库成员" >
+            [{ required: true, message: "请选择可推送代码成员" }],
+            <Select placeholder="请选择仓库成员">
               <Option value="0">请选择仓库成员</Option>
-            </Select>,'setSelectWidth'
+              {getMember(list)}
+            </Select>,
+            "setSelectWidth"
           )}
           {helper(
             "可合并Pull Request成员",
             "pullmember",
-            [],
-            <Select placeholder="请选择仓库成员" >
+            [{ required: true, message: "请选择可合并Pull Request成员" }],
+            <Select placeholder="请选择仓库成员">
               <Option value="0">请选择仓库成员</Option>
-            </Select>,'setSelectWidth'
+              {getMember(list)}
+            </Select>,
+            "setSelectWidth"
           )}
           <div className="df pb30">
-            <Button type="primary">保存</Button>
-            <Cancel className="ml30">取消</Cancel>
+            <Button type="primary" onClick={saveBranchRule}>
+              保存
+            </Button>
+            <Cancel
+              className="ml30"
+              onClick={() => {
+                history.push(`/projects/${owner}/${projectsId}/setting/branch`);
+              }}
+            >
+              取消
+            </Cancel>
           </div>
         </Div>
       </WhiteBack>
-    )
+    );
   })
-)
\ No newline at end of file
+);
diff --git a/src/forge/Settings/Collaborator.js b/src/forge/Settings/Collaborator.js
index 049e3dae5..d1e6d7d11 100644
--- a/src/forge/Settings/Collaborator.js
+++ b/src/forge/Settings/Collaborator.js
@@ -360,6 +360,11 @@ class Collaborator extends Component {
         dataIndex: "email",
         render: (text) => <span>{text}</span>,
       },
+      {
+        title: "Token值",
+        dataIndex: "token",
+        render: (text) => <span>{text}</span>,
+      },
       {
         title: roleTitle,
         dataIndex: "role_name",
@@ -493,7 +498,7 @@ class Collaborator extends Component {
                 rowKey={(record) => record.id}
               ></Table>
             ) : (
-              <NoneData _html="暂时还没有相关数据哦!" />
+              <NoneData _html="暂时还没有相关数据!" />
             )}
           </div>
         </Spin>
diff --git a/src/forge/Settings/Index.js b/src/forge/Settings/Index.js
index 542f12c71..db80c8b3c 100644
--- a/src/forge/Settings/Index.js
+++ b/src/forge/Settings/Index.js
@@ -71,7 +71,7 @@ class Index extends Component {
               }
             >
               <p>
-                <Link to={`/projects/${projectsId}/setting/branch`} className="w-100">
+                <Link to={`/projects/${owner}/${projectsId}/setting/branch`} className="w-100">
                 <i className="iconfont icon-fenzhi font-20 mr10"></i>
                   分支设置
                 </Link>
@@ -128,7 +128,7 @@ class Index extends Component {
               <Route
                 path="/projects/:owner/:projectsId/setting/branch"
                 render={(props) => (
-                  <Branch {...this.props} {...props} {...this.state} />
+                  <Branch {...this.props} {...props } {...this.state} />
                 )}
               ></Route>
               <Route
diff --git a/src/forge/Settings/Setting.js b/src/forge/Settings/Setting.js
index a614f8874..4aeeb4b2c 100644
--- a/src/forge/Settings/Setting.js
+++ b/src/forge/Settings/Setting.js
@@ -19,7 +19,6 @@ class Setting extends Component {
   }
 
   componentDidUpdate=(prevPros)=>{
-    console.log("dddd",this.props.checkIfLogin());
     if(prevPros && this.props && !this.props.checkIfLogin()){
       this.props.history.push("/403")
       return
@@ -145,7 +144,6 @@ class Setting extends Component {
     });
   };
   changePrivate = (e) => {
-    console.log(e);
     this.setState({
       private_check: e.target.checked,
     });
diff --git a/src/forge/Settings/new_tags.js b/src/forge/Settings/new_tags.js
index cddb759d4..6800b1fed 100644
--- a/src/forge/Settings/new_tags.js
+++ b/src/forge/Settings/new_tags.js
@@ -410,7 +410,7 @@ class NewTags extends Component {
           </div>
         );
       } else {
-        return <NoneData _html="暂时还没有相关数据哦!" />;
+        return <NoneData _html="暂时还没有相关数据!" />;
       }
     };
 
diff --git a/src/forge/UsersList/common_users.js b/src/forge/UsersList/common_users.js
index 0ccdf15c3..407411b70 100644
--- a/src/forge/UsersList/common_users.js
+++ b/src/forge/UsersList/common_users.js
@@ -91,7 +91,7 @@ class CommonUsers extends Component {
             <Spin spinning={isSpin}>
               <div className="w-100 inline-block">
                 {count === 0 ? (
-                  <NoneData _html="暂时还没有相关数据哦!" />
+                  <NoneData _html="暂时还没有相关数据!" />
                 ) : (
                   <UserList users={users} userClass={'w-25'} {...this.props}></UserList>
                 )}
diff --git a/src/forge/UsersList/fork_users.js b/src/forge/UsersList/fork_users.js
index 3fe4b3c74..49d9f1553 100644
--- a/src/forge/UsersList/fork_users.js
+++ b/src/forge/UsersList/fork_users.js
@@ -125,7 +125,7 @@ class ForkUsers extends Component {
             <Spin spinning={isSpin}>
               <div className="w-100 inline-block">
                 {count === 0 ? (
-                  <NoneData _html="暂时还没有相关数据哦!" />
+                  <NoneData _html="暂时还没有相关数据!" />
                 ) : (
                   this.renderList(users)
                 )}
diff --git a/src/forge/Utils/Time.js b/src/forge/Utils/Time.js
index 55d73441b..4de4b3713 100644
--- a/src/forge/Utils/Time.js
+++ b/src/forge/Utils/Time.js
@@ -26,7 +26,7 @@ export function getDateTime(value, dataformat) {
   return date.format(dataformat);
 }
 
-export default function Time(UTCtiem) {
+export function Time(UTCtiem) {
   var dateTime = new Date(UTCtiem);
 
   var year = dateTime.getFullYear();
diff --git a/src/forge/Version/UpdateVersion.js b/src/forge/Version/UpdateVersion.js
new file mode 100644
index 000000000..d9eebeddd
--- /dev/null
+++ b/src/forge/Version/UpdateVersion.js
@@ -0,0 +1,191 @@
+import React , { Component } from "react";
+import { Form , Input , Select,Divider,Button,Checkbox,Dropdown,Menu} from 'antd';
+import {Link} from 'react-router-dom';
+
+import UploadComponent from '../Upload/Index';
+import '../Order/order.css';
+import './version.css';
+
+import axios from 'axios';
+
+const Option = Select.Option;
+const TextArea = Input.TextArea;
+class NewVersion extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      branch_name:"",
+      issue_tag_ids:"",
+      fixed_version_id:"",
+      issue_chosen:undefined,
+      fileList:undefined,
+      ischeck:undefined,
+      pull:undefined,
+      tag_name:'',
+      data:undefined
+    }
+  }
+
+  componentDidMount=()=>{
+    this.getSelectList();
+  }
+
+  getSelectList=()=>{
+    const { projectsId,versionId} = this.props.match.params;
+    const url = `/projects/${projectsId}/version_releases/${versionId}/edit.json`;
+    axios.get(url).then((result)=>{
+      if(result){
+        this.setState({
+            data:result.data,
+          pull:result.data.target_commitish
+        })
+      }
+    }).catch((error)=>{
+      console.log(error);
+    })
+  }
+
+
+  //delete
+  deleteversion=()=>{
+    const { projectsId , versionId} = this.props.match.params;
+    const url = `/projects/${projectsId}/version_releases/${versionId}.json`;
+      axios.delete(url,{ data: {
+        project_id: projectsId,
+        id:versionId
+      }
+    }).then((result)=>{
+        if(result){
+          this.props.history.push(`/projects/${projectsId}/version`);
+
+        }
+      }).catch((error)=>{
+        console.log(error);
+      })
+  }
+
+  // 创建
+  handleSubmit=()=>{
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if(!err){
+        const { projectsId,versionId} = this.props.match.params;
+        const { pull,ischeck } = this.state;
+        const url = `/projects/${projectsId}/version_releases/${versionId}.json`;
+        // if(values.issue_type==="普通"){
+        //   values.issue_type="1"
+        // }
+        axios.put(url,{
+          ...values,
+          tag_name:this.state.data&&this.state.data.tag_name,
+          draft:false,
+          prerelease:ischeck,
+          target_commitish:pull
+        }).then(result=>{
+          if(result){
+            this.props.history.push(`/projects/${projectsId}/version`);
+          }
+        }).catch(error=>{
+          console.log(error);
+        })
+
+      }
+    })
+  }
+
+  RedieonChange=(e)=>{
+     this.setState({
+      ischeck:e.target.checked
+     })
+  }
+  Preservation=()=>{
+    alert(this.state.data.tag_name)  
+  }
+
+  renderMenu =(array,id)=>{
+    return(
+      <Menu>
+        {
+          array && array.length > 0 && array.map((item,key)=>{
+            return(
+              <Menu.Item key={item} onClick={()=>this.getOption(item)}>{item}</Menu.Item>
+            )
+          })
+        }
+      </Menu>
+    )
+  }
+
+  getOption=(name)=>{
+      this.setState({
+        pull:name
+      })
+    
+  }
+
+  changmodelname=(e)=>{
+    this.setState({
+      tag_name:e.target.value
+    })
+  }
+
+  render(){
+    const { getFieldDecorator } = this.props.form;
+    const { projectsId } = this.props.match.params;
+    return(
+        <div className="main">
+          <Form>
+          <h1 style={{marginLeft:15,marginTop:20}}>发布新版</h1>
+          <h5 style={{marginLeft:15}}>版本发布组织项目的版本。</h5>
+          <Divider/>
+          <div  style={{display:'flex',marginLeft:15}}>
+            {this.state.data&&this.state.data.tag_name}@{this.state.data&&this.state.data.target_commitish}
+          </div>
+           <div  style={{display:'flex'}}>
+             <div className="versionmilepostleft">
+              <h1>标题</h1> 
+               <div>
+               <Form.Item>
+                  {getFieldDecorator('name', {
+                    rules: [{
+                      required: true, message: '请输入标题'
+                    }],
+                    initialValue:this.state.data&&this.state.data.name
+                    
+                  })(
+                    <Input placeholder="标题"/>
+                  )}
+                </Form.Item>
+              </div>
+              <h1>内容</h1> 
+               <Form.Item>
+                  {getFieldDecorator('body', {
+                    rules: [{
+                      required: true, message: '请输入描述内容'
+                    }],
+                    initialValue:this.state.data&&this.state.data.body
+                  })(
+                    <TextArea placeholder="添加一个可选的扩展描述。。。"  style={{height:"300px"}}/>
+
+                  )}
+                </Form.Item>
+                {/* <UploadComponent load={this.UploadFunc} style={{width:80,marginLeft:15}}></UploadComponent> */}
+               </div>
+          </div>
+          
+        <Divider/>
+        <div className="fr">
+        <Checkbox  onChange={this.RedieonChange}>标记为预行版</Checkbox>
+        <p>标记此版本不适合生产使用</p>
+        </div>
+        <div className="clearfix mt15" style={{marginTop:5}} >
+        <a className='topWrapper_btn_delete fr' onClick={()=>this.deleteversion()} style={{marginLeft:15}}>删除发布</a>  
+        <a className='topWrapper_btn fr' onClick={()=>this.handleSubmit()} style={{marginRight:15}}>编辑发布信息</a>
+        <Link to={`/projects/${projectsId}/version`} style={{marginRight:30}} className='topWrapper_btn fr'>取消</Link>
+        </div>
+        </Form>
+    </div>
+    )
+  }
+}
+const WrappedNewVersionForm = Form.create({ name: 'NewVersionForm' })(NewVersion);
+export default WrappedNewVersionForm;
\ No newline at end of file
diff --git a/src/forge/Version/version.css b/src/forge/Version/version.css
index 18a32dab6..ddfbe7d64 100644
--- a/src/forge/Version/version.css
+++ b/src/forge/Version/version.css
@@ -177,7 +177,7 @@
 }
 .versionTips{
   width:30%;
-  padding-right: 15px;
+  padding-left: 15px;
   box-sizing: border-box;
 }
 .infosTip{
diff --git a/src/forge/Version/version.js b/src/forge/Version/version.js
index 7dd0190cb..d6b0bd6a9 100644
--- a/src/forge/Version/version.js
+++ b/src/forge/Version/version.js
@@ -97,7 +97,7 @@ class version extends Component {
       )
     } else {
       return (
-        <NoneData _html="暂时还没有相关数据哦!" />
+        <NoneData _html="暂时还没有相关数据!" />
       )
     }
   }
@@ -107,7 +107,7 @@ class version extends Component {
     const { data , releases } = this.state
 
     return (
-      <div className="main">
+      <div className="main" style={{paddingTop:"0px"}}>
         <div className="topWrapper">
           <span className="font-18 color-grey-3">版本发布</span>
           {
diff --git a/src/forge/comments/comments.js b/src/forge/comments/comments.js
index 8bff143cb..93e591c8c 100644
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@@ -523,7 +523,7 @@ class comments extends Component {
                         {new_comment(is_reply, undefined)}
                       </div>
                     ) : (
-                      <div className="children-comment-bg pd20 grid-item">
+                      <div className="children-comment-bg pd20 grid-item mb20">
                         <img
                           className="radius"
                           src={
diff --git a/src/forge/common/util.js b/src/forge/common/util.js
index 86a0a9112..4f8f0bf32 100644
--- a/src/forge/common/util.js
+++ b/src/forge/common/util.js
@@ -3,6 +3,6 @@ export function truncateCommitId(str) {
   if (str && str.length > 11) {
     return str.substring(0, 10)
   }else{
-    return undefined
+    return str
   }
 }
diff --git a/src/forge/css/index.scss b/src/forge/css/index.scss
index d3599fc06..98b9942e6 100644
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@@ -135,7 +135,24 @@ form{
   vertical-align: middle;
 }
 .pd510{padding: 5px 10px;}
-
+.modalsStyle{
+  .ant-modal-content{
+    &>.ant-modal-header{
+      text-align: left!important;
+    }
+  }
+  .ant-modal-body{
+    max-width: 400px;
+    margin:0px auto;
+    text-align: left;
+    min-height: 140px;
+    display: flex;
+    align-items: center;
+  }
+  .ant-modal-close-x{
+    margin-top:8px;
+  }
+}
 .list-l-Menu{
   margin-bottom: 12px;
   border-radius:2px;
diff --git a/src/forge/sponsor/Sponsor.js b/src/forge/sponsor/Sponsor.js
new file mode 100644
index 000000000..0a44c88b8
--- /dev/null
+++ b/src/forge/sponsor/Sponsor.js
@@ -0,0 +1,348 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Avatar, Tag, Button, Spin, Input, Form, message, Divider} from "antd";
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
+
+import axios from "axios";
+import { getImageUrl } from "educoder";
+
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
+
+import SponsorTierItem from "./sponsor_tier_item";
+
+import "../users/new_user.css";
+import "../css/index.scss";
+import '../users/Index.scss';
+import "./sponsor.css";
+
+const tempData = [
+  {id:1, tier: 5, description: "这能让我感到很开心"},
+  {id:2, tier: 10, description: "如果您更加慷慨的话就选择这个"},
+  {id:3, tier: 150, description: "这能为我带来相当多的额外收入"},
+  {id:4, tier: 250, description: "这能为我带来相当多的额外收入"},
+  {id:5, tier: 500, description: "这能为我带来相当多的额外收入"},
+  {id:6, tier: 1000, description: "这能为我带来相当多的额外收入"},
+  {id:7, tier: 5000, description: "这能为我带来相当多的额外收入"},
+];
+
+const tempDesc = "我长期从事开源社区相关工作...目前已经开发了多个项目，如xxx, xxxx, ...\n我希望通过资助机制成为全职开源开发者，如果您对我的项目感兴趣，请资助我！"
+
+const tempSponsors = [
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+  {image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
+];
+
+const FormItem = Form.Item;
+const TextArea = Input.TextArea;
+
+const DescriptionForm = Form.create()(
+class extends Component{
+  getItemsValue = ()=>{
+    const val= this.props.form.getFieldsValue(); // 获取from表单的值
+    return val;
+  }
+  render(){
+
+    const { form, initValue} = this.props;
+    const { getFieldDecorator } = form; // 校验控件
+    return(
+      <Form >
+        <FormItem>
+          {getFieldDecorator(`description`,{
+            rules: [],
+            initialValue: initValue ? initValue : undefined
+          })(
+            // <Input placeholder="请输入"/>
+            <TextArea rows={4} placeholder="请输入"></TextArea>
+          )}
+        </FormItem>
+      </Form>
+    )
+  }
+}
+);
+
+class Sponsor extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+          isSpin: false,
+          user: undefined,
+          description: undefined,
+          sponsors: undefined,
+          edit: false,
+          tiers: [], 
+        };
+      }
+    
+    componentDidMount = () => {
+        this.fetchUser();
+        this.fetchData();
+    };
+
+    fetchUser = () => {
+        this.setState({
+          isSpin: true,
+        });
+        const { current_user } = this.props;
+        const { username } = this.props.match.params;
+    
+        let url = `/users/${username || (current_user && current_user.login)}.json`;
+        axios
+          .get(url)
+          .then((result) => {
+            // TODO: 在这里添加了对用户自我介绍的处理，前后端交互实现后需要删掉
+            // result.data.description = tempDesc;
+            this.setState({
+              user: result.data, 
+              isSpin: false,
+            }, () => {this.fetchSponsors()});
+            // console.log(result.data);
+          })
+          .catch((error) => {
+            console.log(error);
+            this.setState({
+              isSpin: false,
+            });
+          });
+    };
+
+    fetchSponsors = () => {
+        // console.log("fetch sponsors");
+        const user_id = this.state.user.user_id;
+
+        let url = `/sponsorships/sponsored.json`;
+
+        axios.get(url, {params: {id: user_id}})
+          .then((result) => {
+              // console.log(result);
+              this.setState({
+                  sponsors: result.data.sponsorships,
+                  isSpin: false,
+              })
+          })
+          .catch((error) => {
+              console.log(error);
+              this.setState({
+                  isSpin: false,
+              });
+          });
+        // this.setState({
+        //     sponsors: tempData,
+        //     displayList: tempData,
+        // })
+        // this.setState({
+        //   sponsors: tempSponsors,
+        // });
+    }
+
+    fetchData = () => {
+      let url = `/sponsor_tiers.json`;
+      const user_login = this.props.match.params.username;
+      axios
+        .get(url, {params:{login: user_login}})
+        .then((result) => {
+          // console.log(result.data);
+          // console.log(tempData)
+          this.setState({
+            tiers: result.data
+          });
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+    }
+
+    editDescription = () => {
+      this.setState({
+        edit: true,
+      });
+    }
+
+    cancelEdit = () => {
+      this.setState({
+        edit: false,
+      })
+    }
+
+    confirmEdit = () => {
+      //TODO: 增加和后端交互
+      let value = this.formRef.getItemsValue().description;
+      // console.log(value);
+      let user = this.state.user;
+      let url = `/users/${user.user_id}/update_description.json`
+      axios.put(url, {description: value})
+        .then((result) => {
+            user.description = value;
+            this.setState({
+              user: user,
+              edit: false
+            })
+            this.props.showNotification("修改成功")
+        })
+        .catch(error => {
+            console.log(error);
+            this.props.showNotification("修改失败")
+        })
+
+
+      // if (user){
+      //   user.description = value;
+      // }
+      // this.setState({
+      //   user: user,
+      //   edit: false,
+      // });
+    }
+
+    visitorTemplate = () => {
+      const user = this.state.user;
+      return (
+        <div>
+        {user && user.description? 
+        (<p>{user.description}</p>):(<p>暂无自我介绍</p>)}
+        </div>
+      );
+    }
+
+    manageTemplate = () => {
+      const user = this.state.user;
+      return (
+        <div>
+        <div>
+          <i className="iconfont icon-bianji3 font-15" onClick={() => this.editDescription()}></i>
+        </div>
+        {user && user.description? (<div>{user.description}</div>):(<div>暂无自我介绍</div>)}
+        </div>
+      );
+    }
+
+    editTemplate = () => {
+      const user = this.state.user;
+      return (
+        <div>
+          <DescriptionForm
+            initValue={user && user.description}
+            wrappedComponentRef={(form) => this.formRef = form}
+          />
+          <Button onClick={() => this.confirmEdit()}>确认</Button>
+          <Button onClick={() => this.cancelEdit()}>取消</Button>
+        </div>
+      );
+    }
+
+    sponsorList(){
+      const {sponsors} = this.state;
+      const sponsorList = (sponsors && sponsors.length>0 ? sponsors.map((item, key)=>{
+        return ( 
+        <Link to={`/users/${item.login}`} className="show-user-link">
+          <img className="sponsor-page-sponsors" alt="" src={getImageUrl(`images/${item && item.image_url}`)} title={item.username}></img>
+        </Link>);
+      })
+          :"")
+    return (<p>{sponsorList}</p>);
+    }
+
+    render(){
+        const { current_user} = this.props;
+        const { user, isSpin, tiers} = this.state;
+        const sponsorList = this.sponsorList();
+        // console.log(tiers);
+
+        var content = "";
+        if (current_user && user && user.login !== current_user.login){
+          content = this.visitorTemplate();
+        }
+        else if(current_user && user && user.login === current_user.login && this.state.edit){
+          content = this.editTemplate();
+        }
+        else if(current_user && user && user.login === current_user.login && !this.state.edit){
+          content = this.manageTemplate();
+        }
+
+        return (
+            <div className="newMain clearfix">
+                <Spin spinning={isSpin}>
+                <div className="new-content-flex">
+                    <div className="sponsor-page-left">
+                        <div className="list-l-Menu pd20 ">
+                            <div className="text-center mt15 font-16 fwb"> 成为{user && user.username}的赞助者吧</div>
+                            <div className="text-center"><Avatar
+                                size={110}
+                                src={getImageUrl(`images/${user && user.image_url}`)}
+                            />
+                            {user && user.user_identity && (
+                                <div className="mt-n15 position-relative">
+                                <Tag color="#FF6E21" style={{marginRight:"0px"}}>{user && user.user_identity}</Tag>
+                                </div>
+                            )}
+                            </div>
+                            <Divider />
+                            {content}
+                            <Divider />
+                            <div>
+                                赞助者:
+                                {sponsorList}
+                            </div>
+                        </div>
+
+                        <div className="bgcF">
+                            {/* <div className="list-l-Menu pd20 ">
+                                {content}
+                            </div>
+                            <div className="list-l-Menu pd20 ">
+                                赞助者:
+                                {sponsorList}
+                            </div> */}
+                        </div>             
+                    </div>   
+                    <div className="sponsor-page-right">
+                      <SponsorTierItem               
+                        {...this.props}
+                        {...this.state}
+                        tiers={tiers}>
+                      </SponsorTierItem>
+                    </div>         
+                </div>
+                </Spin>
+            </div>
+        );
+
+    }
+
+}
+
+export default withRouter(
+    ImageLayerOfCommentHOC({
+      imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
+      parentSelector: ".newMain",
+    })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Sponsor))))
+  );
+  
\ No newline at end of file
diff --git a/src/forge/sponsor/SponsorConfirmation.js b/src/forge/sponsor/SponsorConfirmation.js
new file mode 100644
index 000000000..07a0aa3d2
--- /dev/null
+++ b/src/forge/sponsor/SponsorConfirmation.js
@@ -0,0 +1,325 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Avatar, Tag, Button, Spin, Input, Divider, Form, Radio, Alert, message, Modal} from "antd";
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
+
+import axios from "axios";
+import { getImageUrl } from "educoder";
+
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
+
+import "../users/new_user.css";
+import "../css/index.scss";
+import '../users/Index.scss';
+import "./sponsor.css";
+import { submitUserCode } from "../../redux/actions/ojForUser";
+
+const tempData = {amount:100, description: "如果您更加慷慨的话就选择这个"};
+const tempBalance = 999;
+const FormItem = Form.Item;
+const { confirm } = Modal;
+
+const SponsorConfirmation = Form.create()(
+class extends Component{
+
+    constructor(props) {
+        super(props);
+        this.state = {
+          isSpin: false,
+          user: undefined,
+          tier: undefined,
+          single: false,
+          balance: undefined,
+          is_sponsoring: false,
+          visible: false,
+          sponsorship_id: undefined,
+        };
+    }
+
+    componentDidMount = () => {
+        this.fetchUser();
+        this.fetchTierInformation();
+        this.fetchBalance();
+        // this.fetchData();
+    };
+
+    //组件刚刚挂载时，TPMINDEXHOC还没从后端获取current_user，需要在获取后，再使用current_user的内容
+    componentWillReceiveProps = () => {
+        if (this.props.current_user)
+            this.fetchBalance();
+    }
+
+    fetchUser = () => {
+        this.setState({
+          isSpin: true,
+        });
+        const { current_user } = this.props;
+        const { username } = this.props.match.params;
+    
+        let url = `/users/${username || (current_user && current_user.login)}.json`;
+        axios
+          .get(url)
+          .then((result) => {
+            this.setState({
+              user: result.data,
+              isSpin: false,
+            });
+          })
+          .catch((error) => {
+            console.log(error);
+            this.setState({
+              isSpin: false,
+            });
+          });
+    };
+
+    fetchTierInformation = () => {
+        const { current_user } = this.props;
+        const { username, tier_id } = this.props.match.params;
+        let url = `/sponsor_tiers/${tier_id}.json`;
+        axios
+            .get(url)
+            .then((result) => {
+                this.setState({
+                    tier: result.data.tier,
+                    is_sponsoring: result.data.is_sponsoring,
+                    sponsorship_id: result.data.sponsorship_id,
+                })
+            })
+            .catch((error) => {
+            console.log(error);
+                this.setState({
+                    isSpin: false,
+                });
+            });
+    }
+
+    fetchBalance = () => {
+        const { current_user } = this.props;
+        let url = `/wallets/balance.json`;
+        if (current_user){
+            axios
+                .get(url, {params: {id: current_user.user_id}})
+                .then((result) => {
+                    this.setState({
+                        balance: result.data.balance,
+                    })
+                })
+                .catch((error) => {
+                console.log(error);
+                    this.setState({
+                        isSpin: false,
+                    });
+                });
+        }
+    }
+
+    reSelect = () => {
+        const {user} = this.state;
+        this.setState({
+            route_type: undefined
+        })
+        this.props.history.push(`/sponsor/${user && user.login}`)
+    }
+
+    changeSingle = (e) => {
+        
+        this.setState({
+            single: e.target.value
+        })
+    }
+
+    updateSponsorship = () => {
+        const value = this.props.form.getFieldsValue();
+        const {tier, user, sponsorship_id} = this.state;
+        const {current_user} = this.props;
+        let url = `/sponsorships/${sponsorship_id}.json`;
+        axios.put(url, {
+            amount: tier.tier,
+            visible: value.visible
+        })
+        .then((result) => {
+            if (result && result.data.status == 1)
+                this.props.showNotification(result.data.message);
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+    }
+
+    submit = () => {
+        const value = this.props.form.getFieldsValue();
+        const {tier, user} = this.state;
+        const {current_user} = this.props;
+        // console.log(value);
+        let url = `/sponsorships.json`;
+        axios.post(url, {
+            amount: tier.tier,
+            visible: value.visible, 
+            single: value.single,
+            developer_id: user.user_id,
+            })
+            .then((result) => {
+                // console.log(result);
+                if (result && result.data.status == 1)
+                    this.props.showNotification(result.data.message);
+            })
+            .catch((error) => {
+                console.log(error);
+            })
+    }
+
+    handleCancel = e => {
+        this.setState({
+          visible: false,
+        });
+    };
+
+    showModal = () => {
+        this.setState({
+          visible: true,
+        });
+    };
+
+    showConfirm = () => {
+        const {user} = this.state;
+        const fun = this.state.is_sponsoring?this.updateSponsorship:this.submit;
+        let text = this.state.is_sponsoring?`确认要修改对 ${user && user.username} 的赞助吗？若修改金额，将在下次自动扣款生效。`
+            :`确认要赞助 ${user && user.username} 吗？`;
+        confirm({
+        //   title: '确认赞助',
+        //   icon: <ExclamationCircleOutlined />,
+          content: text,
+          onOk() {
+              fun()
+          },
+          onCancel() {
+            
+          },
+        });
+    }
+
+    render(){
+        const {tier_id, username} = this.props.match.params;
+        const {current_user, form} = this.props;
+        const {user, isSpin, tier, balance, is_sponsoring, single} = this.state;
+        const {getFieldDecorator} = form;
+
+        const current_username = current_user && current_user.username;
+        const alert_text = this.state.single? `您选择了单次付费，本次扣除${tier && tier.tier}硬币`
+            :`您选择了按月付费，每月20日将扣除${tier && tier.tier}硬币`;
+
+        // console.log("sponsoring", is_sponsoring);
+        // console.log("tier: ", tier);
+        // console.log("current user", current_user);
+
+        const radioStyle = {
+            display: 'block',
+            height: '30px',
+            lineHeight: '30px',
+        };
+
+        return (
+            <div className="newMain clearfix">
+                <Spin spinning={isSpin}>
+                <div className="new-content-flex">
+                    <div className="sponsor-confirmation-left">
+                        <div className="list-l-Menu pd20 ">
+                            <p>
+                            <Avatar
+                                size={50}
+                                src={getImageUrl(`images/${user && user.image_url}`)}
+                            />
+                            <a href={`/sponsor/${user && user.login}`}>赞助{user && user.username}</a>/赞助等级确认
+                            </p>
+                            <p>
+                                赞助者为
+                                <Avatar
+                                size={50}
+                                src={getImageUrl(`images/${current_user && current_user.image_url}`)}
+                                />
+                                {current_user && current_user.username}
+                            </p>
+                            <Divider></Divider>
+                            <p>所选赞助等级</p>
+                            <p>{tier && tier.tier}硬币</p>
+                            <p>{tier && tier.description}</p>
+                            <Button onClick={() => this.reSelect()}>重新选择</Button>
+                        </div>
+                    </div>
+
+                    <div className="sponsor-confirmation-right">
+                        <div className="list-l-Menu pd20 ">
+                            <Form>
+                            <FormItem >
+                                {getFieldDecorator(`single`,{
+                                    rules: [{
+                                        required: true
+                                    }],
+                                    initialValue: single
+                                })(
+                                    <Radio.Group onChange={(e) => this.changeSingle(e)} disabled={is_sponsoring}>
+                                        <Radio style={radioStyle} value={true}>单次付费</Radio>
+                                        <Radio style={radioStyle} value={false}>按月支付</Radio>
+                                    </Radio.Group>
+                                )}
+                            </FormItem>
+                            <p>本次支付金额{tier && tier.tier}硬币</p>
+                            <p>{this.state.single? "单次付费": "即日起-次月20日"}</p>
+                            <Divider></Divider>
+
+                            <div>支付信息</div>
+                            <div>
+                                <div>
+                                <Avatar
+                                size={50}
+                                src={getImageUrl(`images/${current_user && current_user.image_url}`)}
+                                />
+                                </div>
+                                <div>
+                                    <div>{current_user && current_user.username}</div>
+                                    <div>硬币余额{balance}</div>
+                                </div>
+                            </div>
+                            <Alert message={alert_text} type="warning"/>
+                            <Divider></Divider>
+                            <span>赞助关系可见性</span>
+                            <FormItem >
+                                {getFieldDecorator(`visible`,{
+                                    rules: [{
+                                        required: true
+                                    }],
+                                    initialValue: 1
+                                })(
+                                    <Radio.Group >
+                                        <Radio style={radioStyle} value={1}>所有人可见</Radio>
+                                        <Radio style={radioStyle} value={0}>私密</Radio>
+                                    </Radio.Group>
+                                )}
+                            </FormItem>
+                            <Button type='primary' className="confirm-btn" onClick={() => this.showConfirm()}>赞助 {user && user.username}</Button>
+                            </Form>
+                        </div>
+                    </div>
+                </div>
+                </Spin>
+            </div>
+        );
+    }
+});
+
+
+export default withRouter(
+    ImageLayerOfCommentHOC({
+      imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
+      parentSelector: ".newMain",
+    })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(SponsorConfirmation))))
+  );
+  
\ No newline at end of file
diff --git a/src/forge/sponsor/sponsor.css b/src/forge/sponsor/sponsor.css
new file mode 100644
index 000000000..beeb07fba
--- /dev/null
+++ b/src/forge/sponsor/sponsor.css
@@ -0,0 +1,80 @@
+.sponsor-page-left{
+    width: 65%;
+    padding-right: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+
+.sponsor-page-right{
+    width: 35%;
+    padding-right: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+
+.sponsor-page-sponsors{
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 11px;
+}
+
+.sponsor-confirmation-left{
+    width: 35%;
+    padding-right: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+
+.sponsor-confirmation-right{
+    width: 65%;
+    padding-right: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+
+.sponsor-inline{
+    display: inline-block;
+}
+
+.tier-Item:last-child{
+    border-bottom: none  !important;
+  }
+
+.tier-Item{
+    border-bottom:1px solid rgba(238,238,238,1);
+    padding:9px 12px;
+}
+
+
+.right{
+    float: right
+}
+
+.btn-border-5{
+    border-radius: 5px;
+}
+
+.description-edit{
+    min-height:28px;
+    border:true;
+}
+
+.tier-title{
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.mr10{
+    margin-right: 10px;
+}
+
+.confirm-btn{
+    width: 100%;
+    border-radius: 5px;
+}
+
+.sponsor-item-btn{
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/forge/sponsor/sponsor_tier_item.js b/src/forge/sponsor/sponsor_tier_item.js
new file mode 100644
index 000000000..35e4072ab
--- /dev/null
+++ b/src/forge/sponsor/sponsor_tier_item.js
@@ -0,0 +1,422 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Avatar, Tag, Button, Spin, Icon, Modal, Input, Form, message, Popconfirm, Divider, InputNumber} from "antd";
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
+// import { EditOutlined } from "@ant-design/icons";
+
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
+import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
+
+import axios from "axios";
+import { getImageUrl } from "educoder";
+
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
+
+import "../users/new_user.css";
+import "../css/index.scss";
+import '../users/Index.scss';
+import "./sponsor.css";
+import "../Main/list.css";
+import Item from "antd/lib/list/Item";
+
+const FormItem = Form.Item;
+
+const EditTierForm = Form.create()(
+class extends Component{
+  getItemsValue = ()=>{
+    const val= this.props.form.getFieldsValue(); // 获取from表单的值
+    return val;
+  }
+  render(){
+
+    const { form, initValue1, initValue2, initValueList } = this.props;
+    const { getFieldDecorator } = form; // 校验控件
+    return(
+      <Form >
+        <FormItem label={`金额`} >
+          {getFieldDecorator(`tier`,{
+            rules: [{
+              message: '请输入数字！',
+              pattern: /^[0-9]+$/,
+              required: true
+            }],
+            initialValue: initValue1 ? initValue1 : undefined
+          })(
+            <InputNumber placeholder="请输入数字"/>
+          )}
+        </FormItem>
+        <FormItem label={`描述`} >
+          {getFieldDecorator(`description`,{
+            rules: [{
+              message: '必填字段!',
+              required: true,
+            }, {
+              max: 255,
+              message: "长度不能超过255个字符"
+            }],
+            initialValue: initValue2 ? initValue2 : undefined
+          })(
+            <Input placeholder="请输入"/>
+          )}
+        </FormItem>
+      </Form>
+    )
+  }
+
+});
+
+class SponsorTierItem extends Component{
+    constructor(props) {
+      super(props)
+
+      var edit = new Array();
+      if (props.tiers){
+        for(var i=0; i<props.tiers.length; i++) edit.push(false);
+      }
+      this.state = {
+        tiers: props.tiers,
+        new_tier: undefined,
+        edit: edit,
+        isSpin: false,
+      }
+      // this.state = {
+      //   tiers: undefined,
+      //   new_tier: undefined,
+      //   edit: undefined,
+      //   isSpin: false,
+      // }
+    }
+
+    componentDidMount = () => {
+
+    }
+
+    // 如果服务器较慢，组件会先被挂载，此时父组件传来的props数据是空的，但是获得数据后,有新的props，需要更新。
+    // 如果用户点击了修改自我描述等父组件的方法，父组件会重新渲染，这个方法又会被调用，有可能原有的编辑框会丢失。
+    // 因此先判断一下父组件传过来的数据是否有变化。没有变化则不需要修改state
+    componentWillReceiveProps = () => {
+        if (this.props.tiers !== this.state.tiers){
+          var edit = new Array();
+          for(var i=0; i<this.props.tiers.length; i++) edit.push(false);
+          this.setState({
+            tiers: this.props.tiers,
+            edit: edit,
+          })
+        }
+    }
+
+    fetchData = () => {
+      let url = `/sponsor_tiers.json`;
+      axios
+        .get(url)
+        .then((result) => {
+          console.log(result.data);
+          // console.log(tempData);
+          var edit = new Array();
+          for(var i=0; i<result.data.length; i++) edit.push(false);
+          this.setState({
+            tiers: result.data,
+            edit: edit,
+          })
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+    }
+
+    fetchUser = () => {
+      this.setState({
+        isSpin: true,
+      });
+      const { current_user } = this.props;
+      const { username } = this.props.match.params;
+  
+      let url = `/users/${username || (current_user && current_user.login)}.json`;
+      axios
+        .get(url)
+        .then((result) => {
+          this.setState({
+            user: result.data,
+            isSpin: false,
+          });
+        })
+        .catch((error) => {
+          console.log(error);
+          this.setState({
+            isSpin: false,
+          });
+        });
+    };
+
+    editTier = (item, key, e) => {
+        var edit = this.state.edit;
+
+        var editing = false;
+        for(var i=0; i<edit.length; i++)
+          editing = editing || edit[i];
+
+        if(editing){
+          this.props.showNotification("请先完成当前编辑");
+          return;
+        }
+        else{
+          edit[key] = true;
+          this.setState({
+            edit:edit
+          })
+        }
+    }
+
+    confirmEdit = async (item, key, e) => {
+      let url;
+      try {
+        const values = await this.formRef.props.form.validateFields();
+        // console.log('Success:', values);
+      } catch (errorInfo) {
+        this.props.showNotification('提交失败，数据不合法');
+        return false;
+      }
+      let values = this.formRef.getItemsValue();
+      // console.log(this.formRef);
+      const {current_user} = this.props;
+      if (this.state.new_tier == key){
+        console.log("new tier");
+        url = `/sponsor_tiers.json`;
+        axios
+        .post(url, {
+          ...values,
+          user_id: current_user.user_id
+        })
+        .then((result) => {
+          var {tiers, edit} = this.state;
+          tiers[key] = result.data.tier;
+          edit[key] = false;
+          this.setState({
+            tiers: tiers,
+            edit: edit,
+            new_tier: undefined
+          })
+          // message.success("新增成功");
+          this.props.showNotification(`新增成功！`);
+        })
+        .catch((error) => {
+          console.log(error);
+          this.props.showNotification("新增失败");
+        })
+      }
+      else{
+        url = `/sponsor_tiers/${item.id}.json`
+        axios
+        .put(url, {
+          ...values,
+        })
+        .then((result) => {
+          var {tiers, edit} = this.state;
+          tiers[key] = result.data.tier;
+          edit[key] = false;
+          this.setState({
+            tiers: tiers,
+            edit: edit,
+            new_tier: undefined
+          })
+          // message.success("修改成功");
+          this.props.showNotification(`修改成功！`);
+        })
+        .catch((error) => {
+          console.log(error);
+          this.props.showNotification("修改失败");
+        })
+      }
+
+
+      // TODO: 在此处加入对后端的修改请求
+
+      // TODO: 修改的请求实现
+    }
+
+    cancelEdit = (item, key, e) => {
+      let {tiers, edit, new_tier} = this.state;
+      if (new_tier){
+        tiers.pop();
+        edit.pop();
+      }
+      else {
+        edit[key] = false;
+      }
+      this.setState({
+        tiers: tiers,
+        edit: edit,
+        new_tier: undefined
+      })
+    }
+
+    newTier = () => {
+      if (this.state.new_tier !== undefined){
+        this.props.showNotification("请先完成当前编辑")
+        return;
+      }
+
+      let {tiers, edit} = this.state;
+      tiers.push({tier: 1, description: ""})
+      edit.push(true);
+      this.setState({
+        tiers: tiers,
+        edit: edit,
+        new_tier: tiers.length - 1,
+      })
+    }
+
+    deleteTier = (item, key, e) => {
+      // TODO: 此处向后端发送请求删除
+      let {tiers, edit} = this.state;
+
+      let url = `/sponsor_tiers/${item.id}.json`;
+
+      axios
+        .delete(url)
+        .then((result) => {
+          tiers.splice(key, 1)
+          edit.splice(key, 1)
+          this.setState({
+            tiers: tiers,
+            edit: edit,
+          })
+          this.props.showNotification("删除成功");
+        })
+        .catch((error) => {
+          console.log(error);
+          this.props.showNotification("删除失败");
+        })
+    }
+
+    toConformation = (item, key, e) => {
+      const {user} = this.props;
+      this.setState({
+        route_type: undefined
+      })
+      this.props.history.push(`/sponsor_confirmation/${user && user.login}/${item.id}`)
+    }
+
+    visitorTemplate = (item, key) => {
+      return (
+        <ul className="tier-Item">
+
+        <div className="tier-title">
+          {item.tier}&nbsp;&nbsp;硬币
+          <Button className="right btn-border-5" onClick={(e) => this.toConformation(item, key, e)}>选择</Button>
+        </div>
+        <div>
+          {item.description} 
+        </div>
+        </ul>
+      );
+    }
+
+    manageTemplate = (item, key) => {
+      return (
+      <div className="tier-Item">
+        <div>
+          <span className="tier-title">{item.tier}&nbsp;&nbsp;硬币</span>
+          
+          <Popconfirm
+            title="确认删除?"
+            onConfirm={e => this.deleteTier(item, key, e)}
+            // onCancel={cancel}
+            okText="是"
+            cancelText="否"
+          >
+            <i className="iconfont icon-shanchu font-15 right"></i>
+          </Popconfirm>
+          
+          <i className="iconfont icon-bianji3 font-15 mr10 right" onClick={e => this.editTier(item, key, e)}></i>
+        
+        </div>
+        <div>
+          {item.description} 
+
+        </div>
+      </div>
+      );
+    }
+
+    editTemplate = (item, key) => {
+      return (
+        <div className="tier-Item">
+          <EditTierForm
+            initValue1={item.tier}
+            initValue2={item.description}
+            wrappedComponentRef={(form) => this.formRef = form}
+          />
+          <Button onClick={e => this.confirmEdit(item, key, e)}>确定</Button>
+          <Button onClick={e => this.cancelEdit(item, key, e)}>取消</Button>
+        </div>
+      );
+    }
+
+    render() {
+        const {tiers} = this.state;
+        const { current_user} = this.props;
+        const {user} = this.props;
+
+        // console.log("item state tiers:", tiers);
+        // console.log("item props tiers:", this.props.tiers);
+
+        const renderList = (
+          tiers && tiers.length > 0 ? tiers.map((item, key) => {
+              const tier = this.state.edit[key]? (<Input></Input>):item.tier;
+              const description = this.state.edit[key]? (<Input></Input>):item.description;
+
+              var content = "";
+              if (current_user && user && user.login !== current_user.login){
+                content = this.visitorTemplate(item, key);
+              }
+              else if(current_user && user && user.login === current_user.login && this.state.edit[key]){
+                content = this.editTemplate(item, key);
+              }
+              else if(current_user && user && user.login === current_user.login && !this.state.edit[key]){
+                content = this.manageTemplate(item, key);
+              }
+
+              // return (
+                  // <ul className="list-l-Menu">
+
+                  //     <div className="font-15 mr5">
+                  //       金额：{amount}
+                  //       {current_user && user && user.login === current_user.login ?
+                  //         // (<Icon type="edit" onClick={item => this.editTier(item)}/>
+                  //         (<i className="iconfont icon-bianji3 font-15 mr5" onClick={e => this.editTier(item, key, e)}></i>):
+                  //         <Button >选择</Button>}
+                  //     </div>
+                  //     <div className="font-15 mr5">
+                  //       描述：{description} 
+                  //       {current_user && user && user.login === current_user.login ?
+                  //         (<i className="iconfont icon-shanchu font-15"></i>):""}
+                  //     </div>
+                  // </ul>
+                  
+              // )
+              return content;
+            }) : ""
+        );
+        return (
+            <div>
+              <div className="list-l-Menu">
+                <p className="tier-Item tier-title">选择您的赞助等级</p>
+                {/* <Divider/> */}
+                {renderList}
+              </div>
+              {current_user && user && user.login === current_user.login ?
+                ( <Button type="primary" onClick={() => this.newTier()}>新增赞助等级</Button>):
+                ""
+              }
+            </div>
+        )
+    }
+}
+
+
+export default SponsorTierItem;
\ No newline at end of file
diff --git a/src/forge/users/CIList.jsx b/src/forge/users/CIList.jsx
new file mode 100644
index 000000000..7d678b931
--- /dev/null
+++ b/src/forge/users/CIList.jsx
@@ -0,0 +1,100 @@
+import React , { useEffect , useState } from 'react';
+import { Button ,Spin , Pagination , Popconfirm } from 'antd';
+import { Link } from 'react-router-dom';
+import Nodata from '../Nodata';
+import axios from 'axios';
+
+const limit = 10;
+function CIList(props){
+  const [ page , setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const [ isSpining , setIsSpining] = useState(true);
+  const [ list , setList ] = useState(undefined);
+  let user = props.current_user;
+
+  useEffect(()=>{
+    setIsSpining(true);
+    if(user && user.login){
+      getInfo();
+    }
+  },[user,page])
+
+  function getInfo(){
+    const url = `/users/${user.login}/projects.json`;
+    axios.get(url,{
+      params:{
+      limit , page , category:"manage"
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setList(result.data.projects);
+        setTotal(result.data.count);
+        setIsSpining(false);
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  }
+
+  function changePage(page){
+    setPage(page);
+  }
+
+  // 取消激活
+  function cancelActivate(author,identifier){
+    setIsSpining(true);
+    const url =`/${author && author.login}/${identifier}/deactivate.json`;
+    axios.delete(url).then(result=>{
+      if(result){
+        getInfo();
+      }else{
+        setIsSpining(false);
+      }
+    }).catch(error=>{setIsSpining(false);})
+  }
+  return(
+    <div style={{minHeight:"400px"}}>
+      <Spin spinning={isSpining}>
+        {
+          list && list.length > 0 ?
+            <ul className="CIList">
+              {list.map((item,key)=>{
+                return(
+                  <li key={key}>
+                    <span>
+                      <Link to={`/projects/${item.author && item.author.login}/${item.identifier}${ item.open_devops ? "/devops/list":""}`}>{item.name}</Link>
+                      { item.open_devops ? 
+                        <span className="authTag green ml20">已激活</span>
+                        :
+                        <span className="authTag red ml20">未激活</span>
+                      }
+                    </span>
+                    { item.open_devops ? 
+                      <Popconfirm
+                        title="确定取消激活？"
+                        onConfirm={()=>cancelActivate(item.author,item.identifier)}
+                        okText="确定"
+                        cancelText="取消"
+                      >
+                        <Button>取消激活</Button>
+                      </Popconfirm>
+                      : 
+                      <Button type={"primary"} onClick={()=>{props.history.push(`/projects/${item.author && item.author.login}/${item.identifier}/devops`)}}>马上激活</Button> 
+                    }
+                  </li>
+                )
+              })}
+            </ul>
+          :<Nodata _html="暂无数据"/>
+        }
+        {
+          total > limit &&
+          <div className="mt20 mb30" style={{textAlign:"center"}}>
+            <Pagination simple onChange={changePage} pageSize={limit} current={page} total={total}></Pagination>
+          </div>
+        }
+      </Spin>
+    </div>
+  )
+}
+export default CIList;
diff --git a/src/forge/users/CIdispose.jsx b/src/forge/users/CIdispose.jsx
new file mode 100644
index 000000000..a0ec8f376
--- /dev/null
+++ b/src/forge/users/CIdispose.jsx
@@ -0,0 +1,169 @@
+import React , { useEffect , useState , forwardRef , useCallback } from 'react';
+import { Button , Modal , Form , Input } from 'antd';
+import { AlignCenter } from '../Component/layout';
+import axios from 'axios';
+import Modals from '../Component/Modal';
+import PasswordAuthority from '../Component/PasswordAuthority';
+import { func } from 'prop-types';
+
+const TIPS = "解除CI服务器绑定后，您所有的项目构建数据将被清空。确定解除绑定？";
+function CIdispose(props){
+  const [ CIData , setCIData ] = useState(undefined);
+  const [ step , setStep ] = useState(0);
+  const [ visible, setVisible ] = useState(false);
+  const [ bindVisible, setBindVisible ] = useState(false);
+  const [ ci_certification, setCi_certification ] = useState(false);
+  const [ btnLoading , setBtnLoading ] = useState(false);
+
+  const [ authorityValBox , setAuthorityValBox] = useState(false);
+
+  const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
+  const helper = useCallback(
+    (label, name, rules, widget, isRequired) => (
+      <React.Fragment>
+        <span className={isRequired ? "required" : ""}>{label}</span>
+        <Form.Item>
+          {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
+        </Form.Item>
+      </React.Fragment>
+    ),
+    []
+  );
+
+  useEffect(()=>{
+    getInit();
+  },[])
+
+  function getInit(){
+    const url = `/users/ci/cloud_account.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setCIData(result.data.cloud_account);
+        setStep(result.data.step);
+        setCi_certification(result.data.ci_certification);
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  }
+
+  // 解除绑定
+  function cancelBind(){
+    const url = `/users/ci/cloud_account/unbind.json`;
+    axios.delete(url).then(result=>{
+      if(result && result.data){
+        props.showNotification("成功解除绑定！");
+        setVisible(false);
+        getInit();
+      }
+    }).catch(error=>{
+      setBindVisible(false);
+    })
+  }
+
+  function onCancel(){
+    setVisible(false);
+  }
+
+  // 确定绑定服务器信息
+  function sureBindInfo(){
+    validateFields((error, values) => {
+      if (!error) {
+        setBtnLoading(true);
+        const url = `/users/ci/cloud_account/bind.json`;
+        axios.post(url,{
+          ...values
+        }).then(result=>{
+          setBtnLoading(false);
+          if(result && result.data){
+            setBindVisible(false);
+            setCIData(result.data.cloud_account);
+            setStep(result.data.step);
+            props.showNotification("服务器绑定成功！");
+          }
+        })
+      }
+    })
+  }
+  // 取消绑定服务器信息
+  function cancelBindInfo(){
+    setBindVisible(false);
+    setFieldsValue({
+      ip_num:undefined,
+      secret:undefined,
+      account:undefined
+    })
+  }
+
+  function okAuthority(){
+    setAuthorityValBox(false);
+    getInit();
+  }
+
+  function cancelAuthority(){
+    setAuthorityValBox(false);
+  }
+
+  return(
+    <div className="disposeInfo">
+      <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
+      <Modal
+        className="modalsStyle"
+        visible={bindVisible}
+        title={"绑定CI服务器地址"}
+        onCancel={cancelBindInfo}
+        closable={true}
+        footer={
+          <div>
+            <Button onClick={cancelBindInfo}>取消</Button>
+            <Button loading={btnLoading} type={"primary"} style={{marginLeft:"20px"}} onClick={sureBindInfo}>确定</Button>
+          </div>
+        }
+      >
+        <Form style={{marginTop:"20px"}}>
+          {helper(
+            "服务器IP地址：",
+            "ip_num",
+            [{ required: true, message: "请输入服务器IP地址" }],
+            <Input
+              placeholder="请输入服务器IP地址"
+              style={{ width: "368px" }}
+              size="large"
+            />,
+            true
+          )}
+          {helper(
+            "服务器用户名：",
+            "account",
+            [{ required: true, message: "请输入服务器用户名" }],
+            <Input placeholder="请输入服务器用户名" size="large" />,
+            true
+          )}
+          {helper(
+            "服务器密码：",
+            "secret",
+            [{ required: true, message: "请输入服务器密码" }],
+            <Input.Password placeholder="请输入服务器密码" size="large" />,
+            true
+          )}
+        </Form>
+      </Modal>
+      <Modals visible={visible} title={"解除绑定"} content={TIPS} onOk={cancelBind} onCancel={onCancel}/>
+      <div className="disposeItem">
+        <AlignCenter>
+          <span>CI服务器地址</span>
+          {CIData && step >= 1 && <span className="ml10">{CIData.ip}</span>}
+          { step === 0 && <span className="ml10 authTag red">未绑定</span> }
+          { step > 0 && !ci_certification && <span className="ml10 authTag red">未认证</span> }
+          { ci_certification && <span className="ml10 authTag green">已认证</span> }
+        </AlignCenter>
+        <AlignCenter>
+          { step === 0 && <Button type={'primary'} onClick={()=>setBindVisible(true)} >马上绑定</Button> }
+          { step > 0 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} onClick={()=>setAuthorityValBox(true)} target="_blank">马上认证</Button> }
+          { step >= 1 && <Button type={'danger'} className="ml20" onClick={()=>setVisible(true)}>解除绑定</Button> }
+        </AlignCenter>
+      </div>
+    </div>
+  )
+}
+export default Form.create()(forwardRef(CIdispose));;
diff --git a/src/forge/users/Index.scss b/src/forge/users/Index.scss
index b67abf153..d65b2c505 100644
--- a/src/forge/users/Index.scss
+++ b/src/forge/users/Index.scss
@@ -70,4 +70,52 @@ $flex:flex;
       margin: 8px 0 0 0 !important;
     }
   }
+}
+
+ul.ant-menu.menuStyle{
+  padding:0px 30px;
+  font-size: 16px;
+  li{
+    height: 70px;
+    line-height: 70px;
+    padding:0px;
+    margin-right: 30px!important;
+  }
+}
+.disposeInfo{
+  padding:0px 30px;
+  min-height: 400px;
+  .disposeItem{
+    display: flex;
+    justify-content: space-between;
+    padding:30px 0px;
+    border-bottom: 1px solid #eee;
+    
+  }
+}
+.authTag{
+  display: inline-block;
+  padding:0px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  height: 22px;
+  line-height: 22px;
+  &.red{
+    border:1px solid #F73030;
+    color: #F73030;
+  }
+  &.green{
+    border:1px solid #28BD6C;
+    color: #28BD6C;
+  }
+}
+.CIList{
+  padding:0px 30px;
+  min-height: 400px;
+  li{
+    display: flex;
+    justify-content: space-between;
+    padding:28px 0px;
+    border-bottom: 1px solid #eee;
+  }
 }
\ No newline at end of file
diff --git a/src/forge/users/Infos.js b/src/forge/users/Infos.js
index a18b54e8c..dd5d18010 100644
--- a/src/forge/users/Infos.js
+++ b/src/forge/users/Infos.js
@@ -14,6 +14,15 @@ import './Index.scss';
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
 
+
+const InfosDevOps = Loadable({
+  loader: () => import("./devOpsCI"),
+  loading: Loading,
+});
+const InfosDevOpsCD = Loadable({
+  loader: () => import("./devOpsCD"),
+  loading: Loading,
+});
 const InfosUser = Loadable({
   loader: () => import("./InfosUser"),
   loading: Loading,
@@ -36,6 +45,19 @@ const UndoEvents = Loadable({
   loader: () => import("./undo_events"),
   loading: Loading,
 })
+const Wallet = Loadable({
+  loader: () => import("./sponsor/wallet"),
+  loading: Loading,
+});
+const SponsorManagement = Loadable({
+  loader: () => import("./sponsor/SponsorManagement"),
+  loading: Loading,
+});
+const SponsorDataCharts = Loadable({
+  loader: () => import("./sponsor/communityData"),
+  loading: Loading,
+});
+
 class Infos extends Component {
   constructor(props) {
     super(props);
@@ -43,7 +65,10 @@ class Infos extends Component {
       isSpin: false,
       user: undefined,
       project_type: undefined,
-      route_type: undefined
+      route_type: undefined,
+      c: undefined,
+      sponsor_management: undefined, 
+      choose_chart: undefined,
     };
   }
 
@@ -78,7 +103,10 @@ class Infos extends Component {
   change_project_type = (type) => {
     const {user} = this.state
     this.setState({
-      project_type: type ,
+      project_type: type,
+      choose_wallet: false,
+      sponsor_management: undefined, 
+      choose_chart: undefined,
       route_type: undefined
     })
     let url = `/users/${user && user.login}`
@@ -89,6 +117,15 @@ class Infos extends Component {
     
   };
 
+  change_devops_type=(type)=>{
+    const {user} = this.state;
+    this.setState({
+      project_type: type ,
+      route_type: undefined
+    })
+    this.props.history.push(`/users/${user && user.login}/devops/${type}`);
+  }
+
   undo_link = () => {
     const {user} = this.state
     this.setState({
@@ -111,10 +148,63 @@ class Infos extends Component {
     this.props.history.push(`/users/${user && user.login}/organizes`)
   }
 
+  sponsor_link = () => {
+    const {user} = this.state
+    this.setState({
+      route_type: undefined
+    })
+    this.props.history.push(`/sponsor/${user && user.login}`)
+  }
+
+  sponsor_management_link = () => {
+    const {user} = this.state
+    this.setState({
+      route_type: undefined,
+      sponsor_management: true, 
+      project_type: undefined,
+      choose_wallet: undefined, 
+      choose_chart: undefined,
+    })
+    this.props.history.push(`/users/${user && user.login}/sponsor_management`)
+  }
+
+  wallet_link = () => {
+    const {user} = this.state
+    this.setState({
+      project_type: undefined,
+      choose_wallet: true,
+      route_type: undefined,
+      sponsor_management: undefined,
+      choose_chart: undefined,
+    })
+    this.props.history.push(`/users/${user && user.login}/wallet`)
+  }
+
+  sponsor_setting_link = () => {
+    const {user} = this.state
+    this.setState({
+      route_type: undefined
+    })
+    this.props.history.push(`/users/${user && user.login}/sponsor_setting`)
+  }
+
+  sponsor_statistic = () => {
+    const {user} = this.state
+    this.setState({
+      project_type: undefined,
+      choose_wallet: undefined,
+      route_type: undefined,
+      sponsor_management: undefined,
+      choose_chart: true
+    })
+    this.props.history.push(`/users/${user && user.login}/sponsor_community_data`)
+  }
 
   render() {
     const { current_user, mygetHelmetapi } = this.props;
-    const { user, isSpin, project_type, route_type } = this.state;
+    const { user, isSpin, project_type, route_type, choose_wallet, choose_chart, sponsor_management } = this.state;
+    // console.log("current", current_user)
+    // console.log("user", user)
     return (
       <div className="newMain clearfix">
         <Spin spinning={isSpin}>
@@ -137,10 +227,10 @@ class Infos extends Component {
 
                   <div>
                     {user && current_user && user.login === current_user.login && (
-                      <div className="user-info-star-button ">
+                      <div className="user-info-star-button">
                         <Button
                           block
-                          className="text-button-grey"
+                          className="text-button-grey mr5"
                           href={`${
                             mygetHelmetapi &&mygetHelmetapi.new_course&&
                             mygetHelmetapi.new_course.edit_account
@@ -148,10 +238,19 @@ class Infos extends Component {
                           target="_blank"
                         >
                           {" "}
-                          <i className="iconfont icon-shezhi4 font-15 mr5"></i>
+                          <i className="iconfont icon-shezhi4 font-15"></i>
                           修改资料
                         </Button>
+                        <Button
+                          block
+                          className="text-button-grey"
+                          href={`/sponsor/${user && user.login}`}
+                        >
+                          赞助信息修改
+                        </Button>
+
                       </div>
+
                     )}
                     {current_user && user && user.login !== current_user.login && (
                       <div className="user-info-star-button ">
@@ -162,6 +261,13 @@ class Infos extends Component {
                           fontClass={"font-14 ml5"}
                           starText={"关注TA"}
                         />
+                        <Button
+                          block
+                          className="text-button-grey ml-5"
+                          href={`/sponsor/${user && user.login}`}
+                        >
+                          赞助
+                        </Button>
                       </div>
                     )}
                   </div>
@@ -200,6 +306,7 @@ class Infos extends Component {
                   </div>
                 </div>
               )} */}
+              
               <div className="bgcF">
                 <ul className="list-l-Menu">
                   <li className="MenuTitle" onClick={() => this.change_project_type(undefined)}>
@@ -233,6 +340,33 @@ class Infos extends Component {
                   </li>
                 </ul>
               </div>
+              {
+                current_user && current_user.login &&
+                <div className="bgcF">
+                  <ul className="list-l-Menu">
+                    <li className="MenuTitle">
+                      <i className="iconfont icon-gongzuoliu font-15 mr5"></i>
+                      DevOps工作流
+                      <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
+                    </li>
+                    <li className={project_type && project_type === "CIService" ? "active" : ""}  onClick={() => this.change_devops_type("CIService")}>
+                      <p>
+                        <span className="font-16 color-grey-3">CI服务</span>
+                      </p>
+                    </li>
+                    {/* <li className={project_type && project_type === "CDService" ? "active" : ""}  onClick={() => this.change_devops_type("CDService")}>
+                      <p>
+                        <span className="font-16">CD服务</span>
+                        <span className="color-blue">
+                          {user && user.common_projects_count}
+                        </span>
+                      </p>
+                    </li> */}
+                  </ul>
+                </div>
+              }
+              
+
               {/* <div className="bgcF">
                 <div className="list-l-Menu">
                   <p className="list-l-p pd20" onClick={() => this.organize_link()} >
@@ -245,7 +379,56 @@ class Infos extends Component {
                     </span>
                   </p>
                 </div>
-              </div> */}
+            </div> */}
+              {current_user && user && user.login == current_user.login && (
+
+                <div className="bgcF">
+                <ul className="list-l-Menu">
+                  <li className="MenuTitle">
+                    <i className="iconfont icon-bianzu1 font-15 mr5"></i>
+                    赞助管理
+                    <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
+                  </li>
+                  <li className={choose_wallet ? "active" : ""}  onClick={() => this.wallet_link()}>
+                    <p>
+                      <span className="font-16">我的钱包</span>
+                      <span className="color-blue">
+                        {/* {user && user.common_projects_count} */}
+                      </span>
+                    </p>
+                  </li>
+                  <li className={sponsor_management ? "active" : ""}  onClick={() => this.sponsor_management_link()}>
+                    <p>
+                      <span className="font-16">赞助管理</span>
+                      <span className="color-blue">
+                        {/* {user && user.sync_mirror_projects_count} */}
+                      </span>
+                    </p>
+                  </li>
+                </ul>
+                </div>
+              )}
+
+              {current_user && user && user.login == current_user.login && current_user.admin &&(
+
+              <div className="bgcF">
+              <ul className="list-l-Menu">
+                <li className="MenuTitle">
+                  <i className="iconfont icon-dashujucunchu font-15 mr5"></i>
+                  社区统计信息
+                  <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
+                </li>
+                <li className={choose_chart ? "active" : ""}  onClick={() => this.sponsor_statistic()}>
+                  <p>
+                    <span className="font-16">赞助信息统计</span>
+                    <span className="color-blue">
+                      {/* {user && user.common_projects_count} */}
+                    </span>
+                  </p>
+                </li>
+              </ul>
+              </div>
+              )}
             </div>
             <div className="list-right">
               {user && (
@@ -263,12 +446,42 @@ class Infos extends Component {
                         return <UndoEvents {...this.props} {...this.state} />;
                       }}
                     ></Route>
+                    <Route
+                      path="/users/:username/wallet"
+                      render={(props) => {
+                        return <Wallet {...this.props} {...this.state} />;
+                      }}
+                    ></Route>
+                    <Route
+                      path="/users/:username/sponsor_management"
+                      render={(props) => {
+                        return <SponsorManagement {...this.props} {...this.state} />;
+                      }}
+                    ></Route>
+                    <Route
+                      path="/users/:username/sponsor_community_data"
+                      render={(props) => {
+                        return <SponsorDataCharts {...this.props} {...this.state} is_sponsor={true}/>;
+                      }}
+                    ></Route>
                     <Route
                       path="/users/:username/fan_users"
                       render={() => {
                         return <FanUser {...this.props} {...this.state} userType="fan_users"/>;
                       }}
                     ></Route>
+                    <Route
+                      path="/users/:username/devops/CDService"
+                      render={() => {
+                        return <InfosDevOpsCD {...this.props} {...this.state} />;
+                      }}
+                    ></Route>
+                    <Route
+                      path="/users/:username/devops/CIService"
+                      render={() => {
+                        return <InfosDevOps {...this.props} {...this.state} />;
+                      }}
+                    ></Route>
                     <Route
                       path="/users/:username/projects/:project_type"
                       render={() => {
diff --git a/src/forge/users/devOpsCD.jsx b/src/forge/users/devOpsCD.jsx
new file mode 100644
index 000000000..72db13491
--- /dev/null
+++ b/src/forge/users/devOpsCD.jsx
@@ -0,0 +1,8 @@
+import React , { useEffect , useState } from 'react';
+
+function DevOpsCD(){
+  return(
+    <div>222</div>
+  )
+}
+export default DevOpsCD;
\ No newline at end of file
diff --git a/src/forge/users/devOpsCI.jsx b/src/forge/users/devOpsCI.jsx
new file mode 100644
index 000000000..563120a65
--- /dev/null
+++ b/src/forge/users/devOpsCI.jsx
@@ -0,0 +1,30 @@
+import React , { useEffect , useState } from 'react';
+import { Menu } from 'antd';
+import './Index.scss';
+import CIdispose from './CIdispose';
+import CIList from './CIList';
+
+
+function DevOpsCI(props){
+  const [ selectKey , setSelectKey ] =  useState("dispose");
+
+  function changeKeys(e){
+    setSelectKey(e.key);
+  }
+  
+  return(
+    <div>
+      <Menu mode="horizontal" className="menuStyle" onClick={changeKeys} selectedKeys={[selectKey]}>
+        <Menu.Item key="dispose">服务器配置</Menu.Item>
+        <Menu.Item key="list">项目列表</Menu.Item>
+      </Menu>
+      {
+        selectKey === "dispose" ? 
+        <CIdispose {...props}/>
+        :
+        <CIList {...props}/>
+      }
+    </div>
+  )
+}
+export default DevOpsCI;
\ No newline at end of file
diff --git a/src/forge/users/new_user.css b/src/forge/users/new_user.css
index fc914e7d6..31c76b47c 100644
--- a/src/forge/users/new_user.css
+++ b/src/forge/users/new_user.css
@@ -28,10 +28,15 @@
 .mt-n15{margin-top: -15px;}
 .position-relative{position: relative;}
 .mr-5{margin-right: 5px;}
+.mt-5{margin-top: 5px;}
+.ml-5{margin-left: 5px;}
 a.text-button-grey{
   color: rgba(0, 0, 0, 0.65)
 }
-.user-info-star-button{margin: 20px 50px 0 50px}
+.user-info-star-button{
+  display: flex;
+  margin: 20px 20px 0 20px
+}
 .list-l-p{
   width: 100%;
   display: -ms-flexbox;
diff --git a/src/forge/users/sponsor/CoinChangeItem.js b/src/forge/users/sponsor/CoinChangeItem.js
new file mode 100644
index 000000000..820aa8f4e
--- /dev/null
+++ b/src/forge/users/sponsor/CoinChangeItem.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Tooltip } from 'antd';
+import '../../css/index.scss'
+import '../../Main/list.css';
+
+class CoinChangeItem extends Component {
+  TurnToDetail = (login, url) => {
+    this.props.history.push({
+      pathname: url,
+      state: login
+    })
+  }
+  render() {
+    const { coinChanges, current_user } = this.props;
+    const renderList = (
+      coinChanges && coinChanges.length > 0 ? coinChanges.map((item, key) => {
+        let url = current_user && item.to_user_login == current_user.login? `/users/${item.from_user_login}`:`/users/${item.to_user_login}`;
+        return (
+          <div className="p-r-Item" key={key}>
+            <div className="p-r-Infos">
+              <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{current_user && item.to_user_login == current_user.login? "收入":"支出"}{item.amount}硬币</p>
+              <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>变动原因：{item.reason}</p>
+              {/* <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>备注：{item.description}</p> */}
+
+              <div className="p-r-about">
+                <span className="p-r-detail">
+                  <span><label>时间：</label>{item.date}</span>
+                  {current_user && item.to_user_login == current_user.login? 
+                   (<span><label>金额来源：</label><a href={url}>{item.from_user}</a></span>):
+                   (<span><label>金额去向：</label><a href={url}>{item.to_user}</a></span>)}
+                </span>
+              </div>
+            </div>
+          </div>
+        )
+      }) : ""
+    )
+    return (
+      <div className="project-list minH-670">
+        {renderList}
+      </div>
+    )
+  }
+}
+export default CoinChangeItem;
\ No newline at end of file
diff --git a/src/forge/users/sponsor/SponsorManagement.js b/src/forge/users/sponsor/SponsorManagement.js
new file mode 100644
index 000000000..5848c8d97
--- /dev/null
+++ b/src/forge/users/sponsor/SponsorManagement.js
@@ -0,0 +1,309 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Input, Spin, Pagination, Popover, Button, Divider } from "antd";
+import SponsorBarCharts from "./charts/sponsorBarChart";
+import SponsorPieCharts from "./charts/sponsorPieChart";
+
+import axios from "axios";
+import CoinChangeItem from "./CoinChangeItem";
+import Nodata from "../../Nodata";
+import img_array from "../../Images/array.png";
+import SponsorList from "./sponsor_list";
+import "../../sponsor/sponsor.css";
+
+// import "../new_user.css";
+// const Search = Input.Search;
+
+// const tempData = [
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: true, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: true, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+//     {image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
+// ];
+
+
+class SponsorManagement extends Component{
+
+    constructor(props) {
+        super(props);
+        this.state = {
+          page: 1,
+          limit: 15,
+          sort_by: undefined,
+          totalCount: undefined,
+          isSpin: false,
+          total: undefined,
+          category: "sponsoring",
+          is_sponsor: false,
+          sponsors: undefined,
+          displayList: undefined,
+          chartsData: {income:[], outcome:[]},
+        };
+    }
+
+    changeCategory = (cate) => {
+        this.setState({
+            category: cate.target.value, 
+            page: 1,
+        }, ()=>{
+          if(this.state.category === "chart")
+            this.get_chart_data();
+          else
+            this.get_sponsors();
+        });
+      // if(cate.target.value === "chart"){
+      //   this.setState({
+      //     category: cate.target.value, 
+      //     page: 1,
+      // });
+      // }
+      // else{
+      //   this.setState({
+      //       category: cate.target.value, 
+      //       page: 1,
+      //   }, ()=>{this.get_sponsors();});
+      // }
+    };
+
+    componentDidMount = () => {
+        this.get_sponsors();
+    }
+
+    get_chart_data = () => {
+      this.setState({
+        isSpin: true
+      })
+
+      let url = `/wallets/balance_chart.json`;
+      const {current_user} = this.props;
+      let user_id = current_user && current_user.user_id;
+      if (current_user){
+        axios.get(url, {
+          params: {
+            id: user_id, 
+            sponsor: true,
+          }})
+          .then((result) => {
+              this.setState({
+                  chartsData: result.data,
+                  isSpin: false,
+              })
+          })
+          .catch((error) => {
+              console.log(error);
+              this.setState({
+                  isSpin: false,
+              });
+          });
+      }
+    };
+
+    get_sponsors = ()=>{
+        const user_id = this.props.current_user.user_id;
+
+        let url = this.state.is_sponsor? `sponsoring`:`sponsored`;
+        url = this.state.category === "stopped"? `stopped_` + url: url;
+        url = `/sponsorships/` + url + `.json`;
+
+        const {page, limit} = this.state;
+        this.setState({
+          isSpin: true
+        })
+        axios.get(url, {
+          params: {
+            id: user_id,
+            page: page,
+            limit: limit,
+          }})
+          .then((result) => {
+              // console.log(result);
+              this.setState({
+                  displayList: result.data.sponsorships,
+                  total: result.data.count,
+                  isSpin: false,
+              })
+          })
+          .catch((error) => {
+              console.log(error);
+              this.setState({
+                  isSpin: false,
+              });
+          });
+        // this.setState({
+        //     sponsors: tempData,
+        //     displayList: tempData,
+        // })
+    }
+
+    //切换页数
+    changePage = (page) => {
+        this.setState({
+          page: page
+        }, ()=>{this.get_sponsors()})
+    };
+
+    // 排序
+    ChangeSoryBy = (e) => {
+        console.log(e.key)
+    };
+
+    changeSearchValue = (e) => {
+        this.setState({
+            search: e.target.value,
+        });
+    };
+
+    menu =()=> (
+        <Menu onClick={this.ChangeSoryBy}>
+            <Menu.Item key="time_order">时间从近到远排序</Menu.Item>
+            <Menu.Item key="reverse_time_order">时间从远到近排序</Menu.Item>
+        </Menu>
+    );
+
+    category_button=(category)=>{
+        const { current_user, user } = this.props;
+        const button_lists =
+          user && current_user && user.login === current_user.login
+          ? [
+              { type: "sponsoring", name: "赞助中" },
+              { type: "stopped", name: "已终止" },
+              { type: "chart", name: "统计图表" },
+            ]
+          : 
+          [];
+    
+          let list = button_lists.map((item, key) => {
+            return (
+              <span key={key} className="pr15">
+                <Button
+                  type={
+                    (category && category === item.type) || (!category && !item.type)
+                      ? "primary"
+                      : "default"
+                  }
+                  ghost={
+                    (category && category === item.type) || (!category && !item.type)
+                  }
+                  value={item.type}
+                  onClick={this.changeCategory}
+                >
+                  {item.name}
+                </Button>
+              </span>
+            );
+          })
+          return list;
+      }
+
+      changeStatus=(check_is_sponsor, e)=>{
+        // const {is_sponsor} = this.state
+        // const new_is_sponsor = is_sponsor === check_is_sponsor ? undefined : check_is_sponsor
+        // this.state.is_sponsor = check_is_sponsor;
+        this.setState({
+          is_sponsor: check_is_sponsor,
+          page: 1,
+        }, ()=>{
+          if(this.state.category === "chart")
+            this.get_chart_data();
+          else
+            this.get_sponsors();
+        });
+      }
+
+      render() {
+        const { current_user, user } = this.props;
+        const { category , is_sponsor, sponsors, displayList, chartsData} = this.state;
+        const {isSpin, total, search, limit, page }= this.state;
+        // console.log(displayList);
+        const sponsorList = displayList && displayList.length > 0 ? 
+        <SponsorList
+            {...this.props}
+            userClass={"w-33"}
+            current_user={current_user}
+            users={displayList}
+            rerender={this.get_sponsors}
+            history={this.props.history}
+        ></SponsorList>
+        : 
+        <Nodata _html={`暂时没有数据`} />
+
+        const chartComponent = <div>
+          <p>七天内赞助{this.state.is_sponsor?"支出":"收入"}图</p>
+          <SponsorBarCharts is_sponsor={this.state.is_sponsor} data={chartsData}></SponsorBarCharts>
+          {/* <p>七天内赞助{this.state.is_sponsor?"支出":"收入"}图</p>
+          <SponsorPieCharts is_sponsor={this.state.is_sponsor}></SponsorPieCharts> */}
+        </div>
+
+        const displayComponent = category==="chart"?chartComponent
+          :
+          sponsorList;
+
+        return (
+          // <div className="list-right boxShandow radius-2" style={{padding:0}}>
+          <Spin spinning={isSpin}>
+            {/* <div className="list-r-operation"> */}
+              {/* <Search
+                placeholder="输入关键字进行搜索"
+                enterButton="搜索"
+                size="large"
+                onSearch={this.get_sponsors}
+                className="list-r-Search"
+                value={search}
+                onChange={this.changeSearchValue}
+              /> */}
+              {/* <div>
+
+                <Popover content={this.menu()} trigger={["click"]} placement="bottom">
+                  <a className="ant-dropdown-link">
+                    <span className="color-blue font-16">
+                      排序 <img src={img_array} alt="" width="10px" />
+                    </span>
+                  </a>
+                </Popover>
+              </div> */}
+            {/* </div> */}
+            <div className="infosType">
+              <div>{this.category_button(category)}</div>
+              {
+                user && current_user && user.login === current_user.login ?
+                <div className="infoStatus">
+                  <span className={is_sponsor === true ? "active" : "" } onClick={(e)=>this.changeStatus(true, e)}>我赞助的</span>
+                  {
+                    !is_sponsor ? (<Divider type={"vertical"} className="statusDivider" ></Divider>):""
+                  }
+                  <span className={is_sponsor === false ? "active" : "" } onClick={(e)=>this.changeStatus(false, e)}>赞助我的</span>
+                </div>
+                :""
+              }
+            </div>
+            {user && current_user && user.login === current_user.login?
+              displayComponent:<Nodata _html={`暂时没有项目`} />
+            }
+            {
+              total && total > limit && category!="chart"?
+              <div className="edu-txt-center pt30 mb30 border-top-grey">
+                <Pagination
+                  simple
+                  defaultCurrent={page}
+                  total={total}
+                  pageSize={limit}
+                  onChange={this.changePage}
+                ></Pagination>
+              </div>
+              : 
+              ""
+            }
+          </Spin>
+          // </div>
+        );
+      }
+};
+
+export default SponsorManagement;
\ No newline at end of file
diff --git a/src/forge/users/sponsor/charts/coinChangeCharts.js b/src/forge/users/sponsor/charts/coinChangeCharts.js
new file mode 100644
index 000000000..b31919881
--- /dev/null
+++ b/src/forge/users/sponsor/charts/coinChangeCharts.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import {XYPlot, VerticalBarSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
+// import DiscreteColorLegend from 'legends/discrete-color-legend';
+import "./style.scss";
+
+// const ONE_DAY = 86400000;
+// const d = new Date().getTime()-ONE_DAY*7;
+
+// const data = [
+//     {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 8},
+//     {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 5},
+//     {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 4},
+//     {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 9},
+//     {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 2},
+//     {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 7},
+//     {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 2},
+// ];
+
+// const data2 = [
+//     {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 2},
+//     {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 3},
+//     {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 1},
+//     {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 5},
+//     {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 4},
+//     {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 0},
+//     {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 2},
+// ];
+
+const ITEMS = [
+    {title: '收入', strokeWidth: 13},
+    {title: '支出', strokeWidth: 13}
+];
+
+class CoinChangeCharts extends Component {
+	constructor(props) {
+    	super(props);
+    	this.state = {
+      		crosshairValues: []
+      };
+      // console.log(this.props);
+  }
+
+  render() {
+    const {chartsData} = this.props;
+    if(chartsData == undefined){
+      return (<div className="App"></div>);
+    }
+    var max = 0;
+    for(var i=0; i<chartsData.income.length; i++){
+      max = Math.max(max, chartsData.income[i].y, chartsData.outcome[i].y);
+    }
+    return (
+      <div className="App">
+        <DiscreteColorLegend height={80} width={1300} items={ITEMS} />
+        <XYPlot xType="ordinal"  height={400} width= {700} yDomain={[-0.5, max]}>
+            <VerticalGridLines />
+            <HorizontalGridLines />
+            <XAxis style={{
+                        line: {stroke: '#ADDDE1'},
+                        ticks: {stroke: '#ADDDE1'},
+                        text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+                }}/>
+            <YAxis style={{
+                    line: {stroke: '#ADDDE1'},
+                    ticks: {stroke: '#ADDDE1'},
+                    text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+            <VerticalBarSeries data={chartsData.income} />
+            <VerticalBarSeries data={chartsData.outcome} />
+
+        </XYPlot>
+      </div>
+    );
+  }
+}
+
+export default CoinChangeCharts;
diff --git a/src/forge/users/sponsor/charts/sponsorBarChart.js b/src/forge/users/sponsor/charts/sponsorBarChart.js
new file mode 100644
index 000000000..90494c688
--- /dev/null
+++ b/src/forge/users/sponsor/charts/sponsorBarChart.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import {XYPlot, VerticalBarSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
+// import DiscreteColorLegend from 'legends/discrete-color-legend';
+import "./style.scss";
+
+const ONE_DAY = 86400000;
+const d = new Date().getTime()-ONE_DAY*7;
+
+const data = [
+    {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 6},
+    {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 3},
+    {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 2},
+    {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 7},
+    {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 0},
+    {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 5},
+    {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 0},
+];
+
+const data2 = [
+    {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 3},
+    {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 4},
+    {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 2},
+    {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 6},
+    {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 5},
+    {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 1},
+    {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 3},
+];
+
+const ITEMS = [
+    {title: '收入', strokeWidth: 13},
+    {title: '支出', strokeWidth: 13}
+];
+
+class SponsorBarCharts extends Component {
+	constructor(props) {
+    	super(props);
+    	this.state = {
+      		crosshairValues: []
+      };
+      console.log(this.props)
+  }
+      
+    componentWillReceiveProps = () => {
+        this.setState({
+            crosshairValues: []
+        })
+    }
+
+  render() {
+    const chartsData = this.props.is_sponsor?this.props.data.outcome:this.props.data.income;
+    var max = 0;
+    for(var i=0; i<chartsData.length; i++){
+      max = Math.max(max, chartsData[i].y);
+    }
+    return (
+      <div className="App">
+        {/* <DiscreteColorLegend height={20} width={1300} items={ITEMS} /> */}
+		<XYPlot animation={true} xType="ordinal"  height={400} width= {700} yDomain={[-0.5, max]}>
+		  	<VerticalGridLines />
+		  	<HorizontalGridLines />
+		  	<XAxis style={{
+                    line: {stroke: '#ADDDE1'},
+                    ticks: {stroke: '#ADDDE1'},
+                    text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<YAxis style={{
+                line: {stroke: '#ADDDE1'},
+                ticks: {stroke: '#ADDDE1'},
+                text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+}           }/>
+		  	<VerticalBarSeries data={chartsData} />
+
+		</XYPlot>
+      </div>
+    );
+  }
+}
+
+export default SponsorBarCharts;
\ No newline at end of file
diff --git a/src/forge/users/sponsor/charts/sponsorPieChart.js b/src/forge/users/sponsor/charts/sponsorPieChart.js
new file mode 100644
index 000000000..82a15f612
--- /dev/null
+++ b/src/forge/users/sponsor/charts/sponsorPieChart.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import {FlexibleXYPlot, RadialChart, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
+// import DiscreteColorLegend from 'legends/discrete-color-legend';
+import "./style.scss";
+
+const data = [
+    {label: "张三", angle: 1},
+    {label: "李四", angle: 2},
+    {label: "王五", angle: 5},
+    {label: "赵六", angle: 3},
+];
+
+const data2 = [
+    {label: "张三", angle: 2},
+    {label: "林磊", angle: 1},
+    {label: "赵辉", angle: 4},
+];
+
+const ITEMS = [
+    {title: '收入', color: 'powderblue', strokeWidth: 13},
+    {title: '支出', color: 'powderblue', strokeWidth: 13}
+];
+
+class SponsorPieCharts extends Component {
+	constructor(props) {
+    	super(props);
+    	this.state = {
+      		crosshairValues: []
+    	};
+      }
+      
+    componentWillReceiveProps = () => {
+        this.setState({
+            crosshairValues: []
+        })
+    }
+
+  render() {
+    const DATA = this.props.is_sponsor?data2:data;
+    // const DATA = [{angle: 1}, {angle: 5}, {angle: 2}]
+
+    return (
+      <div>
+        {/* <DiscreteColorLegend height={20} width={1300} items={ITEMS} /> */}
+		{/* <FlexibleXYPlot height={400} width= {700}> */}
+		  	{/* <VerticalGridLines />
+		  	<HorizontalGridLines />
+		  	<XAxis style={{
+                    line: {stroke: '#ADDDE1'},
+                    ticks: {stroke: '#ADDDE1'},
+                    text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<YAxis style={{
+                line: {stroke: '#ADDDE1'},
+                ticks: {stroke: '#ADDDE1'},
+                text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+}           }/> */}
+            <RadialChart 
+                innerRadius={70}
+                radius={140}
+                showLabels={true}
+                data={DATA} height={400} width= {400}/>
+
+		{/* </FlexibleXYPlot> */}
+      </div>
+    );
+  }
+}
+
+export default SponsorPieCharts;
\ No newline at end of file
diff --git a/src/forge/users/sponsor/charts/style.scss b/src/forge/users/sponsor/charts/style.scss
new file mode 100644
index 000000000..79f09ff3c
--- /dev/null
+++ b/src/forge/users/sponsor/charts/style.scss
@@ -0,0 +1,5 @@
+@import "react-vis/dist/styles/plot.scss";
+@import "react-vis/dist/styles/examples.scss";
+@import "react-vis/dist/styles/legends.scss";
+@import "react-vis/dist/styles/radial-chart.scss";
+@import "react-vis/dist/styles/treemap.scss";
\ No newline at end of file
diff --git a/src/forge/users/sponsor/communityData.js b/src/forge/users/sponsor/communityData.js
new file mode 100644
index 000000000..53d4124c7
--- /dev/null
+++ b/src/forge/users/sponsor/communityData.js
@@ -0,0 +1,133 @@
+import React, { Component } from 'react';
+import {XYPlot, VerticalBarSeries, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
+// import DiscreteColorLegend from 'legends/discrete-color-legend';
+import "./charts/style.scss";
+import "../../Main/list.css";
+import "../../UsersList/list.css";
+import "../../sponsor/sponsor.css";
+import "../new_user.css"
+import axios from "axios";
+import { isSupported } from 'clipboard';
+
+const ITEMS = [
+    {title: '资助者数量', strokeWidth: 13},
+    {title: '受资助人数', strokeWidth: 13},
+];
+
+class SponsorDataCharts extends Component {
+	constructor(props) {
+    	super(props);
+    	this.state = {
+            crosshairValues: [],
+            sponsor: [],
+            sponsored: [],
+            nums: [],
+    	};
+    }
+
+    componentDidMount = () => {
+        this.get_chart_data();
+    }
+
+    get_chart_data = () => {
+        this.setState({
+            isSpin: true
+        })
+
+        let url = `/sponsorships/community_data.json`;
+        axios.get(url)
+        .then((result) => {
+            this.setState({
+                sponsor: result.data.sponsor,
+                sponsored: result.data.sponsored,
+                isSpin: false,
+            })
+        })
+        .catch((error) => {
+            console.log(error);
+            this.setState({
+                isSpin: false,
+            });
+        });
+
+        url = `/wallets/community_data.json`;
+        axios.get(url)
+        .then((result) => {
+            this.setState({
+                nums: result.data,
+                isSpin: false,
+            })
+        })
+        .catch((error) => {
+            console.log(error);
+            this.setState({
+                isSpin: false,
+            });
+        });
+    };
+      
+    componentWillReceiveProps = () => {
+        this.setState({
+            crosshairValues: []
+        })
+    }
+
+  render() {
+    // const DATA = this.props.is_sponsor?data2:data;
+    const {sponsor, sponsored, nums} = this.state;
+    var max1 = 0;
+    for(var i=0; i<sponsor.length; i++){
+      max1 = Math.max(max1, sponsor[i].y, sponsored[i].y);
+    }
+    var max2 = 0;
+    for(var i=0; i<nums.length; i++){
+      max2 = Math.max(max2, nums[i].y);
+    }
+    return (
+      <div className="App">
+        <p className="color-grey-3 font-18 task-hide ">平台资助者/受资助人数</p>
+        <DiscreteColorLegend height={80} width={1300} items={ITEMS} />
+        <XYPlot 
+            animation={true} xType="ordinal"  height={400} width= {700}
+            yDomain={[-0.5, max1]}
+            >
+		  	<VerticalGridLines />
+		  	<HorizontalGridLines />
+		  	<XAxis style={{
+                    line: {stroke: '#ADDDE1'},
+                    ticks: {stroke: '#ADDDE1'},
+                    text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<YAxis style={{
+                line: {stroke: '#ADDDE1'},
+                ticks: {stroke: '#ADDDE1'},
+                text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<LineSeries data={sponsor} />
+            <LineSeries data={sponsored} />
+		</XYPlot>
+        <p className="color-grey-3 font-18 task-hide ">平台资助交易数量</p>
+        <XYPlot 
+            animation={true} xType="ordinal"  height={400} width= {700}
+            yDomain={[-0.5, max2]}
+            >
+		  	<VerticalGridLines />
+		  	<HorizontalGridLines />
+		  	<XAxis style={{
+                    line: {stroke: '#ADDDE1'},
+                    ticks: {stroke: '#ADDDE1'},
+                    text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<YAxis style={{
+                line: {stroke: '#ADDDE1'},
+                ticks: {stroke: '#ADDDE1'},
+                text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
+            }}/>
+		  	<VerticalBarSeries data={nums} />
+		</XYPlot>
+      </div>
+    );
+  }
+}
+
+export default SponsorDataCharts;
\ No newline at end of file
diff --git a/src/forge/users/sponsor/sponsor_list.js b/src/forge/users/sponsor/sponsor_list.js
new file mode 100644
index 000000000..2e6bb5b2c
--- /dev/null
+++ b/src/forge/users/sponsor/sponsor_list.js
@@ -0,0 +1,103 @@
+import React, { Component } from "react";
+import { getImageUrl } from "educoder";
+import FocusButton from "../../UsersList/focus_button";
+import { Button, message, Popconfirm } from "antd";
+import "../../Main/list.css";
+import "../../UsersList/list.css";
+import "../../sponsor/sponsor.css";
+import "../new_user.css"
+import axios from "axios";
+import { Link } from "react-router-dom";
+class SponsorList extends Component {
+
+    stop_sponsorship = (item, key, e)=>{
+
+        // console.log("before: ", this.state.users);
+        let url = `/sponsorships/${item.id}.json`;
+        axios.delete(url)
+            .then((result) => {
+                console.log(result);
+                // this.props.showNotification("终止成功")
+                if(result && result.data.status == 1){
+                    this.props.showNotification(result.data.message);
+                    this.props.rerender();
+                }
+            })
+            .catch((error) => {
+                console.log(error);
+                this.props.showNotification("失败");
+            })
+    }
+
+    to_sponsor_page = (item, key, e) => {
+        this.props.history.push(`/sponsor/${item.login}`);
+    }
+
+  renderList = (users, userClass, current_user) => {
+
+        if (users && users.length > 0) {
+        return users.map((item, key) => {
+            // console.log(item);
+            return (
+            <div className="p-r-Item" key={key}>
+                {/* <div className="mr10">
+                    <a 
+                        href={`/users/${item.login}`}
+                        className="show-user-link"
+                    >
+                    <img  className="p-r-photo"
+                        src={getImageUrl(`images/${item.image_url}`)}
+                        alt=""
+                    />
+                    </a>
+                </div> */}
+                <Link to={`/users/${item.login}`} className="show-user-link">
+                    <img  className="p-r-photo" src={getImageUrl(`images/${item.image_url}`)} alt="" />
+                </Link>
+                <div className="p-r-Infos">
+                <a  className="p-r-name hide-1 color-grey-3 font-18 task-hide " href={`/users/${item.login}`}>{item && item.username}</a>
+                <div className="mr10">
+                    <span className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{item.amount}硬币</span>
+                    <span className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>累计金额：{item.accumulate}硬币</span>
+                </div>
+                
+                <div className="p-r-about">
+                    <span className="p-r-detail">
+                    <span><label>赞助时间：</label>{item.start_time}&nbsp;-&nbsp;{item.stop_time? item.stop_time:"现在"}</span>
+                    <span><label>{item.visible? "公开":"私有"}</label></span>
+                    </span>
+                </div>
+                </div>
+                <div className="sponsor-item-btn">
+                {item.stop_time?  "":(
+                    <Popconfirm
+                        title="确认终止?"
+                        onConfirm={e => this.stop_sponsorship(item, key, e)}
+                        // onCancel={cancel}
+                        okText="是"
+                        cancelText="否"
+                    >
+                    <Button >终止赞助关系</Button>
+                    </Popconfirm>
+                    )}
+                {!item.stop_time && item.sponsor_id==current_user.user_id?  (
+                <Button className="mt5" onClick={e => this.to_sponsor_page(item, key, e)}>修改赞助</Button>
+                ):""}
+                </div>
+            </div>
+            );
+        });
+        } else{
+            return null;
+        }
+  }
+  render() {
+    const { users, userClass, current_user } = this.props;
+    return (
+    <div className="project-list minH-670">{this.renderList(users, userClass, current_user)}</div>
+      
+    );
+  }
+}
+
+export default SponsorList;
diff --git a/src/forge/users/sponsor/wallet.js b/src/forge/users/sponsor/wallet.js
new file mode 100644
index 000000000..992d8a8d3
--- /dev/null
+++ b/src/forge/users/sponsor/wallet.js
@@ -0,0 +1,272 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Input, Spin, Pagination, Popover, Button, Divider } from "antd";
+
+import axios from "axios";
+import CoinChangeItem from "./CoinChangeItem";
+import Nodata from "../../Nodata";
+import img_array from "../../Images/array.png";
+import CoinChangeCharts from "./charts/coinChangeCharts";
+const Search = Input.Search;
+
+const tempData = [
+    {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: -3, description: "des", reasons: "no reason", to_user: "串", date: "2016年1月5日"}, 
+    {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, 
+    {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"} 
+];
+
+class Wallet extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          page: 1,
+          limit: 10,
+          sort_by: "desc",
+          isSpin: false,
+          coinChangeList: undefined,
+          displayList: undefined,
+          total: undefined,
+          category: "all",
+          balance: 50,
+          saerch: undefined,
+          chartsData: {income:[], outcome:[]},
+        };
+      }
+    
+      componentDidMount = () => {
+        this.get_coin_changes();
+      };
+    
+      componentDidUpdate = () => {
+        // this.get_coin_changes()
+      };
+
+      componentWillReceiveProps = () => {
+        if (this.props.current_user)
+          this.get_coin_changes();
+      }
+
+      get_chart_data = () => {
+        this.setState({
+          isSpin: true
+        })
+
+        let url = `/wallets/balance_chart.json`;
+        const {current_user} = this.props;
+        let user_id = current_user && current_user.user_id;
+        if (current_user){
+          axios.get(url, {
+            params: {
+              id: user_id, 
+            }})
+            .then((result) => {
+                this.setState({
+                    chartsData: result.data,
+                    isSpin: false,
+                })
+            })
+            .catch((error) => {
+                console.log(error);
+                this.setState({
+                    isSpin: false,
+                });
+            });
+        }
+      };
+    
+      get_coin_changes = () => {
+        this.setState({
+          isSpin: true
+        })
+
+        let url = `/wallets/coin_changes.json`;
+        const {category, sort_by, page, limit} = this.state;
+        const {current_user} = this.props;
+        let user_id = current_user && current_user.user_id;
+        if (current_user){
+          axios.get(url, {
+            params: {
+              id: user_id, 
+              category: category,
+              sort_direction: sort_by,
+              page: page,
+              limit: limit,
+            }})
+            .then((result) => {
+                // console.log(result);
+                this.setState({
+                    coinChangeList: result.data.coin_changes,
+                    displayList: result.data.coin_changes,
+                    total: result.data.count,
+                    balance: result.data.balance,
+                    isSpin: false,
+                })
+            })
+            .catch((error) => {
+                console.log(error);
+                this.setState({
+                    isSpin: false,
+                });
+            });
+        }
+      };
+
+      changeCategory = (cate) => {
+        if(cate.target.value == "charts"){
+          // console.log("charts");
+          this.setState({
+            category: cate.target.value,
+            page: 1,
+          }, ()=> {this.get_chart_data();});
+          return ;
+        }
+        else{
+          this.setState({
+            category: cate.target.value,
+            page: 1,
+          }, ()=> {this.get_coin_changes();});
+        }
+      };
+
+      //切换页数
+      changePage = (page) => {
+        this.setState({
+          page: page
+        }, ()=>{this.get_coin_changes();})
+      };
+    
+      // 排序
+      ChangeSoryBy = (e) => {
+        this.setState({
+          sort_by: e.key,
+          page: 1,
+        }, ()=>{this.get_coin_changes();})
+        // this.get_coin_changes();
+        console.log(e.key);
+      };
+    
+      changeSearchValue = (e) => {
+        this.setState({
+          search: e.target.value,
+        });
+      };
+
+      menu =()=> (
+        <Menu onClick={this.ChangeSoryBy}>
+          <Menu.Item key="desc">时间从近到远排序</Menu.Item>
+          <Menu.Item key="asc">时间从远到近排序</Menu.Item>
+        </Menu>
+      );
+    
+      category_button=(category)=>{
+        const { current_user, user } = this.props;
+        const button_lists =
+          user && current_user && user.login === current_user.login
+          ? [
+              { type: "all", name: "所有" },
+              { type: "income", name: "收入" },
+              { type: "outcome", name: "支出" },
+              { type: "charts", name: "查看统计" },
+            ]
+          : 
+          [];
+    
+          let list = button_lists.map((item, key) => {
+            return (
+              <span key={key} className="pr15">
+                <Button
+                  type={
+                    (category && category === item.type) || (!category && !item.type)
+                      ? "primary"
+                      : "default"
+                  }
+                  ghost={
+                    (category && category === item.type) || (!category && !item.type)
+                  }
+                  value={item.type}
+                  onClick={this.changeCategory}
+                >
+                  {item.name}
+                </Button>
+              </span>
+            );
+          })
+          return list;
+      }
+
+      render() {
+        const { current_user, user } = this.props;
+        const { category , sort_by, chartsData } = this.state;
+        const { displayList, coinChangeList, isSpin, total, search, limit, page, balance} = this.state;
+
+        const coinChangeItem = displayList && displayList.length > 0 ?
+          <CoinChangeItem
+            {...this.props}
+            {...this.state}
+            coinChanges={displayList}
+          ></CoinChangeItem>:
+          <Nodata _html={`暂时没有项目`} />;
+
+        const displayComponent = 
+          category === "charts"? <CoinChangeCharts chartsData={chartsData}></CoinChangeCharts>
+          :
+          coinChangeItem;
+        
+        return (
+          <Spin spinning={isSpin}>
+            <div className="list-r-operation">
+              {/* <Search
+                placeholder="输入关键字进行搜索"
+                enterButton="搜索"
+                size="large"
+                onSearch={this.get_coin_changes}
+                className="list-r-Search"
+                value={search}
+                onChange={this.changeSearchValue}
+              /> */}
+              <div>
+
+                <Popover content={this.menu()} trigger={["click"]} placement="bottom">
+                  <a className="ant-dropdown-link">
+                    <span className="color-blue font-16">
+                      排序 <img src={img_array} alt="" width="10px" />
+                    </span>
+                  </a>
+                </Popover>
+              </div>
+            </div>
+            <div className="infosType">余额：{balance}</div>
+            <div className="infosType">
+              <div>{this.category_button(category)}</div>
+
+            </div>
+            {user && current_user && user.login === current_user.login? 
+            displayComponent
+            : 
+            <Nodata _html={`暂时没有项目`} />
+            }
+            {
+              total && total > limit && category != "charts"?
+              <div className="edu-txt-center pt30 mb30 border-top-grey">
+                <Pagination
+                  simple
+                  defaultCurrent={page}
+                  total={total}
+                  pageSize={limit}
+                  onChange={this.changePage}
+                ></Pagination>
+              </div>
+              : 
+              ""
+            }
+          </Spin>
+        );
+      }
+}
+export default Wallet;
diff --git a/src/modules/comment/CommentsHOC.js b/src/modules/comment/CommentsHOC.js
index 6a9419eae..26099493f 100644
--- a/src/modules/comment/CommentsHOC.js
+++ b/src/modules/comment/CommentsHOC.js
@@ -307,20 +307,18 @@ export function commentHOC(WrappedComponent) {
 						this.setState({ newComments })
 					}
 				}
-				console.log(response)
 			}).catch((error) => {
 				console.log(error)
 			})
 		}
 
 		rewardCode(parrentComment, childComment, amount) {
-			const { challenge, shixun, showSnackbar } = this.props;
+			const { showSnackbar } = this.props;
 			let handleComment = parrentComment
 			if (childComment) {
 				handleComment = childComment;
 			}
 			let handleCommentId = handleComment.id;
-			// const url = `/api/v1/discusses/${handleCommentId}/reward_code`
 			const url = `/discusses/${handleCommentId}/reward_code.json`
 
 			axios.post(url, {
@@ -380,7 +378,6 @@ export function commentHOC(WrappedComponent) {
 						comments: newComments
 					})
 				}
-				console.log(response)
 			}).catch((error) => {
 				console.log(error)
 			})
@@ -421,7 +418,6 @@ export function commentHOC(WrappedComponent) {
 						}
 					}
 				})
-				console.log(response)
 			}).catch((error) => {
 				console.log(error)
 			})
diff --git a/src/modules/courses/common/button/CheckAllGroup.js b/src/modules/courses/common/button/CheckAllGroup.js
index 51840826d..4414bf2b0 100644
--- a/src/modules/courses/common/button/CheckAllGroup.js
+++ b/src/modules/courses/common/button/CheckAllGroup.js
@@ -40,7 +40,6 @@ class CheckAllGroup extends Component{
       })
       this.props.onChange && this.props.onChange(checkedValues, true);
     }
-    console.log(checkedValues, arguments)
   }
 
   render() {
diff --git a/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentsMd.js b/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentsMd.js
index 0cae1e2a6..81f34c8fe 100644
--- a/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentsMd.js
+++ b/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentsMd.js
@@ -36,7 +36,6 @@ class CompetitionContentsMd extends Component{
 				chart_rules.rule_contents.map((items,keys)=>{
 
 					if(parseInt(this.props.tabkey)===items.competition_stage_id){
-						console.log(items)
 						this.contentMdRef.current.setValue(items.content);
 						this.setState({
 							contentFileList:undefined,
@@ -110,7 +109,6 @@ class CompetitionContentsMd extends Component{
 				if (response.data) {
 					const { status } = response.data;
 					if (status == 0) {
-						console.log('--- success')
 						this.props.showNotification(response.data.message);
 						this.setState((state) => {
 							const index = state[stateName].indexOf(file);
diff --git a/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentspdfChild/Bankcardnumberverification.js b/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentspdfChild/Bankcardnumberverification.js
index 6c4cf72a8..6c31051f7 100644
--- a/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentspdfChild/Bankcardnumberverification.js
+++ b/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentspdfChild/Bankcardnumberverification.js
@@ -35,7 +35,6 @@ class Bankcardnumberverification extends Component {
 		} catch (e) {
 
 		}
-		console.log(this.props.bank_account);
 
 		//初始化值
 		if (this.props.bank_account) {
@@ -147,7 +146,6 @@ class Bankcardnumberverification extends Component {
 
 	render() {
 		const { getFieldDecorator } = this.props.form;
-		const { updating, seconds, secondsFlag, basicInfo, phonebool, emailbool, certification, formationdata, bank_account_editable, leader, bank_account } = this.state
 		return (
 			<div>
 				<div className="flexdirections mt36">
diff --git a/src/modules/courses/coursesPublic/NoneData.js b/src/modules/courses/coursesPublic/NoneData.js
index 6f0422f67..17c53de73 100644
--- a/src/modules/courses/coursesPublic/NoneData.js
+++ b/src/modules/courses/coursesPublic/NoneData.js
@@ -24,7 +24,7 @@ class NoneData extends Component{
           `}
         </style>
         <img className="edu-nodata-img mb20" src={getUrl("/images/educoder/nodata.png")}/>
-        <p className="edu-nodata-p mb20">{searchtypes===true?"抱歉没有您要搜索的内容，请换个词语试试看":"暂时还没有相关数据哦!"}</p>
+        <p className="edu-nodata-p mb20">{searchtypes===true?"抱歉没有您要搜索的内容，请换个词语试试看":"暂时还没有相关数据!"}</p>
       </div>
     )
   }
diff --git a/src/modules/page/layers/ImageLayerOfCommentHOC.js b/src/modules/page/layers/ImageLayerOfCommentHOC.js
index c7810a466..a2482612f 100644
--- a/src/modules/page/layers/ImageLayerOfCommentHOC.js
+++ b/src/modules/page/layers/ImageLayerOfCommentHOC.js
@@ -7,8 +7,6 @@ export function ImageLayerOfCommentHOC(options = {}) {
     return class Wrapper extends Component {
       constructor(props) {
         super(props);
-
-
         this.state = {
           showImage: false,
           imageSrc: ''
@@ -37,7 +35,6 @@ export function ImageLayerOfCommentHOC(options = {}) {
 
       componentDidMount() {
         this.props.wrappedComponentRef && this.props.wrappedComponentRef(this.refs['wrappedComponentRef'])
-        
         setTimeout(() => { 
           $(options.parentSelector || ".commentsDelegateParent")
             .delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img", "click", this.onDelegateClick);
@@ -69,13 +66,11 @@ export function ImageLayerOfCommentHOC(options = {}) {
         }
       }
 
-
       render() {
         this.MdifHasAnchorJustScorll();
         return (
           <React.Fragment>
             <ImageLayer {...this.state} onImageLayerClose={this.onImageLayerClose}></ImageLayer>
-
             <WrappedComponent {...this.props} ref="wrappedComponentRef">
             </WrappedComponent>
           </React.Fragment>
diff --git a/src/modules/page/layers/TaskResultLayer.css b/src/modules/page/layers/TaskResultLayer.css
index 70653ee15..38ae0bbc1 100644
--- a/src/modules/page/layers/TaskResultLayer.css
+++ b/src/modules/page/layers/TaskResultLayer.css
@@ -1,156 +1,149 @@
 .taskResultLayer {
-	color: #666666;
-    z-index: 99999999999999;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background:rgba(0,0,0,0.8);
-    top: 0px;
-    overflow: hidden;
+  color: #666666;
+  z-index: 99999999999999;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.8);
+  top: 0px;
+  overflow: hidden;
+}
+.taskResultLayer .closeIcon {
+  position: absolute;
+  right: 100px;
+  top: 46px;
+  font-size: 28px;
+  z-index: 999999;
+  color: rgb(255, 255, 255, 0.7);
+  cursor: pointer;
+}
+.taskResultLayer .closeIcon:hover {
+  color: #4cacff;
+}
+.taskResultLayer .expGold {
+  color: #b27919;
+}
+.taskResultLayer .rateLabel {
+  color: #fff;
+  font-size: 14px;
+}
+.taskResultLayer .rc-rate-star {
+  font-size: 24px;
+  color: rgb(192, 192, 192);
+}
+.taskResultLayer .rc-rate-star:nth-child(5) {
+  margin-right: 0px;
 }
-    .taskResultLayer .closeIcon{
-        position: absolute;
-        right: 100px;
-        top: 46px;
-        font-size: 28px;
-        z-index: 999999;
-        color: rgb(255,255,255,0.7);
-        cursor: pointer;
-    }
-    .taskResultLayer .closeIcon:hover {
-        color: #4CACFF;
-    }
-    .taskResultLayer .expGold {
-        color: #b27919 ;
-    }
-    .taskResultLayer .rateLabel {
-        color: #fff ;
-        font-size: 14px;
-    }
-    .taskResultLayer .rc-rate-star {
-        font-size: 24px;
-        color: rgb(192, 192, 192);
-    }
-    .taskResultLayer .rc-rate-star:nth-child(5) {
-        margin-right: 0px;
-    }
 
 /*  ImageLayer -----------------  Start */
-.passContent{
-    justify-content: center;
-    align-items: center;
-    display: -webkit-flex;
-    height: 100%;
-    text-align: center;
-    position: absolute;
-    width:100%;
-    z-index: 4;
+.passContent {
+  justify-content: center;
+  align-items: center;
+  display: -webkit-flex;
+  height: 100%;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  z-index: 4;
 }
-.closePanel{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 5;
+.closePanel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
 }
-.passImg{
-    max-width: 86%;
-    max-height: 100%;
-    user-select: none;
-    min-width: 300px;
+.passImg {
+  max-width: 86%;
+  max-height: 100%;
+  user-select: none;
+  min-width: 300px;
 }
 /*  ImageLayer -----------------  End */
-
-.passTaskContent{
-    width: 652px;
-    height:100%;
-    margin:0px auto;
-    margin-top: 4%;
+.passTaskContent {
+  width: 652px;
+  height: 100%;
+  margin: 0px auto;
+  margin-top: 4%;
 }
-.passTaskImg{
-    position: absolute;
-    z-index: 2;
-    user-select: none;
+.passTaskImg {
+  position: absolute;
+  z-index: 2;
+  user-select: none;
 }
-
-.winpPerson{
-    position: absolute;
-    width: 100%;
-    z-index: 3;
-    color: #D1A448;
-    text-align: center;
-    margin-top:304px;
-    font-size: 18px;
+.winpPerson {
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+  color: #d1a448;
+  text-align: center;
+  margin-top: 304px;
+  font-size: 18px;
 }
-.winPanel{
-    position: absolute;
-    width: 308px;
-    z-index: 5;
-    height: 356px;
-    border-radius: 10px;
-    margin:0px auto;
-    top:435px;
-    left: 50%;
-    margin-left: -154px;
-    text-align: center;
+.winPanel {
+  position: absolute;
+  width: 308px;
+  z-index: 5;
+  height: 356px;
+  border-radius: 10px;
+  margin: 0px auto;
+  top: 435px;
+  left: 50%;
+  margin-left: -154px;
+  text-align: center;
 }
-.inlines{
-    display: inline-block;
-    width: auto;
-    line-height: 26px;
-    font-size: 16px;
+.inlines {
+  display: inline-block;
+  width: auto;
+  line-height: 26px;
+  font-size: 16px;
 }
 .inline.exp {
-    margin-left: 18px;
+  margin-left: 18px;
 }
-    /*.inline img{*/
-        /*margin-right: 8px;*/
-    /*}*/
-.goldring{
-    margin-right: 8px;
-    width: 17px;
-    height: 17px;
-    border-radius: 50%;
-    background-color: #FFD633;
-    display: block;
-    float: left;
-    margin-top: 5px;
+.goldring {
+  margin-right: 8px;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background-color: #ffd633;
+  display: block;
+  float: left;
+  margin-top: 5px;
 }
-.passNext{
-    width:120px;
-    height:30px;
-    line-height:30px;
-    border-radius: 2px;
-    display: block;
-    background-color:#CCC;
-    color:#fff!important;
-    margin: 0px auto;
+.passNext {
+  width: 120px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 2px;
+  display: block;
+  background-color: #ccc;
+  color: #fff !important;
+  margin: 0px auto;
 }
-.passed{
-    width:120px;
-    height:30px;
-    line-height:30px;
-    border-radius: 2px;
-    display: block;
-    color:#fff!important;
-    margin: 0px auto;
-    margin-top: 12px;
-    background-color: #CCCCCC;
+.passed {
+  width: 120px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 2px;
+  display: block;
+  color: #fff !important;
+  margin: 0px auto;
+  margin-top: 12px;
+  background-color: #cccccc;
 }
 .passed.stared {
-    background-color:#4CACFF;
-    opacity: 0.8;
+  background-color: #4cacff;
+  opacity: 0.8;
 }
 .passed.stared:hover {
-    opacity: 1;
+  opacity: 1;
 }
-
-.vertical4{
-    vertical-align: -4px;
+.vertical4 {
+  vertical-align: -4px;
+}
+.ImageLayerbutton {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  z-index: 10;
 }
-
-.ImageLayerbutton{
-    position: absolute;
-    top: 0px;
-    right: 10px;
-    z-index: 10;
-}
\ No newline at end of file
diff --git a/src/modules/tpm/challengesnew/TPMevaluation.js b/src/modules/tpm/challengesnew/TPMevaluation.js
index 901d39976..499cedd2c 100644
--- a/src/modules/tpm/challengesnew/TPMevaluation.js
+++ b/src/modules/tpm/challengesnew/TPMevaluation.js
@@ -580,7 +580,7 @@ export default class TPMevaluation extends Component {
 			}else{
 				let sum=parseInt(100/newevaluationlist.length);
 				for(var i=0; i<newevaluationlist.length;i++){
-					if(i+1!=newevaluationlist.length){
+					if(i+1 !== newevaluationlist.length){
 						newevaluationlist[i].score=sum
 					}else{
 						newevaluationlist[i].score=sum+100%newevaluationlist.length
diff --git a/src/modules/user/LCCountDownButton.js b/src/modules/user/LCCountDownButton.js
index da379471a..cce1db233 100644
--- a/src/modules/user/LCCountDownButton.js
+++ b/src/modules/user/LCCountDownButton.js
@@ -60,7 +60,7 @@ export default class LCCountDownButton extends Component {
         const {id,changeWithCount} = this.props;
         for(var i = 0 ; i<timeRecodes.length ; i ++){
             let obj = timeRecodes[i];
-            if (obj.id == id){
+            if (obj.id === id){
                 let liveTime = Date.now() - obj.startTime
                 if (liveTime < obj.deathCount * 1000){
                     //避免闪动
diff --git a/src/modules/user/LoginRegisterComponent.js b/src/modules/user/LoginRegisterComponent.js
index db369458b..8dc05405e 100644
--- a/src/modules/user/LoginRegisterComponent.js
+++ b/src/modules/user/LoginRegisterComponent.js
@@ -475,10 +475,12 @@ class LoginRegisterComponent extends Component {
 
         if (this.state.codes === undefined || this.state.codes == ""||this.state.codes.length===0) {
             // this.openNotification(`请输入验证码`,2);
-            this.setState({
-                Phonenumberisnotcosyzm:"验证码不能为空",
-            })
-            return
+            /*****
+            // this.setState({
+            //     Phonenumberisnotcosyzm:"验证码不能为空",
+            // })
+            // return
+             ******/
         } else if (this.state.passwords === undefined || this.state.passwords == "" ||this.state.passwords.length===0) {
             this.setState({
                 Phonenumberisnotcosymmm:"密码不能为空",
@@ -503,16 +505,18 @@ class LoginRegisterComponent extends Component {
         if(this.props.weixinlogin){
             url= '/weapps/register.json';
         }else{
-            url = "/accounts/register.json";
+            url = "/accounts/remote_register.json";
         }
 
         axios.post(url, {
-            login: this.state.logins,
+            // login: this.state.logins,
+            email: this.state.logins,
             password: this.state.passwords,
-            code: this.state.codes,
+            username: this.state.codes,
+            platform: "forge"
         }).then((result) => {
             if(result){
-                if(result.data.status===-2){
+                if(result.data.status!=0){
                     if(result.data.message==="验证码不正确"){
                         this.setState({
                             Phonenumberisnotcosyzm:"验证码不正确",
@@ -1181,12 +1185,12 @@ class LoginRegisterComponent extends Component {
                                 onfocus="this.removeAttribute('readonly')" style={{
                                   width:'210px',
                                   height:'38px',
-                              }} placeholder="请输入验证码"
+                              }} placeholder="请输入用户名"
                                 onChange={this.codesonChange}
                                 value={codes}
                               >
                               </Input>
-                              {
+                              {/* {
                                   getverificationcodes === undefined ?
                                     <Button className=" ml5 font-14" disabled style={{"width": "120px","text-align":"center", "height": "45px",}}
                                             size={"large"}>重新发送{seconds}s</Button>
@@ -1196,7 +1200,7 @@ class LoginRegisterComponent extends Component {
                                     :
                                     <Button className=" ml5 font-14 " type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
                                             onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
-                              }
+                              } */}
 
                           </div>
                           <div>