Explorar o código

feat: support the configuration of logo and application name

Casper Dai %!s(int64=3) %!d(string=hai) anos
pai
achega
81e5be7b86

+ 5 - 1
.env

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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=BIN
keycloak-theme/login/resources/img/logo/fujian.png


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


BIN=BIN
platform/logo/fujian.png


BIN=BIN
platform/logo/inspur.png


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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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',