feat:ui 全面升级 (#444)

cmdb-ui/src/views/setting/auth/index.vue

@@ -17,8 +17,12 @@
             <a-space>
               <a-button :loading="loading" type="primary" @click="handleSave">{{ $t('save') }}</a-button>
               <template v-if="item.value === 'LDAP'">
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">{{ $t('cs.auth.testConnect') }}</a-button>
-                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">{{ $t('cs.auth.testLogin') }}</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">{{
+                  $t('cs.auth.testConnect')
+                }}</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">{{
+                  $t('cs.auth.testLogin')
+                }}</a-button>
               </template>
               <a-button :loading="loading" @click="handleReset">{{ $t('reset') }}</a-button>
             </a-space>
@@ -56,28 +60,28 @@ export default {
   computed: {
     authList() {
       return [
-      {
-        value: 'LDAP',
-        label: 'LDAP',
-      },
-      {
-        value: 'CAS',
-        label: 'CAS',
-      },
-      {
-        value: 'OAUTH2',
-        label: 'OAUTH2',
-      },
-      {
-        value: 'OIDC',
-        label: 'OIDC',
-      },
-      {
-        value: 'AuthCommonConfig',
-        label: this.$t('cs.auth.common'),
-      },
-    ]
-    }
+        {
+          value: 'LDAP',
+          label: 'LDAP',
+        },
+        {
+          value: 'CAS',
+          label: 'CAS',
+        },
+        {
+          value: 'OAUTH2',
+          label: 'OAUTH2',
+        },
+        {
+          value: 'OIDC',
+          label: 'OIDC',
+        },
+        {
+          value: 'AuthCommonConfig',
+          label: this.$t('cs.auth.common'),
+        },
+      ]
+    },
   },
   methods: {
     getAuthDataEnable() {
@@ -129,7 +133,7 @@ export default {
               ...values,
             }
           }
-          testLDAP(type, { data: _data })
+          testLDAP({ data: _data, test_type: type })
             .then((res) => {
               this.$message.success(this.$t('cs.auth.testSuccess'))
             })

cmdb-ui/src/views/user/Login.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="ops-login">
     <div class="ops-login-left">
-      <span>维易科技<br />让运维更简单</span>
+      <span>OneOps统一运维平台</span>
+      <img src="../../assets/login_img.png" />
     </div>
     <div class="ops-login-right">
-      <img src="../../assets/logo_VECMDB.png" />
+      <img src="../../assets/OneOps.png" />
+      <div class="ops-login-right-welcome"><span>欢迎登录</span></div>
       <a-form
         id="formLogin"
         ref="formLogin"
@@ -43,7 +45,7 @@
           <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
         </a-form-item>
 
-        <a-form-item style="margin-top: 24px">
+        <a-form-item style="margin-top:24px">
           <a-button
             size="large"
             type="primary"
@@ -53,13 +55,18 @@
             :disabled="state.loginBtn"
           >登录</a-button
           >
+          <a-checkbox
+            v-if="enable_list && enable_list.length === 1 && enable_list[0].auth_type === 'LDAP'"
+            v-model="auth_with_ldap"
+          >LDAP</a-checkbox
+          >
         </a-form-item>
       </a-form>
       <template v-if="_enable_list && _enable_list.length >= 1">
         <a-divider style="font-size:14px">其他登录方式</a-divider>
         <div style="text-align:center">
           <span v-for="(item, index) in _enable_list" :key="item.auth_type">
-            <ops-icon :type="item.auth_type"/>
+            <ops-icon :type="item.auth_type" />
             <a @click="otherLogin(item.auth_type)">{{ item.auth_type }}</a>
             <a-divider v-if="index < _enable_list.length - 1" type="vertical" />
           </span>
@@ -93,6 +100,7 @@ export default {
         loginType: 0,
         smsSendBtn: false,
       },
+      auth_with_ldap: false,
     }
   },
   computed: {
@@ -104,6 +112,18 @@ export default {
       return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
     },
   },
+  watch: {
+    enable_list: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.length === 1 && newVal[0].auth_type === 'LDAP') {
+          this.auth_with_ldap = true
+        } else {
+          this.auth_with_ldap = false
+        }
+      },
+    },
+  },
   created() {},
   async mounted() {
     await this.GetAuthDataEnable()
@@ -124,10 +144,12 @@ export default {
     handleSubmit(e) {
       e.preventDefault()
       const {
+        enable_list,
         form: { validateFields },
         state,
         customActiveKey,
         Login,
+        auth_with_ldap,
       } = this
 
       state.loginBtn = true
@@ -136,11 +158,15 @@ export default {
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
-          console.log('login form', values)
           const loginParams = { ...values }
           delete loginParams.username
           loginParams.username = values.username
           loginParams.password = appConfig.useEncryption ? md5(values.password) : values.password
+          loginParams.auth_with_ldap =
+            enable_list && enable_list.length === 1 && enable_list[0].auth_type === 'LDAP'
+              ? Number(auth_with_ldap)
+              : undefined
+
           localStorage.setItem('ops_auth_type', '')
           Login({ userInfo: loginParams })
             .then((res) => this.loginSuccess(res))
@@ -184,6 +210,13 @@ export default {
     background: url('../../assets/login_bg.png') no-repeat;
     background-position: center;
     background-size: cover;
+    > img {
+      width: 80%;
+      position: absolute;
+      top: 60%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
     > span {
       color: white;
       position: absolute;
@@ -191,7 +224,6 @@ export default {
       left: 50%;
       transform: translateX(-50%);
       font-size: 1.75vw;
-      text-align: center;
     }
   }
   .ops-login-right {
@@ -202,6 +234,14 @@ export default {
       width: 70%;
       margin-left: 15%;
     }
+    .ops-login-right-welcome {
+      text-align: center;
+      color: rgba(29, 57, 196, 1);
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 1.25vw;
+    }
     .login-button {
       width: 100%;
     }