feature:

1. Loss of footer on login page

2. Add a login function, which is to clear the access-token in the front-end local storage and log in again.

3. The home page top shows the correct username

4. Top on the main page plus the name of registry-center that shows the current connection

5. The proxy of dev can also be deleted. The host of Dev and prod is defined as localhost:8088.

sharding-ui-frontend/.gitignore

@@ -5,6 +5,7 @@ node/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
 
 # Editor directories and files
 .idea

sharding-ui-frontend/config/dev.env.js

@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: process.env.NODE_ENV !== 'mock' ? '"development"' : '"mock"',
-  BASE_API: '"http://localhost:8080"'
+  BASE_API: '"http://localhost:8088"'
 })

sharding-ui-frontend/config/index.js

@@ -11,18 +11,18 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/api' : {
-        target:"http://47.100.190.183:8088",
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': '/api'
-        }
-      }
+      // '/api' : {
+      //   target:"http://47.100.190.183:8088",
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     '^/api': '/api'
+      //   }
+      // }
     },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,

sharding-ui-frontend/config/prod.env.js

 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://localhost:8080"'
+  BASE_API: '"http://localhost:8088"'
 }

sharding-ui-frontend/src/assets/font/iconfont.css

-
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1546484296047'); /* IE9*/
-  src: url('iconfont.eot?t=1546484296047#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAT0AAsAAAAAB5QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9FUiRY21hcAAAAYAAAABLAAABcOfHt4dnbHlmAAABzAAAAUEAAAGg1RDWWGhlYWQAAAMQAAAALwAAADYTxnqNaGhlYQAAA0AAAAAcAAAAJAfeA4NobXR4AAADXAAAAAgAAAAICAAAAGxvY2EAAANkAAAABgAAAAYA0AAAbWF4cAAAA2wAAAAgAAAAIAETAJduYW1lAAADjAAAAUUAAAJtPlT+fXBvc3QAAATUAAAAHQAAAC5tem9xeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByezX82n7nhfwNDDHMDQwNQmBEkBwD1/Q0heJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISfzb//38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwCtxwvlAHicXc5BS8MwFAfw9zKWNLbENsxmsK2DDVums6V1JniZePIwvLjqJ/DqNxCZnQfx2/lZ9KAIm+kmKBJ4hJe83/sDA1h/NJ4bDhRwDhdwCQ/wBC8AqOMM4wHbY7SlchWh0RFSRuOMpDjRZ2SKRdhvRMgEpmgSDFt0kGA80YU6xRM2RZUzZV9ypGEfj8PC5EZPMvuZ0RS10bYbYYvuosDBRjVT22C5MgKT3CT1HT85FUuZybkfVGJfuspz3OGstyCBDAKcB+P0QJIF6boBVYo1bxG4bPPV2rF1xBX/QseeO6tUaJnSl3+ZqlbKLVJ1vB/jd+5N7oul7+PcjlaC8iZTigZeZ0Hk+OhQkqtNikfSnQ1dx1PucLXmbcltCFtfa+J6xMOd1f3WKf8xlaw3lxbxSdXbGKH3ThxkN3UGAPgGtyw56QAAAHicY2BkYGAA4tS9ll3x/DZfGbhZGEDgRvBsDwT9/wcLAzMHkMvBwAQSBQAdXwnCAHicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAA0AAAAAEAAAACAIsABwAAAAAAAgAAAAoACgAAAP8AAAAAAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYElJzMvm4EBAAoFAcgAAAA=') format('woff'),
-  url('iconfont.ttf?t=1546484296047') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1546484296047#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1546841685227'); /* IE9 */
+  src: url('iconfont.eot?t=1546841685227#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1546841685227') format('woff'),
+  url('iconfont.ttf?t=1546841685227') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1546841685227#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
-  font-family:"iconfont" !important;
-  font-size:12px;
-  font-style:normal;
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-link:before { content: "\e69f"; }
+.icon-yonghu:before {
+  content: "\e623";
+}
+
+.icon-link:before {
+  content: "\e69f";
+}
+
+.icon-copyright:before {
+  content: "\e661";
+}
+
+.icon-mima:before {
+  content: "\e617";
+}
+
+.icon-duoyuyan:before {
+  content: "\e603";
+}
 

sharding-ui-frontend/src/assets/font/iconfont.svg

@@ -20,9 +20,21 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="yonghu" unicode="&#58915;" d="M652.3 333.29999999999995C741.6 382.70000000000005 802 477.8 802 587c0 160.2-129.8 290-290 290-160.2 0-290-129.8-290-290 0-109.2 60.4-204.3 149.7-253.7C184 273.79999999999995 48 98.29999999999995 48-109l58 0c0 224.2 181.8 406 406 406 224.2 0 406-181.8 406-406l58 0C976 98.29999999999995 840 273.79999999999995 652.3 333.29999999999995zM280 587c0 128.1 103.9 232 232 232 128.1 0 232-103.9 232-232 0-128.1-103.9-232-232-232C383.9 355 280 458.9 280 587z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="link" unicode="&#59039;" d="M504.96 499.328c5.952 11.36 7.872 23.968 5.952 36.352-2.144 11.744-7.264 23.104-16.672 32.48l-1.28 1.312-128.672 128.64-0.16 0 0 0.448-1.28 0.864c-10.912 10.656-25.856 16.032-40.832 16.032-15.2 0-30.336-5.824-41.888-16.896l0-0.448-82.112-82.496-0.416 0-0.832-1.088c-10.72-11.072-16.256-26.016-16.256-40.608 0-15.424 5.984-30.784 17.088-42.304l0 0.192 0.416-0.192 129.728-129.76c9.184-9.184 20.736-14.784 32.704-17.088 11.968-1.728 25.248 0 36.32 5.984 14.976 7.488 32.704 1.504 40.608-13.216 7.072-14.784 1.28-32.96-13.664-40.416-22.656-11.552-48.32-15.392-72.672-11.36-24.352 3.872-47.456 15.2-65.824 33.408l0 0 0 0-128.256 128.16-1.696 2.144c-23.52 23.136-35.04 53.664-35.04 84.448 0 29.728 11.104 59.648 33.344 82.688l1.696 1.76 0 0.448 82.496 82.048c23.104 23.104 53.888 35.04 84.224 35.04 29.888 0 59.84-11.52 82.912-33.504l1.696-1.536 0.448 0 128.256-128.672 1.28-1.728c18.816-18.176 29.92-41.472 33.76-65.408 3.648-24.576 0-50.176-11.52-73.056-7.232-14.528-25.664-20.928-40.192-13.056-14.976 7.264-20.96 25.408-13.664 40.384l0 0zM404.896 533.504l256.48-256.896c12-11.296 12-30.752 0-42.08-11.52-11.744-30.784-11.744-42.304 0l-256.704 256.448c-11.744 11.328-11.744 30.784 0 42.496 11.776 11.968 30.784 11.968 42.528 0l0 0 0 0zM404.896 742.368l-40.8-1.536c11.328 11.104 28.832 11.776 40.8 1.536l0 0 0 0zM153.6 656.576l1.696-40.992c-11.52 11.52-11.968 29.28-1.696 40.992l0 0 0 0zM519.04 268.928c-5.952-11.552-7.872-24.384-5.952-36.832 2.144-11.936 7.648-23.264 16.672-32.448l1.696-1.536 128.448-128.64 1.12-0.64c11.52-10.656 26.08-16.288 40.832-16.288 15.168 0 30.592 5.984 42.048 16.928l-0.16 0 0.16 0.224 82.144 82.24 0.384 0 1.312 1.312c10.688 10.88 15.808 25.856 15.808 40.832 0 15.136-5.536 30.56-17.12 41.888l0 0-0.384 0-1.312 1.76-128.48 128.608-0.192 0c-9.184 8.992-20.704 14.592-32.064 16.48-12.608 1.92-25.216 0-36.736-5.568-14.528-7.904-32.896-1.472-40.608 13.024-7.264 14.592-1.28 33.152 13.472 40.256 22.816 11.936 48.48 15.328 72.832 11.52 24.352-3.68 47.488-14.944 65.856-33.408l0-0.16 128.256-128.256 1.696-1.504c23.296-23.488 35.04-54.048 35.04-84.608 0-29.92-11.328-59.84-33.344-82.912l-1.696-1.312 0-0.416-82.08-82.048-0.416 0c-23.328-23.776-53.824-35.296-84.416-35.296-29.952 0-59.616 11.168-82.944 33.12l-1.504 2.176-128.64 128.608-1.504 1.12c-18.176 18.56-29.28 41.44-33.152 65.6-4.256 24.832-0.416 50.432 10.88 73.088 7.936 14.752 25.664 20.704 40.832 13.248 14.528-7.488 20.544-25.216 13.248-40.16l0 0 0 0zM618.88 25.248l40.992 2.176c-11.296-11.584-29.056-12.416-40.992-2.176l0 0 0 0zM870.432 111.2l-1.696 40.768c11.52-11.072 11.744-29.248 1.696-40.768l0 0 0 0z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="copyright" unicode="&#58977;" d="M730.285714 282.285714v-62.285714q0-28.571429-20.857143-50.857143t-53.714285-34.571428-67.428572-18.571429-67.142857-6.285714q-117.142857 0-195.714286 79.428571T246.857143 386.857143q0 116 77.714286 193.714286t193.714285 77.714285q19.428571 0 43.142857-2.571428t53.142858-10.285715 52.857142-19.428571 39.428572-32.285714 16-46.285715v-62.285714q0-9.142857-9.142857-9.142857h-67.428572q-9.142857 0-9.142857 9.142857v40q0 24.571429-37.428571 38.571429T521.142857 577.714286q-80 0-130.571428-52.285715T340 389.714286q0-86.285714 52.285714-142.571429T525.714286 190.857143q38.857143 0 78.857143 13.714286t40 37.714285v40q0 4 2.571428 6.571429t6 2.571428h68q3.428571 0 6.285714-2.571428t2.857143-6.571429zM512 749.714286q-74.285714 0-142-29.142857t-116.571429-78-78-116.571429T146.285714 384t29.142857-142 78-116.571429 116.571429-78 142-29.142857 142 29.142857 116.571429 78 78 116.571429 29.142857 142-29.142857 142-78 116.571429-116.571429 78T512 749.714286z m438.857143-365.714286q0-119.428571-58.857143-220.285714T732.285714 4 512-54.857143t-220.285714 58.857143T132 163.714286 73.142857 384t58.857143 220.285714T291.714286 764 512 822.857143t220.285714-58.857143T892 604.285714 950.857143 384z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="mima" unicode="&#58903;" d="M799 474.6H331.3v76.3c0 104 84.7 188.7 188.8 188.7s188.8-84.8 188.8-188.9c0-14.1 11.4-25.5 25.5-25.5s25.5 11.4 25.5 25.5c0 132.3-107.6 239.9-239.8 239.9-64.1 0-124.3-24.9-169.6-70.2-45.3-45.3-70.2-105.4-70.2-169.5v-76.3h-53.7c-31.3 0-56.3-25-56.3-56.2v-387c0-31.3 25.1-57.1 56.3-57.1h572.3c31.3 0 57 25.8 57 57.1v387c0.1 31.2-25.6 56.2-56.9 56.2z m6-443.8c0-3.1-2.5-5.7-5.7-5.7H226.9c-3.1 0-5.7 2.5-5.7 5.7V417.9c0 3.1 2.5 5.7 5.7 5.7h572.3c3.1 0 5.7-2.5 5.7-5.7v-387.1h0.1zM508.5 342.5c-28.8 0-52.1-23.3-52.1-52.1 0-19 10.2-35.7 25.5-44.8v-101.1c0-14 11.5-25.5 25.5-25.5s25.5 11.5 25.5 25.5v99.8c16.6 8.7 27.8 26.1 27.8 46.1-0.1 28.8-23.4 52.1-52.2 52.1z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="duoyuyan" unicode="&#58883;" d="M848.806 90.428c70.998 81.26 109.78 184.217 109.78 293.144 0 119.205-46.422 231.278-130.714 315.57C744.877 782.137 634.941 828.383 517.79 829.786c-1.925 0.6-10.29 0.592-12.228-0.015-116.682-1.717-226.127-47.931-308.826-130.63C113.863 616.268 67.63 506.54 66.095 389.583c-0.428-1.65-0.437-8.602-0.021-10.227 1.083-117.628 47.365-228.058 130.66-311.354 84.292-84.292 196.364-130.713 315.57-130.713 119.205 0 231.277 46.421 315.57 130.713 6.139 6.14 12.054 12.444 17.788 18.872a20.532 20.532 0 0 1 1.472 1.44 20.566 20.566 0 0 1 1.672 2.113zM107.447 363.957H294.95c1.322-65.68 9.253-127.265 22.505-182.113-61.69-16.687-100.82-38.372-121.076-51.906-52.068 64.726-84.702 145.705-88.93 234.019z m88.434 272.635c20.09-13.557 59.243-35.462 121.34-52.26-12.997-54.128-20.826-114.778-22.243-179.433H107.526c4.55 87.37 36.912 167.489 88.355 231.693z m721.2-231.692H729.63c-1.416 64.631-9.24 125.26-22.23 179.374 61.955 16.694 101.236 38.445 121.567 52.021 51.305-64.155 83.571-144.161 88.116-231.395z m-228.403 0h-156.51V560.939c52.208 1.095 97.103 6.454 135.272 14.033C680 522.836 687.286 465.103 688.678 404.9z m-156.51 196.984V786.082c36.84-10.4 72.779-49.206 100.926-110.016 8.81-19.036 16.645-39.642 23.464-61.521-35.026-6.772-76.296-11.608-124.39-12.66z m-40.944 183.842v-183.805c-47.505 1.127-88.379 6.002-123.12 12.803 6.807 21.813 14.623 42.36 23.409 61.344 27.839 60.14 63.296 98.756 99.71 109.658z m0-224.767V404.9H335.929c1.392 60.213 8.68 117.955 21.244 170.1 37.835-7.537 82.314-12.887 134.05-14.04z m-155.33-197.002h155.33v-158.668c-51.61-1.194-96.02-6.564-133.822-14.103-12.825 52.886-20.208 111.57-21.509 172.77z m155.33-199.63v-182.909c-36.416 10.902-71.872 49.519-99.71 109.66-8.68 18.752-16.41 39.034-23.158 60.55 34.64 6.727 75.417 11.552 122.868 12.7z m40.943-183.264V164.391c47.904-1.025 89.104-5.862 124.117-12.656-6.756-21.556-14.497-41.874-23.19-60.656-28.147-60.81-64.086-99.617-100.927-110.016z m0 224.277V363.957h156.547c-1.299-61.097-8.66-119.685-21.446-172.503-38.114 7.532-82.949 12.835-135.1 13.886zM729.66 363.957h187.502c-4.221-88.139-36.733-168.974-88.62-233.636-20.47 13.669-59.636 35.3-121.304 51.869 13.2 54.76 21.102 116.225 22.422 181.767z m71.86 303.3c-18.33-11.57-52.31-29.355-104.858-43.493-19.296 63.056-46.11 115.004-78.062 150.976 70.401-19.15 133.234-56.837 182.92-107.483zM406.008 774.74c-31.906-35.92-58.69-87.769-77.979-150.702-52.404 14.241-86.37 32.099-104.582 43.588 49.63 50.46 112.33 88.01 182.561 107.114z m-182.09-675.703c18.284 11.536 52.098 29.23 104.332 43.336 19.272-62.605 45.976-114.187 77.758-149.969C336 11.45 273.472 48.818 223.918 99.037z m394.68-106.633c31.802 35.804 58.519 87.426 77.794 150.082 51.985-14.023 85.972-31.631 104.533-43.208-49.592-50.34-112.206-87.8-182.326-106.874z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

sharding-ui-frontend/src/assets/icons/index.js

-import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'
-
-// register globally
-Vue.component('svg-icon', SvgIcon)
-
-const requireAll = requireContext => requireContext.keys().map(requireContext)
-const req = require.context('./svg', false, /\.svg$/)
-requireAll(req)

sharding-ui-frontend/src/assets/icons/svg/copyright.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543295186223" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="993" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M678.61318 413.82912l-33.552164 21.125133c-28.999474-38.523385-68.765153-57.784054-119.296013-57.784054-39.764656 0-73.113181 12.737092-100.033297 38.2123-26.930349 25.475208-40.387849 57.066717-40.387849 94.754061 0 37.697577 13.251815 70.007447 39.765679 96.928586 26.503631 26.930349 60.054771 40.386826 100.655468 40.386826 48.463782 0 88.22946-19.260669 119.296013-57.783031l33.552164 22.367427c-16.572444 24.02723-38.83447 42.463114-66.793242 55.29742s-58.095139 19.261693-90.403986 19.261693c-50.949392 0-93.50972-16.776082-127.684054-50.328245s-51.260477-74.346265-51.260477-122.402771c0-48.872081 17.290805-90.609671 51.881624-125.199467 34.580586-34.58161 79.006402-51.881624 133.275399-51.881624 31.891338 0 61.404512 6.835685 88.539522 20.503986C643.29479 370.956683 664.108838 389.810077 678.61318 413.82912zM510.5423 192.284351c-176.401616 0-319.40354 143.002948-319.40354 319.404564 0 176.403662 143.001925 319.40354 319.40354 319.40354 176.404686 0 319.404564-142.999878 319.404564-319.40354C829.946864 335.287299 686.946986 192.284351 510.5423 192.284351zM510.543324 782.452665c-149.539828 0-270.764773-121.223922-270.764773-270.76375 0-149.537781 121.224945-270.764773 270.764773-270.764773 149.538805 0 270.76375 121.226992 270.76375 270.764773C781.307074 661.228743 660.082128 782.452665 510.543324 782.452665z" p-id="994"></path></svg>
\ No newline at end of file

sharding-ui-frontend/src/assets/icons/svg/password.svg

-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
\ No newline at end of file

sharding-ui-frontend/src/assets/icons/svg/user.svg

-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file

sharding-ui-frontend/src/components/Footer/index.vue

 <template>
   <div class="footer-wrapper">
     Copyright
-    <svg-icon icon-class="copyright" /> 2016 - 2018 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
+    <i class="icon-copyright iconfont"/> 2016 - 2018 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
   </div>
 </template>
 <script>

sharding-ui-frontend/src/components/Head/index.vue

@@ -2,10 +2,13 @@
   <div class="s-layout-header">
     <div class="s-pro-components-header">
       <i :class="classes" @click="togger"/>
+      <el-breadcrumb separator="/" class="bread-nav">
+        <el-breadcrumb-item><a>{{ breadcrumbTxt }}</a></el-breadcrumb-item>
+      </el-breadcrumb>
       <div class="s-pro-components-header-right">
         <div class="avatar">
-          <el-dropdown>
-            <span class="el-dropdown-link">wqzwh</span>
+          <el-dropdown @command="handlerClick">
+            <span class="el-dropdown-link">{{ username || '未登陆' }}</span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>退出登陆</el-dropdown-item>
             </el-dropdown-menu>
@@ -13,7 +16,7 @@
         </div>
         <div class="lang-more">
           <el-dropdown>
-            <div class="lang-icon"/>
+            <i class="icon-duoyuyan iconfont"/>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>英文</el-dropdown-item>
               <el-dropdown-item disabled>中文</el-dropdown-item>
@@ -29,7 +32,9 @@ export default {
   name: 'Head',
   data() {
     return {
-      isCollapse: false
+      isCollapse: false,
+      username: '',
+      breadcrumbTxt: ''
     }
   },
   computed: {
@@ -43,10 +48,33 @@ export default {
       ]
     }
   },
+  created() {
+    const store = window.localStorage
+    this.username = store.getItem('username')
+    this.showBreadcrumbTxt()
+  },
   methods: {
+    showBreadcrumbTxt() {
+      const menuData = this.$t('common').menuData
+      const hash = location.hash.split('#')[1]
+      for (const v of menuData) {
+        for (const vv of v.child) {
+          if (vv.href.includes(hash)) {
+            this.breadcrumbTxt = vv.title
+            break
+          }
+        }
+      }
+    },
     togger() {
       this.isCollapse = !this.isCollapse
       this.$emit('on-togger', this.isCollapse)
+    },
+    handlerClick() {
+      const store = window.localStorage
+      store.removeItem('username')
+      store.removeItem('Access-Token')
+      location.href = '#/login'
     }
   }
 }
@@ -58,6 +86,11 @@ export default {
   height: 64px;
   line-height: 64px;
   width: 100%;
+  .bread-nav {
+    float: left;
+    height: 64px;
+    line-height: 64px;
+  }
   .s-pro-components-header {
     height: 64px;
     padding: 0;
@@ -70,6 +103,7 @@ export default {
       cursor: pointer;
       transition: all .3s,padding 0s;
       padding: 22px 24px;
+      float: left;
     }
     .s-pro-components-header-right {
       float: right;
@@ -87,15 +121,15 @@ export default {
   }
   .lang-more {
     cursor: pointer;
-    padding: 0 12px;
+    padding: 0 20px;
     display: inline-block;
     transition: all .3s;
     height: 100%;
-    .lang-icon {
-      background: url('../../assets/img/lang.png') no-repeat center center;
-      width: 32px;
-      height: 60px;
-    }
+    // .lang-icon {
+    //   background: url('../../assets/img/lang.png') no-repeat center center;
+    //   width: 32px;
+    //   height: 60px;
+    // }
   }
 }
 </style>

sharding-ui-frontend/src/components/SvgIcon/index.vue

-<template>
-  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"/>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>

sharding-ui-frontend/src/lang/en-US.js

@@ -3,10 +3,10 @@ export default {
     menuData: [{
       title: 'Data governance',
       child: [{
-        title: 'Registration configuration',
-        href: '/'
+        title: 'Config regist',
+        href: '/config-regist'
       }, {
-        title: 'Configuration management',
+        title: 'Config manage',
         href: '/config-manage'
       }, {
         title: 'Orchestration',

sharding-ui-frontend/src/lang/zh-CN.js

@@ -4,7 +4,7 @@ export default {
       title: '数据治理',
       child: [{
         title: '注册配置中心',
-        href: '/'
+        href: '/config-regist'
       }, {
         title: '配置管理',
         href: '/config-manage'

sharding-ui-frontend/src/main.js

@@ -8,7 +8,6 @@ import VueI18n from 'vue-i18n'
 import Language from './lang/index'
 import 'normalize.css/normalize.css'
 import '@/assets/styles/index.scss'
-import '@/assets/icons'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI, { locale })

sharding-ui-frontend/src/router/index.js

@@ -5,7 +5,11 @@ Vue.use(Router)
 
 export const constantRouterMap = [
   {
-    path: '/',
+    path: '*',
+    redirect: '/config-regist'
+  },
+  {
+    path: '/config-regist',
     component: () => import('@/views/index/index'), hidden: true },
   { path: '/login',
     component: () => import('@/views/login/index'), hidden: true },

sharding-ui-frontend/src/utils/request.js

-import axios from 'axios'
-import { Message } from 'element-ui'
-
-const service = axios.create({
-  baseURL: process.env.BASE_API,
-  timeout: 50000
-})
-
-service.interceptors.request.use(
-  config => {
-    // todo
-  },
-  error => {
-    console.log(error)
-    Promise.reject(error)
-  }
-)
-
-service.interceptors.response.use(
-  response => {
-
-  },
-  error => {
-    console.log(error)
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
-)
-
-export default service

sharding-ui-frontend/src/views/login/index.vue

@@ -3,22 +3,25 @@
     <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="off" label-position="left">
       <h3 class="title"><img style="margin-right:10px;" src="@/assets/logo.png">ShardingSphere</h3>
       <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="off" placeholder="username" />
+        <el-input
+          v-model="loginForm.username"
+          name="username"
+          type="text"
+          auto-complete="off"
+          placeholder="username">
+          <i slot="prefix" class="icon-yonghu iconfont"/>
+        </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon icon-class="password" />
-        </span>
         <el-input
           :type="pwdType"
           v-model="loginForm.password"
           name="password"
           auto-complete="on"
           placeholder="password"
-          @keyup.enter.native="handleLogin" />
+          @keyup.enter.native="handleLogin">
+          <i slot="prefix" class="icon-mima iconfont"/>
+        </el-input>
       </el-form-item>
       <el-form-item>
         <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
@@ -26,13 +29,18 @@
         </el-button>
       </el-form-item>
     </el-form>
+    <s-footer style="position: fixed;bottom: 0;"/>
   </div>
 </template>
 
 <script>
+import SFooter from '../../components/Footer/index'
 import API from './api'
 export default {
   name: 'Login',
+  components: {
+    SFooter
+  },
   data() {
     return {
       loginForm: {
@@ -54,7 +62,7 @@ export default {
   },
   created() {
     if (window.localStorage.getItem('Access-Token')) {
-      location.href = '/'
+      location.href = '#/config-regist'
     }
   },
   methods: {
@@ -65,8 +73,10 @@ export default {
       }
       API.getLogin(params).then((res) => {
         const data = res.model
-        window.localStorage.setItem('Access-Token', data.accessToken)
-        location.href = '/'
+        const store = window.localStorage
+        store.setItem('Access-Token', data.accessToken)
+        store.setItem('username', data.username)
+        location.href = '#/config-regist'
       })
     }
   }
@@ -81,16 +91,16 @@ $light_gray:#eee;
 .login-container {
   .el-input {
     display: inline-block;
-    height: 47px;
+    // height: 47px;
     width: 85%;
     input {
       background: transparent;
       border: 0px;
       -webkit-appearance: none;
       border-radius: 0px;
-      padding: 12px 5px 12px 15px;
+      padding: 12px 5px 12px 30px;
       color: $light_gray;
-      height: 47px;
+      // height: 47px;
       &:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: #fff !important;