修改saml登录界面。

src/client/SamlLogin.vue

@@ -1,27 +1,32 @@
 <template>
-  <div id="loginApp">
-    <div id="login_box">
-      <h2>单点登录</h2>
-      <div class="selectItem" style="margin-top: 30px">
-        <label for="">选择登录端：</label>
-        <select v-model="internet" name="language-choice" class="form-control">
-          <option value="pc">电脑端</option>
-          <option value="mobile">移动端</option>
-          <option value="propass">Propass</option>
-        </select>
+  <div class="login">
+    <div class="login_wrapper">
+      <div class="login_form">
+        <h3 style="text-align: center;margin-top: 30px">单点登录</h3>
+        
+        <div class="separator" />
+        <div class="selectItem">
+          <label for="">客户端</label>
+          <select v-model="internet" name="language-choice" class="form-control" style="width:100%">
+            <option value="pc">电脑端</option>
+            <option value="mobile">移动端</option>
+            <option value="propass">Propass</option>
+          </select>
+        </div>
+        <div class="selectItem">
+          <label>语言</label>
+          <select
+            v-model="languageSelected"
+            name="language-choice"
+            class="form-control"
+            style="width:100%"
+          >
+            <option value="zh-CN">中文</option>
+            <option value="en-US">English</option>
+          </select>
+        </div>
+        <button class="btn btn-default" style="width: 100%;" @click="azureSamlLogin">确认</button>
       </div>
-      <div class="selectItem">
-        <label>选择登录语言：</label>
-        <select
-          v-model="languageSelected"
-          name="language-choice"
-          class="form-control"
-        >
-          <option value="zh-CN">中文</option>
-          <option value="en-US">English</option>
-        </select>
-      </div>
-      <button class="confirmBtn" @click="azureSamlLogin">确认</button><br />
     </div>
   </div>
 </template>
@@ -160,9 +165,22 @@ export default {
 </script>
 
 <style scoped>
-body {
-  background: #f7f7f7;
+
+
+.login_wrapper {
+  margin: 0px auto;
+  padding-top: 5%;
+  max-width: 350px;
+  position: relative;
 }
+
+.login_form {
+  top: 0px;
+  width: 100%;
+}
+
+
+
 #login_box {
   width: 40%;
   height: 400px;
@@ -184,9 +202,9 @@ h2 {
 }
 .selectItem > label {
   width: 100px;
-  text-align: center;
-  font-size: 12px !important;
-  color: rgba(0, 0, 0, 0.4);
+  text-align: left;
+  font-size: 15px !important;
+  color: rgba(0, 0, 0, 0.6);
 }
 .confirmBtn {
   margin-top: 50px;
@@ -222,4 +240,11 @@ h2 {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+
+.separator {
+  border-top: 1px solid #d8d8d8;
+  margin-top: 10px;
+  padding-top: 10px;
+}
 </style>

src/identity/CreateIdentity.vue

@@ -143,66 +143,7 @@
         </a-form>
       </div>
       <div v-else>
-        <a-form
-          name="basic"
-          :label-col="{ style: { width: '186px' } }"
-          :wrapper-col="wrapperCol"
-          :model="identitySetting"
-          autocomplete="off"
-        >
-          <a-form-item label="uid(用户ID)" name="uid">
-            <a-input
-              v-model:value="identitySetting.uid"
-              placeholder="选填，IDP 中用户ID"
-            />
-          </a-form-item>
-          <a-form-item label="clientId(公司ID)" name="clientId">
-            <a-input-number
-              v-model:value="identitySetting.clientId"
-              :controls="false"
-              style="width: 100%"
-              placeholder="选填，IDP 中公司ID"
-            />
-          </a-form-item>
-          <a-form-item label="userName(用户姓名)" name="userName">
-            <a-input
-              v-model:value="identitySetting.userName"
-              placeholder="选填，IDP 中用户姓名"
-            />
-          </a-form-item>
-          <a-form-item label="userNo(员工编号)" name="userNo">
-            <a-input
-              v-model:value="identitySetting.userNo"
-              placeholder="选填，IDP 中员工编号"
-            />
-          </a-form-item>
-          <a-form-item label="nickName(员工昵称)" name="nickName">
-            <a-input
-              v-model:value="identitySetting.nickName"
-              placeholder="选填，IDP 中员工昵称"
-            />
-          </a-form-item>
-          <a-form-item label="email(员工邮箱)" name="email">
-            <a-input
-              v-model:value="identitySetting.email"
-              placeholder="选填，IDP 中员工邮箱"
-            />
-          </a-form-item>
-          <a-form-item label="phoneNumber(员工电话)" name="phoneNumber">
-            <a-input
-              v-model:value="identitySetting.phoneNumber"
-              placeholder="选填，IDP 中员工电话"
-            />
-          </a-form-item>
-          <a-form-item label="roleTemplateNo(角色模板)" name="roleTemplateNo">
-            <a-input
-              v-model:value="identitySetting.roleTemplateNo"
-              placeholder="选填，如果有多个角色模板编号，使用逗号分隔"
-            />
-          </a-form-item>
-        </a-form>
         <div class="proDog-setting">
-          <h3>Prodog 配置</h3>
           <a-form
             name="basic"
             :label-col="{ style: { width: '186px' } }"
@@ -211,6 +152,74 @@
             :model="identitySetting"
             autocomplete="off"
           >
+            <h4>字段配置</h4>
+            <a-divider />
+            <a-form-item
+              label="uid(用户ID)" name="uid"
+            >
+              <a-input
+                v-model:value="identitySetting.uid"
+                placeholder="必填，IDP 中用户ID"
+              />
+            </a-form-item>
+            <a-form-item
+              label="userName(用户姓名)" name="userName"
+            >
+              <a-input
+                v-model:value="identitySetting.userName"
+                placeholder="必填，IDP 中用户姓名"
+              />
+            </a-form-item>
+            <a-form-item
+              label="userNo(员工编号)" name="userNo"
+            >
+              <a-input
+                v-model:value="identitySetting.userNo"
+                placeholder="必填，IDP 中员工编号"
+              />
+            </a-form-item>
+            <a-form-item label="nickName(员工昵称)" name="nickName">
+              <a-input
+                v-model:value="identitySetting.nickName"
+                placeholder="选填，IDP 中员工昵称"
+              />
+            </a-form-item>
+            <a-form-item label="email(员工邮箱)" name="email">
+              <a-input
+                v-model:value="identitySetting.email"
+                placeholder="选填，IDP 中员工邮箱"
+              />
+            </a-form-item>
+            <a-form-item label="phoneNumber(员工电话)" name="phoneNumber">
+              <a-input
+                v-model:value="identitySetting.phoneNumber"
+                placeholder="选填，IDP 中员工电话"
+              />
+            </a-form-item>
+            <h4>权限配置</h4>
+            <a-divider />
+            <a-form-item
+              label="clientId(公司ID)" name="clientId"
+            >
+              <a-input-number
+                v-model:value="identitySetting.clientId"
+                :controls="false"
+                style="width: 100%"
+                placeholder="必填，IDP 中公司ID"
+              />
+            </a-form-item>
+            <a-form-item
+              label="roleTemplateNo(角色模板)" name="roleTemplateNo"
+            >
+              <a-input
+                v-model:value="identitySetting.roleTemplateNo"
+                placeholder="必填，如果有多个角色模板编号，使用逗号分隔"
+              />
+            </a-form-item>
+
+
+            <h4>断言解析配置</h4>
+            <a-divider />
             <a-form-item has-feedback label="Prodog 实体ID" name="spEntityID">
               <a-input
                 v-model:value="identitySetting.spEntityID"
@@ -287,7 +296,16 @@
         v-if="current == steps.length - 1"
         type="primary"
         :disabled="
-          !identitySetting.spEntityID || service || redirect ? true : false
+          !identitySetting.spEntityID ||
+            !identitySetting.uid ||
+            !identitySetting.userName ||
+            !identitySetting.userNo ||
+            !identitySetting.clientId ||
+            !identitySetting.roleTemplateNo ||
+            !identitySetting.spEntityID ||
+            !identitySetting.spAssertionConsumeService ||
+            !identitySetting.spAssertionConsumeSuccessRedirectService ||
+            service || redirect ? true : false
         "
         style="margin-left: 8px"
         @click="createIdentity"
@@ -333,13 +351,14 @@ const identitySetting = ref({
   ssoUrl: '',
   certificate: '',
   loginOutUrl: '',
-  uid: '',
-  userName: '',
-  userNo: '',
-  nickName: '',
-  email: '',
-  phoneNumber: '',
-  roleTemplateNo: '',
+  uid: 'id',
+  userName: 'firstName',
+  userNo: 'id',
+  nickName: 'firstName',
+  email: 'email',
+  phoneNumber: 'phoneNumber',
+  roleTemplateNo: '003',
+  clientId: '',
   spEntityID: 'com.leanwo.prodog.sp',
   spAssertionConsumeService: 'http://xxxx:xx/api/saml/sso/${id}',
   spAssertionConsumeSuccessRedirectService:
@@ -387,6 +406,36 @@ let redirectService = async (_rule, value) => {
 };
 
 const rules = {
+  uid: [
+    {
+      required: true,
+      message: '请输入"用户ID"对应的字段名称',
+    },
+  ],
+  userName: [
+    {
+      required: true,
+      message: '请输入"用户姓名"对应的字段名称',
+    },
+  ],
+  userNo: [
+    {
+      required: true,
+      message: '请输入"员工编号"对应的字段名称',
+    },
+  ],
+  clientId: [
+    {
+      required: true,
+      message: '请输入公司Id',
+    },
+  ],
+  roleTemplateNo: [
+    {
+      required: true,
+      message: '请输入角色模板编号',
+    },
+  ],
   spEntityID: [
     {
       required: true,