From 7a28ae4a7ebb9498f59c7eafce879345cc8c395a Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 26 May 2020 10:52:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Vuex=20AbpConfiguration?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97;=E6=9C=AC=E5=9C=B0=E5=8C=96=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=90=8E=E7=AB=AF=E6=9C=AC=E5=9C=B0=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E7=9A=84=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LINYUN/Abp/Sms/Aliyun/AliyunSmsSender.cs  |  13 +-
 .../PermissionAppService.cs                   |  10 +
 .../LINGYUN.Platform.HttpApi.Host.csproj      |   2 +-
 .../PlatformHttpApiHostModule.cs              |   3 +-
 aspnet-core/services/start-all-service.bat    |   4 +-
 vueJs/src/api/abpconfiguration.ts             |  99 ++++
 vueJs/src/api/users.ts                        |  67 ++-
 vueJs/src/assets/login-images/login.jpg       | Bin 0 -> 29266 bytes
 vueJs/src/components/LangSelect/index.vue     |  48 +-
 vueJs/src/lang/es.ts                          | 175 -------
 vueJs/src/lang/index.ts                       |  18 -
 vueJs/src/lang/ja.ts                          | 175 -------
 vueJs/src/lang/ko.ts                          | 175 -------
 vueJs/src/lang/zh.ts                          |  15 +-
 vueJs/src/permission.ts                       |   3 -
 vueJs/src/store/index.ts                      |   2 +
 vueJs/src/store/modules/abp.ts                |  27 +
 vueJs/src/store/modules/user.ts               |  85 +++-
 vueJs/src/utils/cookies.ts                    |  12 -
 vueJs/src/utils/localStorage.ts               |  26 +
 vueJs/src/utils/request.ts                    | 140 +++--
 .../admin/users/components/UserCreateForm.vue |   2 +-
 .../admin/users/components/UserEditForm.vue   |   2 +-
 .../dashboard/admin/components/BoxCard.vue    |   8 -
 vueJs/src/views/login/index.vue               | 481 ++++++++++--------
 vueJs/src/views/profile/index.vue             |   7 -
 26 files changed, 701 insertions(+), 898 deletions(-)
 create mode 100644 vueJs/src/api/abpconfiguration.ts
 create mode 100644 vueJs/src/assets/login-images/login.jpg
 delete mode 100644 vueJs/src/lang/es.ts
 delete mode 100644 vueJs/src/lang/ja.ts
 delete mode 100644 vueJs/src/lang/ko.ts
 create mode 100644 vueJs/src/store/modules/abp.ts
 create mode 100644 vueJs/src/utils/localStorage.ts

diff --git a/aspnet-core/modules/common/LINGYUN.Abp.Sms.Aliyun/LINYUN/Abp/Sms/Aliyun/AliyunSmsSender.cs b/aspnet-core/modules/common/LINGYUN.Abp.Sms.Aliyun/LINYUN/Abp/Sms/Aliyun/AliyunSmsSender.cs
index 0a3ef9982..5ee48c601 100644
--- a/aspnet-core/modules/common/LINGYUN.Abp.Sms.Aliyun/LINYUN/Abp/Sms/Aliyun/AliyunSmsSender.cs
+++ b/aspnet-core/modules/common/LINGYUN.Abp.Sms.Aliyun/LINYUN/Abp/Sms/Aliyun/AliyunSmsSender.cs
@@ -49,9 +49,7 @@ namespace LINYUN.Abp.Sms.Aliyun
             TryAddTemplateCode(request, smsMessage);
             TryAddSignName(request, smsMessage);
             TryAddSendPhone(request, smsMessage);
-
-            var queryParamJson = JsonSerializer.Serialize(smsMessage.Properties);
-            request.AddQueryParameters("TemplateParam", queryParamJson);
+            TryAddTemplateParam(request, smsMessage);
 
             try
             {
@@ -125,5 +123,14 @@ namespace LINYUN.Abp.Sms.Aliyun
                 request.AddQueryParameters("PhoneNumbers", smsMessage.PhoneNumber);
             }
         }
+
+        private void TryAddTemplateParam(CommonRequest request, SmsMessage smsMessage)
+        {
+            if (smsMessage.Properties.Count > 0)
+            {
+                var queryParamJson = JsonSerializer.Serialize(smsMessage.Properties);
+                request.AddQueryParameters("TemplateParam", queryParamJson);
+            }
+        }
     }
 }
diff --git a/aspnet-core/modules/permissions/LINGYUN.Abp.PermissionManagement.Application/LINGYUN/Abp/PermissionManagement/PermissionAppService.cs b/aspnet-core/modules/permissions/LINGYUN.Abp.PermissionManagement.Application/LINGYUN/Abp/PermissionManagement/PermissionAppService.cs
index c100c9030..a19a33bad 100644
--- a/aspnet-core/modules/permissions/LINGYUN.Abp.PermissionManagement.Application/LINGYUN/Abp/PermissionManagement/PermissionAppService.cs
+++ b/aspnet-core/modules/permissions/LINGYUN.Abp.PermissionManagement.Application/LINGYUN/Abp/PermissionManagement/PermissionAppService.cs
@@ -9,6 +9,7 @@ using Volo.Abp;
 using Volo.Abp.Application.Services;
 using Volo.Abp.Authorization.Permissions;
 using Volo.Abp.Caching;
+using Volo.Abp.Clients;
 using Volo.Abp.DependencyInjection;
 using Volo.Abp.MultiTenancy;
 using Volo.Abp.PermissionManagement;
@@ -22,10 +23,12 @@ namespace LINGYUN.Abp.PermissionManagement
     public class PermissionAppService : ApplicationService, IPermissionAppService
     {
         protected PermissionManagementOptions Options { get; }
+        protected ICurrentClient CurrentClient { get; }
         protected IDistributedCache<PermissionGrantCacheItem> Cache { get; }
         protected IPermissionGrantRepository PermissionGrantRepository { get; }
         protected IPermissionDefinitionManager PermissionDefinitionManager { get; }
         public PermissionAppService(
+            ICurrentClient currentClient,
             IDistributedCache<PermissionGrantCacheItem> cache,
             IPermissionGrantRepository permissionGrantRepository,
             IPermissionDefinitionManager permissionDefinitionManager,
@@ -33,6 +36,7 @@ namespace LINGYUN.Abp.PermissionManagement
         {
             Cache = cache;
             Options = options.Value;
+            CurrentClient = currentClient;
             PermissionGrantRepository = permissionGrantRepository;
             PermissionDefinitionManager = permissionDefinitionManager;
         }
@@ -62,6 +66,12 @@ namespace LINGYUN.Abp.PermissionManagement
                     }
                 }
             }
+            if (!CurrentClient.Id.IsNullOrWhiteSpace())
+            {
+                var clientPermissions = await PermissionGrantRepository
+                                            .GetListAsync(ClientPermissionValueProvider.ProviderName, CurrentClient.Id);
+                permissions = permissions.Union(clientPermissions);
+            }
             foreach (var permissionGroup in permissionGroups)
             {
                 var groupDto = new PermissionGroupDto
diff --git a/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/LINGYUN.Platform.HttpApi.Host.csproj b/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/LINGYUN.Platform.HttpApi.Host.csproj
index 1cda942b4..ca1f77f73 100644
--- a/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/LINGYUN.Platform.HttpApi.Host.csproj
+++ b/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/LINGYUN.Platform.HttpApi.Host.csproj
@@ -22,7 +22,7 @@
     <PackageReference Include="Serilog.Settings.Configuration" Version="3.1.0" />
     <PackageReference Include="Serilog.Sinks.File" Version="4.1.0" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="5.4.1" />
-    <PackageReference Include="Volo.Abp.AspNetCore.MultiTenancy" Version="2.8.0" />
+    <PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy" Version="2.8.0" />
     <PackageReference Include="Volo.Abp.AspNetCore.Authentication.JwtBearer" Version="2.8.0" />
     <PackageReference Include="Volo.Abp.Autofac" Version="2.8.0" />
     <PackageReference Include="Volo.Abp.EntityFrameworkCore.MySQL" Version="2.8.0" />
diff --git a/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs b/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
index 0cd0722c6..a669d0cb0 100644
--- a/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
+++ b/aspnet-core/services/platform/LINGYUN.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
@@ -23,6 +23,7 @@ using Volo.Abp;
 using Volo.Abp.Account;
 using Volo.Abp.AspNetCore.Authentication.JwtBearer;
 using Volo.Abp.AspNetCore.MultiTenancy;
+using Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy;
 using Volo.Abp.Autofac;
 using Volo.Abp.EntityFrameworkCore;
 using Volo.Abp.EntityFrameworkCore.MySQL;
@@ -44,7 +45,7 @@ using AbpPermissionManagementApplicationModule = LINGYUN.Abp.PermissionManagemen
 namespace LINGYUN.Platform
 {
     [DependsOn(
-        typeof(AbpAspNetCoreMultiTenancyModule),
+        typeof(AbpAspNetCoreMvcUiMultiTenancyModule),
         typeof(AbpPermissionManagementDomainIdentityModule),
         typeof(AbpPermissionManagementDomainIdentityServerModule),
         typeof(ApiGatewayApplicationContractsModule),
diff --git a/aspnet-core/services/start-all-service.bat b/aspnet-core/services/start-all-service.bat
index c891b0b8c..c7641f6ff 100644
--- a/aspnet-core/services/start-all-service.bat
+++ b/aspnet-core/services/start-all-service.bat
@@ -3,4 +3,6 @@ cls
 
 start .\start-identity-server.bat --run
 start .\start-apigateway-admin.bat --run
-start .\start-platform.bat --run
\ No newline at end of file
+start .\start-platform.bat --run
+ping -n 10 127.1 >nul
+start .\start-apigateway-host.bat --run
\ No newline at end of file
diff --git a/vueJs/src/api/abpconfiguration.ts b/vueJs/src/api/abpconfiguration.ts
new file mode 100644
index 000000000..697026231
--- /dev/null
+++ b/vueJs/src/api/abpconfiguration.ts
@@ -0,0 +1,99 @@
+import ApiService from './serviceBase'
+
+const serviceUrl = process.env.VUE_APP_BASE_API
+
+export default class AbpConfigurationService {
+  public static getAbpConfiguration() {
+    const _url = '/api/abp/application-configuration'
+    return ApiService.Get<AbpConfiguration>(_url, serviceUrl)
+  }
+}
+
+export class Auth {
+  policies?: { [key: string]: boolean}
+  grantedPolicies?: { [key: string]: boolean}
+}
+
+export class CurrentTenant {
+  id?: string
+  name?: string
+  isAvailable!: boolean
+}
+
+export class CurrentUser {
+  id?: string
+  email?: string
+  userName?: string
+  tenantId?: string
+  isAuthenticated!: boolean
+}
+
+export class Feature {
+  values?: { [key: string]: string}
+}
+
+export class DateTimeFormat {
+  calendarAlgorithmType!: string
+  dateSeparator!: string
+  dateTimeFormatLong!: string
+  fullDateTimePattern!: string
+  longTimePattern!: string
+  shortDatePattern!: string
+  shortTimePattern!: string
+}
+
+export class CurrentCulture {
+  cultureName!: string
+  displayName!: string
+  englishName!: string
+  isRightToLeft!: boolean
+  name!: string
+  nativeName!: string
+  threeLetterIsoLanguageName!: string
+  twoLetterIsoLanguageName!: string
+  dateTimeFormat!: DateTimeFormat
+}
+
+export class Language {
+  cultureName!: string
+  displayName!: string
+  flagIcon?: string
+  uiCultureName!: string
+}
+
+export class Localization {
+  currentCulture!: CurrentCulture
+  defaultResourceName?: string
+  languages!: Language[]
+  values!: {[key:string]: {[key:string]: string}}
+}
+
+export class MultiTenancy {
+  isEnabled!: boolean
+}
+
+export class Setting {
+  values?: {[key:string]: string}
+}
+
+export interface IAbpConfiguration {
+  auth: Auth
+  currentTenant: CurrentTenant
+  currentUser: CurrentUser
+  features: Feature
+  localization: Localization
+  multiTenancy: MultiTenancy
+  objectExtensions: any
+  setting: Setting
+}
+
+export class AbpConfiguration implements IAbpConfiguration {
+  auth!: Auth
+  currentTenant!: CurrentTenant
+  currentUser!: CurrentUser
+  features!: Feature
+  localization!: Localization
+  multiTenancy!: MultiTenancy
+  objectExtensions!: any
+  setting!: Setting
+}
\ No newline at end of file
diff --git a/vueJs/src/api/users.ts b/vueJs/src/api/users.ts
index 9444d7fe6..d57b913d3 100644
--- a/vueJs/src/api/users.ts
+++ b/vueJs/src/api/users.ts
@@ -118,8 +118,53 @@ export default class UserApiService {
     })
   }
 
-  public static refreshToken() {
-    
+  public static sendPhoneVerifyCode(phoneVerify: PhoneVerify) {
+    const _url = '/api/account/phone/verify'
+    return ApiService.HttpRequest<any>({
+      baseURL: IdentityServiceUrl,
+      url: _url,
+      method: 'POST',
+      data: phoneVerify
+    })
+  }
+
+  public static userLoginWithPhone(loginData: UserLoginPhoneData) {
+    const _url = '/connect/token'
+    const login = {
+      grant_type: 'phone_verify',
+      phone_number: loginData.phoneNumber,
+      phone_verify_code: loginData.verifyCode,
+      client_id: process.env.VUE_APP_CLIENT_ID,
+      client_secret: process.env.VUE_APP_CLIENT_SECRET
+    }
+    return ApiService.HttpRequest<UserLoginResult>({
+      baseURL: IdentityServerUrl,
+      url: _url,
+      method: 'POST',
+      data: qs.stringify(login),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    })
+  }
+
+  public static refreshToken(token: string) {
+    const _url = '/connect/token'
+    const refresh = {
+      grant_type: 'refresh_token',
+      refresh_token: token,
+      client_id: process.env.VUE_APP_CLIENT_ID,
+      client_secret: process.env.VUE_APP_CLIENT_SECRET
+    }
+    return ApiService.HttpRequest<UserLoginResult>({
+      baseURL: IdentityServerUrl,
+      url: _url,
+      method: 'POST',
+      data: qs.stringify(refresh),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    })
   }
 
   public static userLogout(token: string | undefined) {
@@ -174,6 +219,24 @@ export class UserLoginData {
   password!: string
 }
 
+export enum VerifyType {
+  register = 0,
+  signin   = 10
+}
+
+export class PhoneVerify {
+  phoneNumber!: string
+  verifyType!:VerifyType
+}
+
+/** 用户手机登录对象 */
+export class UserLoginPhoneData {
+  /** 手机号码 */
+  phoneNumber!: string
+  /** 手机验证码 */
+  verifyCode!: string
+}
+
 /** 用户信息对象 由IdentityServer提供 */
 export class UserInfo {
   /** 标识 */
diff --git a/vueJs/src/assets/login-images/login.jpg b/vueJs/src/assets/login-images/login.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0569144945a58cb73dd12d8fa043d1f72e59d0c2
GIT binary patch
literal 29266
zcmeHQUx*V&7@yrFce9&BHYUCHMB-+XTbFdfkUurpmR`2!agn<tsV(SBxoEM~zWN~2
zhczY`?+m@-6~ckCMn&5y1dcwpEIx=m#il9P)&~!v)aSky(l3IVqtwzPA-Bnwy_x-H
zzP;S?o8Qj2^UXJN%?Hg#MA$c(o+J#zkSRDw^EdJ?;f99jkb|Scl;=3!J+j5^a=Ev8
zeZt6&?E!JecE3NkGa3$#?Hcp@Uw>2G6-y+O$w2t+)LU<)qPvrc)|W6G&%2%O(Jfm>
z6Cr;n@xMRK?}>-nYs0#YkqGNyY#ye0i@e&pRfe>G7<L#Gqe4ruPUT^8fvuo=?H?M#
zu#O?nyy98+3$1VUG=C*78v}pQ<{|Hp->aX0_*gUs=}-glWjm(6#lRU~zC3k4{WUuy
zU+3b>MyP&F$D*asP&6Xwc9Ee31%~qN*1#e%d(T_e#MQNALyRS76V%lz+hT>s867JT
zkS>vdU7(VaQdJaddfsGF+&B)JDuyJJ#na}6z&0*g#2U2SCJ(j%EI}}%-)@LeEc6Bg
zRVsxfeQ}=E6pk7wZX5?k*yNYKq1?Wjj;BoufqO>&mY$BKZ^9cWW{5$jc)*%!{nNxD
zO|2iDT3m=PzZa73%1dYIO8TmVl?X_e$WV4q%i`^ZITuYtDz5UhYzyw^;B^Ws1_2M&
zOwcb67LEy*BW2BZ#B*Ic2Q}Hs<Rv~v8-dB(wt})6%oIoQk^#Wwa^~ERUjPMw3LgO_
zTI~+)e;arJe1PFq7L}U~ghYJ#<jMIN`QpV>Ey-R#`s5F9`r0)Es}PBob7D7bNFQLA
zk9MwQ+^b;T%oPd~ESUNdg9HpDuYU!Z(HdNGC?E(gnDF4c<Y$k=`M=iw)G<R0I>&=X
zFjKk#rp1M+FEMb^hvwm+P+pa7m>~uo;{jXNqCerZZm*}d-CBY!;Sdprh)?~$nFV_1
zR^h<-Sz0@_)stf(q{lwBw?G#cs3$NYz$}$GfocoE64Xq|z~Ht{ME1G0cr-@uyUe&P
zQYNdxaV+!#gR1GCfS$-nJ&pp+oAy+W6>F!21LGy=n^4g$NXnXO9u6-qL@MA|;&c=c
zgcnS3()%Us5PNMDAiT&t6o%(?E+nnW5QmHcg7Az930e(f@NP#UmmiwBwMSQ4nU_0r
zMxU1bekM{mal(#Oh{Q`d(Tc@74PjU?fWXv`7-Y&6M}@r@6|Q^xtd%th10DJ|&_k8X
zG4M|E;GOh=cTxfGWEQ-WRZR_mcTxlAWf9d@f~5?T5c3d(tYhj=4BQ$lK<LfVMO-ub
z40v{)&+CJ9)XKBo63pzaB_TK^ISX&yvtH<8_7@&uB?8hdGSpy&RqOTBoCB6&h8T2+
z2g;0Gg%u!VM%KM)!(RV{!9ou(Xh^0A0}hVXU=j>Zn-T&iHqNH!C$HQw25KKkr5fhh
zK{`x9*YKzN2-Ftn4{7Z2Hg}I_Sa9zxh?={Cn`%DaS(Gil?^E(cAyegjDXpYr9lUsH
z0;`@P!J5&HZytzyFShMLX_wC3nA!_5#t?xGf!M}GAtPyuC*Y%t^AL=UiY`H-yW6%M
zw2El6pjjbS1e&!9BiioMh#GAri-`Id;faqZBtr~loYftDSETnX(iH8t8SBfYXd{;u
zAMi_&N*O{A$+S$ooNhPgu+R$(h~ECBSVLB{*m!_vXohOK=3@mzD3XF=4`Ahg15&+r
z{>IO#kJI&%`eaYmabf2^aplUBiIL+Ml>EK(SA~Q1<5lOL*(JPW0B|wXU_6!M#adA~
zpp_s34Fb`eH0vlRdDDlAu0i6ARPG7~3uZ|*a}y)ENEIrwj>@!>UzL5SBVJxy;fi=c
ozu<uOYU8%LAx54%F;O73`DjPh0pY(x;FY`R4gc3kfaWiM0~@n61poj5

literal 0
HcmV?d00001

diff --git a/vueJs/src/components/LangSelect/index.vue b/vueJs/src/components/LangSelect/index.vue
index 1a1061594..c96add06d 100644
--- a/vueJs/src/components/LangSelect/index.vue
+++ b/vueJs/src/components/LangSelect/index.vue
@@ -23,30 +23,12 @@
       >
         English
       </el-dropdown-item>
-      <el-dropdown-item
-        :disabled="language==='es'"
-        command="es"
-      >
-        Español
-      </el-dropdown-item>
-      <el-dropdown-item
-        :disabled="language==='ja'"
-        command="ja"
-      >
-        日本語
-      </el-dropdown-item>
-      <el-dropdown-item
-        :disabled="language==='ko'"
-        command="ko"
-      >
-        한국어
-      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 
 @Component({
@@ -57,9 +39,35 @@ export default class extends Vue {
     return AppModule.language
   }
 
+  /**
+   * 监听abp配置状态,增强本地化
+   */
+  @Watch('$store.state.abpconfiguration.configuration')
+  private onAbpConfigurationChanged() {
+    const abpConfig = this.$store.state.abpconfiguration.configuration
+    if (abpConfig) {
+      const { twoLetterIsoLanguageName } = abpConfig.localization.currentCulture
+      const resources: { [key: string]: any} = {}
+      Object.keys(abpConfig.localization.values).forEach(key => {
+        const resource = abpConfig.localization.values[key]
+
+        if (typeof resource !== 'object') return
+
+        Object.keys(resource).forEach(key2 => {
+          if (/'{|{/g.test(resource[key2])) {
+            resource[key2] = resource[key2].replace(/'{|{/g, '{{').replace(/}'|}/g, '}}')
+          }
+        })
+        resources[key] = resource
+      })
+      this.$i18n.mergeLocaleMessage(twoLetterIsoLanguageName as string, resources)
+      console.log(this.$i18n)
+    }
+  }
+
   private handleSetLanguage(lang: string) {
-    this.$i18n.locale = lang
     AppModule.SetLanguage(lang)
+    this.$i18n.locale = lang
     this.$message({
       message: 'Switch Language Success',
       type: 'success'
diff --git a/vueJs/src/lang/es.ts b/vueJs/src/lang/es.ts
deleted file mode 100644
index 0f03c834e..000000000
--- a/vueJs/src/lang/es.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-export default {
-  route: {
-    dashboard: 'Panel de control',
-    documentation: 'Documentación',
-    guide: 'Guía',
-    permission: 'Permisos',
-    rolePermission: 'Permisos de rol',
-    pagePermission: 'Permisos de la página',
-    directivePermission: 'Permisos de la directiva',
-    icons: 'Iconos',
-    components: 'Componentes',
-    tinymce: 'Tinymce',
-    markdown: 'Markdown',
-    jsonEditor: 'Editor JSON',
-    splitPane: 'Panel dividido',
-    avatarUpload: 'Subir avatar',
-    dropzone: 'Subir ficheros',
-    sticky: 'Sticky',
-    countTo: 'Count To',
-    componentMixin: 'Mixin',
-    backToTop: 'Ir arriba',
-    draggableDialog: 'Draggable Dialog',
-    draggableKanban: 'Draggable Kanban',
-    draggableList: 'Draggable List',
-    draggableSelect: 'Draggable Select',
-    charts: 'Gráficos',
-    barChart: 'Bar Chart',
-    lineChart: 'Gráfico de líneas',
-    mixedChart: 'Mixed Chart',
-    example: 'Ejemplo',
-    nested: 'Rutas anidadass',
-    menu1: 'Menu 1',
-    'menu1-1': 'Menu 1-1',
-    'menu1-2': 'Menu 1-2',
-    'menu1-2-1': 'Menu 1-2-1',
-    'menu1-2-2': 'Menu 1-2-2',
-    'menu1-3': 'Menu 1-3',
-    menu2: 'Menu 2',
-    table: 'Tabla',
-    dynamicTable: 'Tabla dinámica',
-    draggableTable: 'Arrastrar tabla',
-    inlineEditTable: 'Editor',
-    complexTable: 'Complex Table',
-    tab: 'Pestaña',
-    form: 'Formulario',
-    createArticle: 'Crear artículo',
-    editArticle: 'Editar artículo',
-    articleList: 'Listado de artículos',
-    errorPages: 'Páginas de error',
-    page401: '401',
-    page404: '404',
-    errorLog: 'Registro de errores',
-    excel: 'Excel',
-    exportExcel: 'Exportar a Excel',
-    selectExcel: 'Export seleccionado',
-    mergeHeader: 'Merge Header',
-    uploadExcel: 'Subir Excel',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Exportar a Zip',
-    theme: 'Tema',
-    clipboard: 'Clipboard',
-    i18n: 'I18n',
-    externalLink: 'Enlace externo',
-    profile: 'Profile'
-  },
-  navbar: {
-    logOut: 'Salir',
-    dashboard: 'Panel de control',
-    github: 'Github',
-    theme: 'Tema',
-    size: 'Tamaño global',
-    profile: 'Profile'
-  },
-  login: {
-    title: 'Formulario de acceso',
-    logIn: 'Acceso',
-    username: 'Usuario',
-    password: 'Contraseña',
-    any: 'nada',
-    thirdparty: 'Conectar con',
-    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
-  },
-  documentation: {
-    documentation: 'Documentación',
-    github: 'Repositorio Github'
-  },
-  permission: {
-    createRole: 'Nuevo rol',
-    editPermission: 'Permiso de edición',
-    roles: 'Tus permisos',
-    switchRoles: 'Cambiar permisos',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
-    delete: 'Borrar',
-    confirm: 'Confirmar',
-    cancel: 'Cancelar'
-  },
-  guide: {
-    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
-    button: 'Ver guía'
-  },
-  components: {
-    documentation: 'Documentación',
-    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
-    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
-    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
-    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
-  },
-  table: {
-    dynamicTips1: 'Fixed header, sorted by header order',
-    dynamicTips2: 'Not fixed header, sorted by click order',
-    dragTips1: 'Orden por defecto',
-    dragTips2: 'The after dragging order',
-    title: 'Título',
-    importance: 'Importancia',
-    type: 'Tipo',
-    remark: 'Remark',
-    search: 'Buscar',
-    add: 'Añadir',
-    export: 'Exportar',
-    reviewer: 'Reviewer',
-    id: 'ID',
-    date: 'Fecha',
-    author: 'Autor',
-    readings: 'Lector',
-    status: 'Estado',
-    actions: 'Acciones',
-    edit: 'Editar',
-    publish: 'Publicar',
-    draft: 'Draft',
-    delete: 'Eliminar',
-    cancel: 'Cancelar',
-    confirm: 'Confirmar'
-  },
-  example: {
-    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
-  },
-  errorLog: {
-    tips: 'Please click the bug icon in the upper right corner',
-    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
-    documentation: 'Documento de introducción'
-  },
-  excel: {
-    export: 'Exportar',
-    selectedExport: 'Exportar seleccionados',
-    placeholder: 'Por favor escribe un nombre de fichero'
-  },
-  zip: {
-    export: 'Exportar',
-    placeholder: 'Por favor escribe un nombre de fichero'
-  },
-  pdf: {
-    tips: 'Here we use window.print() to implement the feature of downloading PDF.'
-  },
-  theme: {
-    change: 'Cambiar tema',
-    documentation: 'Documentación del tema',
-    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
-  },
-  tagsView: {
-    refresh: 'Actualizar',
-    close: 'Cerrar',
-    closeOthers: 'Cerrar otros',
-    closeAll: 'Cerrar todos'
-  },
-  settings: {
-    title: 'Page style setting',
-    theme: 'Theme Color',
-    showTagsView: 'Show Tags-View',
-    showSidebarLogo: 'Show Sidebar Logo',
-    fixedHeader: 'Fixed Header',
-    sidebarTextTheme: 'Sidebar Text Theme'
-  }
-}
diff --git a/vueJs/src/lang/index.ts b/vueJs/src/lang/index.ts
index 66d6414ba..9c55dfe26 100644
--- a/vueJs/src/lang/index.ts
+++ b/vueJs/src/lang/index.ts
@@ -6,16 +6,10 @@ import { getLanguage } from '@/utils/cookies'
 // element-ui built-in lang
 import elementEnLocale from 'element-ui/lib/locale/lang/en'
 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
-import elementEsLocale from 'element-ui/lib/locale/lang/es'
-import elementJaLocale from 'element-ui/lib/locale/lang/ja'
-import elementKoLocale from 'element-ui/lib/locale/lang/ko'
 
 // User defined lang
 import enLocale from './en'
 import zhLocale from './zh'
-import esLocale from './es'
-import jaLocale from './ja'
-import koLocale from './ko'
 
 Vue.use(VueI18n)
 
@@ -27,18 +21,6 @@ const messages = {
   zh: {
     ...zhLocale,
     ...elementZhLocale
-  },
-  es: {
-    ...esLocale,
-    ...elementEsLocale
-  },
-  ja: {
-    ...jaLocale,
-    ...elementJaLocale
-  },
-  ko: {
-    ...koLocale,
-    ...elementKoLocale
   }
 }
 
diff --git a/vueJs/src/lang/ja.ts b/vueJs/src/lang/ja.ts
deleted file mode 100644
index 83199582f..000000000
--- a/vueJs/src/lang/ja.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-export default {
-  route: {
-    dashboard: 'トップ',
-    documentation: 'ドキュメント',
-    guide: 'ガイド',
-    permission: '権限',
-    rolePermission: '権限ロール',
-    pagePermission: 'ページ権限',
-    directivePermission: 'ディレクティブ権限',
-    icons: 'アイコン',
-    components: 'コンポーネント',
-    tinymce: 'TinyMCE',
-    markdown: 'Markdown',
-    jsonEditor: 'JSON Editor',
-    splitPane: 'パネル',
-    avatarUpload: 'アバターアップロード',
-    dropzone: 'Dropzone',
-    sticky: 'Sticky',
-    countTo: 'Count To',
-    componentMixin: 'コンポーネントMixin',
-    backToTop: 'Back To Top',
-    draggableDialog: 'Draggable Dialog',
-    draggableKanban: 'Draggable 看板',
-    draggableList: 'Draggable List',
-    draggableSelect: 'Draggable Select',
-    charts: 'チャート',
-    barChart: 'Barチャート',
-    lineChart: 'Lineチャート',
-    mixedChart: 'Mixedチャート',
-    example: 'Example',
-    nested: 'Nested Routes',
-    menu1: 'メニュー１',
-    'menu1-1': 'メニュー 1-1',
-    'menu1-2': 'メニュー 1-2',
-    'menu1-2-1': 'メニュー 1-2-1',
-    'menu1-2-2': 'メニュー 1-2-2',
-    'menu1-3': 'メニュー 1-3',
-    menu2: 'メニュー 2',
-    table: 'Table',
-    dynamicTable: '可変 Table',
-    draggableTable: 'Draggable Table',
-    inlineEditTable: 'Inline Edit Table',
-    complexTable: 'Complex Table',
-    tab: 'Tab',
-    form: 'フォーム',
-    createArticle: '投稿作成',
-    editArticle: '投稿編集',
-    articleList: '投稿リスト',
-    errorPages: 'エラーページ',
-    page401: '401',
-    page404: '404',
-    errorLog: 'エラーログ',
-    excel: 'Excel',
-    exportExcel: '一括エクスポート',
-    selectExcel: '複数選択エクスポート',
-    mergeHeader: 'ヘッダーマージ',
-    uploadExcel: 'アップロード',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Export Zip',
-    theme: 'テーマ変更',
-    clipboard: 'Clipboard',
-    i18n: '多言語',
-    externalLink: '外部リンク',
-    profile: 'プロフィール'
-  },
-  navbar: {
-    dashboard: 'トップ',
-    github: 'GitHub',
-    logOut: 'ログアウト',
-    profile: 'プロフィール',
-    theme: 'テーマ変更',
-    size: '画面サイズ'
-  },
-  login: {
-    title: 'ユーザログイン',
-    logIn: 'ログイン',
-    username: 'ユーザ名',
-    password: 'パスワード',
-    any: 'any',
-    thirdparty: '外部IDでログイン',
-    thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
-  },
-  documentation: {
-    documentation: 'ドキュメント',
-    github: 'Github Link'
-  },
-  permission: {
-    createRole: 'ロール追加',
-    editPermission: 'ロール変更',
-    roles: 'ロール',
-    switchRoles: 'ロール切替',
-    tips: 'v-permissionは使えない時があります。例えば: Element-UI の el-tab、 el-table-column 及び他の dom。v-ifを使う必要があります。',
-    delete: '削除',
-    confirm: '確認',
-    cancel: 'キャンセル'
-  },
-  guide: {
-    description: 'ガイドは各機能の説明です。',
-    button: 'ガイドを見る'
-  },
-  components: {
-    documentation: 'ドキュメント',
-    tinymceTips: 'tinymceは管理画面に重要な機能ですが、その同時に落とし穴がありあす。tinymceを使う道のりが大変でした。Tinymceを使う時に各自のプロジェクト状況で判断が必要です。ドキュメントはこちら',
-    stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
-    backToTopTips1: 'トップへスクロールが表示されます。',
-    backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
-    imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
-  },
-  table: {
-    dynamicTips1: '先頭は固定、最後に追加',
-    dynamicTips2: '戦後に追加せず、指定列に追加',
-    dragTips1: 'デフォルト順番',
-    dragTips2: 'Drag後の順番',
-    title: 'タイトル',
-    importance: '重要',
-    type: 'タイプ',
-    remark: '評価',
-    search: '検索',
-    add: '追加',
-    export: 'エクスポート',
-    reviewer: 'レビュアー',
-    id: '番号',
-    date: '日時',
-    author: '作成者',
-    readings: '閲覧数',
-    status: 'ステータス',
-    actions: '操作',
-    edit: '編集',
-    publish: '公開',
-    draft: '下書き',
-    delete: 'キャンセル',
-    cancel: 'キャンセル',
-    confirm: '確認'
-  },
-  example: {
-    warning: '新規作成と編集画面は keep-alive を使えないです。keep-alive の include はrouteのキャッシュは使えないです。そのため、component name を使ってキャッシュさせるようにします。このようなキャッシュ機能を作りたい場合，localStorageを使う手があります。もしくは keep-alive の includeを使って、全ページキャッシュする方法はあります。'
-  },
-  errorLog: {
-    tips: '右上のbugアイコンをクリックしてください。',
-    description: '管理画面はspaを使う場合が多い、ユーザ体現向上はできますが、想定外エラーが発生する場合があります。Vueはそのエラーハンドリング機能を提供し、エラーレポートができます。',
-    documentation: 'ドキュメント'
-  },
-  excel: {
-    export: 'エクスポート',
-    selectedExport: 'エクスポート対象を選択してください。',
-    placeholder: 'ファイル名を入力してください。'
-  },
-  zip: {
-    export: 'エクスポート',
-    placeholder: 'ファイル名を入力してください。'
-  },
-  pdf: {
-    tips: 'window.print() を使ってPDFダウンロードしています。'
-  },
-  theme: {
-    change: 'テーマ切替',
-    documentation: 'ドキュメント',
-    tips: 'Tips: テーマの切り替え方法はnavbarのtheme-pickと異なります、使い方はドキュメントを確認してください。'
-  },
-  tagsView: {
-    refresh: '更新',
-    close: '閉じる',
-    closeOthers: 'その他閉じる',
-    closeAll: 'すべて閉じる'
-  },
-  settings: {
-    title: 'システムテーマ',
-    theme: 'テーマ色',
-    showTagsView: 'Tags-View 開く',
-    showSidebarLogo: 'Show Sidebar Logo',
-    fixedHeader: 'Fixed Header',
-    sidebarTextTheme: 'Sidebar Text Theme'
-  }
-}
diff --git a/vueJs/src/lang/ko.ts b/vueJs/src/lang/ko.ts
deleted file mode 100644
index a52d29cb9..000000000
--- a/vueJs/src/lang/ko.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-export default {
-  route: {
-    dashboard: '대시보드',
-    documentation: '문서',
-    guide: '가이드',
-    permission: '권한',
-    rolePermission: '역할 권한',
-    pagePermission: '페이지 권한',
-    directivePermission: '지시 권한',
-    icons: '아이콘',
-    components: '구성 요소',
-    tinymce: 'TinyMCE',
-    markdown: 'Markdown',
-    jsonEditor: 'JSON Editor',
-    splitPane: '패널',
-    avatarUpload: '아바타업로드',
-    dropzone: 'Dropzone',
-    sticky: 'Sticky',
-    countTo: 'Count To',
-    componentMixin: '구성 요소 Mixin',
-    backToTop: 'Back To Top',
-    draggableDialog: '드래그 상자',
-    draggableKanban: '드래그 간판',
-    draggableList: '드래그 리스트',
-    draggableSelect: '드래그 선택',
-    charts: '차트',
-    barChart: '막대그래프',
-    lineChart: '꺽은선그래프',
-    mixedChart: '종합차트',
-    example: '예시',
-    nested: 'Nested Routes',
-    menu1: '메뉴１',
-    'menu1-1': '메뉴 1-1',
-    'menu1-2': '메뉴 1-2',
-    'menu1-2-1': '메뉴 1-2-1',
-    'menu1-2-2': '메뉴 1-2-2',
-    'menu1-3': '메뉴 1-3',
-    menu2: '메뉴 2',
-    table: '표',
-    dynamicTable: 'Dynamic 표',
-    draggableTable: 'Draggable 표',
-    inlineEditTable: 'Inline Edit 표',
-    complexTable: 'Complex 표',
-    tab: 'Tab',
-    form: '형태',
-    createArticle: '게시물 작성',
-    editArticle: '게시물 편집',
-    articleList: '게시물 리스트',
-    errorPages: '에러 페이지',
-    page401: '401',
-    page404: '404',
-    errorLog: '에러 로그',
-    excel: '엑셀',
-    exportExcel: '엑셀 내보내기',
-    selectExcel: '엑셀 선택',
-    mergeHeader: '헤더 병합',
-    uploadExcel: '엑셀 올리기',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Export Zip',
-    theme: '테마',
-    clipboard: 'Clipboard',
-    i18n: '언어',
-    externalLink: '외부 링크',
-    profile: '프로필'
-  },
-  navbar: {
-    dashboard: '대시보드',
-    github: '깃허브',
-    logOut: '로그아웃',
-    profile: '프로필',
-    theme: '테마',
-    size: '크기'
-  },
-  login: {
-    title: '타이틀',
-    logIn: '로그인',
-    username: '이름',
-    password: '비밀번호',
-    any: 'any',
-    thirdparty: '외부 ID로 로그인',
-    thirdpartyTips: '로컬 환경에서 로그인 할 수 없습니다.'
-  },
-  documentation: {
-    documentation: '문서',
-    github: '깃허브 링크'
-  },
-  permission: {
-    createRole: '역할 추가',
-    editPermission: '권한 수정',
-    roles: '역할',
-    switchRoles: '역할 바꾸기',
-    tips: 'v-permission 사용할 때가 있습니다. 예 : Element-UI의 el-tab, el-table-column 및 다른 dom. v-if를 사용해야합니다.',
-    delete: '삭제',
-    confirm: '확인',
-    cancel: '취소'
-  },
-  guide: {
-    description: '각 기능에 대한 설명입니다.',
-    button: '버튼'
-  },
-  components: {
-    documentation: '문서',
-    tinymceTips: '서식있는 텍스트는 관리 백엔드의 핵심 기능이지만 동시에 문제가 많은 곳입니다. 리치 텍스트를 선택하는 과정에서도 많은 우회가 필요했습니다. 시중에 나와있는 일반적인 서식있는 텍스트는 기본적으로 사용되었으며 마침내 Tinymce를 선택했습니다. 보다 자세한 리치 텍스트 비교 및   소개를 참조하십시오.',
-    stickyTips: '페이지의 지정된 위치에 스크롤하면 나타납니다.',
-    backToTopTips1: '페이지가 지정된 위치로 스크롤되면 맨 아래 오른쪽 모서리에 맨 위로 이동 단추가 나타납니다.',
-    backToTopTips2: '버튼 스타일, 표시 / 숨기기, 모양 높이, 반환 높이를 사용자 정의 할 수 있습니다. 텍스트 프롬프트가 필요한 경우 element-ui el-tooltip 요소를 외부에서 사용할 수 있습니다',
-    imageUploadTips: 'vue @ 1 버전 만 사용하고 있었고 현재 mockjs와 호환되지 않기 때문에 직접 수정했으며 사용하려는 경우 공식 버전을 사용하는 것이 좋습니다.'
-  },
-  table: {
-    dynamicTips1: '정렬된 헤더',
-    dynamicTips2: '정렬되지 않은 헤더',
-    dragTips1: '기본 순서',
-    dragTips2: '드래그한 순서',
-    title: '타이틀',
-    importance: '중요성',
-    type: 'Type',
-    remark: 'Remark',
-    search: '검색',
-    add: '추가',
-    export: '내보내기',
-    reviewer: 'Reviewer',
-    id: 'ID',
-    date: '날짜',
-    author: '글쓴이',
-    readings: 'Readings',
-    status: '상태',
-    actions: 'Actions',
-    edit: '수정',
-    publish: '게시',
-    draft: 'Draft',
-    delete: '삭제',
-    cancel: '취소',
-    confirm: '확인'
-  },
-  example: {
-    warning: 'keep-alive의 \'include \'는 (는) 현재 경로 기반 캐싱을 지원하지 않으므로 구성 요소 이름을 기반으로 캐시되기 때문에 keep-alive로 페이지를 만들고 편집 할 수 없습니다. 비슷한 캐싱 효과를 얻으려면 localStorage와 같은 브라우저 캐싱 구성표를 사용할 수 있습니다. 또는 keep-alive \' include \'를 사용하여 모든 페이지를 직접 캐시하지 마십시오. 자세히보다'
-  },
-  errorLog: {
-    tips: '오른쪽 상단에있는 버그 아이콘을 클릭하십시오',
-    description: '이제 관리 시스템은 기본적으로 스파의 형태이며 사용자 경험을 향상 시키지만 페이지 문제의 가능성을 증가시킵니다. 작은 태만으로 인해 전체 페이지 교착 상태가 발생할 수 있습니다. 다행히 Vue는 오류를 처리하거나 예외를보고 할 수있는 예외 처리를 포착하는 방법을 제공합니다.',
-    documentation: '문서 소개'
-  },
-  excel: {
-    export: '내보내기',
-    selectedExport: '선택 항목 내보내기',
-    placeholder: '파일 이름을 입력하세요.(기본 엑셀 목록)'
-  },
-  zip: {
-    export: '내보내기',
-    placeholder: '파일 이름을 입력하세요.(기본 파일)'
-  },
-  pdf: {
-    tips: '여기서는 window.print ()를 사용하여 PDF 다운로드 기능을 구현합니다.'
-  },
-  theme: {
-    change: '테마 바꾸기',
-    documentation: '테마 문서',
-    tips: 'Tips: 탐색 모음의 테마 선택과는 다른 응용 프로그램 시나리오가있는 두 가지 다른 스키닝 방법입니다. 자세한 내용은 설명서를 참조하십시오.'
-  },
-  tagsView: {
-    refresh: '새로고침',
-    close: '닫기',
-    closeOthers: '기타 닫기',
-    closeAll: '모두 닫기'
-  },
-  settings: {
-    title: '페이지 스타일 설정',
-    theme: '테마 색상',
-    showTagsView: 'Tags-View 열기',
-    showSidebarLogo: '사이드 메뉴 로고',
-    fixedHeader: '헤더 고정',
-    sidebarTextTheme: '사이드 메뉴 글꼴 테마'
-  }
-}
diff --git a/vueJs/src/lang/zh.ts b/vueJs/src/lang/zh.ts
index fb09c1b38..5bac66fd6 100644
--- a/vueJs/src/lang/zh.ts
+++ b/vueJs/src/lang/zh.ts
@@ -90,12 +90,22 @@ export default {
   login: {
     title: '系统登录',
     logIn: '登录',
+    userLogin: '用户密码登录',
+    phoneLogin: '手机免密登录',
     tenantName: '租户',
     username: '账号',
     password: '密码',
+    phoneNumber: '手机号码',
+    phoneVerifyCode: '手机验证码',
+    sendVerifyCode: '发送验证码',
+    afterSendVerifyCode: ' s后重新发送',
     any: '随便填',
     thirdparty: '第三方登录',
-    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！',
+    tokenExprition: '身份令牌已过期,请重新登录!',
+    confirmLogout: '确认登出',
+    relogin: '重新登录',
+    cancel: '取消'
   },
   documentation: {
     documentation: '文档',
@@ -586,6 +596,7 @@ export default {
     cancel: '取 消',
     confirm: '确 定',
     correctEmailAddress: '正确的邮件地址',
-    correctPhoneNumber: '正确的手机号码'
+    correctPhoneNumber: '正确的手机号码',
+    operatingFast: '您的操作过快,请稍后再试!'
   }
 }
diff --git a/vueJs/src/permission.ts b/vueJs/src/permission.ts
index 3b8038dc7..acb71b769 100644
--- a/vueJs/src/permission.ts
+++ b/vueJs/src/permission.ts
@@ -24,7 +24,6 @@ const getPageTitle = (key: string) => {
 router.beforeEach(async(to: Route, _: Route, next: any) => {
   // Start progress bar
   NProgress.start()
-
   // Determine whether the user has logged in
   if (UserModule.token) {
     if (to.path === '/login') {
@@ -35,9 +34,7 @@ router.beforeEach(async(to: Route, _: Route, next: any) => {
       // Check whether the user has obtained his permission roles
       if (PermissionModule.authorizedPermissions.length === 0) {
         try {
-          // Note: roles must be a object array! such as: ['admin'] or ['developer', 'editor']
           const { sub } = await UserModule.GetUserInfo()
-          // const roles = UserModule.roles
           // Generate accessible routes map based on role
           await PermissionModule.GenerateRoutes(sub)
           // Dynamically add accessible routes
diff --git a/vueJs/src/store/index.ts b/vueJs/src/store/index.ts
index 6034b368b..73435f6b0 100644
--- a/vueJs/src/store/index.ts
+++ b/vueJs/src/store/index.ts
@@ -7,10 +7,12 @@ import { IErrorLogState } from './modules/error-log'
 import { IPermissionState } from './modules/permission'
 import { ISettingsState } from './modules/settings'
 import { IRoleState } from './modules/role'
+import { IAbpConfigurationState } from './modules/abp'
 
 Vue.use(Vuex)
 
 export interface IRootState {
+  abp: IAbpConfigurationState
   app: IAppState
   user: IUserState
   tagsView: ITagsViewState
diff --git a/vueJs/src/store/modules/abp.ts b/vueJs/src/store/modules/abp.ts
new file mode 100644
index 000000000..89fccf153
--- /dev/null
+++ b/vueJs/src/store/modules/abp.ts
@@ -0,0 +1,27 @@
+import store from '@/store'
+import { getAbpConfig, setAbpConfig } from '@/utils/localStorage'
+import AbpConfigurationService, { IAbpConfiguration } from '@/api/abpconfiguration'
+import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
+
+export interface IAbpConfigurationState {
+  configuration: IAbpConfiguration
+}
+
+@Module({ dynamic: true, store, name: 'abpconfiguration' })
+class AbpConfiguration extends VuexModule implements IAbpConfigurationState {
+  configuration = getAbpConfig()
+
+  @Mutation
+  private SET_ABPCONFIGURATION(configuration: IAbpConfiguration) {
+    this.configuration = configuration
+    setAbpConfig(configuration)
+  }
+
+  @Action({ rawError: true })
+  public async GetAbpConfiguration() {
+    const config = await AbpConfigurationService.getAbpConfiguration()
+    this.SET_ABPCONFIGURATION(config)
+  }
+}
+
+export const AbpConfigurationModule = getModule(AbpConfiguration)
\ No newline at end of file
diff --git a/vueJs/src/store/modules/user.ts b/vueJs/src/store/modules/user.ts
index e14f132ff..ec001c36f 100644
--- a/vueJs/src/store/modules/user.ts
+++ b/vueJs/src/store/modules/user.ts
@@ -1,18 +1,18 @@
 import { VuexModule, Module, Action, Mutation, getModule } from 'vuex-module-decorators'
-import UserApiService, { UserLoginData } from '@/api/users'
+import UserApiService, { UserLoginData, UserLoginPhoneData } from '@/api/users'
 import TenantService from '@/api/tenant'
-import { getToken, setToken, removeToken, getRefreshToken, setRefreshToken } from '@/utils/cookies'
+import { getToken, setToken, removeToken, getRefreshToken, setRefreshToken } from '@/utils/localStorage'
 import { resetRouter } from '@/router'
 import { TagsViewModule } from './tags-view'
 import { removeTenant, setTenant } from '@/utils/sessions'
 import { PermissionModule } from '@/store/modules/permission'
+import { AbpConfigurationModule } from '@/store/modules/abp'
 import store from '@/store'
 
 export interface IUserState {
   token: string
+  id: string
   name: string
-  avatar: string
-  introduction: string
   roles: string[]
   email: string
 }
@@ -20,26 +20,25 @@ export interface IUserState {
 @Module({ dynamic: true, store, name: 'user' })
 class User extends VuexModule implements IUserState {
   public token = getToken() || ''
-  public refreshToken = getRefreshToken() || ''
+  public id = ''
   public name = ''
-  public avatar = ''
-  public introduction = ''
   public roles: string[] = []
   public email = ''
 
   @Mutation
   private SET_TOKEN(token: string) {
     this.token = token
+    setToken(token)
   }
 
   @Mutation
-  private SET_NAME(name: string) {
-    this.name = name
+  private SET_ID(id: string) {
+    this.id = id
   }
 
   @Mutation
-  private SET_REFRESH_TOKEN(token: string) {
-    this.refreshToken = token
+  private SET_NAME(name: string) {
+    this.name = name
   }
 
   @Mutation
@@ -54,23 +53,32 @@ class User extends VuexModule implements IUserState {
 
   @Action({ rawError: true })
   public async Login(userInfo: { tenantName: string | undefined, username: string, password: string}) {
+    if (userInfo.tenantName) {
+      await this.PreLogin(userInfo.tenantName)
+    }
     const userLoginData = new UserLoginData()
     userLoginData.userName = userInfo.username
     userLoginData.password = userInfo.password
+    const loginResult = await UserApiService.userLogin(userLoginData)
+    const token = loginResult.token_type + ' ' + loginResult.access_token
+    this.SET_TOKEN(token)
+    setRefreshToken(loginResult.refresh_token)
+    await this.PostLogin()
+  }
+
+  @Action({ rawError: true })
+  public async PhoneLogin(userInfo: { tenantName: string | undefined, phoneNumber: string, verifyCode: string}) {
     if (userInfo.tenantName) {
-      const tenantResult = await TenantService.getTenantByName(userInfo.tenantName)
-      if (tenantResult.success) {
-        setTenant(tenantResult.tenantId)
-      } else {
-        throw new Error('给定的租户不可用: ' + userInfo.tenantName)
-      }
+      await this.PreLogin(userInfo.tenantName)
     }
-    const loginResult = await UserApiService.userLogin(userLoginData)
+    const userLoginData = new UserLoginPhoneData()
+    userLoginData.phoneNumber = userInfo.phoneNumber
+    userLoginData.verifyCode = userInfo.verifyCode
+    const loginResult = await UserApiService.userLoginWithPhone(userLoginData)
     const token = loginResult.token_type + ' ' + loginResult.access_token
-    setToken(token)
     this.SET_TOKEN(token)
     setRefreshToken(loginResult.refresh_token)
-    this.SET_REFRESH_TOKEN(loginResult.refresh_token)
+    await this.PostLogin()
   }
 
   @Action
@@ -87,6 +95,7 @@ class User extends VuexModule implements IUserState {
       throw Error('GetUserInfo: token is undefined!')
     }
     const userInfo = await UserApiService.getUserInfo()
+    this.SET_ID(userInfo.sub)
     this.SET_NAME(userInfo.name)
     this.SET_EMAIL(userInfo.email)
     return userInfo
@@ -97,7 +106,12 @@ class User extends VuexModule implements IUserState {
     if (this.token === '') {
       throw Error('LogOut: token is undefined!')
     }
-    await UserApiService.userLogout(getRefreshToken())
+    const token = getRefreshToken()
+    if (token) {
+      await UserApiService.userLogout(token)
+    }
+    this.SET_TOKEN('')
+    this.SET_ROLES([])
     removeToken()
     removeTenant()
     resetRouter()
@@ -105,13 +119,36 @@ class User extends VuexModule implements IUserState {
     TagsViewModule.delAllViews()
     PermissionModule.ResetPermissions()
     PermissionModule.ResetRoutes()
-    this.SET_TOKEN('')
-    this.SET_ROLES([])
   }
 
   @Action
   public RefreshSession() {
-    
+    return new Promise((resolve, reject) => {
+      const token = getToken()
+      if (token) {
+        UserApiService.refreshToken(token).then(result => {
+          const token = result.token_type + ' ' + result.access_token
+          setRefreshToken(result.refresh_token)
+          this.SET_TOKEN(token)
+          return resolve(result)
+        }).catch(error => {
+          return reject(error)
+        })
+      } else {
+        return resolve('')
+      }
+    })
+  }
+
+  @Action
+  private async PreLogin(tenantName: string) {
+    const tenantResult = await TenantService.getTenantByName(tenantName)
+    setTenant(tenantResult.tenantId)
+  }
+
+  @Action
+  private async PostLogin() {
+    await AbpConfigurationModule.GetAbpConfiguration()
   }
 }
 
diff --git a/vueJs/src/utils/cookies.ts b/vueJs/src/utils/cookies.ts
index 67b577e1d..b395263f5 100644
--- a/vueJs/src/utils/cookies.ts
+++ b/vueJs/src/utils/cookies.ts
@@ -12,15 +12,3 @@ export const setLanguage = (language: string) => Cookies.set(languageKey, langua
 const sizeKey = 'size'
 export const getSize = () => Cookies.get(sizeKey)
 export const setSize = (size: string) => Cookies.set(sizeKey, size)
-
-// User
-const tokenKey = 'vue_typescript_admin_access_token'
-const refreshTokenKey = 'vue_typescript_admin_refresh_token'
-export const getToken = () => Cookies.get(tokenKey)
-export const setToken = (token: string) => Cookies.set(tokenKey, token)
-export const getRefreshToken = () => Cookies.get(refreshTokenKey)
-export const setRefreshToken = (token: string) => Cookies.set(refreshTokenKey, token)
-export const removeToken = () => {
-  Cookies.remove(tokenKey)
-  return Cookies.remove(refreshTokenKey)
-}
diff --git a/vueJs/src/utils/localStorage.ts b/vueJs/src/utils/localStorage.ts
new file mode 100644
index 000000000..fc6d2c1d1
--- /dev/null
+++ b/vueJs/src/utils/localStorage.ts
@@ -0,0 +1,26 @@
+import { AbpConfiguration } from '@/api/abpconfiguration'
+const abpConfigKey = 'vue_admin_abp_configuration'
+export const getAbpConfig = () => {
+  const abpConfigItem = localStorage.getItem(abpConfigKey)
+  if (abpConfigItem) {
+    return JSON.parse(abpConfigItem) as AbpConfiguration
+  }
+  return new AbpConfiguration()
+}
+export const setAbpConfig = (abpConfig: AbpConfiguration) => {
+  const abpConfigItem = JSON.stringify(abpConfig)
+  localStorage.setItem(abpConfigKey, abpConfigItem)
+}
+export const removeAbpConfig = () => localStorage.removeItem(abpConfigKey)
+
+// User
+const tokenKey = 'vue_typescript_admin_token'
+const refreshTokenKey = 'vue_typescript_admin_refresh_token'
+export const getToken = () => localStorage.getItem(tokenKey)
+export const setToken = (token: string) => localStorage.setItem(tokenKey, token)
+export const getRefreshToken = () => localStorage.getItem(refreshTokenKey)
+export const setRefreshToken = (token: string) => localStorage.setItem(refreshTokenKey, token)
+export const removeToken = () => {
+  localStorage.removeItem(tokenKey)
+  localStorage.removeItem(refreshTokenKey)
+}
\ No newline at end of file
diff --git a/vueJs/src/utils/request.ts b/vueJs/src/utils/request.ts
index 6fc40091c..512115a62 100644
--- a/vueJs/src/utils/request.ts
+++ b/vueJs/src/utils/request.ts
@@ -1,8 +1,10 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import i18n from 'vue-i18n'
+import { MessageBox, Notification } from 'element-ui'
 import { UserModule } from '@/store/modules/user'
 import { getTenant } from '@/utils/sessions'
 import { getLanguage } from '@/utils/cookies'
+import { getToken, getRefreshToken } from '@/utils/localStorage'
 
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@@ -13,17 +15,24 @@ const service = axios.create({
 // Request interceptors
 service.interceptors.request.use(
   (config) => {
+    if (config.url === '/connect/token') {
+      return config
+    }
+    const token = getToken()
     // Add X-Access-Token header to every request, you can add other custom headers here
-    if (UserModule.token) {
-      config.headers.Authorization = UserModule.token
+    if (token) {
+      config.headers.Authorization = token
     }
     const tenantId = getTenant()
     if (tenantId) {
       config.headers.__tenant = tenantId
     }
     // abp官方类库用的 zh-Hans 的简体中文包 这里直接粗暴一点
-    if (getLanguage()?.indexOf('zh') !== -1) {
+    const language = getLanguage()
+    if (language?.indexOf('zh') !== -1) {
       config.headers['Accept-Language'] = 'zh-Hans'
+    } else {
+      config.headers['Accept-Language'] = language
     }
     return config
   },
@@ -32,53 +41,98 @@ service.interceptors.request.use(
   }
 )
 
+function l(name: string) {
+  return i18n.prototype.t(name).toString()
+}
+
+function showError(error: any, status: number) {
+  let message = ''
+  let title = ''
+  if (typeof error === 'string') {
+    message = error
+  } else if (error.error.details) {
+    message = error.error.details
+    title = error.error.message
+  } else if (error.error.message) {
+    message = error.error.message
+  } else {
+    switch (status) {
+      case 400:
+        title = error.error
+        message = error.error_description
+        break
+      case 401:
+        title = l('AbpAccount.DefaultErrorMessage401')
+        message = l('AbpAccount:DefaultErrorMessage401Detail')
+        break
+      case 403:
+        title = l('AbpAccount:DefaultErrorMessage403')
+        message = l('AbpAccount.DefaultErrorMessage403Detail')
+        break
+      case 404:
+        title = l('AbpAccount.DefaultErrorMessage404')
+        message = l('AbpAccount.DefaultErrorMessage404Detail')
+        break
+      case 429:
+        message = l('global.operatingFast')
+        break
+      case 500:
+        title = l('AbpAccount.500Message')
+        message = l('AbpAccount.InternalServerErrorMessage')
+        break
+      default:
+        break
+    }
+  }
+  Notification({
+    title: title,
+    message: message,
+    type: 'error',
+    duration: 5 * 1000
+  })
+}
+
 // Response interceptors
 service.interceptors.response.use(
   (response) => {
     return response
   },
   (error) => {
-    console.log(error.response)
+    showError(error.response.data, error.response.status)
     if (error.response.status === 401) {
-      MessageBox.confirm(
-        '身份令牌已过期,请重新登录!',
-        '确定登出',
-        {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'error'
-        }).then(() => {
-        UserModule.ResetToken()
-        location.reload() // To prevent bugs from vue-router
-        return Promise.reject(error)
-      })
+      const token = getRefreshToken()
+      if (token) {
+        UserModule.RefreshSession().then(() => {
+          return service.request(error.config)
+        }).catch(() => {
+          MessageBox.confirm(
+            l('login.tokenExprition'),
+            l('login.confirmLogout'),
+            {
+              confirmButtonText: l('login.relogin'),
+              cancelButtonText:  l('global.cancel'),
+              type: 'error'
+            }).then(() => {
+            UserModule.ResetToken()
+            location.reload() // To prevent bugs from vue-router
+            return Promise.reject(error)
+          })
+        })
+      } else {
+        MessageBox.confirm(
+          l('login.tokenExprition'),
+          l('login.confirmLogout'),
+          {
+            confirmButtonText: l('login.relogin'),
+            cancelButtonText: l('global.cancel'),
+            type: 'error'
+          }).then(() => {
+          UserModule.ResetToken()
+          location.reload() // To prevent bugs from vue-router
+          return Promise.reject(error)
+        })
+      }
     }
-    if (error.response.status === 429) {
-      Message({
-        message: '您的操作过快,请稍后再试!',
-        type: 'warning',
-        duration: 5 * 1000
-      })
-      return Promise.reject(error)
-    }
-    if (error.response.status === 400 && error.response.data.error_description) {
-      Message({
-        message: error.response.data.error_description,
-        type: 'error',
-        duration: 5 * 1000
-      })
-      return Promise.reject(error)
-    }
-    let message = error.message
-    if (error.response.headers._abperrorformat) {
-      message = error.response.data.error.message + error.response.data.error.details
-    }
-
-    Message({
-      message: message,
-      type: 'error',
-      duration: 5 * 1000
-    })
     return Promise.reject(error)
   }
 )
diff --git a/vueJs/src/views/admin/users/components/UserCreateForm.vue b/vueJs/src/views/admin/users/components/UserCreateForm.vue
index 6196fe1ec..af0f148d0 100644
--- a/vueJs/src/views/admin/users/components/UserCreateForm.vue
+++ b/vueJs/src/views/admin/users/components/UserCreateForm.vue
@@ -166,9 +166,9 @@ export default class extends Vue {
       if (valid) {
         UserApiService.createUser(this.createUser).then(user => {
           this.$message.success(this.l('users.createUserSuccess', { name: user.name }))
-          this.$emit('onUserProfileChanged', user.id)
           this.resetForm()
           this.onCancel()
+          this.$emit('onUserProfileChanged', user.id)
         })
       }
     })
diff --git a/vueJs/src/views/admin/users/components/UserEditForm.vue b/vueJs/src/views/admin/users/components/UserEditForm.vue
index 23454383c..90c577b7c 100644
--- a/vueJs/src/views/admin/users/components/UserEditForm.vue
+++ b/vueJs/src/views/admin/users/components/UserEditForm.vue
@@ -290,8 +290,8 @@ export default class extends Vue {
           await PermissionService.setPermissionsByKey('U', this.userProfile.id, setUserPermissions)
         }
         frmEditUser.resetFields()
-        this.$emit('onUserProfileChanged', this.userProfile.id)
         this.onCancel()
+        this.$emit('onUserProfileChanged', this.userProfile.id)
       } else {
         return false
       }
diff --git a/vueJs/src/views/dashboard/admin/components/BoxCard.vue b/vueJs/src/views/dashboard/admin/components/BoxCard.vue
index f1d5cf9c6..899f3fd1c 100644
--- a/vueJs/src/views/dashboard/admin/components/BoxCard.vue
+++ b/vueJs/src/views/dashboard/admin/components/BoxCard.vue
@@ -10,10 +10,6 @@
       <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
     </div>
     <div style="position:relative;">
-      <pan-thumb
-        :image="avatar"
-        class="panThumb"
-      />
       <mallki
         class="mallki-text"
         text="vue-typescript-admin"
@@ -62,10 +58,6 @@ export default class extends Vue {
     return UserModule.name
   }
 
-  get avatar() {
-    return UserModule.avatar
-  }
-
   get roles() {
     return UserModule.roles
   }
diff --git a/vueJs/src/views/login/index.vue b/vueJs/src/views/login/index.vue
index 41412d078..c45c1144f 100644
--- a/vueJs/src/views/login/index.vue
+++ b/vueJs/src/views/login/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="login-container">
     <el-form
-      ref="loginForm"
+      ref="formLogin"
       :model="loginForm"
-      :rules="loginRules"
-      class="login-form"
-      autocomplete="on"
+      :rules="loginFormRules"
       label-position="left"
+      label-width="0px"
+      class="demo-ruleForm login-page"
     >
       <div class="title-container">
         <h3 class="title">
@@ -14,143 +14,173 @@
         </h3>
         <lang-select class="set-language" />
       </div>
-
-      <el-form-item prop="tenantName">
-        <span class="svg-container">
-          <svg-icon name="tree" />
-        </span>
-        <el-input
-          ref="tenantName"
-          v-model="loginForm.tenantName"
-          :placeholder="$t('login.tenantName')"
-          name="tenantName"
-          type="text"
-          tabindex="1"
-          autocomplete="on"
-        />
-      </el-form-item>
-
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon name="user" />
-        </span>
-        <el-input
-          ref="username"
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="username"
-          type="text"
-          tabindex="1"
-          autocomplete="on"
-        />
-      </el-form-item>
-
-      <el-tooltip
-        v-model="capsTooltip"
-        content="Caps lock is On"
-        placement="right"
-        manual
+      <el-tabs
+        stretch
+        @tab-click="handleLoginTabChanged"
       >
-        <el-form-item prop="password">
-          <span class="svg-container">
-            <svg-icon name="password" />
-          </span>
-          <el-input
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            :placeholder="$t('login.password')"
-            name="password"
-            tabindex="2"
-            autocomplete="on"
-            @keyup.native="checkCapslock"
-            @blur="capsTooltip = false"
-            @keyup.enter.native="handleLogin"
-          />
-          <span
-            class="show-pwd"
-            @click="showPwd"
-          >
-            <svg-icon :name="passwordType === 'password' ? 'eye-off' : 'eye-on'" />
-          </span>
-        </el-form-item>
-      </el-tooltip>
-
-      <el-button
-        :loading="loading"
-        type="primary"
-        style="width:100%; margin-bottom:30px;"
-        @click.native.prevent="handleLogin"
-      >
-        {{ $t('login.logIn') }}
-      </el-button>
+        <el-tab-pane :label="$t('login.userLogin')">
+          <div v-if="loginType === 'password'">
+            <el-form-item
+              prop="username"
+            >
+              <el-input
+                v-model="loginForm.username"
+                prefix-icon="el-icon-user"
+                type="text"
+                auto-complete="off"
+                tabindex="1"
+                :placeholder="$t('global.pleaseInputBy', {key: $t('login.username')})"
+              />
+            </el-form-item>
+            <el-form-item
+              prop="password"
+            >
+              <el-input
+                :key="passwordType"
+                ref="password"
+                v-model="loginForm.password"
+                prefix-icon="el-icon-lock"
+                :type="passwordType"
+                :placeholder="$t('global.pleaseInputBy', {key: $t('login.password')})"
+                name="password"
+                tabindex="2"
+                @keyup.enter.native="handleUserLogin"
+              />
+              <span
+                class="show-pwd"
+                @click="showPwd"
+              >
+                <svg-icon :name="passwordType === 'password' ? 'eye-off' : 'eye-on'" />
+              </span>
+            </el-form-item>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('login.phoneLogin')">
+          <div v-if="loginType === 'phone'">
+            <el-form-item
+              prop="phoneNumber"
+            >
+              <el-input
+                ref="loginItemPhone"
+                v-model="loginForm.phoneNumber"
+                prefix-icon="el-icon-mobile-phone"
+                type="text"
+                maxlength="11"
+                auto-complete="off"
+                :placeholder="$t('global.pleaseInputBy', {key: $t('login.phoneNumber')})"
+              />
+            </el-form-item>
+            <el-form-item
+              prop="verifyCode"
+            >
+              <el-row>
+                <el-col :span="16">
+                  <el-input
+                    v-model="loginForm.verifyCode"
+                    auto-complete="off"
+                    :placeholder="$t('global.pleaseInputBy', {key: $t('login.phoneVerifyCode')})"
+                    prefix-icon="el-icon-key"
+                    style="margin:-right: 10px;"
+                  />
+                </el-col>
+                <el-col :span="8">
+                  <el-button
+                    ref="sendButton"
+                    style="margin-left: 10px;width: 132px;"
+                    :disabled="sending"
+                    @click="handleSendPhoneVerifyCode"
+                  >
+                    {{ sendButtonName }}
+                  </el-button>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <el-form-item style="width:100%;">
+        <el-button
+          type="primary"
+          style="width:100%;"
+          :loading="logining"
+          @click="handleUserLogin"
+        >
+          {{ $t('login.logIn') }}
+        </el-button>
+      </el-form-item>
     </el-form>
-
-    <el-dialog
-      :title="$t('login.thirdparty')"
-      :visible.sync="showDialog"
-    >
-      {{ $t('login.thirdpartyTips') }}
-      <br>
-      <br>
-      <br>
-      <social-sign />
-    </el-dialog>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Input } from 'element-ui'
 import { Route } from 'vue-router'
-import { Dictionary } from 'vue-router/types/router'
-import { Form as ElForm, Input } from 'element-ui'
 import { UserModule } from '@/store/modules/user'
+import { Dictionary } from 'vue-router/types/router'
 import LangSelect from '@/components/LangSelect/index.vue'
-import SocialSign from './components/SocialSignin.vue'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import UserService, { PhoneVerify, VerifyType } from '@/api/users'
 
 @Component({
   name: 'Login',
   components: {
-    LangSelect,
-    SocialSign
+    LangSelect
   }
 })
 export default class extends Vue {
-  private validateUsername = (rule: any, value: string, callback: Function) => {
-    // if (!isValidUsername(value)) {
-    //   callback(new Error('Please enter the correct user name'))
-    // } else {
-    //   callback()
-    // }
-    callback()
-  }
+  private loginType = 'password'
+  private passwordType = 'password'
+  private redirect?: string
 
-  private validatePassword = (rule: any, value: string, callback: Function) => {
-    // if (value.length < 6) {
-    //   callback(new Error('The password can not be less than 6 digits'))
-    // } else {
-    //   callback()
-    // }
-    callback()
+  private sendTimer: any
+  private sending = false
+  private sendButtonName = this.l('login.sendVerifyCode')
+  private logining = false
+  private loginForm = {
+    tenantName: '',
+    username: '',
+    password: '',
+    phoneNumber: '',
+    verifyCode: ''
   }
 
-  private loginForm = {
-    tenantName: 'test-vue',
-    username: 'admin',
-    password: '1q2w3E*'
+  private validatePhoneNumberValue = (rule: any, value: string, callback: any) => {
+    const phoneReg = /^1[34578]\d{9}$/
+    if (!value || !phoneReg.test(value)) {
+      callback(new Error(this.l('global.pleaseInputBy', { key: this.l('global.correctPhoneNumber') })))
+    } else {
+      callback()
+    }
   }
 
-  private loginRules = {
-    username: [{ validator: this.validateUsername, trigger: 'blur' }],
-    password: [{ validator: this.validatePassword, trigger: 'blur' }]
+  private loginFormRules = {
+    username: [
+      {
+        required: true, message: this.l('global.pleaseInputBy', { key: this.l('login.username') }), trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true, message: this.l('global.pleaseInputBy', { key: this.l('login.password') }), trigger: 'blur'
+      }
+    ],
+    phoneNumber: [
+      {
+        required: true, validator: this.validatePhoneNumberValue, trigger: 'blur'
+      }
+    ],
+    verifyCode: [
+      {
+        required: true, message: this.l('global.pleaseInputBy', { key: this.l('login.phoneVerifyCode') }), trigger: 'blur'
+      }
+    ]
   }
 
-  private passwordType = 'password'
-  private loading = false
-  private showDialog = false
-  private capsTooltip = false
-  private redirect?: string
+  destroyed() {
+    if (this.sendTimer) {
+      clearInterval(this.sendTimer)
+    }
+  }
 
   @Watch('$route', { immediate: true })
   private onRouteChange(route: Route) {
@@ -162,19 +192,6 @@ export default class extends Vue {
     }
   }
 
-  mounted() {
-    if (this.loginForm.username === '') {
-      (this.$refs.username as Input).focus()
-    } else if (this.loginForm.password === '') {
-      (this.$refs.password as Input).focus()
-    }
-  }
-
-  private checkCapslock(e: KeyboardEvent) {
-    const { key } = e
-    this.capsTooltip = key !== null && key.length === 1 && (key >= 'A' && key <= 'Z')
-  }
-
   private showPwd() {
     if (this.passwordType === 'password') {
       this.passwordType = ''
@@ -186,117 +203,122 @@ export default class extends Vue {
     })
   }
 
-  private handleLogin() {
-    (this.$refs.loginForm as ElForm).validate(async(valid: boolean) => {
+  private handleUserLogin() {
+    const frmLogin = this.$refs.formLogin as any
+    frmLogin.validate(async(valid: boolean) => {
       if (valid) {
-        this.loading = true
-        // await UserModule.Login(this.loginForm)
-        UserModule.Login(this.loginForm).then(() => {
-          // await UserModule.Login(this.loginForm)
-          this.$router.push({
-            path: this.redirect || '/'
-          })
+        this.logining = true
+        try {
+          if (this.loginType === 'password') {
+            const userLogin = {
+              tenantName: this.loginForm.tenantName,
+              username: this.loginForm.username,
+              password: this.loginForm.password
+            }
+            await UserModule.Login(userLogin)
+            this.$router.push({
+              path: this.redirect || '/'
+            })
+          } else {
+            const phoneLogin = {
+              tenantName: this.loginForm.tenantName,
+              phoneNumber: this.loginForm.phoneNumber,
+              verifyCode: this.loginForm.verifyCode
+            }
+            await UserModule.PhoneLogin(phoneLogin)
+            this.$router.push({
+              path: this.redirect || '/'
+            })
+          }
+        } catch {
+          this.resetLoginButton()
+        }
+      }
+    })
+  }
+
+  private handleSendPhoneVerifyCode() {
+    const frmLogin = this.$refs.formLogin as any
+    frmLogin.validateField('phoneNumber', (errorMsg: string) => {
+      if (!errorMsg) {
+        this.sending = true
+        const phoneVerify = new PhoneVerify()
+        phoneVerify.phoneNumber = this.loginForm.phoneNumber
+        phoneVerify.verifyType = VerifyType.signin
+        UserService.sendPhoneVerifyCode(phoneVerify).then(() => {
+          let interValTime = 60
+          const sendingName = this.l('login.afterSendVerifyCode')
+          const sendedName = this.l('login.sendVerifyCode')
+          this.sendTimer = setInterval(() => {
+            this.sendButtonName = interValTime + sendingName
+            --interValTime
+            if (interValTime < 0) {
+              this.sendButtonName = sendedName
+              this.sending = false
+              clearInterval(this.sendTimer)
+            }
+          }, 1000)
         }).catch(() => {
-          setTimeout(() => {
-            this.loading = false
-          }, 0.5 * 1000)
+          this.sending = false
         })
-      } else {
-        return false
       }
     })
   }
-}
-</script>
 
-<style lang="scss">
-// References: https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/
-@supports (-webkit-mask: none) and (not (cater-color: $loginCursorColor)) {
-  .login-container .el-input {
-    input { color: $loginCursorColor; }
-    input::first-line { color: $lightGray; }
+  private handleLoginTabChanged(tab: any) {
+    this.loginType = tab.paneName === '1' ? 'phone' : 'password'
   }
-}
-
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-
-    input {
-      height: 47px;
-      background: transparent;
-      border: 0px;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $lightGray;
-      caret-color: $loginCursorColor;
-      -webkit-appearance: none;
 
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $loginBg inset !important;
-        -webkit-text-fill-color: #fff !important;
-      }
-    }
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
   }
 
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
+  private resetLoginButton() {
+    setTimeout(() => {
+      this.logining = false
+    }, 0.5 * 1000)
   }
 }
-</style>
+</script>
 
 <style lang="scss" scoped>
 .login-container {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background-color: $loginBg;
-
-  .login-form {
-    position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
-  }
-
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-
-    span {
-      &:first-of-type {
-        margin-right: 16px;
-      }
+    background-color: $loginBg;
+
+    .svg-container {
+      padding: 6px 5px 6px 15px;
+      color: $darkGray;
+      vertical-align: middle;
+      width: 30px;
+      display: inline-block;
     }
-  }
-
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $darkGray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
-  }
 
-  .title-container {
-    position: relative;
+    .title-container {
+      position: relative;
 
     .title {
       font-size: 26px;
       color: $lightGray;
-      margin: 0px auto 40px auto;
+      margin: 0px auto 20px auto;
       text-align: center;
       font-weight: bold;
     }
 
+    .tips {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 10px;
+
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
+      }
+    }
+
     .set-language {
       color: #fff;
       position: absolute;
@@ -310,23 +332,30 @@ export default class extends Vue {
   .show-pwd {
     position: absolute;
     right: 10px;
-    top: 7px;
     font-size: 16px;
     color: $darkGray;
     cursor: pointer;
     user-select: none;
   }
+}
 
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
-  }
-
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
+.login-page {
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    margin: 130px auto;
+    width: 500px;
+    padding: 35px 35px 15px;
+    border: 1px solid #8c9494;
+    box-shadow: 0 0 25px #454646;
+    background-color:rgb(110, 115, 116);
+
+    .loginTab.el-tabs__item {
+      width: 180px;
     }
-  }
+}
+
+label.el-checkbox.rememberme {
+    margin: 0px 0px 15px;
+    text-align: left;
 }
 </style>
diff --git a/vueJs/src/views/profile/index.vue b/vueJs/src/views/profile/index.vue
index 090e67fbc..3bdae36f5 100644
--- a/vueJs/src/views/profile/index.vue
+++ b/vueJs/src/views/profile/index.vue
@@ -51,14 +51,12 @@ import UserCard from './components/UserCard.vue'
 export interface IProfile {
   name: string
   email: string
-  avatar: string
   roles: string
 }
 
 const defaultProfile: IProfile = {
   name: 'Loading...',
   email: 'Loading...',
-  avatar: 'Loading...',
   roles: 'Loading...'
 }
 
@@ -83,10 +81,6 @@ export default class extends Vue {
     return UserModule.email
   }
 
-  get avatar() {
-    return UserModule.avatar
-  }
-
   get roles() {
     return UserModule.roles
   }
@@ -99,7 +93,6 @@ export default class extends Vue {
     this.user = {
       name: this.name,
       email: this.email,
-      avatar: this.avatar,
       roles: this.roles.join(' | ')
     }
   }