Home Explore Help
Register Sign In
lihao16
/
smsb-web-develop
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: support the configuration of logo and application name

Casper Dai 3 years ago
parent
2ffe25fa26
commit
81e5be7b86
23 changed files with 133 additions and 868 deletions
Split View Show Diff Stats
  1. 5 1
      .env
  2. 7 0
      .env.fujian
  3. 1 1
      keycloak-theme/login/error.ftl
  4. 0 70
      keycloak-theme/login/index.html
  5. 1 1
      keycloak-theme/login/info.ftl
  6. 2 2
      keycloak-theme/login/login-config-totp.ftl
  7. 1 1
      keycloak-theme/login/login-otp.ftl
  8. 1 1
      keycloak-theme/login/login.ftl
  9. 27 7
      keycloak-theme/login/resources/css/login.css
  10. 0 185
      keycloak-theme/login/resources/css/login.scss
  11. 16 2
      keycloak-theme/login/resources/css/password.css
  12. 0 158
      keycloak-theme/login/resources/css/password.scss
  13. 23 8
      keycloak-theme/login/resources/css/totp.css
  14. 0 164
      keycloak-theme/login/resources/css/totp.scss
  15. BIN
      keycloak-theme/login/resources/img/logo/fujian.png
  16. 0 0
      keycloak-theme/login/resources/img/logo/inspur.png
  17. BIN
      platform/logo/fujian.png
  18. BIN
      platform/logo/inspur.png
  19. 4 10
      src/layout/components/Sidebar/index.vue
  20. 8 7
      src/views/device/detail/dashboard/Header.vue
  21. 18 26
      src/views/platform/error-page/index.vue
  22. 0 216
      src/views/platform/login/index.vue
  23. 19 8
      vue.config.js

+ 5 - 1
.env
View File 

@@ -2,6 +2,8 @@ ENV = 'currency'
 
 
 LOGGER = 'disabled'
 
 
+LOGO = 'inspur.png'
 
+
 
 # 未开发的功能组件
 
 __PLACEHOLDER__ = 'disabled'
 
 # 传感器
 
@@ -9,7 +11,9 @@ __SENSOR__ = 'disabled'
 
 # 设备仪表盘
 
 __DEVICE_DASHBARD__ = 'disabled'
 
 # 设备接管
 
-__TAKEOVER__ = 'disabled'
 
+__TAKEOVER__ = 'enabled'
 
+
 
+VUE_APP_NAME = '浪潮屏媒安播云平台'
 
 
 # gateway
 
 VUE_APP_GATEWAY = ''

+ 7 - 0
.env.fujian
View File 

@@ -0,0 +1,7 @@
 
+NODE_ENV = 'production'
 
+
 
+ENV = 'fujian'
 
+
 
+LOGO = 'fujian.png'
 
+
 
+VUE_APP_NAME = '万福千屏户外安播云平台'

+ 1 - 1
keycloak-theme/login/error.ftl
View File 

@@ -11,7 +11,7 @@
 
     <div class="c-login__img"></div>
 
     <div class="c-login__main c-login-form">
 
       <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">很抱歉...</div>

+ 0 - 70
keycloak-theme/login/index.html
View File 

@@ -1,70 +0,0 @@
 
-<!doctype html>
 
-<html lang="en">
 
-<head>
 
-  <meta charset="utf-8" />
 
-  <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
-  <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="./resources/css/totp.css" />
 
-</head>
 
-<body>
 
-  <div class="c-login">
 
-    <div class="c-login__img"></div>
 
-    <form
 
-      class="c-login__main c-login-form"
 
-      onsubmit="login.disabled = true; return true;"
 
-      action="${url.loginAction}"
 
-      method="post"
 
-    >
 
-      <input id="totpSecret" type="hidden"  name="totpSecret" value="${totp.totpSecret}" />
 
-      <#if mode??>
 
-        <input id="mode" type="hidden" name="mode" value="${mode}" />
 
-      </#if>
 
-      <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
-        <div class="c-login-form__name">${realm.displayName}</div>
 
-      </div>
 
-      <div class="c-login-form__title">手机验证</div>
 
-      <div class="c-login-form__info">
 
-        <p>1、请先使用手机微信小程序搜索“数盾OTP”，或下载安装 “FreeOTP” 、“Goole Authenticator” 应用。</p>
 
-        <br />
 
-        <p>2、打开应用扫描二维码</p>
 
-        <br />
 
-        <img
 
-          class="c-login-form__qr"
 
-          src="data:image/png;base64, ${totp.totpSecretQrCode}"
 
-        />
 
-        <br />
 
-        <p>
 
-          <a
 
-            class="c-login-form__retry"
 
-            href="${totp.manualUrl}"
 
-          >
 
-            无法扫码
 
-          </a>
 
-        </p>
 
-        <br />
 
-        <p>3、输入应用提供的一次性码，点击提交完成验证。</p>
 
-        <br />
 
-        <p class="c-login-form__required">一次性验证码</p>
 
-        <input
 
-          type="text"
 
-          name="userLabel"
 
-          class="c-login-form__input"
 
-          autocomplete="off"
 
-        />
 
-        <div class="c-login-form__error">
 
-          <#if !messagesPerField.existsError('totp') && message?has_content && !isAppInitiatedAction??>
 
-            ${kcSanitize(messagesPerField.get('totp'))?no_esc}
 
-          </#if>
 
-        </div>
 
-        <input
 
-          type="submit"
 
-          name="login"
 
-          class="c-login-form__submit"
 
-          value="提交"
 
-        >
 
-      </div>
 
-    </form>
 
-  </div>
 
-</body>
 
-</html>

+ 1 - 1
keycloak-theme/login/info.ftl
View File 

@@ -11,7 +11,7 @@
 
     <div class="c-login__img"></div>
 
     <div class="c-login__main c-login-form">
 
       <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">${message.summary}</div>

+ 2 - 2
keycloak-theme/login/login-config-totp.ftl
View File 

@@ -20,9 +20,9 @@
 
         <input id="mode" type="hidden" name="mode" value="${mode}" />
 
       </#if>
 
       <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
-      </div>
 
+      </img>
 
       <div class="c-login-form__title">手机验证</div>
 
       <div class="c-login-form__info">
 
         <p>1、请先使用微信搜索小程序“数盾OTP”，或下载安装 “FreeOTP” 、“Goole Authenticator” 应用。</p>

+ 1 - 1
keycloak-theme/login/login-otp.ftl
View File 

@@ -16,7 +16,7 @@
 
       onsubmit="login.disabled = true; return true;"
 
     >
 
       <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">手机验证</div>

+ 1 - 1
keycloak-theme/login/login.ftl
View File 

@@ -17,7 +17,7 @@
 
       onsubmit="login.disabled = true; return false;"
 
     >
 
       <div class="c-login-form__header">
 
-        <div class="c-login-form__logo"></div>
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__tip">

+ 27 - 7
keycloak-theme/login/resources/css/login.css
View File 

@@ -37,11 +37,14 @@ a {
 
   min-height: 100%;
 
   width: 100%;
 
 }
 
+
 
 .c-login__img {
 
-  flex: 1 1 400px;
 
+  flex: 1 0 400px;
 
   display: inline-block;
 
-  background: url("../img/illustration.png") 50% 50%/757px 613px no-repeat;
 
+  max-width: 800px;
 
+  background: url("../img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
 }
 
+
 
 .c-login__main {
 
   flex: 1 0 auto;
 
 }
 
@@ -51,6 +54,7 @@ a {
 
     display: none;
 
   }
 
 }
 
+
 
 .c-login-form {
 
   display: inline-flex;
 
   flex-direction: column;
 
@@ -60,44 +64,51 @@ a {
 
   background-color: #FFFFFF;
 
   overflow: auto;
 
 }
 
+
 
 .c-login-form__header {
 
   display: inline-flex;
 
   align-items: center;
 
 }
 
+
 
 .c-login-form__logo {
 
-  display: inline-block;
 
-  width: 142px;
 
-  height: 36px;
 
-  background: url("../img/logo.png") 0 0/100% 100% no-repeat;
 
+  flex: none;
 
 }
 
+
 
 .c-login-form__name {
 
-  padding-left: 10px;
 
+  margin-left: 16px;
 
   color: #1C5CB0;
 
   font-size: 28px;
 
   font-weight: bold;
 
   line-height: 1;
 
 }
 
+
 
 .c-login-form__tip {
 
   padding: 20px;
 
   height: 100px;
 
 }
 
+
 
 .c-login-form__tip .success {
 
   color: #67C23A;
 
 }
 
+
 
 .c-login-form__tip .warning {
 
   color: #E6A23C;
 
 }
 
+
 
 .c-login-form__tip .error {
 
   color: #F56C6C;
 
 }
 
+
 
 .c-login-form__tip .info {
 
   color: #409EFF;
 
 }
 
+
 
 .c-login-form__wrapper {
 
   display: inline-flex;
 
   flex-direction: column;
 
   color: #C4C4C4;
 
 }
 
+
 
 .c-login-form__error {
 
   height: 30px;
 
   color: #F56C6C;
 
@@ -105,16 +116,19 @@ a {
 
   line-height: 24px;
 
   white-space: nowrap;
 
 }
 
+
 
 .c-login-form__label {
 
   font-size: 24px;
 
   line-height: 1;
 
 }
 
+
 
 .c-login-form__section {
 
   display: inline-flex;
 
   align-items: center;
 
   padding: 8px 0 2px;
 
   border-bottom: 1px solid currentColor;
 
 }
 
+
 
 .c-login-form__input {
 
   width: 320px;
 
   height: 30px;
 
@@ -123,9 +137,11 @@ a {
 
   border: none;
 
   outline: none;
 
 }
 
+
 
 .c-login-form__input.password {
 
   -webkit-text-security: disc;
 
 }
 
+
 
 .c-login-form__icon {
 
   display: inline-block;
 
   margin-left: 10px;
 
@@ -135,12 +151,15 @@ a {
 
   background-size: 100% 100%;
 
   background-repeat: no-repeat;
 
 }
 
+
 
 .c-login-form__icon.user {
 
   background-image: url("../img/icon_user.png");
 
 }
 
+
 
 .c-login-form__icon.lock {
 
   background-image: url("../img/icon_lock.png");
 
 }
 
+
 
 .c-login-form__submit {
 
   display: inline-flex;
 
   justify-content: center;
 
@@ -155,6 +174,7 @@ a {
 
   border-radius: 8px;
 
   cursor: pointer;
 
 }
 
+
 
 .c-login-form__submit[disabled] {
 
   background-color: #C4C4C4;
 
 }

+ 0 - 185
keycloak-theme/login/resources/css/login.scss
View File 

@@ -1,185 +0,0 @@
 
-$blue: #1C5CB0;
 
-$gray: #C4C4C4;
 
-
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #F4F7FB;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  min-height: 100%;
 
-  width: 100%;
 
-
 
-  &__img {
 
-    flex: 1 1 400px;
 
-    display: inline-block;
 
-    background: url('../img/illustration.png') 50% 50% / 757px 613px no-repeat;
 
-  }
 
-
 
-  &__main {
 
-    flex: 1 0 auto;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 900px) {
 
-  .c-login__img {
 
-    display: none;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 40px 0 80px;
 
-  background-color: #FFFFFF;
 
-  overflow: auto;
 
-
 
-  &__header {
 
-    display: inline-flex;
 
-    align-items: center;
 
-  }
 
-
 
-  &__logo {
 
-    display: inline-block;
 
-    width: 142px;
 
-    height: 36px;
 
-    background: url('../img/logo.png') 0 0 / 100% 100% no-repeat;
 
-  }
 
-
 
-  &__name {
 
-    padding-left: 10px;
 
-    color: $blue;
 
-    font-size: 28px;
 
-    font-weight: bold;
 
-    line-height: 1;
 
-  }
 
-
 
-  &__tip {
 
-    padding: 20px;
 
-    height: 100px;
 
-
 
-    .success {
 
-      color: #67C23A;
 
-    }
 
-
 
-    .warning {
 
-      color: #E6A23C;
 
-    }
 
-
 
-    .error {
 
-      color: #F56C6C;
 
-    }
 
-
 
-    .info {
 
-      color: #409EFF;
 
-    }
 
-  }
 
-
 
-  &__wrapper {
 
-    display: inline-flex;
 
-    flex-direction: column;
 
-    color: $gray;
 
-  }
 
-
 
-  &__error {
 
-    height: 30px;
 
-    color: #F56C6C;
 
-    font-size: 12px;
 
-    line-height: 24px;
 
-    white-space: nowrap;
 
-  }
 
-
 
-  &__label {
 
-    font-size: 24px;
 
-    line-height: 1;
 
-  }
 
-
 
-  &__section {
 
-    display: inline-flex;
 
-    align-items: center;
 
-    padding: 8px 0 2px;
 
-    border-bottom: 1px solid currentColor;
 
-  }
 
-
 
-  &__input {
 
-    width: 320px;
 
-    height: 30px;
 
-    font-size: 18px;
 
-    line-height: 30px;
 
-    border: none;
 
-    outline: none;
 
-
 
-    &.password {
 
-      -webkit-text-security: disc;
 
-    }
 
-  }
 
-
 
-  &__icon {
 
-    display: inline-block;
 
-    margin-left: 10px;
 
-    width: 30px;
 
-    height: 30px;
 
-    background-position: 0 0;
 
-    background-size: 100% 100%;
 
-    background-repeat: no-repeat;
 
-
 
-    &.user {
 
-      background-image: url('../img/icon_user.png')
 
-    }
 
-
 
-    &.lock {
 
-      background-image: url('../img/icon_lock.png')
 
-    }
 
-  }
 
-
 
-  &__submit {
 
-    display: inline-flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    width: 360px;
 
-    height: 40px;
 
-    margin-top: 50px;
 
-    color: #ffffff;
 
-    font-size: 18px;
 
-    border: none;
 
-    background-color: $blue;
 
-    border-radius: 8px;
 
-    cursor: pointer;
 
-
 
-    &[disabled] {
 
-      background-color: $gray;
 
-    }
 
-  }
 
-}

+ 16 - 2
keycloak-theme/login/resources/css/password.css
View File 

@@ -39,10 +39,9 @@ a {
 
   min-height: 100%;
 
   width: 100%;
 
 }
 
+
 
 .c-login__main {
 
   flex: 1 0 auto;
 
-  max-height: 100%;
 
-  overflow: auto;
 
 }
 
 
 .c-login-form {
 
@@ -53,37 +52,46 @@ a {
 
   padding: 0 0 40px;
 
   overflow: auto;
 
 }
 
+
 
 .c-login-form__header {
 
   color: #1C5CB0;
 
   font-size: 28px;
 
   font-weight: bold;
 
   text-align: center;
 
 }
 
+
 
 .c-login-form__tip {
 
   padding: 20px;
 
   height: 60px;
 
 }
 
+
 
 .c-login-form__tip .success {
 
   color: #67C23A;
 
 }
 
+
 
 .c-login-form__tip .warning {
 
   color: #E6A23C;
 
 }
 
+
 
 .c-login-form__tip .error {
 
   color: #F56C6C;
 
 }
 
+
 
 .c-login-form__tip .info {
 
   color: #409EFF;
 
 }
 
+
 
 .c-login-form__section {
 
   display: flex;
 
   flex-direction: column;
 
   align-items: center;
 
 }
 
+
 
 .c-login-form__wrapper {
 
   display: flex;
 
   align-items: center;
 
 }
 
+
 
 .c-login-form__label {
 
   width: 150px;
 
   margin-right: 20px;
 
@@ -91,11 +99,13 @@ a {
 
   font-size: 16px;
 
   text-align: right;
 
 }
 
+
 
 .c-login-form__label::before {
 
   content: "*";
 
   color: #FF0000;
 
   font-size: 14px;
 
 }
 
+
 
 .c-login-form__input {
 
   padding: 0 10px;
 
   width: 320px;
 
@@ -105,9 +115,11 @@ a {
 
   border: 1px solid #C4C4C4;
 
   outline: none;
 
 }
 
+
 
 .c-login-form__input.password {
 
   -webkit-text-security: disc;
 
 }
 
+
 
 .c-login-form__error {
 
   display: inline-block;
 
   width: 320px;
 
@@ -118,6 +130,7 @@ a {
 
   line-height: 24px;
 
   white-space: nowrap;
 
 }
 
+
 
 .c-login-form__submit {
 
   display: inline-flex;
 
   justify-content: center;
 
@@ -132,6 +145,7 @@ a {
 
   border-radius: 8px;
 
   cursor: pointer;
 
 }
 
+
 
 .c-login-form__submit[disabled] {
 
   background-color: #C4C4C4;
 
 }

+ 0 - 158
keycloak-theme/login/resources/css/password.scss
View File 

@@ -1,158 +0,0 @@
 
-$blue: #1C5CB0;
 
-$gray: #C4C4C4;
 
-$black: #333333;
 
-
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #FFFFFF;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  min-height: 100%;
 
-  width: 100%;
 
-
 
-  &__main {
 
-    flex: 1 0 auto;
 
-    max-height: 100%;
 
-    overflow: auto;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 0 0 40px;
 
-  overflow: auto;
 
-
 
-  &__header {
 
-    color: $blue;
 
-    font-size: 28px;
 
-    font-weight: bold;
 
-    text-align: center;
 
-  }
 
-
 
-  &__tip {
 
-    padding: 20px;
 
-    height: 60px;
 
-
 
-    .success {
 
-      color: #67C23A;
 
-    }
 
-
 
-    .warning {
 
-      color: #E6A23C;
 
-    }
 
-
 
-    .error {
 
-      color: #F56C6C;
 
-    }
 
-
 
-    .info {
 
-      color: #409EFF;
 
-    }
 
-  }
 
-
 
-  &__section {
 
-    display: flex;
 
-    flex-direction: column;
 
-    align-items: center;
 
-  }
 
-
 
-  &__wrapper {
 
-    display: flex;
 
-    align-items: center;
 
-  }
 
-
 
-  &__label {
 
-    width: 150px;
 
-    margin-right: 20px;
 
-    color: $black;
 
-    font-size: 16px;
 
-    text-align: right;
 
-
 
-    &::before {
 
-      content: '*';
 
-      color: #FF0000;
 
-      font-size: 14px;
 
-    }
 
-  }
 
-
 
-  &__input {
 
-    padding: 0 10px;
 
-    width: 320px;
 
-    height: 30px;
 
-    font-size: 14px;
 
-    line-height: 30px;
 
-    border: 1px solid $gray;
 
-    outline: none;
 
-
 
-    &.password {
 
-      -webkit-text-security: disc;
 
-    }
 
-  }
 
-
 
-  &__error {
 
-    display: inline-block;
 
-    width: 320px;
 
-    height: 30px;
 
-    margin-left: 170px;
 
-    color: #F56C6C;
 
-    font-size: 12px;
 
-    line-height: 24px;
 
-    white-space: nowrap;
 
-  }
 
-
 
-
 
-  &__submit {
 
-    display: inline-flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    height: 40px;
 
-    padding: 0 40px;
 
-    margin-top: 60px;
 
-    color: #ffffff;
 
-    font-size: 18px;
 
-    border: none;
 
-    background-color: $blue;
 
-    border-radius: 8px;
 
-    cursor: pointer;
 
-
 
-    &[disabled] {
 
-      background-color: $gray;
 
-    }
 
-  }
 
-}

+ 23 - 8
keycloak-theme/login/resources/css/totp.css
View File 

@@ -37,13 +37,16 @@ a {
 
   min-height: 100%;
 
   width: 100%;
 
 }
 
+
 
 .c-login__img {
 
-  flex: 1 1 0;
 
+  flex: 1 0 400px;
 
   display: inline-block;
 
-  background: url("../img/illustration.png") 50% 50%/757px 613px no-repeat;
 
+  max-width: 800px;
 
+  background: url("../img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
 }
 
+
 
 .c-login__main {
 
-  flex: 1 1 0;
 
+  flex: 1 0 auto;
 
 }
 
 
 @media screen and (max-width: 900px) {
 
@@ -51,6 +54,7 @@ a {
 
     display: none;
 
   }
 
 }
 
+
 
 .c-login-form {
 
   display: inline-flex;
 
   flex-direction: column;
 
@@ -60,54 +64,62 @@ a {
 
   background-color: #FFFFFF;
 
   overflow: auto;
 
 }
 
+
 
 .c-login-form__header {
 
   display: inline-flex;
 
   align-items: center;
 
 }
 
+
 
 .c-login-form__logo {
 
-  display: inline-block;
 
-  width: 142px;
 
-  height: 36px;
 
-  background: url("../img/logo.png") 0 0/100% 100% no-repeat;
 
+  flex: none;
 
 }
 
+
 
 .c-login-form__name {
 
-  padding-left: 10px;
 
+  margin-left: 16px;
 
   color: #1C5CB0;
 
   font-size: 28px;
 
   font-weight: bold;
 
   line-height: 1;
 
 }
 
+
 
 .c-login-form__title {
 
   padding: 60px 0 40px;
 
   color: #1C5CB0;
 
   font-size: 18px;
 
   font-weight: bold;
 
 }
 
+
 
 .c-login-form__info {
 
   width: 400px;
 
   color: #333333;
 
   font-size: 16px;
 
   line-height: 20px;
 
 }
 
+
 
 .c-login-form__info p {
 
   line-height: 24px;
 
 }
 
+
 
 .c-login-form__qr {
 
   max-width: 150px;
 
   max-height: 150px;
 
 }
 
+
 
 .c-login-form__retry {
 
   color: #1C5CB0;
 
   font-size: 12px;
 
 }
 
+
 
 .c-login-form__required {
 
   color: #EF1D1D;
 
 }
 
+
 
 .c-login-form__required ::before {
 
   content: "*";
 
   color: #FF0000;
 
   font-size: 14px;
 
 }
 
+
 
 .c-login-form__input {
 
   padding: 0 10px;
 
   margin-top: 6px;
 
@@ -118,6 +130,7 @@ a {
 
   border: 1px solid #C4C4C4;
 
   outline: none;
 
 }
 
+
 
 .c-login-form__error {
 
   height: 30px;
 
   color: #F56C6C;
 
@@ -125,6 +138,7 @@ a {
 
   line-height: 24px;
 
   white-space: nowrap;
 
 }
 
+
 
 .c-login-form__submit {
 
   display: inline-flex;
 
   justify-content: center;
 
@@ -138,6 +152,7 @@ a {
 
   border-radius: 8px;
 
   cursor: pointer;
 
 }
 
+
 
 .c-login-form__submit[disabled] {
 
   background-color: #C4C4C4;
 
 }

+ 0 - 164
keycloak-theme/login/resources/css/totp.scss
View File 

@@ -1,164 +0,0 @@
 
-$blue: #1C5CB0;
 
-$gray: #C4C4C4;
 
-$black: #333333;
 
-
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #F4F7FB;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  min-height: 100%;
 
-  width: 100%;
 
-
 
-  &__img {
 
-    flex: 1 1 0;
 
-    display: inline-block;
 
-    background: url('../img/illustration.png') 50% 50% / 757px 613px no-repeat;
 
-  }
 
-
 
-  &__main {
 
-    flex: 1 1 0;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 900px) {
 
-  .c-login__img {
 
-    display: none;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 40px 0 80px;
 
-  background-color: #FFFFFF;
 
-  overflow: auto;
 
-
 
-  &__header {
 
-    display: inline-flex;
 
-    align-items: center;
 
-  }
 
-
 
-  &__logo {
 
-    display: inline-block;
 
-    width: 142px;
 
-    height: 36px;
 
-    background: url('../img/logo.png') 0 0 / 100% 100% no-repeat;
 
-  }
 
-
 
-  &__name {
 
-    padding-left: 10px;
 
-    color: $blue;
 
-    font-size: 28px;
 
-    font-weight: bold;
 
-    line-height: 1;
 
-  }
 
-
 
-  &__title {
 
-    padding: 60px 0 40px;
 
-    color: $blue;
 
-    font-size: 18px;
 
-    font-weight: bold;
 
-  }
 
-
 
-  &__info {
 
-    width: 400px;
 
-    color: $black;
 
-    font-size: 16px;
 
-    line-height: 20px;
 
-
 
-    p {
 
-      line-height: 24px;
 
-    }
 
-  }
 
-
 
-  &__qr {
 
-    max-width: 150px;
 
-    max-height: 150px;
 
-  }
 
-
 
-  &__retry {
 
-    color: $blue;
 
-    font-size: 12px;
 
-  }
 
-
 
-  &__required {
 
-    color: #EF1D1D;
 
-
 
-    ::before {
 
-      content: '*';
 
-      color: #FF0000;
 
-      font-size: 14px;
 
-    }
 
-  }
 
-
 
-  &__input {
 
-    padding: 0 10px;
 
-    margin-top: 6px;
 
-    width: 240px;
 
-    height: 30px;
 
-    font-size: 14px;
 
-    line-height: 30px;
 
-    border: 1px solid $gray;
 
-    outline: none;
 
-  }
 
-
 
-  &__error {
 
-    height: 30px;
 
-    color: #F56C6C;
 
-    font-size: 12px;
 
-    line-height: 24px;
 
-    white-space: nowrap;
 
-  }
 
-
 
-  &__submit {
 
-    display: inline-flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    height: 40px;
 
-    padding: 0 40px;
 
-    color: #ffffff;
 
-    font-size: 18px;
 
-    border: none;
 
-    background-color: $blue;
 
-    border-radius: 8px;
 
-    cursor: pointer;
 
-
 
-    &[disabled] {
 
-      background-color: $gray;
 
-    }
 
-  }
 
-}

BIN
keycloak-theme/login/resources/img/logo/fujian.png
View File


+ 0 - 0
keycloak-theme/login/resources/img/logo.png → keycloak-theme/login/resources/img/logo/inspur.png
View File


BIN
platform/logo/fujian.png
View File


BIN
platform/logo/inspur.png
View File


+ 4 - 10
src/layout/components/Sidebar/index.vue
View File 

@@ -2,7 +2,9 @@
 
   <div class="c-sidebar">
 
     <div class="c-sidebar__header">
 
       <router-link
 
-        class="c-sidebar__logo"
 
+        tag="img"
 
+        class="u-pointer"
 
+        src="/logo.png"
 
         to="/"
 
       />
 
     </div>
 
@@ -94,18 +96,10 @@ export default {
 
 
   &__header {
 
     flex: none;
 
-    padding: 32px 0 56px;
 
-    padding-bottom: 24px;
 
+    padding: 32px 0 24px;
 
     text-align: center;
 
   }
 
 
-  &__logo {
 
-    display: inline-block;
 
-    width: 142px;
 
-    height: 36px;
 
-    background: url("~@/assets/logo.png") 0 0 / 100% 100% no-repeat;
 
-  }
 
-
 
   &__menu {
 
     flex: 1 1 auto;
 
     min-height: 0.5;

+ 8 - 7
src/views/device/detail/dashboard/Header.vue
View File 

@@ -1,7 +1,10 @@
 
 <template>
 
   <div class="c-device-dashboard-header">
 
-    <div class="c-device-dashboard-header__logo has-bg" />
 
-    <div class="c-device-dashboard-header__name u-bold">浪 潮 屏 媒 安 播 云 平 台</div>
 
+    <img
 
+      class="c-device-dashboard-header__logo"
 
+      src="/logo.png"
 
+    >
 
+    <div class="u-bold">{{ title }}</div>
 
     <div class="l-flex c-device-dashboard-header__wrapper">
 
       <div class="c-device-dashboard-header__time">{{ now }}</div>
 
       <div
 
@@ -20,6 +23,7 @@ import { parseTime } from '@/utils'
 
 export default {
 
   data () {
 
     return {
 
+      title: process.env.VUE_APP_NAME,
 
       now: ''
 
     }
 
   },
 
@@ -57,9 +61,7 @@ export default {
 
     position: absolute;
 
     top: 8px;
 
     left: 16px;
 
-    width: 90px;
 
-    height: 22px;
 
-    background-image: url("~@/assets/logo.png");
 
+    height: 24px;
 
   }
 
 
   &__wrapper {
 
@@ -67,12 +69,11 @@ export default {
 
     top: 8px;
 
     right: 16px;
 
     font-size: 16px;
 
-    line-height: 22px;
 
+    line-height: 24px;
 
   }
 
 
   &__time {
 
     margin-right: 32px;
 
-    line-height: 24px;
 
     white-space: pre;
 
   }

+ 18 - 26
src/views/platform/error-page/index.vue
View File 

@@ -1,12 +1,15 @@
 
 <template>
 
-  <div class="c-error-page">
 
+  <div class="l-flex c-error-page">
 
     <div class="c-error-page__img" />
 
-    <div class="c-error-page__main">
 
-      <div class="c-error-page__header">
 
-        <div class="c-error-page__logo" />
 
-        <div class="c-error-page__name">浪潮屏媒安播云平台</div>
 
+    <div class="l-flex__auto l-flex--col jcenter center c-error-page__main">
 
+      <div class="l-flex--row c-sibling-item--v">
 
+        <img
 
+          class="l-flex__none c-sibling-item"
 
+          src="/logo.png"
 
+        >
 
+        <div class="c-sibling-item far c-error-page__name">{{ title }}</div>
 
       </div>
 
-      <div class="c-error-page__title">鉴权失败，请稍后重试</div>
 
+      <div class="c-sibling-item--v c-error-page__title">鉴权失败，请稍后重试</div>
 
       <div
 
         class="c-error-page__retry u-pointer"
 
         @click="retry"
 
@@ -22,6 +25,11 @@ import { mapGetters } from 'vuex'
 
 
 export default {
 
   name: 'ErrorPage',
 
+  data () {
 
+    return {
 
+      title: process.env.VUE_APP_NAME
 
+    }
 
+  },
 
   computed: {
 
     ...mapGetters(['token', 'tenant']),
 
     message () {
 
@@ -44,13 +52,13 @@ export default {
 
 
 <style lang="scss" scoped>
 
 .c-error-page {
 
-  display: flex;
 
-  min-height: 100%;
 
   width: 100%;
 
+  height: 100%;
 
 
   &__img {
 
-    flex: 1 1 400px;
 
+    flex: 1 0 400px;
 
     display: inline-block;
 
+    max-width: 800px;
 
     background: url("~@/assets/illustration.png") 50% 50% / 757px 613px
 
       no-repeat;
 
   }
 
@@ -62,31 +70,15 @@ export default {
 
   }
 
 
   &__main {
 
-    flex: 1 0 auto;
 
-    display: inline-flex;
 
-    flex-direction: column;
 
-    justify-content: center;
 
-    align-items: center;
 
-    padding: 40px 0 180px;
 
+    padding: 40px $spacing 180px;
 
     background-color: #fff;
 
-    overflow: auto;
 
   }
 
 
   &__header {
 
-    display: inline-flex;
 
-    align-items: center;
 
     margin-bottom: 60px;
 
   }
 
 
-  &__logo {
 
-    display: inline-block;
 
-    width: 142px;
 
-    height: 36px;
 
-    background: url("~@/assets/logo.png") 0 0 / 100% 100% no-repeat;
 
-  }
 
-
 
   &__name {
 
-    padding-left: 10px;
 
     color: $blue;
 
     font-size: 28px;
 
     font-weight: bold;

+ 0 - 216
src/views/platform/login/index.vue
View File 

@@ -1,216 +0,0 @@
 
-<template>
 
-  <div class="c-login">
 
-    <div class="c-login__img" />
 
-    <div class="c-login__main c-login-form">
 
-      <div class="c-login-form__header">
 
-        <div class="c-login-form__logo" />
 
-        <div class="c-login-form__name">浪潮屏媒安播云平台</div>
 
-      </div>
 
-      <div class="c-login-form__wrapper">
 
-        <label class="c-login-for__label">用户名</label>
 
-        <div class="c-login-form__section">
 
-          <input
 
-            v-model="username"
 
-            type="text"
 
-            class="c-login-form__input"
 
-            autocomplete="off"
 
-          >
 
-          <i class="c-login-form__icon el-icon-user" />
 
-        </div>
 
-      </div>
 
-      <div class="c-login-form__wrapper">
 
-        <label class="c-login-for__label">密码</label>
 
-        <div class="c-login-form__section">
 
-          <input
 
-            type="password"
 
-            hidden
 
-          >
 
-          <input
 
-            v-model="password"
 
-            type="password"
 
-            class="c-login-form__input"
 
-            autocomplete="new-password"
 
-          >
 
-          <i class="c-login-form__icon el-icon-lock" />
 
-        </div>
 
-      </div>
 
-      <button
 
-        class="c-login-form__submit u-pointer"
 
-        @click="login"
 
-      >
 
-        <i
 
-          v-if="loading"
 
-          class="el-icon-loading"
 
-        />
 
-        登 录
 
-      </button>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-export default {
 
-  name: 'Login',
 
-  data () {
 
-    return {
 
-      username: 'admin',
 
-      password: '111111',
 
-      loading: false,
 
-      redirect: null,
 
-      otherQuery: {}
 
-    }
 
-  },
 
-  watch: {
 
-    $route: {
 
-      handler (route) {
 
-        const query = route.query
 
-        if (query) {
 
-          this.redirect = query.redirect
 
-          this.otherQuery = this.getOtherQuery(query)
 
-        }
 
-      },
 
-      immediate: true
 
-    }
 
-  },
 
-  methods: {
 
-    login () {
 
-      if (this.loading) {
 
-        return
 
-      }
 
-      if (!this.username) {
 
-        this.$message({
 
-          type: 'warning',
 
-          message: '用户名不能为空'
 
-        })
 
-        return
 
-      }
 
-      if (!this.password) {
 
-        this.$message({
 
-          type: 'warning',
 
-          message: '密码不能为空'
 
-        })
 
-        return
 
-      }
 
-      this.loading = true
 
-
 
-      this.$store.commit('user/SET_TOKEN', 'test')
 
-      this.$store.commit('user/SET_NAME', 'Super Admin')
 
-      this.$store.commit('user/SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
 
-      this.$store.commit('user/SET_ROLES', ['admin'])
 
-
 
-      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
 
-    },
 
-    getOtherQuery (query) {
 
-      return Object.keys(query).reduce((acc, cur) => {
 
-        if (cur !== 'redirect') {
 
-          acc[cur] = query[cur]
 
-        }
 
-        return acc
 
-      }, {})
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-.c-login {
 
-  display: flex;
 
-  min-height: 100%;
 
-  width: 100%;
 
-
 
-  &__img {
 
-    flex: 1 1 400px;
 
-    display: inline-block;
 
-    background: url("~@/assets/illustration.png") 50% 50% / 757px 613px
 
-      no-repeat;
 
-  }
 
-
 
-  &__main {
 
-    flex: 1 0 auto;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 900px) {
 
-  .c-login__img {
 
-    display: none;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 40px 0 80px;
 
-  background-color: #fff;
 
-  overflow: auto;
 
-
 
-  &__header {
 
-    display: inline-flex;
 
-    align-items: center;
 
-    margin-bottom: 100px;
 
-  }
 
-
 
-  &__logo {
 
-    display: inline-block;
 
-    width: 142px;
 
-    height: 36px;
 
-    background: url("~@/assets/logo.png") 0 0 / 100% 100% no-repeat;
 
-  }
 
-
 
-  &__name {
 
-    padding-left: 10px;
 
-    color: $blue;
 
-    font-size: 28px;
 
-    font-weight: bold;
 
-    line-height: 1;
 
-  }
 
-
 
-  &__wrapper {
 
-    display: inline-flex;
 
-    flex-direction: column;
 
-    color: $gray;
 
-    border-bottom: 1px solid currentColor;
 
-
 
-    & + & {
 
-      margin-top: 30px;
 
-    }
 
-  }
 
-
 
-  &__label {
 
-    font-size: 24px;
 
-    line-height: 1;
 
-  }
 
-
 
-  &__section {
 
-    display: inline-flex;
 
-    align-items: center;
 
-    padding: 8px 0 2px;
 
-  }
 
-
 
-  &__input {
 
-    width: 320px;
 
-    height: 30px;
 
-    font-size: 18px;
 
-    line-height: 30px;
 
-  }
 
-
 
-  &__icon {
 
-    padding-left: 10px;
 
-    font-size: 24px;
 
-  }
 
-
 
-  &__submit {
 
-    display: inline-flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    width: 360px;
 
-    height: 40px;
 
-    margin-top: 80px;
 
-    color: #fff;
 
-    font-size: 18px;
 
-    background-color: $blue;
 
-    border-radius: $radius;
 
-  }
 
-}
 
-</style>

+ 19 - 8
vue.config.js
View File 

@@ -10,19 +10,26 @@ const {
 
 const port = process.env.port || 9527
 
 
 const copyFiles = [
 
-  { file: 'mediainfo.min.js', from: 'mediainfo.js/dist', to: '.' },
 
-  { file: 'MediaInfoModule.wasm', from: 'mediainfo.js/dist', to: '.' },
 
-  { file: 'spark-md5.min.js', from: 'spark-md5', to: '.' }
 
+  { file: 'mediainfo.min.js', from: resolveNodeDir('mediainfo.js/dist'), to: '.' },
 
+  { file: 'MediaInfoModule.wasm', from: resolveNodeDir('mediainfo.js/dist'), to: '.' },
 
+  { file: 'spark-md5.min.js', from: resolveNodeDir('spark-md5'), to: '.' },
 
+  { from: resolve(`platform/logo/${process.env.LOGO}`), to: './logo.png' }
 
 ]
 
 
 function resolve (...dir) {
 
-  return path.join(__dirname, ...dir)
 
+  return path.resolve(__dirname, ...dir)
 
+}
 
+
 
+function resolveNodeDir (...dir) {
 
+  return resolve('node_modules', ...dir)
 
 }
 
 
 function getCopyFiles () {
 
-  return copyFiles.filter(({ file }) => !fs.existsSync(resolve('public', file))).map(({ file, from, to }) => {
 
-    return { from: resolve('node_modules', from, file), to }
 
-  })
 
+  return copyFiles
 
+    .filter(({ file }) => !file || !fs.existsSync(resolve('public', file)))
 
+    .map(({ file, from, to }) => {
 
+      return { from: file ? path.join(from, file) : from, to }
 
+    })
 
 }
 
 
 module.exports = {
 
@@ -46,7 +53,7 @@ module.exports = {
 
   configureWebpack: {
 
     // provide the app's title in webpack's name field, so that
 
     // it can be accessed in index.html to inject the correct title.
 
-    name: '浪潮屏媒安播云平台',
 
+    name: process.env.VUE_APP_NAME,
 
     resolve: {
 
       alias: {
 
         '@': resolve('src')
 
@@ -114,6 +121,10 @@ module.exports = {
 
             inline: /runtime\..*\.js$/
 
           }])
 
           .end()
 
+        // config
 
+        //   .plugin('BundleAnalyzerPlugin')
 
+        //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 
+
 
         config
 
           .optimization.splitChunks({
 
             chunks: 'all',