'save'

# Conflicts:
#	public/css/iconfont.css
#	public/css/iconfont.js
#	public/css/iconfont.ttf
#	public/css/iconfont.woff
#	public/css/iconfont.woff2

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-2"
+  ],
+  "plugins": [[
+	  "transform-runtime",
+	  {
+	    "helpers": false,
+	    "polyfill": false,
+	    "regenerator": true,
+	    "moduleName": "babel-runtime"
+	  }
+	]]
+}

.idea/workspace.xml

@@ -1,294 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="9830c5da-176a-4c72-a301-9f6ce98c82fe" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/build/LICENSE" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/README.md" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/asset-manifest.json" beforeDir="false" afterPath="$PROJECT_DIR$/build/asset-manifest.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/build/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/service-worker.js" beforeDir="false" afterPath="$PROJECT_DIR$/build/service-worker.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/0.b4e2ef10.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/1.68949f00.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/10.1be71b42.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/100.41f2a409.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/101.8c9ebcb9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/102.ae5e7930.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/103.71e1260c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/104.6010b0d8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/105.d97473e3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/106.a18d9295.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/107.e4fa8da8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/108.cb5fa18c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/109.728021f4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/11.1e6e3f2f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/110.4d60f060.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/111.00847641.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/112.dff32e36.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/113.9321d650.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/114.ab44c57c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/115.16bc2b0d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/116.acb34db4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/117.c12032ae.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/118.06ac0c97.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/119.09fe7ab0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/12.c388554b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/120.712692c0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/121.5542a234.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/122.5434414a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/123.56b5aa50.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/124.4fa3c025.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/125.e90a0e54.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/126.6ac902e8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/127.382109ca.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/128.f5cab6ce.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/129.a97defb5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/13.5f9dd754.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/130.dc6cfef3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/131.e36c51f6.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/132.e86e6598.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/133.cd5b0e41.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/134.a45157f4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/135.219cca2d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/136.792455ab.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/137.d98f1f26.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/138.537d528f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/139.f968f8da.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/14.ae36f994.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/140.d2937c5d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/141.41414563.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/142.085bcaac.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/143.7c7bdefd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/144.2734eeac.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/145.0567a7a7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/146.6f118df0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/147.8ad6802f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/148.1509b466.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/149.5a32ad42.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/15.63726bf5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/150.67b85412.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/151.80c1ff31.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/152.a8ce322f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/153.eb7d58a7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/154.4378c4dc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/155.fd685811.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/156.2b59a7a3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/157.2d1b2b40.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/158.809809fb.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/159.6b94727b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/16.cd292edc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/160.5c01b4fe.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/161.2e3c0cf9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/162.87f4e888.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/163.0a540ffa.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/164.b22433aa.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/165.2670f91b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/166.ba688344.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/167.c636b766.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/168.96ee0643.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/169.59c6e595.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/17.9b37107f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/170.a0e40916.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/171.c5e14617.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/172.aa2c6247.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/173.f234f2ec.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/174.23eb263b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/175.978237cd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/176.6a70c7ca.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/177.babfb8a0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/178.ca78bfb7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/179.d209043e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/18.59166b96.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/180.34e55d7e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/181.dd0e9427.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/182.c133a270.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/183.f43e4007.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/184.3abba332.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/185.c61d56af.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/186.5ca9f085.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/187.99889df3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/188.9a0c959d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/189.98f6f431.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/19.e9122038.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/190.a972b289.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/191.91c8d4dd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/192.09b656bb.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/193.2db797e4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/194.570ec7dc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/195.8bafb8cc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/196.ebf790e4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/197.e98bbe5e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/198.59eec2cd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/199.f7a6cf5d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/2.2225a575.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/20.ea1b83ca.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/200.64c98b62.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/201.4dcc10b4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/202.4e8c6091.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/203.d93d18f4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/204.0919cf31.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/205.1d636166.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/206.5c119f09.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/207.147ba6db.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/208.25081b68.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/209.784c19f9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/21.66ea1441.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/210.ebc5386b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/211.ca304f55.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/212.b5fc6346.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/213.9e5a8f54.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/214.471a7c4b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/215.cf8d392b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/216.8ce08d4e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/217.03e5cde4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/218.c3b4a63d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/219.df96a008.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/22.69d33500.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/220.83a4b3b7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/221.0e7c7b15.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/222.ae23590f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/223.6e1a4ddc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/224.66c696e0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/225.86f6de74.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/226.334eacdf.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/227.fded1c54.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/228.081121a3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/229.fbecdb8f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/23.f3d3a190.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/230.54214923.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/231.78c978ac.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/232.65715f0f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/233.892f3048.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/234.9aa182e7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/235.d81ddb83.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/236.69cf4cf6.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/237.71ab4f1f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/238.8572225b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/239.fcae5847.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/24.2f9ea72c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/240.e2238e45.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/241.83f72690.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/242.d3cb57dd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/243.99af0ef6.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/244.38603408.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/245.2d35733a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/246.e8bec9f4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/247.c9b742e0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/248.9f3a7f5e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/249.a235bfb8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/25.3253bb14.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/250.89a0ec2e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/251.f94f4795.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/252.614475d7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/253.16b76954.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/254.64d033a9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/255.d2823d40.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/256.1eca44ce.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/257.7dd534ae.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/258.03522780.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/259.073dfc4a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/26.9902b511.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/260.35044602.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/261.617c2c29.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/262.031490eb.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/263.0713aea5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/264.72a7fa9b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/265.8136f3c3.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/266.5c84b920.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/267.56ebb248.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/268.21a4574f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/269.28226efe.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/27.4304d4c5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/270.c5d4fa4b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/271.78c89e20.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/272.c46f7455.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/273.aa76ad67.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/274.42a38d5c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/275.eab35d6d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/276.ba152567.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/277.8ad1fd18.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/278.82ce41b4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/279.92f86639.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/28.3836fc1f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/280.d787fd18.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/281.8bdfd9de.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/282.2f9ff948.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/283.40367bdd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/29.b7147766.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/3.31787e19.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/30.a574d03f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/31.df24e028.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/32.c4d7bbea.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/33.a4469f83.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/34.a525a713.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/35.991c6b3a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/36.ca30f366.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/37.b67239f9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/38.d6220035.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/39.8bbe7e4b.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/4.3c8412d9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/42.b16613be.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/46.41f6ac73.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/47.b0fb496a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/48.0f00b572.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/49.8b9d29ee.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/5.2b2c8a26.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/50.b42a5752.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/51.37761187.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/52.550fc073.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/53.86605c6d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/54.e91a419f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/55.c6646d9f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/56.b701b846.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/57.7796d2c0.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/58.865fc1eb.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/59.b58d70cd.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/6.625bd454.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/60.f785cede.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/61.f63d91e7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/62.b83b97dc.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/63.5d9d4d43.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/64.d1514b70.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/65.67458d6c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/66.ab5a4b68.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/67.24cbd43e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/68.26be36d2.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/69.d34e03a8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/7.45c119ae.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/70.71f3f5e9.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/71.3e0e22a5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/72.58d589d7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/73.38beeb0e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/74.f0ac65fe.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/75.9f0bfe3e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/76.7bf08411.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/77.cc859ed7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/78.1e7b969f.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/79.d68cadb4.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/8.ce3f8347.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/80.3633279d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/81.13af2c38.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/82.dfb68271.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/83.a2cc3c51.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/84.284aff4a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/85.41f3159a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/86.4e688009.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/87.90d54fab.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/88.03076a1d.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/89.0d2f2ee8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/9.562a7877.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/90.3b84e0a5.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/91.ad92675e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/92.6abb40b8.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/93.e5666aea.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/94.149f3765.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/95.36a069b7.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/96.c09dc12e.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/97.8ff3af84.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/98.cd3f899c.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/99.07307f5a.chunk.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/build/static/js/main.dda56577.js" beforeDir="false" />
+    <list default="true" id="9830c5da-176a-4c72-a301-9f6ce98c82fe" name="Default Changelist" comment="色值修改">
+      <change beforePath="$PROJECT_DIR$/src/forge/Branch/branch.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Branch/branch.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Component/Component.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Component/Component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Main/Index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Main/Index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Main/list.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Main/list.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Main/sub/sub.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Main/sub/sub.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Wiki/Index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Wiki/Index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Wiki/components/Login/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Wiki/components/Login/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/Wiki/components/ModalFun/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/Wiki/components/ModalFun/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/forge/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/forge/css/index.css" afterDir="false" />
     </list>
-    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -525,6 +251,7 @@
     <option name="width" value="1440" />
     <option name="height" value="900" />
   </component>
+  <component name="ProjectId" id="1xHteQnKsYu4IEUm8tEsYIEEC5E" />
   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectView">
     <navigator proportions="" version="1">
@@ -550,18 +277,30 @@
       <pane id="Scope" />
     </panes>
   </component>
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
   <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/forge/Main" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.path.for.package.eslint" value="project" />
-    <property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
+    <property name="node.js.path.for.package.tslint" value="project" />
+    <property name="node.js.selected.package.eslint" value="E:\file\forgeplus-react\node_modules\eslint" />
+    <property name="node.js.selected.package.tslint" value="(autodetect)" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="ts.external.directory.path" value="$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external" />
+    <property name="vue.rearranger.settings.migration" value="true" />
   </component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="E:\file\forgeplus-react\src\forge\Main" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$" />
       <recent name="$PROJECT_DIR$/src/modules/user/usersInfo" />
@@ -576,18 +315,7 @@
       </list>
     </option>
   </component>
-  <component name="RunDashboard">
-    <option name="ruleStates">
-      <list>
-        <RuleState>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
-        </RuleState>
-        <RuleState>
-          <option name="name" value="StatusDashboardGroupingRule" />
-        </RuleState>
-      </list>
-    </option>
-  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="SpringUtil" SPRING_PRE_LOADER_OPTION="true" />
   <component name="SvnConfiguration">
     <configuration />
@@ -636,6 +364,8 @@
       <workItem from="1587870344748" duration="138000" />
       <workItem from="1587882941476" duration="4365000" />
       <workItem from="1587891008299" duration="390000" />
+      <workItem from="1630023942152" duration="459000" />
+      <workItem from="1630024424307" duration="17223000" />
     </task>
     <servers />
   </component>
@@ -668,7 +398,7 @@
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
+    <option name="version" value="3" />
   </component>
   <component name="Vcs.Log.History.Properties">
     <option name="COLUMN_ORDER">
@@ -685,22 +415,7 @@
       <map>
         <entry key="MAIN">
           <value>
-            <State>
-              <option name="RECENTLY_FILTERED_USER_GROUPS">
-                <collection />
-              </option>
-              <option name="RECENTLY_FILTERED_BRANCH_GROUPS">
-                <collection />
-              </option>
-              <option name="COLUMN_ORDER">
-                <list>
-                  <option value="0" />
-                  <option value="1" />
-                  <option value="2" />
-                  <option value="3" />
-                </list>
-              </option>
-            </State>
+            <State />
           </value>
         </entry>
       </map>
@@ -719,6 +434,19 @@
         </entry>
       </map>
     </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/forge/Main/CoderDepot.jsx</url>
+          <line>409</line>
+          <properties lambdaOrdinal="-1" />
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
   </component>
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/src/modules/user/usersInfo/usersInfo.css">

README.md

@@ -0,0 +1,16 @@
+<h3>前端react环境安装：</h3>
+<p>1、 安装node v6.9.x；此安装包含了node和npm。</p>
+<p>2、 安装cnpm（命令行）： npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
+<p>3、 安装依赖的js库（public/react目录下<即项目package.json所在目录>，开启命令行）： cnpm install</p>
+<p>4、 如果你的ruby服务使用的是3000端口，则需要在package.json中修改"port"参数的值</p>
+<p>5、 启动服务（命令行-目录同3）： npm start</p>
+<p>6、 build初始化 npm run build</p>
+
+
+<h3>分支信息：</h3>
+<p>相关代码提交到对应分支，能上线的代码先提交到develop分支上测试版，测试通过后合并提交到master分支上线正式版</p>
+<p>master:开发环境（正式环境）</p>
+<p>develop:测试环境</p>
+<p>dev_local:本地版本</p>
+<p>dev_chain:含有区块链相关内容的分支</p>
+<p>PS:新增加的需求功能先新建新分支开发，在测试版测试没问题后再分别合并到develop和master分支</p>

config/webpack.config.prod.js

@@ -17,16 +17,7 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const paths = require("./paths");
 const getClientEnvironment = require("./env");
 
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
 let publicPath = "/react/build/";
-// let nodeEnv = process.env.NODE_ENV
-// if (nodeEnv === 'testBuild') {
-// 	publicPath = 'https://testforgeplus.trustie.net/react/build/';
-// }
-// if (nodeEnv === 'production') {
-// 	publicPath = 'https://forgeplus.trustie.net/react/build/';
-// }
 const publicUrl = publicPath.slice(0, -1);
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
 const env = getClientEnvironment(publicPath);
@@ -141,7 +132,6 @@ module.exports = {
               name: "static/media/[name].[hash:8].[ext]",
             },
           },
-          // Process JS with Babel.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
@@ -161,10 +151,8 @@ module.exports = {
               ],
             },
           },
-
           {
             test: /\.css$/,
-
             use: [
               {
                 loader: MiniCssExtractPlugin.loader,

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "educoder",
-  "version": "0.1.0",
+  "name": "forge",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@monaco-editor/react": "^2.3.0",
@@ -10,11 +10,11 @@
     "array-flatten": "^2.1.2",
     "autoprefixer": "7.1.6",
     "axios": "^0.18.1",
-    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-react-app": "^3.1.1",
     "babel-runtime": "6.26.0",
     "bizcharts": "^3.5.8",
@@ -27,9 +27,11 @@
     "codemirror": "^5.53.0",
     "connected-react-router": "4.4.1",
     "css-loader": "^3.5.2",
+    "dompurify": "^2.0.15",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
-    "echarts": "^4.7.0",
+    "echarts": "^4.9.0",
+    "echarts-wordcloud": "^2.0.0",
     "editor.md": "^1.5.0",
     "eslint": "4.10.0",
     "eslint-config-react-app": "^2.1.0",
@@ -46,6 +48,7 @@
     "install": "^0.12.2",
     "jest": "20.0.4",
     "js-base64": "^2.5.2",
+    "js2wordcloud": "^1.1.12",
     "katex": "^0.11.1",
     "lodash": "^4.17.15",
     "loglevel": "^1.6.8",
@@ -62,7 +65,7 @@
     "postcss-loader": "2.0.8",
     "promise": "8.0.1",
     "prop-types": "^15.6.1",
-    "qrcode.react": "^1.0.0",
+    "qrcode.react": "^1.0.1",
     "qs": "^6.9.3",
     "quill": "^1.3.7",
     "quill-delta-to-html": "^0.11.0",
@@ -92,6 +95,7 @@
     "react-resizable": "^1.10.1",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-slick": "^0.28.1",
     "react-split-pane": "^0.1.91",
     "react-url-query": "^1.5.0",
     "react-zmage": "^0.8.5-beta.31",
@@ -102,6 +106,7 @@
     "scroll-into-view": "^1.14.2",
     "showdown": "^1.9.1",
     "showdown-katex": "^0.8.0",
+    "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "style-loader": "0.19.0",
     "styled-components": "^4.4.1",
@@ -111,7 +116,9 @@
     "webpack-dev-server": "^3.10.3",
     "webpack-manifest-plugin": "^2.2.0",
     "whatwg-fetch": "2.0.3",
-    "wrap-md-editor": "^0.2.20"
+    "wrap-md-editor": "^0.2.20",
+    "xterm": "4.8.1",
+    "xterm-addon-fit": "0.4.0"
   },
   "scripts": {
     "start": "node --max_old_space_size=15360 scripts/start.js",
@@ -182,7 +189,14 @@
   "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-polyfill": "^6.26.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",
@@ -190,6 +204,7 @@
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "purgecss": "^2.1.2",
+    "react-json-view": "^1.21.3",
     "reqwest": "^2.0.5",
     "resize-observer-polyfill": "^1.5.1",
     "terser-webpack-plugin": "^2.3.5",

public/css/edu-all.css

@@ -38,78 +38,6 @@
   box-sizing: border-box;
 }
 
-.head-nav ul#header-nav li {
-  float: left;
-  height: 60px;
-  line-height: 60px;
-  margin-right: 30px;
-  cursor: pointer;
-  position: relative;
-  font-size: 16px
-}
-
-.head-nav ul#header-nav li a {
-  display: block;
-  height: 100%;
-  width: 100%;
-  color: #fff
-}
-
-.head-nav ul#header-nav li a:hover {
-  color: #cccccc;
-}
-
-.head-nav ul#header-nav li:last-child {
-  margin-right: 0px
-}
-
-.head-nav ul#header-nav li.active a {
-  color: #459be5 !important;
-}
-
-.head-nav ul#header-nav li.active p {
-  color: #459be5 !important;
-}
-
-.head-nav ul#header-nav li p:hover {
-  color: #cccccc;
-}
-
-.head-nav ul#header-nav li p {
-  display: block;
-  height: 100%;
-  width: 100%;
-  color: #fff
-}
-
-.head-nav ul#header-nav li.active div ul li a {
-  color: #000 !important;
-}
-
-.head-nav ul#header-nav li.active div ul li a:hover {
-  color: #FFF !important;
-}
-
-.head-nav ul#header-nav li.active ul li a {
-  color: #000 !important;
-}
-
-.head-nav ul#header-nav li.active ul li a:hover {
-  color: #FFF !important;
-}
-
-.head-nav ul#header-nav li.active:after {
-  content: '';
-  position: absolute;
-  left: 0px;
-  top: auto;
-  bottom: 10px;
-  right: auto;
-  height: 2px;
-  width: 14px;
-  background-color: #459be5;
-}
-
 .nav-img {
   position: absolute;
   top: 2px;

public/css/edu-common.css

@@ -114,14 +114,6 @@ a:visited {
   color: #898989;
 }
 
-a:hover {
-  color: #FF7500;
-}
-
-a:hover.fa {
-  color: #FF7500;
-}
-
 input,
 textarea,
 select {

public/css/edu-main.css

@@ -97,10 +97,6 @@ a:visited {
   color: #05101a;
 }
 
-a:hover {
-  color: #459be5;
-}
-
 ol,
 ul,
 li {

public/css/edu-purge.css

@@ -1363,9 +1363,9 @@ a:visited {
   color: #05101a;
 }
 
-a:hover {
-  color: #459be5;
-}
+/*a:hover {*/
+/*  color: #2A61FF!important;*/
+/*}*/
 
 ol,
 ul,
@@ -1473,7 +1473,7 @@ a.edu-txt-w80,
 
 /*隐藏*/
 .none {
-  display: none
+  display: none!important;
 }
 
 .block {
@@ -1609,7 +1609,7 @@ a.decoration {
 }
 
 .mt6 {
-  margin-top: 6px;
+  margin-top: 3px;
 }
 
 .mt7 {
@@ -1753,7 +1753,7 @@ a.decoration {
 }
 
 .mb15 {
-  margin-bottom: 15px;
+  margin-bottom: 15px!important;
 }
 
 .mb16 {
@@ -2325,6 +2325,9 @@ input::-ms-clear {
   background-color: #F5F5F5;
 }
 
+.ant-modal-close{
+  top:8px!important;
+}
 
 .newContainer {
   min-height: 100%;
@@ -2343,7 +2346,6 @@ input::-ms-clear {
 /*中间部分宽度固定为1200*/
 .newMain {
   margin: 0 auto;
-  padding-bottom: 110px;
   min-width: 1200px;
 }
 
@@ -2422,13 +2424,19 @@ input::-ms-clear {
 .color-grey-c {
   color: #ccc !important;
 }
-
+a.hoverLine:hover{
+  text-decoration: underline;
+}
 .color-grey-cd {
   color: #cdcdcd !important;
 }
+.color-grey-d {
+  color: #ddd;
+}
+
 
 .color-grey-9 {
-  color: #999999 !important;
+  color: #333333 !important;
 }
 
 .color-grey-98 {
@@ -2463,33 +2471,24 @@ input::-ms-clear {
 a.color-grey-name:hover,
 a.color-dark:hover,
 a.color-grey-6:hover,
-a.color-grey-3:hover {
-  color: #4cacff !important;
-}
-
-a.color-grey-9:hover,
-a.color-grey-8:hover,
-a.color-grey-c:hover {
-  color: #111C24 !important;
+a.color-grey-3:hover,a.color-ooo span:hover{
+  color: #466AFF !important;
 }
 
 /*蓝色*/
-.color-blue {
+.color-blue, .color-blue-file{
   color: #4CACFF !important;
 }
-/* 绿色 */
-.color-green-file{
-  color: #28BD6C;
+
+.color-blue {
+  color: #2A61FF !important;
 }
+/* 绿色 */
 /*主*/
 .color-blue_4C {
   color: #4CACFF !important;
 }
 
-a.color-blue:hover,
-a.color-blue_4C:hover {
-  color: #459BE6 !important;
-}
 
 /*橙色*/
 .color-orange {
@@ -2658,7 +2657,7 @@ a.color-green:hover {
 
 /*百分比宽度*/
 .width100 {
-  width: 100%;
+  width: 100% !important;
 }
 
 .width89 {
@@ -3407,7 +3406,7 @@ a.user_bluebg_btn {
 }
 
 .cdefault {
-  cursor: default
+  cursor: default!important;
 }
 
 
@@ -3582,42 +3581,6 @@ a.user_bluebg_btn {
   margin-right: 5px;
 }
 
-/*-------------------个人主页：右侧提示区域--------------------------*/
-.-task-sidebar {
-  position: fixed;
-  width: 40px;
-  height: 180px;
-  right: 0;
-  bottom: 80px;
-  z-index: 10;
-}
-
-.-task-sidebar div {
-  height: 40px;
-  line-height: 40px;
-  box-sizing: border-box;
-  width: 40px;
-  background: #4CACFF;
-  color: #fff;
-  font-size: 20px;
-  text-align: center;
-  margin-bottom: 5px;
-  border-radius: 4px;
-}
-
-.-task-sidebar div i {
-  color: #fff;
-}
-
-.-task-sidebar div i:hover {
-  color: #fff !important;
-}
-
-.gotop {
-  background-color: rgba(208, 207, 207, 0.5) !important;
-  padding: 0px !important;
-}
-
 
 /***** loading ******/
 /*****载入中******/
@@ -3942,11 +3905,21 @@ html>body #ajax-indicator {
   max-height: 340px;
 }/*头部导航条样式---2018-03-19--by-cs*/
 
+.privateTag{
+  display: block;
+  padding:0px 6px;
+  border-radius: 12px;
+  border:1px solid #2FC25B;
+  height: 18px;
+  line-height: 18px;
+  font-size: 12px;
+  margin-left: 10px;
+  color: #2FC25B;
+}
 .head-nav {
   text-align: center;
   height: 70px;
   box-sizing: border-box;
-  min-width: 780px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3968,7 +3941,7 @@ html>body #ajax-indicator {
   cursor: pointer;
   position: relative;
   font-size: 16px;
-  padding:0px 20px;
+  padding-right:40px;
 }
 
 .head-nav ul#header-nav li a {
@@ -4105,21 +4078,6 @@ em.vertical-line {
 
 /* 右侧内容宽度变化的话，需要调整posi-search right的值*/
 
-/*底部*/
-.newFooter {
-  max-height: 110px;
-}
-
-.newFooter {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background: #323232;
-  clear: both;
-  min-width: 1200px;
-  z-index: 8;
-  left: 0px;
-}
 
 .footercon {
   border-bottom: 1px solid #47494d;
@@ -6715,4 +6673,19 @@ ul.count_ul li:not(:last-child):after {
 }
 input.ant-input-lg::placeholder{
 font-size: 14px !important;
+}
+p{
+  margin-bottom: 0px!important;
+}
+.toprightNum{
+  position: absolute;
+  right: 0px;
+  top:4px;
+  color: #999;
+}
+.ant-input, .ant-input .ant-input-suffix{
+  background-color: #fff!important;
+}
+.has-error .ant-input{
+  background-color: #FEF1F0!important;
 }

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; }

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN" class="notranslate translated-ltr" translate="no">
 <head>
   <meta charset="utf-8">
   <meta name=”Keywords” Content=”trustie,trustieforge,forge,确实让创建更美好,协同开发平台″>
@@ -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>

src/App.css

@@ -60,12 +60,13 @@ body {
 .ant-progress-textno {
   color: #f5222d;
 }
-
+.CodeMirror pre.CodeMirror-line{
+  font-size: 16px!important;
+}
 /* md多空格 */
 .markdown-body p {
   margin:10px 0px!important;
   font-size: 16px !important;
-  line-height: 2 !important;
   white-space: pre-wrap;
 }
 
@@ -87,6 +88,10 @@ body {
   border-left: 1px solid rgb(221, 221, 221);
   /* 某些情况下，被cm盖住了 */
   z-index: 99;
+  padding:8px 8px 50px;
+}
+.editormd-preview .markdown-body{
+  padding:0px !important;
 }
 
 /* 图片点击放大的场景，隐藏图片链接 */

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';
@@ -23,8 +17,7 @@ import marked from './common/marked';
 import moment from 'moment'
 
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
-
-import history from './history';
+import SiderBar from './forge/Component/SiderBar'
 
 import { SnackbarHOC } from 'educoder'
 import { initAxiosInterceptors } from './AppConfig'
@@ -46,6 +39,11 @@ const Projects = Loadable({
 	loader: () => import('./forge/Index'),
 	loading: Loading,
 })
+//forge安全设置
+const Security = Loadable({
+	loader: () => import('./forge/SecuritySetting/Index'),
+	loading: Loading,
+})
 //forge项目-devOps详情
 const OpsDetail = Loadable({
 	loader: () => import('./forge/DevOps/opsDetail'),
@@ -76,7 +74,23 @@ const OrganizeIndex = Loadable({
 	loader: () => import('./forge/Team/Index'),
 	loading: Loading,
 })
+const EducoderLogin = Loadable({
+	loader: () => import('./modules/login/EducoderLogin'),
+	loading: Loading,
+})
+const Search = Loadable({
+	loader: () => import('./modules/search/'),
+	loading: Loading,
+})
+const WikiPreview = Loadable({
+	loader: () => import('./forge/Wiki/Preview'),
+	loading: Loading,
+})
 
+const ProjectIndex = Loadable({
+	loader: () => import("./forge/Index"),
+	loading: Loading,
+});
 class App extends Component {
 	constructor(props) {
 		super(props);
@@ -102,36 +116,9 @@ class App extends Component {
 			Addcoursestypes: false
 		})
 	};
-	ModalCancelsy = () => {
-		this.setState({
-			mydisplay: false,
-		})
-		window.location.href = "/";
-	};
-	ModalshowCancelsy = () => {
-		this.setState({
-			mydisplay: true,
-		})
-	};
 
-	disableVideoContextMenu = () => {
-		window.$("body").on("mousedown", "video", function (event) {
-			if (event.which === 3) {
-				window.$('video').bind('contextmenu', function () { return false; });
-			} else {
-				window.$('video').unbind('contextmenu');
-			}
-		});
-	}
 	componentDidMount() {
 		document.title = "loading...";
-		this.disableVideoContextMenu();
-		history.listen(() => {
-			this.forceUpdate()
-			const $ = window.$
-			$("html").animate({ scrollTop: $('html').scrollTop() - 0 })
-		});
-
 		initAxiosInterceptors(this.props);
 		this.getAppdata();
 
@@ -209,28 +196,40 @@ class App extends Component {
 	};
 
 	render() {
+		const { mygetHelmetapi } = this.state;
+		let personal = mygetHelmetapi && mygetHelmetapi.personal;
 		return (
 			<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} /> */}
+						<SiderBar />
 						<Router>
 							<Switch>
+								{/* wiki预览 */}
+								<Route path="/projects/:owner/:projectsId/wiki/preview/:projectName/:projectId" render={
+									(props) => {
+										return (<WikiPreview {...this.props} {...props} {...this.state} />)
+									}
+								} />
+
 								{/*项目*/}
 								<Route
-									path={"/projects/:projectId/ops/:opsId/detail"}
+									path={"/projects/:owner/:projectId/devops/:opsId/detail"}
 									render={
 										(props) => {
 											return (<OpsDetail {...this.props} {...props} {...this.state} />)
 										}
 									}>
 								</Route>
+								<Route
+									path={"/settings"}
+									render={
+										(props) => {
+											return (<Security {...this.props} {...props} {...this.state} />)
+										}
+									}>
+								</Route>
 								{/*项目*/}
 								<Route
 									path={"/projects"}
@@ -240,7 +239,14 @@ class App extends Component {
 										}
 									}>
 								</Route>
-								
+								<Route
+									path="/register"
+									render={
+										(props) => {
+											return (<EducoderLogin {...this.props} {...props} {...this.state} />)
+										}
+									}
+								/>
 								{/*403*/}
 								<Route path="/403" component={Shixunauthority} />
 
@@ -248,23 +254,31 @@ class App extends Component {
 								<Route path={"/organize"}
 									render={
 										(props) => {
-											return (<OrganizeIndex {...this.props} {...props} {...this.state} />)
+											return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
 										}
 									}>
 								</Route>
 								{/*404*/}
 								<Route path="/nopage" component={Shixunnopage} />
+
+								{/* 查询 */}
+								<Route path="/search" component={Search} />
+
+
 								{/* 个人主页 */}
 								<Route path="/users/:username"
 									render={
 										(props) => {
 											return (<InfosIndex {...this.props} {...this.state} />)
 										}
-								}></Route>
+									}></Route>
 								<Route exact path="/"
 									render={
 										(props) => (
-											<Projects {...this.props} {...props} {...this.state}></Projects>
+											personal && personal.length > 0 ?
+												<InfosIndex {...this.props} {...props} />
+												:
+												<ProjectIndex {...this.props} {...props} />
 										)
 									}
 								/>

src/AppConfig.js

@@ -2,19 +2,17 @@ import axios from 'axios';
 import { requestProxy } from "./indexEduplus2RequestProxy";
 import { broadcastChannelOnmessage, isDev, queryString } from 'educoder';
 import { notification } from 'antd';
-import cookie from 'react-cookies';
-import './index.css';
-let message501 = false;
 
+import './index.css';
+
+let message501 = false;
 broadcastChannelOnmessage('refreshPage', () => {
-  window.location.reload()
+  window.location.reload();
 })
 
 function locationurl(list) {
-  if (window.location.port === "3007") {
-
-  } else {
-    window.location.href = list
+  if (window.location.port !== "3007") {
+  window.location.href = list
   }
 }
 // TODO 开发期多个身份切换
@@ -26,56 +24,22 @@ if (isDev) {
     parsed = queryString.parse(_search);
   }
   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: '/' });
-  setpostcookie()
-}
-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;
-    if (_params) {
-      let _search = _params.split('?')[1];
-      let _educoder_sessions = _search.split('&')[0].split('=');
-      cookie.save('_educoder_session', _educoder_sessions[1], { domain: '.educoder.net', path: '/' });
-      let autologin_trusties = _search.split('&')[1].split('=');
-      cookie.save('autologin_trustie', autologin_trusties[1], { domain: '.educoder.net', path: '/' });
-    }
-  }
-}
-setpostcookie();
-
+  window.location.search.indexOf('debug=s') !== -1 ? 'student' :
+  window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
+}                 
 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"
+  // 判断网络是否连接
+  initOnlineOfflineListener();
 
-  const requestMap = {};
-  window.setfalseInRequestMap = function (keyName) {
-    requestMap[keyName] = false;
-  }
+  var proxy = "https://testforgeplus.trustie.net";
   //响应前的设置
   axios.interceptors.request.use(
     config => {
-      setpostcookie()
-      clearAllCookie()
-
-      if (config.url.indexOf(proxy) !== -1 || config.url.indexOf(':') !== -1) {
+      if(config.url.indexOf("http") !== -1) {
         return config
       }
-      requestProxy(config)
-
+      requestProxy(config);
       let url = `/api${config.url}`;
 
       if (`${config[0]}` !== `true`) {
@@ -89,18 +53,12 @@ export function initAxiosInterceptors(props) {
         } else {
           config.url = url;
         }
-        setpostcookie();
-      }
-      if (config.url.indexOf('update_file') === -1) {
-        requestMap[config.url] = true;
-
-        window.setTimeout("setfalseInRequestMap('" + config.url + "')", 900)
       }
       return config;
     },
     err => {
       return Promise.reject(err);
-    });
+  });
 
   axios.interceptors.response.use(function (response) {
     if (response === undefined) {
@@ -149,8 +107,6 @@ export function initAxiosInterceptors(props) {
         message501 = false
       }, 2000);
     }
-    requestMap[response.config.url] = false;
-    setpostcookie();
     return response;
   }, function (error) {
     return Promise.reject(error);

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,21 +9,7 @@ class Loading extends Component {
 	}
 
 	render() {
-		// Loading
-		return (
-			<div className="App" style={{ minHeight: '800px', width: "100%" }}>
-				<style>
-					{
-						`
-						 .margintop{
-						   margin-top:20%;
-						 }
-						`
-					}
-				</style>
-				<Spin size="large" className={"margintop"} />
-			</div>
-		);
+		return ""
 	}
 }
 

src/college/colleagecss/colleage.css

@@ -218,7 +218,7 @@ a:hover {
 }
 
 .color-blue {
-  color: #4CACFF;
+  color: #2A61FF;
 }
 
 .color-huang {

src/common/DateUtil.js

@@ -1,4 +1,5 @@
 import moment  from "moment";
+import { number } from "prop-types";
 
 // 处理整点 半点
 // 取传入时间往后的第一个半点
@@ -97,3 +98,40 @@ export function formatDuring(mss){
 	}
   return days + "天" + hours + "小时" + minutes + "分";
 }
+
+/*
+  返回：多久以前
+  backDate：以前的某个日期
+*/
+export function timeAgo(backDate) {
+  try {
+    moment(backDate);
+  } catch (e) {
+    return;
+  }
+  if(typeof backDate ==='number'){
+    backDate=backDate*1000
+  }else{
+    backDate= moment(backDate);
+  }
+  let time = new Date() - backDate;
+  var days = Math.floor(time / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((time % (1000 * 60 * 60)) / 1000);
+  if (time <= 0) {
+    return "刚刚";
+  }
+  if (days) {
+    return days + "天前";
+  }
+  if (hours) {
+    return hours + "小时前";
+  }
+  if (minutes) {
+    return minutes + "分前";
+  }
+  if (seconds) {
+    return seconds + "秒前";
+  }
+}

src/common/UrlTool.js

@@ -11,11 +11,43 @@ export function getImageUrl(path) {
 	// https://www.educoder.net
 	// https://testbdweb.trustie.net
   // const local = 'http://localhost:3000'
-  const local = 'https://testforgeplus.trustie.net/'
+	const local = 'https://testforgeplus.trustie.net';
 	if (isDev) {
 		return `${local}/${path}`
 	}
-	return `/${path}`;
+	return `${path}`;
+}
+
+export function numFormat(num, digits){
+	let d = digits || 1;
+  var si = [
+    { value: 1, symbol: "" },
+    { value: 1E3, symbol: "k" },
+    { value: 1E4, symbol: "W" }
+  ];
+  var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var i;
+  for (i = si.length - 1; i > 0; i--) {
+    if (num >= si[i].value) {
+      break;
+    }
+  }
+  return (num / si[i].value).toFixed(d).replace(rx, "$1") + si[i].symbol;
+}
+
+export function getImage(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}/images/${path}`
+		}
+		return `/${path}`;
+	}else{
+		return path;
+	}
 }
 
 export function getcdnImageUrl(path) {
@@ -147,28 +179,28 @@ export function getmyUrl(geturl) {
 }
 
 export function getUploadActionUrl(path, goTest) {
-	return `${getUrl()}/api/attachments.json?debug=${window._debugType || 'admin'}`;
+	return `${getUrl()}/api/attachments.json${isDev ?`${isDev ?`?debug=${window._debugType || 'admin'}` : ""}` : ""}`;
 }
 
 export function getUploadLogoActionUrl() {
-	return `${getUrl()}/api/resumes/logo.json?debug=${window._debugType || 'admin'}`;
+	return `${getUrl()}/api/resumes/logo.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`;
 }
 
 export function getUploadActionUrltwo(id) {
-	return `${getUrlmys()}/api/shixuns/${id}/upload_data_sets.json?debug=${window._debugType || 'admin'}`
+	return `${getUrlmys()}/api/shixuns/${id}/upload_data_sets.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
 }
 
 export function getUploadActionUrlthree() {
-	return `${getUrlmys()}/api/jupyters/import_with_tpm.json?debug=${window._debugType || 'admin'}`
+	return `${getUrlmys()}/api/jupyters/import_with_tpm.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
 }
 
 export function getupload_git_file(id) {
-	return `${getUrlmys()}/api/shixuns/${id}/upload_git_file.json?debug=${window._debugType || 'admin'}`
+	return `${getUrlmys()}/api/shixuns/${id}/upload_git_file.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
 }
 
 
 export function getUploadActionUrlOfAuth(id) {
-	return `${getUrl()}/api/users/accounts/${id}/auth_attachment.json?debug=${window._debugType || 'admin'}`
+	return `${getUrl()}/api/users/accounts/${id}/auth_attachment.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
 }
 
 export function getRandomNumber(type) {

src/common/components/comment/CommentItem.js

@@ -64,7 +64,7 @@ function CommentItem({
   const commentAvatar = (author) => (
     <img
       className="item-flex flex-image"
-      src={author.image_url ? getImageUrl(`images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
+      src={author.image_url ? getImageUrl(`/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
       alt=""
     />
   );

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('');
 }
 

src/common/educoder.js

@@ -3,8 +3,8 @@
 // export { default as OrderStateUtil } from          '../routes/Order/components/OrderStateUtil';
 
 export {
-	getUploadLogoActionUrl as getUploadLogoActionUrl,
-	getImageUrl as getImageUrl, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl
+	getUploadLogoActionUrl as getUploadLogoActionUrl,numFormat as numFormat,
+	getImageUrl as getImageUrl,getImage as getImage, getmyUrl as getmyUrl, getRandomNumber as getRandomNumber, getUrl as getUrl, publicSearchs as publicSearchs, getRandomcode as getRandomcode, getUrlmys as getUrlmys, getUrl2 as getUrl2, setImagesUrl as setImagesUrl
 	, getUploadActionUrl as getUploadActionUrl, getUploadActionUrltwo as getUploadActionUrltwo, getUploadActionUrlthree as getUploadActionUrlthree, getUploadActionUrlOfAuth as getUploadActionUrlOfAuth
 	, getTaskUrlById as getTaskUrlById, TEST_HOST, htmlEncode as htmlEncode, getupload_git_file as getupload_git_file, getcdnImageUrl as getcdnImageUrl
 } from './UrlTool';
@@ -27,7 +27,7 @@ export {
 	markdownToHTML, uploadNameSizeSeperator, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll, isImageExtension,
 	downloadFile, sortDirections, validateLength, mdJSONParse, exportMdtoHtml
 } from './TextUtil'
-export { handleDateString, getNextHalfHourOfMoment, formatDuring, formatSeconds } from './DateUtil'
+export { handleDateString, getNextHalfHourOfMoment, formatDuring, formatSeconds ,timeAgo} from './DateUtil'
 
 export { configShareForIndex, configShareForPaths, configShareForShixuns, configShareForCourses, configShareForCustom } from './util/ShareUtil'
 
@@ -76,10 +76,4 @@ export { default as AliyunUploader } from './components/media/AliyunUploader'
 export { default as ImageLayer2 } from './hooks/ImageLayer2'
 
 // 外部
-export { default as CBreadcrumb } from '../modules/courses/common/CBreadcrumb'
 export { CNotificationHOC as CNotificationHOC } from '../modules/courses/common/CNotificationHOC'
-export { default as ModalWrapper } from '../modules/courses/common/ModalWrapper'
-export { default as NoneData } from '../modules/courses/coursesPublic/NoneData'
-
-export { default as WordNumberTextarea } from '../modules/modals/WordNumberTextarea'
-

src/common/marked.js

@@ -48,15 +48,15 @@ function buildToc(coll, k, level, ctx) {
     });
     ctx.push("</ul>")
   }
-  ctx.push("</li>")
+  ctx.push("</li>");
   k = buildToc(coll, k, level, ctx)
   return k
 }
 
 export function getTocContent() {
-  buildToc(toc, 0, 0, ctx)
-  ctx.push("</ul>")
-  return ctx.join("")
+  buildToc(toc, 0, 0, ctx);
+  ctx.push("</ul>");
+  return ctx.join("");
 }
 
 const tokenizer = {
@@ -157,7 +157,6 @@ renderer.heading = function (text, level, raw) {
   })
   return '<h' + level + ' id="' + anchor + '">' + text + '</h' + level + '>'
 }
-
 marked.setOptions({
   silent: true,
   smartypants: true,

src/components/render-html.jsx

@@ -1,46 +1,67 @@
-import React, { useEffect, useRef, useMemo } from "react";
-import "katex/dist/katex.min.css";
-import { renderToString } from 'katex';
-import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from "../common/marked";
+import React, { useEffect, useRef, useMemo } from 'react'
+import 'katex/dist/katex.min.css'
+import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from '../common/marked';
 import 'code-prettify'
+import dompurify from 'dompurify';
+
+import { renderToString } from 'katex'
 
 const preRegex = /<pre[^>]*>/g
-
 function _unescape(str) {
   let div = document.createElement('div')
   div.innerHTML = str
-  return div.childNodes.length === 0 ? "" : div.childNodes[0].nodeValue;
+  return div.childNodes.length === 0 ? "" : div.childNodes[0].nodeValue
 }
 
-export default ({ value = '', className, style = {} }) => {
-  let str = String(value)
 
+
+export default ({
+  value = '',
+  className,
+  style = {},
+  url
+}) => {
+  let str = String(value);
   const html = useMemo(() => {
-    let rs = marked(str)
-    const math_expressions = getMathExpressions()
+    let rs = marked(str);
+    const math_expressions = getMathExpressions();
     if (str.match(/\[TOC\]/)) {
       rs = rs.replace("<p>[TOC]</p>", getTocContent())
       cleanToc()
     }
     rs = rs.replace(/(__special_katext_id_\d+__)/g, (_match, capture) => {
       const { type, expression } = math_expressions[capture]
-      return renderToString(_unescape(expression), { displayMode: type === 'block', throwOnError: false, output: 'html' })
+      return renderToString(_unescape(expression) || '', { displayMode: type === 'block', throwOnError: false, output: 'html' })
     })
     rs = rs.replace(/▁/g, "▁▁▁")
     resetMathExpressions()
-    return rs
-  }, [str])
+    return dompurify.sanitize(rs)
+  }, [str]);
 
-  const el = useRef()
+  // 锚点跳转，链接地址里含#对应的id
+  useEffect(()=>{
+    if(url && url.hash && html){
+      let u = url.hash;
+      if(u){
+        let id = decodeURIComponent(u.split("#")[1]);
+        let ele = document.getElementById(id);
+        if(ele){
+          window.scrollTo(0, ele.offsetTop + 120);
+        }
+      }
+    }
+  },[url,html])
+
+  const el = useRef();
   function onAncherHandler(e) {
-    let target = e.target
+    let target = e.target;
     if (target.tagName.toUpperCase() === 'A') {
-      let ancher = target.getAttribute('href')
-      if (ancher.startsWith('#')) {
+      let ancher = target.getAttribute('href');
+      if (ancher && ancher.startsWith('#')) {
         e.preventDefault()
         let viewEl = document.getElementById(ancher.replace('#', ''))
         if (viewEl) {
-          viewEl.parentNode.scrollTop = viewEl.offsetTop
+          viewEl.scrollIntoView(true)
         }
       }
     }
@@ -61,6 +82,12 @@ export default ({ value = '', className, style = {} }) => {
       }
     }
   }, [html, el.current, onAncherHandler])
-
-  return (<div ref={el} style={style} className={`${className ? className : ''} markdown-body`} dangerouslySetInnerHTML={{ __html: html }}></div>)
+  return (
+    <div
+      ref={el}
+      style={style}
+      className={`${className ? className : ''} markdown-body`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    ></div>
+  )
 }

src/forge/About/Index.jsx

@@ -67,18 +67,17 @@ function Index(props){
   }
   return(
     <div className="aboutPanels">
-      
       <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> }
+        <AlignCenterBetween style={{padding:"14px 20px"}}>
+          <span className="font-16"><i className="iconfont icon-xiangmujianjie mr5 font-16 color-blue"></i>项目概览</span>
+          { editOpration && !edit && <a onClick={editContent} className="color-blue">编辑</a> }
         </AlignCenterBetween>
         {
           edit ? 
-          <div>
+          <div className="padding20">
             <MDEditor
               placeholder={"请输入描述信息"}
-              height={200}
+              height={500}
               mdID={"order-new-description"}
               initValue={content}
               onChange={onContentChange}
@@ -114,11 +113,11 @@ function Index(props){
             </div>
           </div>
           :
-          <div style={{padding:"20px 0px"}}>
+          <div className="padding20">
             {content ? 
-              <RenderHtml className="break_word_comments imageLayerParent" value={content} />
+              <RenderHtml className="break_word_comments imageLayerParent" value={content} url={props.history.location}/>
               :
-              <div>暂无简介~</div>
+              <div>暂无概览~</div>
             }
             {attachments && attachments.length > 0 &&
               <Attachments

src/forge/About/index.scss

@@ -4,7 +4,6 @@
   .aboutContent{
     border-radius: 2px;
     border: 1px solid #EEEEEE;
-    padding:0px 30px;
     width:100%;
     background-color: #fff;
     margin-top:20px;

src/forge/Activity/Activity.js

@@ -1,7 +1,7 @@
 import React , { Component } from 'react';
 import { Dropdown , Menu , Icon , Pagination , Spin } from 'antd';
 import '../css/index.scss';
-import '../Branch/branch.css';
+import '../Branch/branch.scss';
 import './activity.css';
 import NoneData from '../Nodata';
 
@@ -177,7 +177,7 @@ class Activity extends Component{
               }
             </div>
             :
-            <NoneData _html="暂时还没有相关数据哦!" />
+            <NoneData _html="暂时还没有相关数据!" />
           }
         </Spin>
         {

src/forge/Activity/ActivityItem.js

@@ -32,8 +32,8 @@ class ActivityItem extends Component {
             </p >
           }
           <p className="itemLine mt10">
-            <Link to={`/users/${item && item.login}`} className="show-user-link">
-              <img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage" />
+            <Link to={`/users/${item && item.user_login}`} className="show-user-link">
+              <img alt="" src={getImageUrl(`/${item.user_avatar}`)} className="createImage" />
               <span className="mr20">{item.user_name}</span>
             </Link>
             {item.created_at && <span className="color-grey-9">创建于<span className="ml2 color-grey-6">{item.created_at}</span></span>}

src/forge/Branch/CloneAddress.js

@@ -1,39 +1,35 @@
-import React, { Component } from 'react';
-import { Dropdown, Icon, Tooltip } from 'antd';
-import "./branch.css";
+import React, { useState } from 'react';
+import { Dropdown, Menu, Tooltip } from 'antd';
+import "./branch.scss";
 
-class CloneAddress extends Component {
+function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
+  const [ key , setKey ] = useState("HTTP");
   // 点击按钮复制功能
-  jsCopy = () => {
+  function jsCopy(){
     var e = document.getElementById("copy_rep_content");
     e.select();
     document.execCommand("Copy");
   }
 
-  render() {
-    const { http_url, downloadUrl } = this.props;
-    return (
-      <div className="gitAddressClone">
-        {/* <p className="addressTips"><span>版本库地址已变更，请基于新地址提交代码</span></p> */}
-        {
-          http_url && <span>HTTP</span>
-        }
-        <input type="text" id="copy_rep_content" value={http_url} />
-        <Tooltip title="复制链接">
-          <span className="color-blue" onClick={() => this.jsCopy()}><i className="iconfont icon-fuzhi"></i></span>
-        </Tooltip>
-        {
-          downloadUrl &&
-          <span>
-            <Dropdown overlay={downloadUrl} trigger={['click']} placement="bottomRight">
-              <a className="ant-dropdown-link">
-                <Icon type="cloud-download" className="font-18 fl color-blue" />
-              </a>
-            </Dropdown>
-          </span>
-        }
+  return (
+    <div className="downMenu">
+      <div style={{borderBottom:"1px solid #eee"}}>
+        <Menu className="urlMenu" selectedKeys={[key]} mode={"horizontal"}>
+          <Menu.Item key="HTTP" onClick={(e)=>{setKey(e.key)}}>HTTP</Menu.Item>
+          <Menu.Item key="SSH" onClick={(e)=>{setKey(e.key)}}>SSH</Menu.Item>
+        </Menu>
+        <div className="gitAddressClone">
+          <input type="text" id="copy_rep_content" value={key==="HTTP" ? http_url:ssh_url} />
+          <Tooltip title="复制链接">
+            <span className="color-blue" onClick={jsCopy}><i className="iconfont icon-fuzhi"></i></span>
+          </Tooltip>
+        </div>
       </div>
-    )
-  }
+      <Menu className="edu-txt-center">
+        <Menu.Item><a href={zip_url}>下载 ZIP</a></Menu.Item>
+        <Menu.Item><a href={tar_url}>下载 TAR.GZ</a></Menu.Item>
+      </Menu>
+    </div>
+  )
 }
 export default CloneAddress;

src/forge/Branch/Select.jsx

@@ -1,110 +1,36 @@
 import React , { useState , useEffect } from 'react';
-import { Popover , Input , Spin } from 'antd';
-import './branch.css';
+import { Popover , Dropdown , Input , Spin } from 'antd';
+import './branch.scss';
 import { getBranch , getTag } from '../GetData/getData';
+import SelectOverlay from './SelectOverlay';
 
 
-export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
+export default (({ projectsId , branch , owner , changeBranch , branchList , tagflag = true })=>{
   const [ showValue , setShowValue ] = useState(branch);
-  const [ inputValue , setInputValue] = useState(undefined);
-  const [ nav , setNav ] = useState(0);
-  const [ isSpin , setIsSpin ] = useState(true);
-  const [ flag , setFlag ] = useState(false);
-
-  const [ data , setData ] = useState(undefined);
-  const [ datas , setDatas ] = useState(undefined);
 
   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";
-      if(turn){
-        return;
-      }else{
-        setFlag(false);
-      }
-    })
-  })
-
-  useEffect(()=>{
-    getBranchs(projectsId,owner);
-  },[projectsId])
-
-
-  async function getBranchs(id,owner){
-    let result = await getBranch(id,owner);
-    setData(result);
-    setDatas(result);
-    setIsSpin(false);
-  }
-  async function getTags(id,owner){
-    let result = await getTag(id,owner);
-    setData(result);
-    setDatas(result);
-    setIsSpin(false);
-  }
-
-  function changeInputValue(e){
-    setInputValue(e.target.value);
-    let filter = e.target.value ? data && data.length>0 && data.filter(item=>item.name.indexOf(e.target.value)>-1) : data;
-    setDatas(filter);
-  }
-
-  function changeNav(nav){
-    setNav(nav);
-    setIsSpin(true);
-    if(nav === 0){
-      getBranchs(projectsId,owner);
-    }else{
-      getTags(projectsId,owner);
-    }
-  }
-  function chooseitem(value){
-    setShowValue(value);
-    changeBranch(value);
-  }
-
 
   const menu = (
-    <div>
-      <div className="padding10 bor-bottom-greyE">
-        <Input 
-          placeholder="请输入分支或标签名称搜索" 
-          autocomplete="off" className="OptionsInput" value={inputValue} 
-          onChange={changeInputValue} style={{width:"220px"}}
-        />
-        <ul className="navUl">
-          <li className={nav==0?"navli active":"navli"} onClick={()=>changeNav(0)}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
-          <li className={nav==1?"navli active":"navli"} onClick={()=>changeNav(1)}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li>
-        </ul>
-      </div>
-      <Spin spinning={isSpin}>
-        <ul className="OptionsUl" id="ul-btn">
-          {
-            datas && datas.length>0 ?
-            datas.map((item,key)=>{
-              return(
-                <li key={key} onClick={()=>chooseitem(item.name)}><a className="task-hide ulALink">{item.name}</a></li>
-              )
-            }):
-            <p className="listTips">暂无{inputValue}{nav === 0 ?"分支":"标签"}~</p>
-          }
-        </ul>
-      </Spin>
-    </div>
+    <SelectOverlay 
+      changeBranch={changeBranch} 
+      tagflag={tagflag} 
+      projectsId={projectsId}
+      owner={owner}
+      branchList={branchList}
+      />
   );
   return(
-    <Popover placement="bottom" visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
+    <Dropdown placement='bottomLeft' overlay={menu} overlayClassName="branch-tagBox-list" trigger={['click']} >
       <div className="branch-tagBox">
-        <span className="color-grey-9 mr3 ml8">{nav === 0 ?"分支":"标签"}:</span>
-        <a className="ant-dropdown-link">
+        {/* {nav === 0 ?"分支":"标签"} */}
+        <span className="color-grey-9 mr3 ml8"><i className="iconfont icon-fenzhi2 font-18"></i></span>
+        <a className="ant-dropdown-link task-hide">
           {showValue}
         </a>
-        <i className="showtag iconfont icon-xiajiantou font-14 color-grey-9 mr8" />
+        <i className="showtag iconfont icon-sanjiaoxing-down font-15 color-grey-9 mr5 ml5 mt1" />
       </div>
-    </Popover>
+    </Dropdown>
   )
 })

src/forge/Branch/SelectOverlay.jsx

@@ -0,0 +1,84 @@
+import React , { useState , useEffect } from 'react';
+import { Input , Spin , Menu } from 'antd';
+import { getBranch , getTag } from '../GetData/getData';
+
+function SelectOverlay({ changeBranch , tagflag , branchList , projectsId , owner }) {
+  const [ inputValue , setInputValue] = useState(undefined);
+  const [ nav , setNav ] = useState(0);
+  const [ isSpin , setIsSpin ] = useState(true);
+
+  const [ data , setData ] = useState(undefined);
+  const [ datas , setDatas ] = useState(undefined);
+  const [ keys ,setKeys] = useState("branch");
+
+  useEffect(()=>{
+    if(branchList){
+      setData(branchList);
+      setDatas(branchList);
+      setIsSpin(false);
+    }
+  },[branchList])
+
+  async function getBranchs(id,owner){
+    let result = await getBranch(id,owner);
+    setData(result);
+    setDatas(result);
+    setIsSpin(false);
+  }
+  async function getTags(id,owner){
+    let result = await getTag(id,owner);
+    setData(result);
+    setDatas(result);
+    setIsSpin(false);
+  }
+  function chooseitem(value){
+    changeBranch(value);
+  }
+  function changeInputValue(e){
+    setInputValue(e.target.value);
+    let filter = e.target.value ? data && data.length>0 && data.filter(item=>item.name.indexOf(e.target.value)>-1) : data;
+    setDatas(filter);
+  }
+
+  function changeNav(e){
+    setKeys(e.key);
+    setIsSpin(true);
+    if(e.key === "branch"){
+      getBranchs(projectsId,owner);
+    }else{
+      getTags(projectsId,owner);
+    }
+  }
+
+  return(
+    <div className="overlayBranch">
+      <div className="padding15" style={{paddingBottom:"0px"}}>
+        <Input 
+          prefix={<i className="iconfont icon-sousuo_icon1 font-14"></i>}
+          placeholder="请输入分支或标签名称搜索" 
+          autocomplete="off" className="OptionsInput" 
+          value={inputValue} 
+          onChange={changeInputValue}
+        />
+      </div>
+      <Menu mode="horizontal" className="navUl" selectedKeys={[keys]} onClick={changeNav}>
+        <Menu.Item key={"branch"}>分支</Menu.Item>
+        { tagflag && <Menu.Item key={"tag"}>标签</Menu.Item> }
+      </Menu>
+      <Spin spinning={isSpin}>
+        <ul className="OptionsUl" id="ul-btn">
+          {
+            datas && datas.length>0 ?
+            datas.map((item,key)=>{
+              return(
+                <li key={key} onClick={()=>chooseitem(item.name)}><a className="task-hide ulALink">{item.name}</a></li>
+              )
+            }):
+            <p className="listTips">暂无{inputValue}{nav === 0 ?"分支":"标签"}~</p>
+          }
+        </ul>
+      </Spin>
+    </div>
+  )
+}
+export default SelectOverlay;

src/forge/Branch/branch.css

@@ -1,5 +1,5 @@
-.branchDropdown{
-  border:1px solid #eee;
+.branchDropdown {
+  border: 1px solid #eee;
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,78 +7,126 @@
   line-height: 40px;
   min-width: 220px;
 }
-.branchDropdown .ant-dropdown-trigger{
+
+.branchDropdown .ant-dropdown-trigger {
   width: 100%;
-  padding:0px 15px;
+  padding: 0px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
 }
-.branchOptions{
+
+.branchOptions {
   width: 220px;
   box-shadow: 0px 0px 3px 1px rgba(134, 134, 134, 0.4);
   border-radius: 3px;
   background: #fff;
   max-height: 300px;
 }
-.OptionsUl{
+
+.OptionsUl {
   max-height: 220px;
   overflow-y: auto;
 }
-.OptionsUl li{
-  height: 35px;
-  line-height: 35px;
+
+.OptionsUl li {
+  height: 30px;
+  line-height: 30px;
   cursor: pointer;
-  padding:0px 10px;
+  padding: 0px 20px;
+  margin: 5px 0px;
 }
-.OptionsUl li:hover{
-   background-color: #F0F0F0;
+
+.OptionsUl li:hover {
+  background-color: #F0F0F0;
 }
-.OptionsUl li a{
+
+.OptionsUl li a {
   display: block;
 }
-.OptionsInput{
+
+.OptionsInput {
   height: 32px;
   padding-left: 4px;
   line-height: 32px;
   width: 100%;
 }
-.branch-tagBox{
-  border:1px solid #eee;
+
+.branch-tagBox {
+  border: 1px solid #D0D0D0;
   border-radius: 3px;
-  height: 40px;
+  height: 36px;
   display: flex;
   align-items: center;
   cursor: pointer;
-  width: 240px;
+  min-width: 104px;
 }
-.branch-tagBox-list .ant-popover-arrow{
+
+.branch-tagBox:hover {
+  background-color: #F3F4F6;
+}
+
+.branch-tagBox-list {
+  background: #FFFFFF;
+  box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
+  border-radius: 4px;
+}
+.branch-tagBox-list .ant-popover-arrow {
   display: none;
 }
-.branch-tagBox-list.ant-popover.ant-popover-placement-bottom{
-  padding-top:0px;
+.branch-tagBox-list.ant-popover.ant-popover-placement-bottom {
+  padding-top: 0px;
 }
-.branch-tagBox .ant-dropdown-link{
+.branch-tagBox-list .branch-tagBox .ant-dropdown-link {
   display: block;
-  flex:1;
+  flex: 1;
+  max-width: 105px;
 }
-.branch-tagBox-list .ant-popover-inner-content{
-  padding:0px;
+.branch-tagBox-list .ant-popover-inner-content {
+  padding: 0px;
 }
-.navUl{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 5px;
+
+.overlayBranch {
+  width: 325px;
 }
-.navUl li{
-  cursor: pointer;
+.overlayBranch .navUl {
+  margin-top: 8px;
+  height: 30px;
+  line-height: 30px;
 }
-.navUl li.active{
-  color:#5091FF;
+.overlayBranch .navUl li {
+  height: 30px;
+  line-height: 30px;
+  padding: 0px 5px;
+  margin-left: 20px !important;
 }
-.listTips{
-  padding:20px 0px;
+
+.listTips {
+  padding: 20px 0px;
   text-align: center;
-}
+}
+
+.urlMenu {
+  line-height: 30px;
+  margin-bottom: 10px;
+  padding: 15px 20px 0px 20px;
+  border-bottom: none;
+}
+.urlMenu li.ant-menu-item {
+  height: 30px;
+  line-height: 30px;
+  padding: 0px 5px;
+  margin-right: 20px !important;
+}
+.urlMenu li.ant-menu-item.ant-menu-item-selected, .urlMenu li.ant-menu-item.ant-menu-item-active {
+  color: #333;
+}
+.urlMenu li.ant-menu-item.ant-menu-item-selected {
+  border-color: #1890ff !important;
+}
+.urlMenu li.ant-menu-item.ant-menu-item-active {
+  border-color: transparent;
+}
+
+/*# sourceMappingURL=branch.css.map */

src/forge/Branch/branch.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["branch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACG;;;AAEH;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAGJ;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAIN;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE","file":"branch.css"}

src/forge/Branch/branch.scss

@@ -0,0 +1,118 @@
+.branchDropdown{
+  border:1px solid #eee;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  height: 40px;
+  line-height: 40px;
+  min-width: 220px;
+}
+.branchDropdown .ant-dropdown-trigger{
+  width: 100%;
+  padding:0px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.branchOptions{
+  width: 220px;
+  box-shadow: 0px 0px 3px 1px rgba(134, 134, 134, 0.4);
+  border-radius: 3px;
+  background: #fff;
+  max-height: 300px;
+}
+.OptionsUl{
+  max-height: 220px;
+  overflow-y: auto;
+}
+.OptionsUl li{
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  padding:0px 20px;
+  margin:5px 0px;
+}
+.OptionsUl li:hover{
+   background-color: #F0F0F0;
+}
+.OptionsUl li a{
+  display: block;
+}
+.OptionsInput{
+  height: 32px;
+  padding-left: 4px;
+  line-height: 32px;
+  width: 100%;
+}
+.branch-tagBox{
+  border:1px solid #D0D0D0;
+  border-radius: 3px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  min-width: 104px;
+}
+.branch-tagBox:hover{
+  background-color: #F3F4F6;
+}
+.branch-tagBox-list{
+  background: #FFFFFF;
+  box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
+  border-radius: 4px;
+  .ant-popover-arrow{
+    display: none;
+  }
+  &.ant-popover.ant-popover-placement-bottom{
+    padding-top:0px;
+  }
+  .branch-tagBox .ant-dropdown-link{
+    display: block;
+    flex:1;
+    max-width: 105px;
+  }
+  .ant-popover-inner-content{
+    padding:0px;
+  }
+}
+.overlayBranch{
+  width: 325px;
+  .navUl{
+    margin-top: 8px;
+    height: 30px;
+    line-height: 30px;
+    li{
+      height: 30px;
+      line-height: 30px;
+      padding:0px 5px;
+      margin-left: 20px!important;
+    }
+  }
+}
+.listTips{
+  padding:20px 0px;
+  text-align: center;
+}
+
+.urlMenu{
+  line-height: 30px;
+  margin-bottom: 10px;
+  padding:15px 20px 0px 20px;
+  border-bottom: none;
+  li.ant-menu-item{
+    height: 30px;
+    line-height: 30px;
+    padding:0px 5px;
+    margin-right: 20px!important;
+    &.ant-menu-item-selected,&.ant-menu-item-active{
+      color: #333;
+    }
+    &.ant-menu-item-selected{
+      border-color:#1890ff!important;
+    }
+    &.ant-menu-item-active{
+      border-color:transparent ;
+    }
+  }
+}

src/forge/Component/AddGroup.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { AutoComplete , Button , Icon } from 'antd';
+import axios from 'axios';
+
+const { Option } = AutoComplete;
+function AddGroup({organizeId,getGroupID}){
+  const [ id , setID ] = useState(undefined);
+  const [ source , setSource ] = useState(undefined);
+  const [ searchKey , setSearchKey ] = useState("");
+  
+  useEffect(()=>{
+    getUserList();
+  },[searchKey])
+
+  function getUserList(e){
+    const url = `/organizations/${organizeId}/teams/search.json`;
+    axios.get(url, {
+      params: {
+        search: searchKey,
+      },
+    }).then((result) => {
+      if (result) {
+        sourceOptions(result.data.teams);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  };
+
+  function sourceOptions(userDataSource){
+    const s = userDataSource && userDataSource.map((item, key) => {
+      return (
+        <Option
+          key={key}
+          value={`${item.id}`}
+          name={item.name}
+        >
+          {item.name}
+        </Option>
+      );
+    });
+    setSource(s);
+  }
+
+  function changeInputUser(e){
+    setSearchKey(e || "");
+  };
+
+  // 选择用户
+  function selectInputUser(e, option){
+    setID(e);
+    setSearchKey(option.props.name);
+  };
+
+  function addCollaborator(){
+    getGroupID && getGroupID(id);
+  }
+
+  return(
+    <div className="addPanel">
+      <AutoComplete
+        dataSource={source}
+        value={searchKey}
+        style={{ width: 300 }}
+        onChange={changeInputUser}
+        onSelect={selectInputUser}
+        placeholder="搜索需要添加的团队..."
+        allowClear
+      />
+      <Button
+        type="primary"
+        ghost
+        onClick={addCollaborator}
+        className="ml15"
+      >
+        <Icon type="plus" size="16"></Icon>
+        添加团队
+      </Button>
+    </div>
+  )
+}
+export default AddGroup;

src/forge/Component/AddMember.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { AutoComplete , Button , Icon } from 'antd';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';
+
+const { Option } = AutoComplete;
+function AddMember({getID,login,showNotification}){
+  const [ id , setID ] = useState(undefined);
+  const [ source , setSource ] = useState(undefined);
+  const [ searchKey , setSearchKey ] = useState(undefined);
+  
+  useEffect(()=>{
+    getUserList();
+  },[searchKey])
+
+  function getUserList(e){
+    const url = `/users/list.json`;
+    axios.get(url, {
+      params: {
+        search: searchKey,
+      },
+    }).then((result) => {
+      if (result) {
+        sourceOptions(result.data.users);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  };
+
+  function sourceOptions(userDataSource){
+    const s = userDataSource && userDataSource.map((item, key) => {
+      return (
+        <Option
+          key={key}
+          value={`${item.user_id}`}
+          login={`${item.login}`}
+          name={item.username}
+        >
+          <img
+            className="user_img radius"
+            width="28"
+            height="28"
+            src={getImageUrl(`/${item && item.image_url}`)}
+            alt=""
+          />
+          <span className="ml10" style={{ verticalAlign: "middle" }}>
+            {item.username}
+            <span className="color-grey ml10">({item.login})</span>
+          </span>
+        </Option>
+      );
+    });
+    setSource(s);
+  }
+
+  function changeInputUser(e){
+    setSearchKey(e);
+  };
+
+  // 选择用户
+  function selectInputUser(e, option){
+    setID(login ? e : option.props.login);
+    setSearchKey(option.props.name);
+  };
+
+  function addCollaborator(){
+    if(source && source.length>0){
+      getID && getID(id);
+      setSearchKey(undefined);
+    }else{
+      showNotification("请选择存在的用户!");
+    }
+  }
+
+  return(
+    <div className="addPanel">
+      <AutoComplete
+        dataSource={source}
+        value={searchKey}
+        style={{ width: 300 }}
+        onChange={changeInputUser}
+        onSelect={selectInputUser}
+        placeholder="搜索需要添加的用户..."
+        allowClear
+      />
+      <Button
+        type="primary"
+        ghost
+        onClick={addCollaborator}
+        className="ml15"
+      >
+        <Icon type="plus" size="16"></Icon>
+        添加成员
+      </Button>
+    </div>
+  )
+}
+export default AddMember;

src/forge/Component/Cards.jsx

@@ -1,19 +1,23 @@
 import React from 'react';
+import { getImageUrl } from 'educoder';
+import { Link } from 'react-router-dom';
 import './Component.scss';
 
-export default (({img , title, desc , rightBtn})=>{
+function Cards({img , title, desc , rightBtn , src , bottomInfos}){
   return(
     <div className="cards">
-      <div className="img"><img src={img} alt=""/></div>
+      {img &&<div className="img"><img src={getImageUrl(`/${img}`)} alt=""/></div>}
       <div className="content">
         <p className="titles">
-          <span>{title}</span>
+          <Link to={src}>{title}</Link>
           {rightBtn}
         </p>
         <div className="desc">
           {desc}
         </div>
+        {bottomInfos}
       </div>
     </div>
   )
-})
+}
+export default Cards;

src/forge/Component/Component.css

@@ -0,0 +1,432 @@
+@charset "UTF-8";
+ul.ant-menu {
+  border-right: none;
+}
+
+ul.ant-menu li:last-child {
+  border-bottom: none;
+}
+
+li.ant-menu-item {
+  margin: 0px !important;
+  border-bottom: 1px solid #eee;
+}
+
+.flags {
+  border: 1px solid red;
+  border-radius: 5px;
+}
+
+.cards {
+  display: flex;
+  align-items: center;
+  padding: 20px 34px;
+  background-color: #fff;
+  margin-bottom: 18px;
+  min-height: 130px;
+  border: 1px solid #eee;
+}
+.cards .img {
+  margin-right: 20px;
+  width: 190px;
+  height: 90px;
+  border: 1px solid #eeeeee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.cards .img img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.cards .content {
+  flex: 1;
+  width: 0;
+}
+.cards .content .titles {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px !important;
+  align-items: center;
+  height: 22px;
+  line-height: 22px;
+}
+.cards .content .titles > a {
+  font-size: 18px;
+  color: #333;
+}
+.cards .content .desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 20px;
+}
+
+.tabsStyle {
+  border: 1px solid #eee;
+}
+.tabsStyle .ant-tabs-bar.ant-tabs-top-bar {
+  padding-left: 35px;
+  margin-bottom: 0px;
+}
+.tabsStyle .ant-tabs-nav .ant-tabs-tab {
+  padding: 19px 0px;
+  margin-right: 40px;
+}
+.tabsStyle .ant-tabs-ink-bar {
+  width: 25px !important;
+  bottom: 10px;
+}
+
+.statusColor {
+  display: inline-block;
+  padding: 0px 10px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 11px;
+  color: #fff;
+  margin-left: 5px;
+  font-size: 12px;
+}
+.statusColor.running {
+  background: #5091FF;
+  color: #F1F8FF;
+}
+.statusColor.Preparing {
+  background: #ff6e21;
+  color: #fff8f4;
+}
+.statusColor.pass {
+  background: #28BD6C;
+  color: #EEFDF5;
+}
+.statusColor.failed {
+  background: #F73030;
+  color: #FCEEEE;
+}
+.statusColor.killed {
+  background: #eee;
+  color: #999;
+}
+
+.handleBox {
+  position: fixed;
+  top: 45%;
+  right: 240px;
+  z-index: 10000;
+}
+
+.laterest {
+  background-color: #EF3131;
+  color: #fff;
+  font-size: 12px;
+  margin-left: 10px;
+  padding: 0px 5px;
+  border-radius: 2px;
+  height: 18px;
+  line-height: 18px;
+}
+
+@media screen and (max-width: 1800px) {
+  .handleBox {
+    right: 190px;
+  }
+}
+@media screen and (max-width: 1700px) {
+  .handleBox {
+    right: 140px;
+  }
+}
+@media screen and (max-width: 1600px) {
+  .handleBox {
+    right: 90px;
+  }
+}
+@media screen and (max-width: 1450px) {
+  .handleBox {
+    right: 10px;
+  }
+}
+@media screen and (max-width: 1380px) {
+  .handleBox {
+    right: 0px;
+  }
+}
+.ant-drawer {
+  z-index: 10000 !important;
+}
+
+.ant-drawer-body {
+  padding: 0px !important;
+}
+.ant-drawer-body .drawerHead {
+  background-color: #333;
+  color: #fff;
+  padding: 15px 20px;
+}
+.ant-drawer-body .ant-tree {
+  margin: 0px 20px !important;
+}
+
+.menuPanels {
+  width: 295px;
+}
+.menuPanels .leftline {
+  position: relative;
+  color: #666;
+  height: 16px;
+}
+.menuPanels .leftline::before {
+  position: absolute;
+  left: -10px;
+  top: 3px;
+  height: 12px;
+  width: 1px;
+  background-color: #666666;
+  content: "";
+}
+.menuPanels .ant-btn {
+  height: 36px;
+  line-height: 34px;
+  width: 83px;
+  text-align: center;
+  padding: 0px;
+  font-weight: 500;
+  font-size: 14px;
+}
+.menuPanels .ant-btn.currentBtn {
+  cursor: default;
+  color: #333;
+}
+.menuPanels .ant-btn.currentBtn:hover {
+  color: #333;
+  border-color: #d0d0d0;
+}
+.menuPanels .ant-btn-default {
+  color: #333;
+  border-color: #d0d0d0;
+}
+.menuPanels .ant-btn-default:hover {
+  background: #F3F4F6;
+}
+.menuPanels .ant-btn-primary {
+  color: #fff;
+  background-color: #2A61FF;
+}
+.menuPanels .focusPanelHeadInfo {
+  padding: 14px 16px;
+  border-bottom: 1px solid #eee;
+}
+.menuPanels .ant-popover-content, .menuPanels .ant-popover-inner {
+  height: 100%;
+  width: 100%;
+}
+.menuPanels .ant-popover-inner-content {
+  padding: 0px;
+}
+
+.halfs {
+  margin-top: 24px;
+  padding: 24px 0px 0px 0px;
+  border-top: 1px solid #e8e8e8;
+}
+
+.aboutSubTitle {
+  display: flex;
+  align-items: center;
+}
+
+.menuinfos {
+  padding: 10px 20px;
+}
+.menuinfos > a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.menuinfos > a > span:first-child {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  line-height: 22px;
+}
+.menuinfos > a > span:last-child {
+  color: #666;
+  font-weight: 400;
+  line-height: 20px;
+  margin-top: 6px;
+}
+
+/*-------------------个人主页：右侧提示区域--------------------------*/
+.-task-sidebar {
+  position: fixed;
+  width: 40px;
+  right: 0;
+  bottom: 80px;
+  z-index: 10;
+}
+
+@media screen and (max-width: 1920px) {
+  .-task-sidebar {
+    right: 220px;
+  }
+}
+@media screen and (max-width: 1750px) {
+  .-task-sidebar {
+    right: 160px;
+  }
+}
+@media screen and (max-width: 1650px) {
+  .-task-sidebar {
+    right: 115px;
+  }
+}
+@media screen and (max-width: 1550px) {
+  .-task-sidebar {
+    right: 90px;
+  }
+}
+@media screen and (max-width: 1450px) {
+  .-task-sidebar {
+    right: 45px;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .-task-sidebar {
+    right: 0px;
+    display: none;
+  }
+}
+.-task-sidebar > div {
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+  width: 40px;
+  color: #999;
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px 1px #F1F1F1;
+}
+
+.-task-sidebar > div i {
+  color: #999;
+}
+
+.-task-sidebar > div:hover i {
+  color: #fff !important;
+}
+
+.-task-sidebar > div:hover {
+  background: #1890FF;
+  box-shadow: 0px 0px 10px 2px #B6D0FC;
+}
+
+.helpBox {
+  width: 260px;
+  z-index: 103;
+}
+.helpBox.shareContent {
+  width: 200px;
+}
+.helpBox .ant-popover-inner-content {
+  padding: 0px;
+}
+.helpBox p.titlecontent {
+  font-size: 18px;
+  color: #333;
+  line-height: 20px;
+  padding: 15px 20px;
+}
+.helpBox .faqUl {
+  padding: 0px 20px 10px;
+  max-height: 230px;
+  overflow-y: auto;
+}
+.helpBox .faqUl li {
+  background: #F5F5F5;
+  border-radius: 20px;
+  padding: 0px 20px;
+  color: #333;
+  height: 34px;
+  line-height: 34px;
+  margin-bottom: 10px;
+}
+.helpBox .faqUl li a {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.helpBox .faqUl li:hover {
+  background-color: #D1E9FF;
+}
+.helpBox .faqUl li:hover a {
+  color: #333 !important;
+}
+.helpBox .shareUl {
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+}
+.helpBox .shareUl .titlecontent {
+  margin-right: 20px;
+}
+.helpBox .shareUl li > i {
+  font-size: 32px !important;
+}
+
+.-task-desc {
+  background: #494949;
+  width: 90px;
+  line-height: 36px;
+  text-align: center;
+  position: absolute;
+  color: #fff;
+  font-size: 13px;
+  z-index: 999999;
+  opacity: 0;
+}
+
+.-task-desc div {
+  position: absolute;
+  top: 10px;
+  right: -7px;
+  height: 13px;
+}
+
+.-task-desc div img {
+  float: left;
+}
+
+.-task-sidebar .scan_ewm {
+  position: absolute !important;
+  right: 45px !important;
+  bottom: 0px !important;
+  background-color: #494949 !important;
+  -webkit-box-sizing: border-box !important;
+  box-sizing: border-box !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  display: none;
+  height: 213px !important;
+}
+
+.trangle_right {
+  position: absolute;
+  right: -5px;
+  bottom: 15px;
+  width: 0;
+  height: 0px;
+  border-top: 6px solid transparent;
+  border-left: 5px solid #494949;
+  border-bottom: 6px solid transparent;
+}
+
+/*# sourceMappingURL=Component.css.map */

src/forge/Component/Component.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["Component.scss"],"names":[],"mappings":";AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;AAIN;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAKN;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;IACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;;AAKR;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;;;AAON;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"Component.css"}

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;
@@ -15,6 +19,8 @@ li.ant-menu-item{
   padding:20px 34px;
   background-color: #fff;
   margin-bottom:18px;
+  min-height: 130px;
+  border:1px solid #eee;
   .img{
     margin-right: 20px;
     width: 190px;
@@ -23,8 +29,10 @@ li.ant-menu-item{
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
     img{
       max-width: 100%;
+      max-height: 100%;
     }
   }
   .content{
@@ -35,7 +43,9 @@ li.ant-menu-item{
       justify-content: space-between;
       margin-bottom: 10px!important;
       align-items: center;
-      &>span{
+      height: 22px;
+      line-height: 22px;;
+      &>a{
         font-size:18px ;
         color: #333;
       }
@@ -46,11 +56,13 @@ li.ant-menu-item{
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
+      line-height: 20px;
     }
   }
 }
 // Tabs
 .tabsStyle{
+  border:1px solid #eee;
   .ant-tabs-bar.ant-tabs-top-bar{
     padding-left: 35px;
     margin-bottom: 0px;
@@ -72,6 +84,7 @@ li.ant-menu-item{
   border-radius:11px;
   color: #fff;
   margin-left: 5px;
+  font-size: 12px;
   &.running{
     background:#5091FF;
     color: #F1F8FF;
@@ -88,6 +101,10 @@ li.ant-menu-item{
     background:#F73030;
     color:#FCEEEE ;
   }
+  &.killed{
+    background:#eee;
+    color:#999 ;
+  }
 }
 .handleBox{
   position: fixed;
@@ -95,6 +112,17 @@ li.ant-menu-item{
   right:240px;
   z-index: 10000;
 }
+.laterest{
+  background-color: #EF3131;
+  color: #fff;
+  font-size: 12px;
+  margin-left: 10px;
+  padding:0px 5px;
+  border-radius: 2px;
+  height: 18px;
+  line-height: 18px;
+}
+
 @media screen and (max-width: 1800px){
   .handleBox{
     right:190px;
@@ -119,4 +147,273 @@ li.ant-menu-item{
   .handleBox{
     right:0px;
   }
-}
+}
+.ant-drawer{
+  z-index: 10000!important;
+}
+.ant-drawer-body{
+  padding:0px!important;
+  .drawerHead{
+    background-color: #333;
+    color: #fff;
+    padding:15px 20px;
+  }
+  .ant-tree{
+    margin:0px 20px!important;
+  }
+}
+
+.menuPanels{
+  width: 295px;
+  .leftline{
+    position: relative;
+    color: #666;
+    height: 16px;
+    &::before{
+      position: absolute;
+      left: -10px;
+      top:3px;
+      height: 12px;
+      width: 1px;
+      background-color: #666666;
+      content: "";
+    }
+  }
+  .ant-btn{
+    height: 36px;
+    line-height: 34px;
+    width: 83px;
+    text-align: center;
+    padding:0px ;
+    font-weight: 500;
+    font-size: 14px;
+    &.currentBtn{
+      cursor: default;
+      color: #333;
+      &:hover{
+        color: #333;
+        border-color: #d0d0d0;
+      }
+    }
+  }
+  .ant-btn-default{
+    color: #333;
+    border-color: #d0d0d0;
+    &:hover{
+      background: #F3F4F6;
+    }
+  }
+  .ant-btn-primary{
+    color: #fff;
+    background-color: #2A61FF;
+  }
+  .focusPanelHeadInfo{
+    padding:14px 16px;
+    border-bottom: 1px solid #eee;
+  }
+  .ant-popover-content,.ant-popover-inner{
+    height: 100%;
+    width: 100%;
+  }
+  .ant-popover-inner-content{
+    padding:0px;
+  }
+}
+.halfs{
+  margin-top: 24px;
+  padding:24px 0px 0px 0px;
+  border-top: 1px solid #e8e8e8;
+}
+.aboutSubTitle{
+  display: flex;
+  align-items: center;
+}
+.menuinfos{
+  padding:10px 20px;
+  &>a{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    & >span:first-child{
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      line-height: 22px;
+    }
+    & >span:last-child{
+      color: #666;
+      font-weight: 400;
+      line-height: 20px;
+      margin-top: 6px;
+    }
+  }
+}
+
+/*-------------------个人主页：右侧提示区域--------------------------*/
+.-task-sidebar {
+  position: fixed;
+  width: 40px;
+  right: 0;
+  bottom: 80px;
+  z-index: 10;
+}
+
+@media screen and (max-width: 1920px){
+  .-task-sidebar{
+    right:220px;
+  }
+}
+@media screen and (max-width: 1750px){
+  .-task-sidebar{
+    right:160px;
+  }
+}
+@media screen and (max-width: 1650px){
+  .-task-sidebar{
+    right:115px;
+  }
+}
+@media screen and (max-width: 1550px){
+  .-task-sidebar{
+    right:90px;
+  }
+}
+@media screen and (max-width: 1450px){
+  .-task-sidebar{
+    right:45px;
+  }
+}
+@media screen and (max-width: 1200px){
+  .-task-sidebar{
+    right:0px;
+    display: none;
+  }
+}
+.-task-sidebar>div {
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+  width: 40px;
+  color: #999;
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px 1px #F1F1F1;
+}
+
+.-task-sidebar>div i {
+  color: #999;
+}
+
+.-task-sidebar>div:hover i {
+  color: #fff !important;
+}
+.-task-sidebar>div:hover{
+  background: #1890FF;
+  box-shadow: 0px 0px 10px 2px #B6D0FC;
+}
+.helpBox{
+  width: 260px;
+  z-index: 103;
+  &.shareContent{
+    width: 200px;
+  }
+  .ant-popover-inner-content{
+    padding:0px;
+  }
+  p.titlecontent{
+    font-size: 18px;
+    color: #333;
+    line-height: 20px;
+    padding:15px 20px;
+  }
+  .faqUl{
+    padding:0px 20px 10px;
+    max-height: 230px;
+    overflow-y: auto;
+    li{
+      background: #F5F5F5;
+      border-radius: 20px;
+      padding:0px 20px;
+      color: #333;
+      height: 34px;
+      line-height: 34px;
+      margin-bottom: 10px;
+      a{
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      &:hover{
+        background-color: #D1E9FF;
+        a{
+          color: #333!important;
+        }
+      }
+    }
+  }
+  .shareUl{
+    padding:10px 0px;
+    display: flex;
+    align-items: center;
+    .titlecontent{
+      margin-right: 20px;
+    }
+    li > i{
+      font-size: 32px!important;
+    }
+  }
+}
+
+
+
+.-task-desc {
+  background: #494949;
+  width: 90px;
+  line-height: 36px;
+  text-align: center;
+  position: absolute;
+  color: #fff;
+  font-size: 13px;
+  z-index: 999999;
+  opacity: 0;
+}
+
+.-task-desc div {
+  position: absolute;
+  top: 10px;
+  right: -7px;
+  height: 13px;
+}
+
+.-task-desc div img {
+  float: left
+}
+
+.-task-sidebar .scan_ewm {
+  position: absolute !important;
+  right: 45px !important;
+  bottom: 0px !important;
+  background-color: #494949 !important;
+  -webkit-box-sizing: border-box !important;
+  box-sizing: border-box !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  display: none;
+  height: 213px !important;
+}
+
+.trangle_right {
+  position: absolute;
+  right: -5px;
+  bottom: 15px;
+  width: 0;
+  height: 0px;
+  border-top: 6px solid transparent;
+  border-left: 5px solid #494949;
+  border-bottom: 6px solid transparent
+}

src/forge/Component/Contributors.jsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react';
+import { AlignCenter , FlexAJ  } from '../Component/layout';
+import { Link } from 'react-router-dom';
+import { Popover , Spin , Button } from 'antd';
+import { getImageUrl } from 'educoder';
+import './Component.scss';
+import { getUser } from '../GetData/getData';
+import axios from 'axios';
+
+function Contributors({contributors,owner,projectsId,currentLogin}){
+  const [ menuList ,setMenuList ]= useState([]);
+  const [ list , setList ]= useState(undefined);
+  const [ total , setTotal ]= useState(0);
+  const [ menu , setMenu ] = useState("");
+  const [ login , setLogin ] = useState(undefined);
+  const [ isSpin , setIsSpin ] = useState(false);
+
+  useEffect(()=>{
+    if(contributors && contributors.total_count>0){
+      setTotal(contributors.total_count);
+      setList(contributors.list);
+    }
+  },[contributors])
+
+  useEffect(()=>{
+    if(login){
+      getUsers(login);
+    }else{
+      setMenu(undefined);
+    }
+  },[login])
+
+  async function getUsers(login){
+    setIsSpin(true);
+    let a = menuList && menuList.filter(i=>i.login === login);
+    if(a.length === 0){
+      let result = await getUser(login);
+      let arr = menuList;
+      arr.push({...result});
+      setMenuList(arr);
+      setMenusFunc(result);
+      setIsSpin(false);
+    }else{
+      setMenusFunc(a[0]);
+      setIsSpin(false);
+    }
+  }
+
+  function setMenusFunc(data){
+    if(data){
+      let ele = (
+        <Spin spinning={isSpin}>
+          <AlignCenter className="focusPanelHeadInfo">
+            <Link to={`/users/${data.login}`}><img src={getImageUrl(`/${data.image_url}`)} alt="" className="radius" width="38px" height="38px"/></Link>
+            <div className="flex1 ml10" style={{width:"0"}}>
+              <AlignCenter>
+                <Link to={`/users/${data.login}`} className="font-16">{data.name}</Link>
+                {
+                  data.location && 
+                  <span className="ml20 font-12 leftline">{data.location}</span>
+                }
+              </AlignCenter>
+              {
+                data.organizations && data.organizations.length > 0 ?
+                <AlignCenter className="font-12 mt5">
+                  <span>所属组织：</span>
+                  <div className="task-hide flex1">
+                    {renderArray(data.organizations)}
+                  </div>
+                </AlignCenter>
+                :""
+              }
+            </div>
+          </AlignCenter>
+          <AlignCenter className="menuinfos">
+            <a href={data.projects_url}>
+              <span>{data.projects_count}</span>
+              <span>项目数</span>
+            </a>
+            <a href={data.followers_url}>
+              <span>{data.followers_count}</span>
+              <span>粉丝数</span>
+            </a>
+            <a href={data.following_url}>
+              <span>{data.following_count}</span>
+              <span>关注数</span>
+            </a>
+          </AlignCenter>
+          <div className={"pb20"} style={{display:"flex",justifyContent:'center'}}>
+            {
+              currentLogin && (currentLogin === data.login)
+              ?
+              <Button className="currentBtn">当前用户</Button>
+              :
+              data.is_watch ? 
+              <Button type={"default"} onClick={()=>FocusFunc(false,data.login)}>已关注</Button>
+              :
+              <Button type={"primary"} onClick={()=>FocusFunc(true,data.login)}>关注TA</Button>
+            }
+          </div>
+        </Spin>
+      )
+      setMenu(ele);
+    }
+  }
+
+  function FocusFunc(flag,login){
+    axios({
+      method: flag ? 'post' : 'delete',
+      url: `/watchers/${flag ? 'follow' : 'unfollow'}.json`,
+      params: {target_type: "user",id:login}
+    }).then(result => {
+      if (result && (result.data.status === 0 || result.data.status === 2)) {
+        let a = menuList && menuList.filter(i=>i.login === login);
+        if(a){
+          a[0].is_watch = flag;
+        }
+        setMenusFunc(a[0]);
+      }
+    })
+    .catch(error => {
+      console.log(error);
+    });
+  }
+
+  function renderArray(array){
+    let str = "";
+    for(var i = 0;i<array.length;i++){
+      str += array[i].name +"、";
+    }
+    let substr = str.substr(0,str.length-1);
+    return (<span title={substr}>{substr}</span>)
+  }
+
+  function setVisibleFunc(flag,l,index){
+    if(l !== login){
+      setLogin(l);
+    }
+    var lx = list.concat();
+    lx.map(i=>i.visible =false);
+    if(flag){
+      lx[index].visible = flag;
+    }
+    lx.splice();
+    setList(lx);
+  }
+
+  return(
+    <div className="halfs">
+      <Link to={`/projects/${owner}/${projectsId}/contribute`} className="font-16 color-ooo aboutSubTitle">
+        <span>贡献者</span>
+        { contributors && contributors.total_count > 0 && <span className="infoCount">{contributors.total_count}</span>}
+      </Link>
+      <div className="attrPerson" onMouseLeave={()=>setVisibleFunc(false)}>
+        {
+          total > 0 ?
+          list.map((item,key)=>{
+            return(
+              <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">
+                <Link key={key} to={`/users/${item.login}`}>
+                  <img src={getImageUrl(`/${item.image_url}`)} alt="" onMouseOver={()=>setVisibleFunc(true,item.login,key)}/>
+                </Link>
+              </Popover>
+            )
+          })
+          :""
+        }
+      </div>
+    </div>
+  )
+}
+export default Contributors;

src/forge/Component/DeleteModal/Index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AlignCenter } from '../layout';
+import { Modal , Button } from 'antd';
+import './Index.scss';
+
+function DeleteBox({ 
+  visible , 
+  onCancel ,
+  onSuccess ,
+  title ,
+  subTitle,
+  content
+}) {
+  return(
+    <Modal
+      visible={visible}
+      onCancel={onCancel}
+      title={title}
+      width="600px"
+      className="deleteBox"
+      footer={
+        <div>
+          <Button size={'large'} onClick={onCancel}>取消</Button>
+          <Button type={"danger"} size={"large"} onClick={onSuccess}>确认删除</Button>
+        </div>
+      }
+    >
+      <div className="desc">
+        <AlignCenter className="descMain"><i className="iconfont icon-shanchu_tc_icon mr10"></i>{content}</AlignCenter>
+        <p>{subTitle}</p>
+      </div>
+    </Modal>
+  )
+}
+export default DeleteBox;

src/forge/Component/DeleteModal/Index.scss

@@ -0,0 +1,45 @@
+.deleteBox{
+  .ant-modal-header{
+    background-color: #f8f8f8;
+    border-bottom: none;
+    .ant-modal-title{
+      text-align: left;
+      font-size: 20px;
+    }
+  }
+  .ant-modal-body{
+    padding:30px 50px;
+    p{
+      font-size: 16px;
+      line-height: 26px;
+      color:#666;
+      word-break: break-all;
+    }
+    .desc{
+      .descMain{
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        margin-bottom: 10px;
+        i{
+          font-size: 38px!important;
+          color:#DF0002
+        }
+      }
+    }
+  }
+  .ant-modal-footer{
+    border-top: none;
+    text-align: center;
+    padding-bottom: 40px;
+    button{
+      width: 120px;
+      margin:0px 20px;
+      &.ant-btn-danger{
+        background-color: #fff;
+        color: #DF0002;
+        border-color: #D0D0D0;
+      }
+    }
+  }
+}

src/forge/Component/DrawerPanel.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { Drawer , Tree , Spin } from 'antd';
+import './Component.scss';
+import axios from 'axios';
+const { TreeNode , DirectoryTree } = Tree;
+
+function turnbar(str){
+  if(str && str.length>0 && str.indexOf("/")>-1){
+    return str.replaceAll('/','%2F');
+  }
+  return str;
+}
+function DrawerPanel({visible,onClose,branch,owner,projectsId,history, name , list}){
+  const [ treeData , setTreeData ] = useState(undefined);
+  const [ isSpin , setIsSpin ] = useState(true);
+  const [first , setFirst ] = useState(true);
+  useEffect(()=>{
+    if(visible && first){
+      if(list){
+        setTreeData(list);
+        setIsSpin(false);
+      }else{
+        getMenulist();
+      }
+      setFirst(false);
+    }
+  },[visible])
+
+  function getMenulist(){
+    const url = `/${owner}/${projectsId}/entries.json`;
+    axios.get(url,{ params: { ref: branch } }).then(result=>{
+      if(result){
+        setTreeData(result.data.entries);
+      }
+      setIsSpin(false);
+    }).catch(error=>{})
+  }
+
+  function renderTreeNodes(data) {
+    return data && data.length > 0 && data.map((item) => {
+      return (
+        <TreeNode title={item.name} key={item.key} dataRef={item} isLeaf={item.type === "file"}>
+          {renderTreeNodes(item.children)}
+        </TreeNode>
+      );
+    });
+  }
+
+  function onLoadData(tr){
+    return new Promise((resolve) => {
+      if (tr.props.children) {
+          resolve();
+          return;
+      }
+      let en = [];
+      const url = `/${owner}/${projectsId}/sub_entries.json`;
+      axios.get(url, { 
+        params:{
+          filepath:tr.props.dataRef.path,
+          ref:branch,
+          type:"dir"
+        }
+      }).then((result) => {
+        if(result){
+          en =  result.data.entries;
+        }
+      }).catch(error=>{})
+      setTimeout(() => {
+        tr.props.dataRef.children = en;
+        setTreeData([...treeData]);
+        resolve();
+      }, 2000);
+    });
+  }
+
+  function selectTree(keys,event){
+    let dataref = event.node.props.dataRef;
+    if(dataref.type==="file"){
+      onClose();
+      let value = turnbar(branch);
+      history.push(`/projects/${owner}/${projectsId}/tree/${value}/${dataref.path}`);
+    }
+  }
+
+  return(
+    <Drawer
+      placement="left"
+      visible={visible}
+      closable={false}
+      onClose={onClose}
+      width={"320px"}
+      maskStyle={{backgroundColor:'rgba(0,0,0,0.09)'}}
+    >
+      <Spin spinning={isSpin}>
+        <div className="drawerHead">
+          <p className="font-20">{name}</p>
+          <p><i class="iconfont icon-fenzhi2 font-18 color-grey-9 mr3"></i>{branch}</p>
+        </div>
+        <DirectoryTree loadData={onLoadData} onSelect={selectTree}>
+          {treeData && renderTreeNodes(treeData)}
+        </DirectoryTree>
+      </Spin>
+    </Drawer>
+  )
+}
+export default DrawerPanel;

src/forge/Component/EAccount.css

@@ -0,0 +1,9 @@
+.ant-modal-mask {
+  z-index: 1001;
+}
+
+.ant-modal-wrap {
+  z-index: 1002;
+}
+
+/*# sourceMappingURL=EAccount.css.map */

src/forge/Component/EAccount.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["EAccount.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE","file":"EAccount.css"}

src/forge/Component/EAccount.scss

@@ -0,0 +1,6 @@
+.ant-modal-mask{
+  z-index: 1001;
+}
+.ant-modal-wrap{
+  z-index: 1002;
+}

src/forge/Component/EducoderAccount.jsx

@@ -0,0 +1,60 @@
+import React , {forwardRef, useEffect} from 'react';
+import { Modal , Form , Input , Button } from 'antd';
+import './EAccount.scss';
+
+function EducoderAccount({form , visible , onOk , email}){
+  const { getFieldDecorator, validateFields , setFieldsValue } = form;
+
+  useEffect(()=>{
+    if(email){
+      setFieldsValue({email})
+    }
+  },[email])
+
+  function onSure(){
+    validateFields((error,values)=>{
+      if(!error){
+        onOk(values);
+      }
+    })
+  }
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
+  return(
+    <Modal 
+      visible={visible}
+      title="提示"
+      width="500px"
+      closable={false}
+      footer={
+        <Button type="primary" onClick={onSure}>确定</Button>
+      }
+      centered
+    >
+      <div>
+        <p className="mb15 edu-txt-center" style={{maxWidth:"350px",margin:"0px auto"}}>
+        为确保您能正常使用平台功能，请确认以下信息:
+        </p>
+        <Form {...layout}>
+          <Form.Item label="邮箱">
+            {getFieldDecorator("email",{
+              rules:[{required:true,message:"请输入邮箱账号"}]
+            })(
+              <Input placeholder="请输入您的邮箱账号" width="220px"/>
+            )}
+          </Form.Item>
+          <Form.Item label="密码">
+            {getFieldDecorator("password",{
+              rules:[{required:true,message:"请输入邮箱密码"}]
+            })(
+              <Input.Password placeholder="请输入您的邮箱密码" width="220px"/>
+            )}
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+export default Form.create()(forwardRef(EducoderAccount));

src/forge/Component/Handbook.jsx

@@ -5,7 +5,7 @@ import './Component.scss';
 export default (()=>{
   return(
     <div className="handleBox">
-      <a href="https://www.trustie.net/forums/82/memos/3075" target="_blank" >
+      <a href="https://forum.trustie.net/forums/3075/detail" target="_blank" >
         <img src={Handbook} alt=""/>
       </a>
     </div>

src/forge/Component/HeadSearch.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Input ,notification} from "antd";
+
+const { Search } = Input;
+export default ({history}) => {
+  const [openSearch, setOpenSearch] = useState(false);
+
+  function onGlobalSearch(value) {
+    history.push('/search?value=' + value);
+    // window.location.href = `search?value=` + value;
+    // history.push({
+    //   pathname:'/search',
+    //   state:value
+    // })
+  }
+  return (
+    <React.Fragment>
+      {
+        openSearch ?
+          <div
+            onBlur={() => {
+              setTimeout(() => {
+                setOpenSearch(false)
+              }, 500)
+            }}
+          >
+            <Search placeholder="请输入搜索关键字"
+              className={`search-input mr20`}
+              onSearch={onGlobalSearch}
+              autoFocus={true}
+              style={{width:'260px'}}
+            />
+          </div>
+          :
+          <i className="iconfont icon-sousuo font-18 color-grey-6 ml30" onClick={() => {
+            setOpenSearch(true)
+          }} />
+      }
+    </React.Fragment>
+  )
+};

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;

src/forge/Component/LanguagePower.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { FlexAJ  } from '../Component/layout';
+
+function LanguagePower({languages}){
+  const [ array , setArray ] = useState(undefined);
+
+  useEffect(()=>{
+    if(languages){
+      let arr = [];
+      Object.keys(languages).map((item,key)=>{
+        arr.push({name:item,percent:languages[item],color:getColor()});
+      })
+      setArray(arr);
+    }
+  },[languages])
+
+   function getColor(){
+      let str = "#";
+      let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
+      for(var i=0;i<6;i++){
+        let num = parseInt(Math.random() * 16);
+        str+=arr[num];
+      }
+      return str;
+    }
+  return(
+    <div>
+      <p className="font-16 color-ooo aboutSubTitle">开发语言</p>
+      <div className="progress">
+        {
+          array && array.map((item,key)=>{
+            return(
+              <span style={{width:item.percent,backgroundColor:item.color}}></span>
+            )
+          })
+        }
+      </div>
+      {
+        array && array.length > 0 &&
+        <FlexAJ className="progresstip">
+          {
+            array.map((item,key)=>{
+              return(
+                <span><i className="zero" style={{backgroundColor:`${item.color}`}}></i><span>{item.name}</span><span>{item.percent}</span></span>
+              )
+            })
+          }
+        </FlexAJ>
+      }
+      
+    </div>
+  )
+}
+export default LanguagePower;

src/forge/Component/ListCount.jsx

@@ -19,7 +19,7 @@ export default (({fork,parise})=>{
   }`;
   const SpanStyleparise = styled.span`{
     display:flex;
-    align-item:center;
+    align-items:center;
     margin-left:30px;
     padding:0px 12px;
     border-radius:13px;

src/forge/Component/MemberCards.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import './Component.scss';
+import { Button } from 'antd';
 import styled from 'styled-components';
+import FocusButton from "../UsersList/focus_button";
+import { getImageUrl } from 'educoder';
+import { Link } from 'react-router-dom';
 
 const Img = styled.img`{
   border-radius:50%;
@@ -28,26 +32,8 @@ const I = styled.i`{
   font-size:13px!important;
   color:#60B25E;
   margin-right:2px;
-}`
-const FocusBtn = styled.a`{
-  display:inline-block;
-  height:30px;
-  line-height:26px;
-  padding:0px 12px;
-  background-color:#fafafa;
-  border:1px solid #eee;
-  border-radius:2px;
-  color:#888!important;
-}`
-const Ifocused = styled.i`{
-  font-size:16px!important;
-  color:#FFA802;
-  margin-right:4px;
-}`
-const Ifocus = styled.i`{
-  font-size:16px!important;
-  color:#BBBBBB;
-  margin-right:4px;
+  height:17px;
+  line-height:17px;
 }`
 const Div = styled.div`{
   margin-bottom: 18px;
@@ -56,17 +42,18 @@ const Div = styled.div`{
   align-items: center;
   border:1px solid #eee;
 }`
-export default (({img,name,time, focusStatus})=>{
-  return(
+export default (({ user , img, name, time, focusStatus, is_current_user, login , successFunc }) => {
+  return (
     <Div>
-      <Img src={img}/>
+      <Link to={`/users/${user && user.login}`}><Img src={getImageUrl(`/${img}`)} /></Link>
       <div className="m-infos">
-        <Name>{name}</Name>
+        <Link to={`/users/${user && user.login}`}><Name>{name}</Name></Link>
         <Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
         {
-          focusStatus ? 
-          <FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> : 
-          <FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
+          is_current_user ?
+          <Button type="default">当前用户</Button>
+          : 
+          <FocusButton is_watch={focusStatus} id={login} successFunc={successFunc}/>
         }
       </div>
     </Div>

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;

src/forge/Component/Monaco.jsx

@@ -0,0 +1,62 @@
+import React, {useEffect, useRef, useState} from 'react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import './Component.scss';
+
+function Monaco(props) {
+  const {
+    style = { // dom节点样式
+      height: '400px',
+    },
+    value = '', // 代码文本
+    onChange = () => { // 改变的事件
+    },
+    fontSize = 14, // 代码字体大小
+    monacoOptions = {
+      scrollBeyondLastLine: false,
+      lineNumbers: "off",
+      wordWrap: true,
+      overviewRulerBorder: true,
+      lineHeight: 24,
+      readOnly:true
+    }, // monaco 自定义属性
+    language = 'html', // 语言 支持 js ts sql css json html等
+  } = props;
+  const editOrRef = useRef();
+  const ThisEditor = useRef();
+  useEffect(() => {
+    ThisEditor.current = monaco.editor.create(editOrRef.current, {
+      value: value || '',
+      language,
+      theme: "vs-grey",
+      fontSize: fontSize + 'px',
+      minimap: { // 关闭代码缩略图
+        enabled: false,
+      },
+      ...monacoOptions,
+    });
+ 
+    ThisEditor.current.onDidChangeModelContent((e) => {
+      let newValue = ThisEditor.current.getValue();
+      onChange(newValue);
+    });
+    return () => {
+      ThisEditor.current.dispose();
+      ThisEditor.current = undefined; // 清除编辑器对象
+    }
+  }, []);
+  useEffect(() => {
+    if (ThisEditor.current) {
+      ThisEditor.current.updateOptions({
+        fontSize: fontSize + 'px',
+      })
+    }
+  }, [fontSize]);
+ 
+  return (
+    <div style={style} ref={editOrRef}>
+ 
+    </div>
+  );
+}
+ 
+export default Monaco;

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>
+  )
+})

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>
+      );
   }
-}
+}

src/forge/Component/PasswordAuthority.jsx

@@ -0,0 +1,46 @@
+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(){
+    setAuthorityVal(undefined);
+    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;

src/forge/Component/Releases.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AlignCenter , AlignTop , FlexAJ  } from '../Component/layout';
+import { Link } from 'react-router-dom';
+
+function Releases({owner,projectsId,releaseVersions , baseOperate , projectType}){
+  
+  return(
+    <div>
+      <Link to={`/projects/${owner}/${projectsId}/releases`} className="font-16 color-ooo aboutSubTitle">
+        <span>发行版</span>
+        { releaseVersions && releaseVersions.total_count > 0 && <span className="infoCount">{releaseVersions.total_count}</span>}
+      </Link>
+      {
+        releaseVersions && releaseVersions.total_count>0 ?
+          releaseVersions.list.map((item,key)=>{
+            return(
+            key === 0 &&<AlignTop className="mt10">
+              <div>
+                <p className="font-16">
+                  <Link to={`/projects/${owner}/${projectsId}/releases`} className="color-grey-3">发布{item.name}版本</Link>
+                  <span className="laterest">最新</span>
+                </p>
+                <p className="color-grey-3 font-12">{item.created_at}</p>
+              </div>
+            </AlignTop>
+            )
+          })
+        :
+        <div className="mt8">
+          您暂未发布任何版本{baseOperate && projectType !==2 && <Link className="color-blue ml20" to={`/projects/${owner}/${projectsId}/releases/new`}>创建新版本</Link>}
+        </div>
+      }
+      
+    </div>
+  )
+}
+export default Releases;

src/forge/Component/Search.jsx

@@ -2,13 +2,15 @@ import React from "react";
 import { Input } from "antd";
 
 const { Search } = Input;
-export default ({ placeholder , onSearch }) => {
+export default ({ placeholder , onSearch , onChange }) => {
   return (
     <Search 
+      allowClear
       placeholder={placeholder}
       enterButton={'搜索'}
       onSearch={onSearch}
       width="300px"
+      onChange={onChange}
     ></Search>
   )
 };

src/forge/Component/SearchUser.jsx

@@ -2,52 +2,53 @@ import React , { useState , useEffect } from 'react';
 import { AutoComplete } from 'antd';
 import { getImageUrl } from "educoder";
 import axios from 'axios';
+
 const Option = AutoComplete.Option;
 
-export default ({ getUser })=>{
+export default ({ getUser , placeholder, width ,value })=>{
+  const [ source , setSource ] = useState(undefined);
   const [ searchKey , setSearchKey ] = useState(undefined);
-  const [ userDataSource , setUserDataSource ] = useState(undefined);
+
+  useEffect(()=>{
+    if(!value){
+      setSearchKey(undefined);
+    }
+  },[value])
+  
+  useEffect(()=>{
+    getUserList();
+  },[searchKey])
 
   function getUserList(e){
     const url = `/users/list.json`;
     axios.get(url, {
       params: {
-        search: e,
+        search: searchKey,
       },
-    })
-    .then((result) => {
+    }).then((result) => {
       if (result) {
-        setUserDataSource(result.data.users);
+        sourceOptions(result.data.users);
       }
     })
     .catch((error) => {
       console.log(error);
     });
   };
-  
-  function changeInputUser(value){
-    setSearchKey(value);
-    getUserList(value);
-  }
 
-  function selectInputUser(id, option){
-    setSearchKey(option.props.searchValue);
-    getUserList(option.props.searchValue);
-    getUser && getUser(id);
-  }
-  const source =
-    userDataSource && userDataSource.map((item, key) => {
+  function sourceOptions(userDataSource){
+    const s = userDataSource && userDataSource.map((item, key) => {
       return (
         <Option
           key={key}
           value={`${item.user_id}`}
-          searchValue={`${item.username}`}
+          login={`${item.login}`}
+          name={item.username}
         >
           <img
             className="user_img radius"
             width="28"
             height="28"
-            src={getImageUrl(`images/${item && item.image_url}`)}
+            src={getImageUrl(`/${item && item.image_url}`)}
             alt=""
           />
           <span className="ml10" style={{ "vertical-align": "middle" }}>
@@ -57,14 +58,31 @@ export default ({ getUser })=>{
         </Option>
       );
     });
+    setSource(s);
+  }
+
+  function changeInputUser(e){
+    setSearchKey(e);
+  };
+
+  // 选择用户
+  function selectInputUser(e, option){
+    setSearchKey(option.props.name);
+    getUser(option.props.login);
+  };
+
   return(
-    <AutoComplete
-      dataSource={source}
-      value={searchKey}
-      style={{ width: 300 }}
-      onChange={changeInputUser}
-      onSelect={selectInputUser}
-      placeholder="搜索需要添加的用户..."
-    />
+    <div className="addPanel">
+      <AutoComplete
+        getPopupContainer={trigger => trigger.parentNode}
+        dataSource={source}
+        value={searchKey}
+        style={{ width: width || 300 }}
+        onChange={changeInputUser}
+        onSelect={selectInputUser}
+        placeholder={placeholder || "搜索需要添加的用户..."}
+        allowClear
+      />
+    </div>
   )
 }

src/forge/Component/SiderBar.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { Popover , Tooltip } from 'antd';
+import './Component.scss';
+import axios from 'axios';
+import ShareModal from './SiderBarShareModal';
+
+const $ = window.$;
+
+$(window).scroll(function () {
+  if ($(".gotop").length > 0) {
+    if ($(document).scrollTop() > 0) {
+      $(".-task-sidebar .gotop").show();
+      $(".gotop").click(function () {
+        $("html,body").scrollTop(0);
+      });
+    }
+    if ($(document).scrollTop() === 0) {
+      $(".-task-sidebar .gotop").hide();
+    }
+  }
+});
+
+function SiderBar() {
+  const [ data , setData ] = useState([]);
+  const [ visible , setVisible ] = useState(false);
+
+  useEffect(()=>{
+    getFAQ();
+  },[])
+
+  function getFAQ(){
+    const url = `/faqs.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setData(result.data);
+      }
+    }).catch(error=>{})
+  }
+  function content(list){
+    return <div>
+      <p className="titlecontent">帮助</p>
+      <ul className="faqUl">
+        {
+          list && list.map((i,k)=>{
+            return(
+              <li key={i.question+k}><a href={`${i.url}`} title={i.question} target="_blank">{i.question}</a></li>
+            )
+          })
+        }
+      </ul>
+    </div>
+  }
+
+  function shareContent(){
+    return <div>
+      <ul className="shareUl">
+        <p className="titlecontent">分享到</p>
+        <li onClick={()=>setVisible(true)}><i className="iconfont icon-weixin2" style={{color:"#62b900"}}></i></li>
+      </ul>
+    </div>
+  }
+  return (
+    <div className={"-task-sidebar"} >
+      <ShareModal visible={visible} urlValue={window.location.href} onCancel={()=>setVisible(false)}/>
+      {
+        data && data.length > 0 && (data[0] && data[0].question) ? 
+        <Popover content={content(data)} overlayClassName="helpBox" placement={"left"}>
+          <div className="feedback">
+            <i className="iconfont icon-bangzhu font-22"></i>
+          </div>
+        </Popover>
+        :""
+      }
+      {/* <div className="scan pr" title="微信扫一扫">
+        <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
+      </div>*/}
+      <Popover content={shareContent()} overlayClassName="helpBox shareContent" placement={"left"}>
+        <div className="consult">
+          <i className="iconfont icon-fenxiang1"></i>
+        </div> 
+      </Popover>
+      <div className="gotop">
+        <Tooltip title="返回顶部" placement={"right"}>
+          <a><i className="iconfont icon-huidaodingbu1"></i></a>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default SiderBar;

src/forge/Component/SiderBarShareModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal } from 'antd';
+import QRCode  from 'qrcode.react';
+
+function SiderBarShareModal({visible,urlValue,onCancel}) {
+  return(
+    <Modal
+      title={"分享到微信"}
+      visible={visible}
+      width="500px"
+      closable={true}
+      footer={false}
+      onCancel={onCancel}
+    >
+      <div style={{textAlign:"center"}}>
+        {urlValue &&<QRCode
+          value={urlValue}
+          size={200}
+          fgColor="#000000"
+          style={{margin:"20px"}}
+        />}
+        <p>打开微信“扫一扫”,点击右上角菜单，即可将网页分享至朋友圈</p>
+      </div>
+    </Modal>
+  )
+}
+export default SiderBarShareModal;

src/forge/Component/User.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
-
-export default ({ url , name , column })=>{
+export default ({ url , name , column  , id , login })=>{
   const Img = styled.span`
     display:flex;
     ${column && "flex-direction: column;text-align:center;"}
@@ -19,8 +19,16 @@ export default ({ url , name , column })=>{
     }
   `;
   return(
+    id?
+    <Link to={`/users/${login}`}>
+      <Img>
+        { url && <img src={url} alt=""/> }
+        <span>{name}</span>
+      </Img>
+    </Link>
+    :
     <Img>
-      <img src={url} alt=""/>
+      { url && <img src={url} alt=""/> }
       <span>{name}</span>
     </Img>
   )

src/forge/Component/layout.jsx

@@ -24,18 +24,38 @@ export const AlignCenter = styled.div`{
   display:flex;
   align-items: center;
 }`
+export const AlignTop = styled.div`{
+  display:flex;
+  align-items: flex-start;
+}`
+export const AlignAJBottom = styled.div`{
+  display:flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}`
 // 左右结构
 export const Box = styled.div`{
   display:flex;
-  align-item:flex-start;
+  align-items:flex-start;
+}`
+export const LongWidth = styled.div`{
+  flex:1;
+  width:0;
+  border-radius:5px;
+  margin-bottom:30px;
 }`
 export const Long = styled.div`{
-  width:72%;
+  width:78%;
+  border-radius:5px;
+  margin-bottom:30px;
+}`
+export const ShortWidth = styled.div`{
+  width:300px;
   border-radius:5px;
   margin-bottom:30px;
 }`
 export const Short = styled.div`{
-  width:28%;
+  flex:1;
   border-radius:5px;
   margin-bottom:30px;
 }`
@@ -61,22 +81,24 @@ export const Redline = styled.a`{
   line-height:28px;
   border-radius:2px;
   border:1px solid #F73030;
-  color:#F73030;
+  color:${props => (props.bold ? "#fff" : "#F73030")} !important;
   padding:0px 12px;
   display:inline-block;
   min-width:80px;
   text-align:center;
+  background:${props => (props.bold ? "#F73030" : "#fff")};
 }`
 export const Greenline = styled.a`{
   height:30px;
   line-height:28px;
   border-radius:2px;
   border:1px solid #28BD6C;
-  color:#28BD6C;
+  color:${props => (props.bold ? "#fff" : "#28BD6C")} !important;
   padding:0px 12px;
   display:inline-block;
   min-width:80px;
   text-align:center;
+  background:${props => (props.bold ? "#28BD6C" : "#fff")};
 }`
 export const Greenback = styled.a`{
   height:30px;
@@ -94,7 +116,7 @@ export const Blueback = styled.a`{
   line-height:30px;
   border-radius:2px;
   background-color:rgba(80,145,255,1);
-  color:#fff;
+  color:#fff!important;
   padding:0px 12px;
   display:inline-block;
   min-width:80px;
@@ -154,3 +176,9 @@ export const Content = styled.div`{
   background-color:#fff;
   justify-content: center;
 }`
+export const GroupProjectBackgroup = styled.div`{
+  background:#fafafa;
+  padding:20px 30px;
+  width:100%;
+}`
+

src/forge/DevOps/About.jsx

@@ -1,27 +1,71 @@
-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 { AlignCenter, Blueback } from "../Component/layout";
+import PasswordAuthority from "../Component/PasswordAuthority";
+import styled from "styled-components";
+import { Form, Input , Spin , Button } from "antd";
+import ServiceModal from './ServiceModal';
+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 [ authorityVal , setAuthorityVal ] = useState(undefined);
+  const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
+
+  //0: 标识未开启devops
+  //1: 标识用户已填写了云服务器相关信息，但并未开启认证
+  const [step, setStep] = useState(0);
+  
+  const owner = props.match.params.owner;
+  const { user } = props;
+  const projectsId = props.match.params.projectsId;
+  const [ disabled, setDisabled ] = useState(false);
+  const [ typeFlag, setTypeFlag] = useState(false);
+
+  const AuthorLogin = props.projectDetail && props.projectDetail.author && props.projectDetail.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=>{
+      setIsSpining(false);
+      if(result && result.data ){
+        setStep(result.data.step);
+      }
+    }).catch(error=>{
+      setIsSpining(false);
+      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 +73,181 @@ 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(disabled){
+          setStep(1);
+        }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);
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            setIsSpining(false);
+          });
+        }
       }
+    });
+  }
+
+  // 选择服务器后调用接口，点击下一步（1是自有服务器，2是trustie服务器）
+  function sureModal(type){
+    if(type === 2){
+      setTypeFlag(false);
+      setIsSpining(true);
+      const url = `/users/ci/cloud_account/trustie_bind.json`;
+      axios.post(url,{
+        account:user && user.login
+      }).then(result=>{
+        setIsSpining(false);
+        if(result && result.data){
+          setStep(result.data.step);
+        }
+      }).catch(error=>{setIsSpining(false)})
+    }else{
+      setTypeFlag(true);
+    }
+  }
+
+  // 上一步
+  function goUpStep(step){
+    setTypeFlag(false);
+    setStep(step);
+  }
+
+  // 输入用户密码后下一步
+  function authStep(){
+    if(!authorityVal){
+      setAuthorityValFlag(true);
+      return;
+    }
+    setAuthorityValFlag(false);
+    setIsSpining(true);
+    const url = `/users/ci/oauth_grant.json`;
+    axios.get(url,{
+      params:{password:authorityVal}
+    }).then(result=>{
+      setIsSpining(false);
+      if(result){
+        setStep(result.data.step);
+      }
+    }).catch(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>
-  )
+
+  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 ?
+          <div className="noOperation">DevOps开启功能暂未对项目创建者以外的角色开放，可以联系项目创建者进行开启，开启后便可查看构建信息。</div>:""
+        }
+        <a href={"https://forum.trustie.net/forums/3110/detail"} target="_blank" style={{ color: "#5091FF"}}>
+          了解什么是DevOps？
+        </a>
+        <a href={"https://forum.trustie.net/forums/3080/detail"} target="_blank" style={{ color: "#5091FF"}}>
+          如何使用DevOps？
+        </a>
+        {
+          AuthorLogin === CurrentLogin ?
+          <React.Fragment>
+            {
+              step === 0 && !typeFlag ?
+                <ServiceModal sureModal={sureModal}></ServiceModal>
+              :""
+            }
+            { step === 0 && typeFlag ?
+              <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={disabled}
+                    />,
+                    true
+                  )}
+                  {helper(
+                    "服务器用户名：",
+                    "account",
+                    [{ required: true, message: "请输入服务器用户名" }],
+                    <Input placeholder="请输入服务器用户名" size="large" disabled={disabled}/>,
+                    true
+                  )}
+                  {helper(
+                    "服务器密码：",
+                    "secret",
+                    [{ required: true, message: "请输入服务器密码" }],
+                    <Input.Password placeholder="请输入服务器密码" size="large" disabled={disabled}/>,
+                    true
+                  )}
+                </Form>
+                <AlignCenter>
+                  { !disabled && <Button className="mr20" onClick={()=>goUpStep(0)}>上一步</Button>}
+                  <Blueback onClick={goStep}>下一步</Blueback>
+                </AlignCenter>
+              </React.Fragment>
+              :""
+            }
+            {
+              step === 1 ?
+              <div>
+                <AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
+                  <span style={{marginBottom:"42px"}}>密码：</span>
+                  <div>
+                    <Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
+                    <p className="color-grey-9" style={{textAlign:"left",lineHeight:'21px'}}>您已保存相关服务器信息，请输入密码，<br/>确认授权DevOps应用</p>
+                  </div>
+                </AlignCenter>
+                <AlignCenter style={{justifyContent:'center'}}>
+                  <Blueback onClick={authStep} className="mt20">下一步</Blueback>
+                </AlignCenter>
+              </div>:""
+            }
+            { step === 2 ?
+              <div style={{textAlign:'center',marginTop:"20px"}}>
+                <Blueback onClick={startActive} className="mt20">开始激活</Blueback>
+              </div>:""
+            }
+          </React.Fragment>
+          :""
+        }
+      </div>
+    </Spin>
+  );
 }
-export default Form.create()(forwardRef(About));
+export default Form.create()(forwardRef(About));

src/forge/DevOps/Dispose.jsx

@@ -1,140 +1,167 @@
 import React , { useState , useEffect } from 'react';
+import { Spin , Pagination } from 'antd';
 import { Blueback } from '../Component/layout';
-import Editor from "react-monaco-editor";
-import Modals from './DisposeModal';
-import FileLanguage from '../Component/FileLanguage';
+import List from './Dispose/List';
+import Head from './Dispose/head';
 import axios from 'axios';
+import PipelineName from './Dispose/PipelineName';
 
+import styled from 'styled-components';
 
+const Div = styled.div`{
+  padding:24px 30px;
+}`;
+const limit = 15;
 function Dispose(props){
-  const [ info , setInfo ] = useState(undefined);
+  const [ spining , setSpining ] =  useState(true);
+  const [ updateInfo , setUpdateInfo ] = useState(undefined);
+  const [ list , setList ] = useState(undefined);
+  const [ permission , setPermission ] = useState(undefined);
   const [ visible , setVisible ] = useState(false);
-  const [ ymlValue , setYmlValue ] = useState("");
-  const [ six , setSix ] = useState(undefined);
-  const [ fileLanguage , setFileLanguage ] = useState(undefined);
-  const [ first , setFirst ] = useState(false);
+  const [ page , setPage ] = useState(1);
+  const [ totalCount , setTotalCount ] = useState(0);
+  const [ branchList , setBranchList ] =useState(undefined);
 
+
+  const projectDetail = props.projectDetail;
+  const current_user = props.current_user;
   let projectsId = props.match.params.projectsId; 
   let owner = props.match.params.owner; 
 
+  // 获取用户的身份角色
   useEffect(()=>{
-    if(projectsId){
-      const url = '/dev_ops/builds/get_trustie_pipeline.json';
-      axios.get(url,{
-        params:{
-          project_id:projectsId
-        }
-      }).then(result=>{
-        if(result && result.data.content){
-          setInfo(result.data);
-          setYmlValue(result.data.content);
-          setFirst(true);
-        }else{
-          setFirst(false);
-        }
-      }).catch(error=>{
-        console.log(error);
-      })
+    if(projectDetail){
+      setPermission(props.projectDetail.permission);
     }
-  },[])
+  },[projectDetail])
 
-  useEffect(()=>{
-    const url = '/dev_ops/languages/common.json';
-    axios.get(url).then(result=>{
-      if(result){
-        setSix(result.data);
+  function Init(){
+    const url = `/ci/pipelines/list.json`;
+    axios.get(url,{
+      params:{
+        identifier:projectsId,owner,
+        page,limit
       }
-    }).catch(error=>{
-      console.log(error);
-    })
-  },[])
-
-  // 修改文件内容
-  function changeEditor(value){
-    setYmlValue(value);
+    }).then(result=>{
+      if(result && result.data){
+        setList(result.data.pipelines);
+      }
+      setSpining(false);
+    }).catch(error=>{setSpining(false);})
   }
 
-  // 切换语言
-  function select_language(value,array){
-    setFileLanguage(value);
-    // console.log(array);
-    setYmlValue( array && array.content);
-  }
+  useEffect(()=>{
+    Init();
+  },[page])
 
-  // 确定提交
-  function submit(){
-    let url = '';
-    let params = {
-      branch: "master",
-      content:ymlValue,
-      filepath:info && info.name,
-      message:''
-    }
-    if(first){
-      // 为true，则是编辑否则是新建
-      url = `/${owner}/${projectsId}/update_file.json`;
-      axios.put(url,{
-        ...params,
-        sha:info && info.sha
-      }).then(result=>{
-        if(result){
-          setVisible(true);
+  useEffect(()=>{
+    if(owner && projectsId){
+      const url = `/${owner}/${projectsId}/branches.json`;
+      axios.get(url).then(result=>{
+        if(result && result.data){
+          setBranchList(result.data);
         }
-      }).catch(error=>{
-        console.log(error);
-      })
+      }).catch(error=>{})
+    }
+  },[owner,projectsId])
+
+  // 新增/编辑流水线
+  function addNew(pipeline_name,id,branch,event){
+    setVisible(true);
+    setUpdateInfo(undefined);
+    if(pipeline_name){
+      let eventA = event.split(",");
+      let l = {pipeline_name,id,branch,event:eventA}
+      setUpdateInfo(l);
     }else{
-      url = `/${owner}/${projectsId}/create_file.json`;
-      axios.post(url,params).then(result=>{
-        if(result){
-          setVisible(true);
-        }
-      }).catch(error=>{
-        console.log(error);
-      })
+      setUpdateInfo(undefined);
     }
   }
-  function suresubmit(){
-    props.history.push(`/projects/${owner}/${projectsId}/ops/list`);
-  }
-  
-  return(
-    <React.Fragment>
-      <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>
+
+  function onOk(pipeline_name,updateId,branch,event){
+    if(pipeline_name){
+      let eventStr = "";
+      for(var i = 0;i<event.length;i++){
+        eventStr +=event[i]+",";
       }
-      <div className="mt20 mb20">
-        <FileLanguage language={fileLanguage} select_language={select_language}/>
+      eventStr = eventStr.substring(0,eventStr.length-1);
+      if(!updateId){
+        // 新增
+        const url = `/ci/pipelines.json`;
+        axios.post(url,{
+          pipeline_name,
+          file_name:".trustie-pipeline.yml",
+          repo:projectsId,branch,event:eventStr,owner
+        }).then(result=>{
+          setVisible(false);
+          if(result && result.data){
+            props.showNotification("流水线新增成功，请进行工作流配置！");
+            props.history.push(`/projects/${owner}/${projectsId}/devops/dispose/${result.data.id}`);
+          }else{
+            props.showNotification("流水线新增失败，请稍后再试！");
+          }
+        }).catch(error=>{})
+      }else{
+        // 修改
+        const url = `/ci/pipelines/${updateId}.json`;
+        axios.put(url,{
+          pipeline_name,repo:projectsId,branch,event:eventStr,owner
+        }).then(result=>{
+          if(result && result.data){
+            setVisible(false);
+            Init();
+            props.showNotification("流水线名称更新成功！");
+          }else{
+            props.showNotification("流水线名称更新失败，请稍后再试！");
+          }
+        }).catch(error=>{})
+      }
+    }else{
+      props.showNotification("请输入流水线名称！");
+    }
+  }
+
+  // 删除
+  function deleteFunc(id){
+    const url = `/ci/pipelines/${id}.json`;
+    axios.delete(url).then(result=>{
+      if(result && result.data){
+        props.showNotification("流水线删除成功！");
+        Init();
+      }
+    }).catch(error=>{})
+  }
+
+  // 模板管理
+  function toModalManage(){
+    props.history.push(`/projects/${owner}/${projectsId}/devops/mould`);
+  }
+
+  // 参数管理
+  function toparameter(){
+    props.history.push(`/projects/${owner}/${projectsId}/devops/params`);
+  }
+
+  const operate = current_user && (permission && permission !== "Reporter");
+  return(
+    <Spin spinning={spining}>
+      <PipelineName branchList={branchList} visible={visible} value={updateInfo} onCancel={()=>setVisible(false)} onOk={onOk}/>
+      <div className="disposePanel">
+        <Head manager={ operate ? toModalManage : undefined} parameter={operate ? toparameter :undefined}/>
+        <Div>
+          { operate &&  <Blueback onClick={()=>addNew(undefined,undefined)}>新增流水线</Blueback> }
+          <div className="mt20 disposeList">
+            <List list={list} operate={operate} projectsId={projectsId} owner={owner} showModal={addNew} deleteFunc={deleteFunc}/>
+            {
+              totalCount > limit &&
+              <div className="mt20 pb20" style={{textAlign:'center'}}>
+                <Pagination simple current={page} pageSize={limit} total={totalCount} onChange={(page)=>setPage(page)}/>
+              </div>
+            }
+          </div>
+        </Div>
       </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>
-        <Editor
-          height="300px"
-          language={"java"}
-          theme={"vs-grey"}
-          defaultValue="请输入内容"
-          value={ymlValue}
-          options={"editor_options"}
-          onChange={changeEditor}
-        ></Editor>
-      </div>
-      <Blueback onClick={submit}>确定提交</Blueback>
-    </React.Fragment>
+    </Spin>
   )
 }
 export default Dispose;

src/forge/DevOps/Dispose/Choosen.jsx

@@ -0,0 +1,100 @@
+import React , { useEffect , useState } from 'react';
+
+function Choosen({ chooseFunc, temp , templateId , category }){
+  const [ tempId, setTemId ] = useState(undefined);
+  const [ cate , setCate ]= useState(undefined);
+  const [ templates , setTemplates ] = useState(undefined);
+  const [ categories , setCategories ] = useState(undefined);
+
+  useEffect(()=>{
+    if(templateId){
+      setTemId(templateId);
+    }
+  },[templateId])
+
+  useEffect(()=>{
+    if(category){
+      setCate(category);
+    }
+  },[category])
+  
+
+  useEffect(()=>{
+    if(temp && temp.length > 0){
+      if(temp[0].category !== "初始化"){
+        setCategories(temp);
+      }else{
+        setCategories(undefined);
+      }
+      if(category && temp[0].category !== "初始化" && category !== "初始化"){
+        let c = temp.filter(item=>item.category === category);
+        let t = c && c.length > 0 && c[0].templates;
+        setTemplates(t);
+        setCate(category);
+      }else{
+        setTemplates(temp[0].templates);
+        setCate(temp[0].category);
+      }
+    }else{
+      setTemplates(undefined);
+      setCate(undefined);
+      setCategories(undefined);
+    }
+  },[temp,category])
+
+  // 选择类别
+  function changeCate(cate){
+    setCate(cate);
+    let c = categories && categories.filter(item=>item.category === cate);
+    let t = c && c[0].templates;
+    setTemplates(t);
+    let m_t_id = t && t.length>0 && t[0].id;
+    let m_t_content = t && t.length>0 && t[0].content;
+    setTemId(m_t_id);
+    chooseFunc && chooseFunc(m_t_content,m_t_id,cate);
+  }
+
+
+  // 选择模板
+  function chooseOption(id){
+    let item = templates.filter(item=>item.id === id);
+    let content = item && item.length >0 && item[0].content;
+    chooseFunc && chooseFunc(content,id,cate);
+    setTemId(id);
+  }
+
+  return(
+    <React.Fragment>
+      {
+        categories && categories.length > 0 &&
+        <div className="choosenList">
+          <span>模板类别：</span>
+          <ul>
+          {
+            categories.map((item,key)=>{
+              return(
+                <li className={cate === item.category ?"active":""} onClick={()=>changeCate(item.category)}>{item.category}</li>)
+              })
+            }
+          </ul>
+        </div>
+      }
+      {
+        templates && templates.length> 0 &&
+        <div className="choosenList">
+          <span>模板选择：</span>
+          <ul>
+            {
+              templates.map((item,key)=>{
+                return(
+                  <li className={tempId === item.id ? "active":""} onClick={()=>chooseOption(item.id)}>{item.template_name}</li>
+                )
+              })
+            }
+          </ul>
+        </div>
+      }
+    </React.Fragment>
+  )
+}
+export default Choosen;

src/forge/DevOps/Dispose/Editors.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Editor from 'react-monaco-editor';
+
+function Editors({value,onChange,theme,height,visible,width="100%",Numbers="on"}){
+  const editor_options = {
+    lineNumbers: Numbers,
+    wordWrap: true, //强制换行
+    selectOnLineNumbers: true,
+    lineHeight: 24,
+    renderLineHighlight: "line",
+    revealHorizontalRightPadding: 5,
+    placeholder:"请输入内容",
+    readOnly: visible,
+    cursorStyle: visible ? "underline-thin" : "line",
+    folding: true,
+    foldingStrategy: "indentation", // 代码可分小段折叠
+    automaticLayout: true, // 自适应布局
+    minimap: {
+      // 不要小地图
+      enabled: false,
+    },
+  }
+  return(
+    <Editor
+      height={height}
+      width={width}
+      language={"yaml"}
+      theme={theme}
+      placeholder="请输入内容"
+      value={value}
+      options={editor_options}
+      onChange={(value)=>onChange(value)}
+      disabled={true}
+    ></Editor>
+  )
+}
+export default Editors;

src/forge/DevOps/Dispose/Init.jsx

@@ -0,0 +1,66 @@
+import React , { useEffect , useState } from 'react';
+import { Button } from 'antd';
+import Choosen from './Choosen';
+import Editors from './Editors';
+
+function Init({ datas , templates , saveFunc , saveDatas}){
+  const [ templateId , setTemplateId ] = useState(undefined);
+  const [ ymlValue , setYmlValue ] = useState(undefined);
+  const [ temp , setTemp ] = useState(undefined);
+
+  useEffect(()=>{
+    if(templates && templates.length > 0){
+      setTemp(templates)
+    }
+  },[templates])
+
+  useEffect(()=>{
+    if(datas && datas.length > 0){
+      setTemplateId(datas[0].template_id);
+      setYmlValue(datas[0].content);
+    }
+  },[datas])
+
+  // 选择模板
+  function chooseFunc(content,id,cate){
+    setTemplateId(id);
+    setYmlValue(content);
+    recieveData(id,content);
+  }
+
+  function recieveData(id,content){
+    let steps = datas;
+    if(datas && datas.length>0){
+      steps[0].content = content || ymlValue;
+      steps[0].template_id = id || templateId ;
+    }else{
+      steps = 
+      [{
+        step_name:"初始化",
+        show_index:1,
+        content:content || ymlValue,
+        template_id:id || templateId
+      }]
+    }
+    saveDatas(steps);
+  }
+
+  // 点击下一步时
+  function nextStep(){
+    recieveData();
+    saveFunc(undefined,undefined,undefined,undefined,"next");
+  }
+
+  return(
+    <div>
+      <Choosen chooseFunc={chooseFunc} templateId={templateId} temp={temp}/>
+      <div className="mt15">
+        <Editors value={ymlValue} onChange={setYmlValue} theme={"vs-dark"} height={"400px"}/>
+      </div>
+      <div className="mt20">
+        <Button type={"primary"} onClick={nextStep}>下一步</Button>
+      </div>
+    </div>
+  )
+}
+export default Init;

src/forge/DevOps/Dispose/List.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Table , Popconfirm } from 'antd';
+import { Link } from 'react-router-dom';
+
+// const STATUS = {
+//   running:"运行中",
+//   failure:"未通过",
+//   error:"未通过",
+//   success:"已通过",
+//   killed:"已撤销",
+//   pending:"准备中"
+// }
+function turnbar(str){
+  if(str && str.length>0 && str.indexOf("/")>-1){
+    return str.replaceAll('/','%2F');
+  }
+  return str;
+}
+function renderTableStatus(status) {
+  switch (status) {
+    case "running":
+      return (
+        <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>
+      );
+    case 'killed':
+      return (
+        <span className="statusTag killed">
+          <i className="iconfont icon-weitongguo"></i>已撤销
+        </span>
+      );
+    default :
+      return (
+        <span className="statusTag Preparing">
+          <i className="iconfont icon-zhunbeizhong"></i>准备中
+        </span>
+      );
+  }
+}
+function List({ list, operate , projectsId , owner , showModal , deleteFunc }){
+  
+  const columns = [
+    {
+      title:"流水线名称",
+      dataIndex:"pipeline_name",
+      key:1,
+      ellipsis:true,
+      render:(txt,item)=>{
+        return(
+          <span onDoubleClick={()=>showModal(txt,item.id,item.branch,item.event)} style={{display:"block",cursor:"pointer"}}>{txt}</span>
+        )
+      }
+    },
+    {
+      title:"文件名称",
+      dataIndex:"file_name",
+      key:1,
+      width:"15%",
+      ellipsis:true,
+      render:(value,item)=>{
+        let v = turnbar(item.branch);
+        return(
+          <Link to={`/projects/${owner}/${projectsId}/tree/${v}/${value}`} className="color-blue">{value}</Link>
+        )
+      }
+    },
+    {
+      title:"触发分支",
+      dataIndex:"branch",
+      key:1,
+      width:"10%",
+      ellipsis:true
+    },
+    {
+      title:"触发事件",
+      dataIndex:"event",
+      key:1,
+      width:"10%",
+      ellipsis:true
+    },
+    {
+      title:"最近构建时间",
+      dataIndex:"last_build_time",
+      key:1,
+      width:"15%",
+      ellipsis:true
+    },
+    {
+      title:"最近构建状态",
+      dataIndex:"pipeline_status",
+      key:1,
+      width:"12%",
+      ellipsis:true,
+      render:(txt)=>{
+        return renderTableStatus(txt)
+      }
+    },
+    {
+      title:"操作",
+      dataIndex:"operation",
+      key:1,
+      width:"21%",
+      render:(txt,item)=>{
+        return(
+          <span>
+            { operate ? 
+              <Link to={`/projects/${owner}/${projectsId}/devops/dispose/${item.id}`} className="mr10 color-grey-6">
+              <i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</Link> :""
+            }
+            { operate ? 
+              <Popconfirm title={"确定要删除此流水线？"} onConfirm={()=>deleteFunc(item.id)} okText="确定" cancelText={"取消"}>
+                <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
+              </Popconfirm>:""
+            }
+            <Link to={`/projects/${owner}/${projectsId}/devops/list/${item.branch}`} className="color-grey-6"><i className="iconfont icon-yunhang font-13 mr3"></i>查看运行记录</Link>
+          </span>
+        )
+      }
+    }
+  ]
+  return(
+    <Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
+  )
+}
+export default List;

src/forge/DevOps/Dispose/PipelineName.jsx

@@ -0,0 +1,67 @@
+import React , { useEffect , useState } from 'react';
+import { Modal , Input , Select } from 'antd';
+const { Option }= Select;
+
+const EVENT = ["push","pull_request","tag","cron","custom","promote","rollback"]
+function PipelineName({visible,onCancel,onOk,value ,branchList}){
+  const [ name , setName ] = useState(undefined);
+  const [ branchValue , setBranchValue ] = useState(undefined);
+  const [ eventValue , setEventValue ] = useState([EVENT[0]]);
+
+  useEffect(()=>{
+    if(branchList && branchList.length>0){
+      setBranchValue(branchList[0].name);
+    }
+  },[branchList])
+
+  useEffect(()=>{
+    if(value){
+      setName(value.pipeline_name);
+      setBranchValue(value.branch);
+      setEventValue(value.event);
+    }else{
+      setName(undefined);
+    }
+  },[value])
+
+  function onSure(){
+    onOk(name,value && value.id,branchValue,eventValue);
+  }
+  return(
+    <Modal
+      visible={visible}
+      title="流水线名称"
+      width={"500px"}
+      onCancel={onCancel}
+      onOk={onSure}
+      centered={true}
+    >
+      <div className="choosenList">
+        <span>流水线名称:</span>
+        <Input value={name} onChange={(e)=>setName(e.target.value)} placeholder="请输入名称" style={{width:"340px",margin:"6px 0px"}}/>
+      </div>
+      <div className="choosenList mt20">
+        <span>触发条件:</span>
+        <Select value={branchValue} style={{width:"150px"}} dropdownClassName="chooseCon" onChange={(e)=>setBranchValue(e)}>
+          {
+            branchList && branchList.length>0 && branchList.map((item,key)=>{
+              return(
+                <Option value={item.name} key={key}>{item.name}</Option>
+              )
+            })
+          }
+        </Select>
+        <Select mode="multiple" allowClear value={eventValue} dropdownClassName="chooseCon" style={{width:"180px",marginLeft:"10px"}} onChange={(e)=>{console.log(e);setEventValue(e)}}>
+          {
+            EVENT.map((item,key)=>{
+              return(
+                <Option value={item} key={key}>{item}</Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    </Modal>
+  )
+}
+export default PipelineName;

src/forge/DevOps/Dispose/Stage.jsx

@@ -0,0 +1,102 @@
+import React , { useEffect , useState } from 'react';
+import { Button , Popconfirm } from 'antd';
+import { Cancel } from '../../Component/layout';
+import Item from './StageItem';
+
+function Stage({ 
+  templates , 
+  datas , 
+  saveDatas , 
+  saveFunc , 
+  stepName , 
+  deleteStep , 
+  deleteFunc , 
+  deleteFlag 
+}){
+  const [ stepList , setStepList ] = useState(undefined);
+  const [ temp , setTemp ] = useState(undefined);
+
+  useEffect(()=>{
+    if(templates && templates.length > 0){
+      setTemp(templates);
+    }
+  },[templates])
+
+  useEffect(()=>{
+    if(datas){
+      if(datas.length > 0 && stepList !== datas){
+        setStepList(datas);
+      }else if(datas.length === 0){
+        let list = [];
+        setStepList(list);
+      }
+    }
+  },[datas])
+
+  // 添加步骤
+  function addFunc(){
+    let list = stepList;
+    let length = list ? list.length : 0;
+    let pre = temp && temp.length > 0 && temp[0];
+    let c = pre && pre.category;
+    let child = pre && pre.templates && pre.templates.length > 0 && pre.templates[0];
+    let step = 
+    {
+      "category":c,
+      "step_name": stepName+`${length + 1}`,
+      "show_index": length + 1,
+      "content":child.content,
+      "template_id":child.id,
+      "hide":false
+    }
+    list.push(step);
+    saveDatas(list);
+  }
+
+  // 将修改的对应项保存在数组中
+  function saveItems(content,id,cate,key){
+    let item = stepList;
+    item[key].content = content;
+    item[key].template_id = id;
+    item[key].category = cate;
+    saveDatas([...item]);
+  }
+
+  function slideItems(key,hide){
+    let item = stepList;
+    item[key].hide = !hide;
+    setStepList([...item]);
+    saveDatas(item);
+  }
+
+  function deleteItem(id,key){
+    deleteStep(id,key);
+  }
+  // 点击下一步时
+  function nextStep(btn){
+    saveFunc(undefined,undefined,undefined,undefined,btn);
+  }
+
+  return(
+    <div>
+      {
+        stepList && stepList.length > 0 && stepList.map((item,key)=>{
+          return(
+            <Item item={item} templates={temp} k={key} saveItems={saveItems} slideItems={slideItems} deleteStep={deleteItem}/>
+          )
+        })
+      }
+      <a className="addStageBtn" onClick={addFunc}>+ 添加步骤</a>
+      <div className="mt20">
+        <Button type="primary" onClick={()=>nextStep("last")}>上一步</Button>
+        <Button className="ml20" type="primary" onClick={()=>nextStep("next")}>下一步</Button>
+        {!deleteFlag && 
+          <Popconfirm title={'确定要删除当前阶段吗'} okText="是" cancelText="否" onConfirm={deleteFunc}>
+            <Cancel className="ml20">删除</Cancel>
+          </Popconfirm>
+        }
+      </div>
+    </div>
+  )
+}
+export default Stage;

src/forge/DevOps/Dispose/StageItem.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FlexAJ } from '../../Component/layout';
+import Editors from './Editors';
+import Choosen from './Choosen';
+import { Popconfirm } from 'antd';
+
+
+function StageItem({item, templates,saveItems,k, slideItems , deleteStep}){
+  
+  function onChangevalue(value){
+    saveItems(value,item.template_id,item.category,k);
+  }
+  // 选择模板
+  function chooseFunc(content,id,cate){
+    saveItems(content,id,cate,k);
+  }
+
+  return(
+    <div className="stepsItem">
+      <FlexAJ className="stepsHead">
+        <span>{item.step_name}</span>
+        <span className="color-grey-9">
+          <Popconfirm
+            title={"确定要删除这个步骤吗?"}
+            okText="是"
+            cancelText="否"
+            onConfirm={() => deleteStep(item.id,k)}
+          ><a>
+            <i className="iconfont icon-lajitong1 font-14"></i></a>
+          </Popconfirm>
+          <a onClick={()=>slideItems(k,item.hide)}><i className={ (!item.hide || item.hide === false) ? "iconfont icon-sanjiaoxing-down font-14" :"iconfont icon-triangle font-14"}></i></a>
+        </span>
+      </FlexAJ>
+      <div className={(!item.hide || item.hide === false) ? "stepsBody active" : "stepsBody"}>
+        <Choosen chooseFunc={chooseFunc} category={item.category} templateId={item.template_id} temp={templates}/>
+        <Editors value={item.content} onChange={onChangevalue} theme="vs-dark" height="270px" />
+      </div>
+    </div>
+  )
+}
+export default StageItem;

src/forge/DevOps/Dispose/Sure.jsx

@@ -0,0 +1,32 @@
+import React ,{useEffect , useState} from 'react';
+import { Button } from 'antd';
+import Editors from './Editors';
+
+function Sure({datas , name , saveFunc , sureSubmit , loading}){
+  const [ value , setValue ] = useState(undefined);
+  useEffect(()=>{
+    if(datas && datas.content){
+      setValue(datas.content)
+    }
+  },[datas]);
+
+  function sure(){
+    sureSubmit();
+  }
+
+  return(
+    <div>
+      <div style={{padding:"0px 15px 15px 15px"}}>
+        工作流名称：{name}
+      </div>
+      <div className="editorBody" style={{marginTop:"0px"}}>
+        <Editors value={value} theme={"vs-grey"} height={"600px"} visible/>
+      </div>
+      <div className="mt20">
+        <Button type={"primary"} onClick={()=>saveFunc(undefined,undefined,undefined,undefined,"last")}>上一步</Button>
+        { value && <Button type={"primary"} loading={loading} className="ml20" onClick={sure}>确定提交</Button> }
+      </div>
+    </div>
+  )
+}
+export default Sure;

src/forge/DevOps/Dispose/head.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AlignCenterBetween , Blueline , FlexAJ } from '../../Component/layout';
+
+
+function head({manager , parameter}){
+  return(
+    <AlignCenterBetween>
+      <span className="font-20">工作流配置</span>
+      <FlexAJ>
+        {
+          parameter && <Blueline onClick={parameter}>参数管理</Blueline>
+        }
+        {
+          manager && <Blueline style={{marginLeft:"20px"}} onClick={manager}>模板管理</Blueline>
+        }
+        <a href={`https://forum.trustie.net/forums/3111/detail`} target="_blank" className="color-grey-6 ml20"><i className="iconfont icon-tishi1 font-14 mr3"></i>模板使用说明</a>
+      </FlexAJ>
+    </AlignCenterBetween>
+  )
+}
+export default head;

src/forge/DevOps/Dispose/menus.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import MenusRename from './menusRename';
+import MenusAdd from './menusAdd';
+
+const typeIcon = {
+  init:"icon-initialize",build:"icon-structure",deploy:"icon-arrange",customize:"icon-newStage",confirm:'icon-sure'
+}
+
+function Menus({step,changeStep, menuList , renameFunc , checkDatas , addFunc }){
+  
+  function InitActive(key,stage_type,stage_id,stage_name){
+    changeStep(key,stage_type,stage_id,stage_name);
+  }
+
+  // 新增阶段
+  function getName(name,index){
+    addFunc && addFunc(name,index);
+  }
+
+  return(
+    <ul className="menus">
+      {
+        menuList && menuList.length > 0 && menuList.map((item,key)=>{
+          return(
+            <React.Fragment key={item.id} >
+              <li onClick={()=>InitActive(item.show_index,item.stage_type,item.id,item.stage_name)} className={item.show_index === step ?"active":""}>
+                <i className={`iconfont ${typeIcon[`${item.stage_type}`]}`}></i>
+                <MenusRename renameFunc={renameFunc} id={item.id} name={item.stage_name} edit={item.stage_type !== "init" && item.stage_type !== "confirm"}/>
+              </li>
+              { key !== (menuList.length-1) && menuList.length < 7 ?
+                <MenusAdd checkDatas={checkDatas} k={key+2} getName={getName}/>:""
+              } 
+            </React.Fragment>
+          )
+        })
+      }
+    </ul>
+  )
+}
+export default Menus;

src/forge/DevOps/Dispose/menusAdd.jsx

@@ -0,0 +1,55 @@
+import React , { useState , useEffect } from 'react';
+import { Input } from 'antd';
+
+function menusAdd ({ getName , checkDatas , k }){
+  const [ show, setShow ] = useState(false);
+  const [ value , setValue ] = useState(undefined);
+  const [ index , setIndex ] = useState(undefined);
+  const [ref, setRef ] = useState(undefined);
+  const [put, setPut ] = useState(false);
+
+  useEffect(() => {
+    if (put && ref) {
+      ref.focus();
+    }
+  })
+  useEffect(() => {
+    if (k) {
+      setIndex(k);
+    }
+  },[k])
+
+
+  function blurInput(){
+    if(value){
+      getName(value , index);
+    }
+    setValue(undefined);
+    setShow(false);
+    setPut(false);
+  }
+
+  function showInput(){
+    let c = checkDatas();
+    if(c || c === "" ){
+      setShow(true);
+      setPut(true);
+    }
+  }
+
+  return(
+    <li className="menuAdd">
+      { !show && <i className="iconfont icon-tianjia" onClick={showInput}></i> }
+      <Input 
+        ref={(el) => setRef(el)} 
+        size={"small"} 
+        maxLength={8} 
+        style={{width:"75px",display : `${show?"block":'none'}`}} 
+        placeholder="新阶段名称" 
+        value={value} 
+        onChange={(e)=>setValue(e.target.value)} onBlur={blurInput} 
+      />
+    </li>
+  )
+}
+export default menusAdd;

src/forge/DevOps/Dispose/menusRename.jsx

@@ -0,0 +1,53 @@
+import React , { useEffect , useState } from 'react';
+import { Input } from 'antd';
+
+function menusRename({ name , edit , id , renameFunc }){
+  const [ n , setN ] = useState(undefined);
+  const [ show , setShow ] = useState(false);
+  const [ref, setRef ] = useState(undefined);
+  const [put, setPut ] = useState(false);
+
+  useEffect(() => {
+    if (edit && ref) {
+      ref.focus();
+    }
+  })
+
+  useEffect(()=>{
+    if(name){
+      setN(name)
+    }
+  },[name])
+
+  // 显示input框编辑
+  function changeShow(e){
+    e.stopPropagation();
+    setShow(true);
+    setPut(true);
+  }
+
+  function blurInput(e){
+    renameFunc(e.target.value,id);
+    setPut(false);
+    setShow(false);
+  }
+  return(
+    <div className="aboutEdit">
+      <span className="operateName">
+        { !show && n }
+        <Input 
+          ref={(el) => setRef(el)} 
+          value={n} 
+          size="small" 
+          maxLength={8} 
+          onClick={(e)=>e.stopPropagation()} 
+          onBlur={blurInput} 
+          style={{width:"75px",display : `${show?"block":'none'}`}} 
+          onChange={(e)=>setN(e.target.value)}
+        />
+        { !show && edit && <i className="iconfont icon-editUnder font-16 color-grey-9" onClick={changeShow}></i> }
+      </span>
+    </div>
+  )
+}
+export default menusRename

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)}

src/forge/DevOps/Index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React , { useEffect } from 'react';
 import { WhiteBack } from '../Component/layout';
 import './ops.scss';
 
@@ -10,27 +10,65 @@ const About = Loadable({
   loader: () => import('./About'),
   loading: Loading,
 })
-const Infos = Loadable({
-  loader: () => import('./Infos'),
+const New = Loadable({
+  loader: () => import('./disposePipeline'),
   loading: Loading,
 })
+const Dispose = Loadable({
+  loader: () => import('./Dispose'),
+  loading: Loading,
+})
+const Stucture = Loadable({
+  loader: () => import('./Structure'),
+  loading: Loading,
+})
+const Mould = Loadable({
+  loader: () => import('./Mould'),
+  loading: Loading,
+})
+const Params = Loadable({
+  loader: () => import('./Manage/Params'),
+  loading: Loading,
+})
+
 export default ((props)=>{
+
   return(
     <WhiteBack className="opsPanel">
       <Switch {...props}>
-        <Route path="/projects/:projectsId/ops/dispose"
+        <Route path="/projects/:owner/:projectsId/devops/dispose/:disposeId"
           render={
-            () => (<Infos {...props} />)
+            (p) => (<New {...props} {...p}/>)
           }
         ></Route>
-        <Route path="/projects/:projectsId/ops/list"
+        <Route path="/projects/:owner/:projectsId/devops/params"
           render={
-            () => (<Infos {...props} />)
+            (p) => (<Params {...props} {...p}/>)
           }
         ></Route>
-        <Route path="/projects/:projectsId/ops"
+        <Route path="/projects/:owner/:projectsId/devops/mould"
           render={
-            () => (<About {...props} />)
+            (p) => (<Mould {...props} {...p}/>)
+          }
+        ></Route>
+        <Route path="/projects/:owner/:projectsId/devops/dispose/new"
+          render={
+            (p) => (<New {...props} {...p}/>)
+          }
+        ></Route>
+        <Route path="/projects/:owner/:projectsId/devops/dispose"
+          render={
+            (p) => (<Dispose {...props} {...p}/>)
+          }
+        ></Route>
+        <Route path="/projects/:owner/:projectsId/devops/list/:branch"
+          render={
+            (p) => (<Stucture {...props} {...p}/>)
+          }
+        ></Route>
+        <Route path="/projects/:owner/:projectsId/devops"
+          render={
+            (p) => (<About {...props} {...p}/>)
           }
         ></Route>
       </Switch>

src/forge/DevOps/Infos.jsx

@@ -3,7 +3,6 @@ import { Banner } from '../Component/layout';
 import { Link } from 'react-router-dom';
 
 import Dispost from './Dispose';
-import Structure from './Structure';
 
 import styled from 'styled-components';
 
@@ -11,27 +10,26 @@ const Div = styled.div`{
   padding:24px 30px;
 }`;
 export default ((props)=>{
-  const [ menu , setMenu ] = useState(undefined);
+  const [ permission , setPermission ] = useState("");
+
+  const owner = props.match.params.owner;
+
+  const projectDetail = props.projectDetail;
 
-  const path = props.location.pathname;
   useEffect(()=>{
-    // console.log(props.match.params.projectsId)
-    if(path === `/projects/${props.match.params.projectsId}/ops/list`){
-      setMenu(true);
-    }else{
-      setMenu(false);
+    if(projectDetail){
+      setPermission(props.projectDetail.permission);
     }
-  },[path])
+  },[projectDetail])
+
 
   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`}>工作流配置</Link>}
       </Banner>
       <Div>
-        { menu && menu === true && <Structure {...props}/> }
-        { menu && menu === false && <Dispost {...props}/> }
+        <Dispost {...props}/>
       </Div>
     </div>
   )

src/forge/DevOps/Manage/Params.jsx

@@ -0,0 +1,119 @@
+import React , { useEffect , useState , useRef } from 'react';
+import { Banner , Blueback , FlexAJ , AlignCenter } from '../../Component/layout';
+import { Input , Table , Popconfirm , Pagination } from 'antd';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import New from './ParamsNew';
+import "./manage.scss";
+import axios from 'axios';
+import { result } from 'lodash';
+
+const Div = styled.div`{
+  padding:24px 30px;
+  min-height:420px;
+}`;
+function Params(props){
+  const [ list ,setList ] = useState(undefined);
+  const [ editList ,setEditList ] = useState(undefined);
+  const [ visible ,setVisible ] = useState(false);
+  
+  let projectsId = props.match.params.projectsId; 
+  let owner = props.match.params.owner; 
+
+  useEffect(()=>{
+    Init()
+  },[])
+
+  function Init(){
+    const url = `/ci/secrets.json`;
+    axios.get(url,{
+      params:{
+        owner,repo:projectsId
+      }
+    }).then(result=>{
+      if(result){
+        setList(result.data);
+      }
+    }).catch(error=>{})
+  }
+
+  const columns=[
+    {
+      title:"参数名",
+      dataIndex:"name",
+      key:1,
+      ellipsis:true
+    },
+    {
+      title:"操作",
+      dataIndex:"operation",
+      key:4,
+      render:(txt,item)=>{
+        return(
+          <React.Fragment>
+            <a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
+            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id,item.name)} okText="确定" cancelText={"取消"}>
+              <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
+            </Popconfirm>
+          </React.Fragment>
+        )
+      }
+    }
+  ]
+
+  // 编辑
+  function editMouldFunc(item){
+    setEditList(item);
+    setVisible(true);
+  }
+
+  // 删除
+  function deleteMouldFunc(id,name){
+    if(id && name){
+      const url = `/ci/secrets/${id}.json`;
+      axios.delete(url,{
+        params:{owner,repo:projectsId,name}
+      }).then(result=>{
+        if(result){
+          Init();
+          props.showNotification(`参数删除成功！`);
+        }
+      }).catch(error=>{})
+    }
+  }
+
+  function successFunc(values,id){
+    const url = `/ci/secrets.json?owner=${owner}&repo=${projectsId}`;
+    axios.post(url,{
+      ...values,id
+    }).then(result=>{
+      if(result){
+        props.showNotification(`${id ? '参数编辑':"新增参数"}成功！`);
+        Init();
+      }
+    }).catch(error=>{})
+  }
+
+  function CancelFunc(){
+    setVisible(false)
+  }
+
+  return(
+    <div>
+      <New visble={visible} successFunc={successFunc} CancelFunc={CancelFunc} editList={editList}/>
+      <Banner>
+        <FlexAJ>
+          <span className="font-18">工作流 - 参数管理</span>
+          <Link to={`/projects/${owner}/${projectsId}/devops/dispose`} className="font-14 color-grey-9 ml20">返回</Link>
+        </FlexAJ>
+      </Banner>
+      <Div className="disposeList">
+        <div style={{textAlign:"right"}}>
+          <Blueback onClick={()=>setVisible(true)}>新建</Blueback>
+        </div>
+        <Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
+      </Div>
+    </div>
+  )
+}
+export default Params;

src/forge/DevOps/Manage/ParamsNew.jsx

@@ -0,0 +1,73 @@
+import React , { useEffect , useState , useRef , forwardRef } from 'react';
+import { Modal , Input , Form } from 'antd';
+
+const { TextArea } = Input;
+
+function ParamsNew({ form , visble,successFunc,CancelFunc ,editList }){
+  const { getFieldDecorator, validateFields , setFieldsValue } = form;
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
+
+  useEffect(()=>{
+    if(editList && editList.id){
+      setFieldsValue({
+        name:editList.name,
+        data:editList.data
+      })
+    }else{
+      setFieldsValue({
+        name:undefined,
+        data:undefined
+      })
+    }
+  },[editList])
+
+  // 确定
+  function onConfirmFunc(){
+    validateFields((error,values)=>{
+      if(!error){
+        successFunc(values,editList && editList.id);
+        onCancelFunc();
+      }
+    })
+  }
+  function onCancelFunc(){
+    setFieldsValue({
+      name:undefined,
+      data:undefined
+    })
+    CancelFunc();
+  }
+  return(
+    <Modal
+      visible={visble}
+      okText={"确定"}
+      cancelText={"取消"}
+      onCancel={onCancelFunc}
+      onOk={onConfirmFunc}
+      title={"新建"}
+      closable={false}
+      width="500px"
+    >
+      <Form {...layout}>
+        <Form.Item label="参数名称">
+          {getFieldDecorator("name",{
+            rules:[{required:true,message:"请输入参数名称"}]
+          })(
+            <Input placeholder="请输入参数名称" width="220px"/>
+          )}
+        </Form.Item>
+        <Form.Item label="参数值">
+          {getFieldDecorator("data",{
+            rules:[{required:true,message:"请输入参数值"}]
+          })(
+            <TextArea placeholder="请输入参数值" width="220px" autoSize={{ minRows: 4, maxRows: 4 }}/>
+          )}
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+export default Form.create()(forwardRef(ParamsNew));

src/forge/DevOps/Manage/manage.scss

@@ -0,0 +1,4 @@
+.ant-form-explain{
+  position: absolute;
+  bottom: -15px;
+}

src/forge/DevOps/Mould.jsx

@@ -0,0 +1,160 @@
+import React , { useEffect , useState , useRef } from 'react';
+import { Banner , Blueback , FlexAJ } from '../Component/layout';
+import { Input , Table ,Pagination , Select , Popconfirm } from 'antd';
+import { Link } from 'react-router-dom'
+import styled from 'styled-components';
+import axios from 'axios';
+import New from './MouldNew';
+
+const { Option } = Select;
+
+const Div = styled.div`{
+  padding:24px 30px;
+  min-height:420px;
+}`;
+const STAGE = [
+  {stage_name:"所有",stage_type:"all"},
+  {stage_name:"初始化",stage_type:"init"},
+  {stage_name:"编译构建",stage_type:"build"},
+  {stage_name:"部署",stage_type:"deploy"},
+  {stage_name:"其他",stage_type:"customize"}
+]
+const limit = 15;
+function Mould(props){
+  const [ visible ,setVisible ] = useState(false);
+  const [ list ,setList ] = useState(undefined);
+  const [ page ,setPage ] = useState(1);
+  const [ totalCount ,setTotalCount ] = useState(0);
+  const [ stageType ,setStageType ] = useState("all");
+  const [ search ,setSearch ] = useState(undefined);
+  const childRef = useRef();
+  let projectsId = props.match.params.projectsId; 
+  let owner = props.match.params.owner; 
+  useEffect(()=>{
+    Init(page,stageType);
+  },[page,stageType])
+
+  function Init(page,stageType,searchvalue){
+    const url = `/ci/templates/list.json`;
+    axios.get(url,{
+      params:{
+        page,limit,stage_type:stageType,name:searchvalue
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setList(result.data.templates);
+        setTotalCount(result.data.total_count);
+      }
+    }).catch(error=>{})
+  }
+
+  const columns=[
+    {
+      title:"名称",
+      dataIndex:"template_name",
+      key:1,
+      ellipsis:true
+    },
+    {
+      title:"所属阶段",
+      dataIndex:"stage_type",
+      key:2,
+      ellipsis:true,
+      render:(txt,item)=>{
+        let i = STAGE.filter(item=>item.stage_type === txt);
+        return i && i.length>0 && i[0].stage_name
+      }
+    },
+    {
+      title:"模板类型",
+      dataIndex:"category",
+      key:3,
+      ellipsis:true
+    },
+    {
+      title:"操作",
+      dataIndex:"operation",
+      key:4,
+      ellipsis:true,
+      render:(txt,item)=>{
+        return(
+          <span>
+            <a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
+            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id)} okText="确定" cancelText={"取消"}>
+              <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
+            </Popconfirm>
+          </span>
+        )
+      }
+    }
+  ]
+
+  // 编辑模板
+  function editMouldFunc(item){
+    if (childRef.current) {
+      childRef.current.setEditInfo(item);
+    }
+    setVisible(true);
+  }
+
+  // 删除模板
+  function deleteMouldFunc(id){
+    const url = `/ci/templates/${id}.json`;
+    axios.delete(url).then(result=>{
+      if(result && result.data){
+        props.showNotification("模板删除成功！");
+        Init(page,stageType,search);
+      }
+    })
+  }
+
+  function searchValue(){
+    Init(page,stageType,search);
+  }
+
+  function newMouldFunc(){
+    if (childRef.current) {
+      childRef.current.setEditInfo(undefined);
+    }
+    setVisible(true);
+  }
+
+  function onOk(){
+    Init(page,stageType);
+  }
+  return(
+    <div>
+      <New wrappedComponentRef={(f) => childRef.current = f} ref={childRef} visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}></New>
+      <Banner>
+        <FlexAJ><span>工作流 - 模板管理</span><Link to={`/projects/${owner}/${projectsId}/devops/dispose`} className="font-14 color-grey-9">返回</Link></FlexAJ>
+      </Banner>
+      <Div className="disposeList">
+        <FlexAJ>
+          <Blueback onClick={newMouldFunc}>新建模板</Blueback>
+          <FlexAJ>
+            <span className="mr10">阶段：</span>
+            <Select onChange={e=>setStageType(e)} value={stageType} style={{width:"180px"}}>
+              {
+                STAGE.map((item,key)=>{
+                  return(
+                    <Option value={item.stage_type}>{item.stage_name}</Option>
+                  )
+                })
+              }
+            </Select>
+            <Input placeholder="请输入模板名称" value={search} onChange={(e)=>setSearch(e.target.value)} allowClear style={{width:"160px",marginLeft:"15px"}}/>
+            <Blueback className="ml15" onClick={searchValue}>搜索</Blueback>
+          </FlexAJ>
+        </FlexAJ>
+        <Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
+        {
+          totalCount > limit &&
+          <div className="mt20 pb20" style={{textAlign:'center'}}>
+            <Pagination simple current={page} pageSize={limit} total={totalCount} onChange={(page)=>setPage(page)}/>
+          </div>
+        }
+      </Div>
+    </div>
+  )
+}
+export default Mould;

src/forge/DevOps/MouldNew.jsx

@@ -0,0 +1,166 @@
+import React , { useImperativeHandle , useState , forwardRef , useCallback } from 'react';
+import { Form , Modal , Input , Select , Spin } from 'antd';
+import Editor from './Dispose/Editors';
+import axios from 'axios';
+
+const { Option } = Select;
+const TYPE = ["Java","C","C++","Python","Go","Ruby","R","PHP",
+      "Perl","Node","Docker","Rust","Swift","Erlang","Other"]
+
+function MouldNew({ form , visible , onCancel , onOk  }, ref){
+  const [value , setValue ] = useState(undefined);
+  const [isSpin , setIsSpin ] = useState(false);
+  const [valueFlag , setValueFlag ] = useState(false);
+  const [ id , setId ] = useState(false);
+  const [ buildFlag , setBuildFlag ] = useState(false);
+
+  const { getFieldDecorator, validateFields , setFieldsValue } = form;
+  
+  useImperativeHandle(ref, () => ({
+    setEditInfo: (info) => {
+      if(info){
+        setFieldsValue({
+          ...info
+        })
+        if(info.stage_type === "build"){
+          setBuildFlag(true);
+          setFieldsValue({
+            category:TYPE[0]
+          })
+        }else{
+          removeCate();
+        }
+        setValue(info.content);
+        setId(info.id);
+      }else{
+        removeCate();
+        clear();
+        setId(undefined);
+      }
+    }
+  }))
+
+  const helper = useCallback(
+    (label, name, rules, widget, className, isRequired,flag) => (
+      <Form.Item label={label} className={className}>
+        {getFieldDecorator(name,  { rules, validateFirst: true , valuePropName:flag ? "checked":"value" })(widget)}
+      </Form.Item>
+    ),
+    []
+  );
+  function changeContent(v){
+    if(v){
+      setValue(v);
+      setValueFlag(false);
+    }
+  }
+  function cancel(){
+    clear();
+    onCancel();
+  }
+  function sure(){
+    if(!value){
+      setValueFlag(true);
+      return;
+    }
+    validateFields((error,values)=>{
+      if(!error){
+        setIsSpin(true);
+        const url = `/ci/templates.json`;
+        axios.post(url,{
+          ...values,id,content:value,category:buildFlag ? values.category:""
+        }).then(result=>{
+          if(result && result.data){
+            setIsSpin(false);
+            cancel();
+            onOk();
+          }
+        }).catch(error=>{})
+      }
+    })
+  }
+  function clear(){
+    setFieldsValue({
+      stage_type:"init",
+      template_name:undefined,
+      category:"Java",
+    })
+    setValue("");
+    setValueFlag(false);
+  }
+
+  function changeStage(e){
+    if(e === "build"){
+      setBuildFlag(true);
+      setFieldsValue({
+        category:TYPE[0]
+      })
+    }else{
+      removeCate();
+    }
+  }
+
+  function removeCate(){
+    setBuildFlag(false);
+    setFieldsValue({
+      category:""
+    })
+  }
+  return(
+    <Modal 
+      visible={visible} 
+      width="500px"
+      title={"新建/编辑模板"}
+      onCancel={cancel}
+      onOk={sure}
+      centered={true}
+    >
+      <Spin spinning={isSpin}>
+        <Form layout={"inline"}>
+          {helper(
+            "所属阶段",
+            "stage_type",
+            [{required:true,message:"请选择所属阶段"}],
+            <Select placeholder="请选择所属阶段" style={{width:"350px"}} onChange={(e)=>{changeStage(e)}}>
+              <Option value="init">初始化</Option>
+              <Option value="build">编译构建</Option>
+              <Option value="deploy">部署</Option>
+              <Option value="customize">其他</Option>
+            </Select>
+          )}
+          {helper(
+            "模板名称",
+            "template_name",
+            [{required:true,message:"请输入模板名称"}],
+            <Input placeholder="请输入模板名称" style={{width:"350px"}}/>
+          )}
+          {helper(
+            "模板分类",
+            "category",
+            [{required:buildFlag,message:"请选择模板分类"}],
+            <Select placeholder="请选择模板分类" style={{width:"350px"}}>
+              {
+                TYPE.map((item,key)=>{
+                  return(
+                    <Option value={item}>{item}</Option>
+                  )
+                })
+              }
+            </Select>,buildFlag===true ? "" :"hide"
+          )}
+          <div style={{display:'flex',justifyContent:"flex-start"}}>
+            <span><span className="color-red">* </span>模板内容：</span>
+            <div>
+              <div className="editorPanel">
+                <Editor Numbers={"off"} width={"350px"} value={value} height="200px" theme="vs-grey" onChange={changeContent}/>
+              </div>
+              { valueFlag && <span className="color-red">请输入模板内容</span>}
+            </div>
+          </div>
+        </Form>
+      </Spin>
+    </Modal>
+  )
+}
+export default Form.create()(forwardRef(MouldNew));
+

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>
-  )
-})
+  );
+};

src/forge/DevOps/OpsDetailRightpanel.jsx

@@ -1,21 +1,123 @@
-import React from 'react';
-import { FlexAJ , AlignCenter } from '../Component/layout';
+import React, { useState, useEffect } from "react";
+import { Spin , Menu } from "antd";
+import { FlexAJ, AlignCenter } from "../Component/layout";
+import axios from "axios";
+import CodeSSH from './ssh/Index';
 
-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>
-      </div>
-      <div>
-        <FlexAJ className="items"></FlexAJ>
-      </div>
-      <div>
-        <FlexAJ className="items"></FlexAJ>
-      </div>
-    </div>
-  )
-})
+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);
+  const [nav, setNav] = useState("0");
+
+  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);
+        setNav("0");
+        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 (
+    <React.Fragment>
+      {/* <Menu className="devopsNav" onClick={(e)=>{setNav(e.key)}} selectedKeys={[nav]} mode="horizontal">
+        <Menu.Item key={'0'} value="0">开发流水线</Menu.Item>
+        <Menu.Item key={'1'} value="1">命令行</Menu.Item>
+      </Menu> */}
+      {
+        nav === "0" &&
+        <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>
+        </Spin>
+      }
+      {
+        nav === "1" && <CodeSSH />
+      }
+    </React.Fragment>
+  );
+};