fix: 表单交互优化 (#1324)

TencentBlueKing · Oct 26, 2023 · c180f2b · c180f2b
1 parent 7c2df8f
commit c180f2b
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 217 deletions.
diff --git a/src/bk-login/pages/src/components/table-demo.vue b/src/bk-login/pages/src/components/table-demo.vue
diff --git a/src/pages/src/components/phoneInput.vue b/src/pages/src/components/phoneInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input-text">
+  <div :class="['input-text', { 'input-disabled': disabled }]">
     <input
       type="text"
       ref="telRef"
@@ -158,6 +158,16 @@ const handleInput = () => {
 
 <style lang="less">
 @import url("@/css/intlTelInput.less");
+
+.input-disabled .iti--separate-dial-code {
+  .iti__selected-flag {
+    cursor: no-drop;
+  }
+
+  &:hover .select-text {
+    border-color: #979BA5;
+  }
+}
 </style>
 
 <style lang="less" scoped>
@@ -171,21 +181,35 @@ const handleInput = () => {
     font-size: 16px;
     color: #ea3636;
   }
-}
 
-input::placeholder {
-  color: #c4c6cc;
-}
+  input::placeholder {
+    color: #c4c6cc;
+  }
 
-.select-text {
-  width: 100%;
-  height: 32px;
-  line-height: 32px;
-  color: #63656e;
-  border: 1px solid #c4c6cc;
-  border-radius: 2px;
-  outline: none;
-  resize: none;
+  .iti--separate-dial-code {
+    &:hover .select-text {
+      border-color: #979BA5;
+    }
+
+    .select-text {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      color: #63656e;
+      border: 1px solid #c4c6cc;
+      border-radius: 2px;
+      outline: none;
+      resize: none;
+
+      &:hover {
+        border-color: #979BA5;
+      }
+
+      &:focus {
+        border-color: #3a84ff;
+      }
+    }
+  }
 }
 
 .error-text {
@@ -199,4 +223,10 @@ input::placeholder {
 .input-error {
   border: 1px solid #ea3636 !important;
 }
+
+.input-disabled {
+  .select-text {
+    cursor: no-drop;
+  }
+}
 </style>
diff --git a/src/pages/src/components/table-demo.vue b/src/pages/src/components/table-demo.vue
diff --git a/src/pages/src/css/tenantEditStyle.less b/src/pages/src/css/tenantEditStyle.less
@@ -62,27 +62,47 @@
 
                 .bk-input {
                   height: 42px;
-                  border-color: transparent;
+                  border: 1px solid transparent;
+
+                  &:hover {
+                    border-color: #979BA5;
+                  }
                 }
 
-                .bk-input:hover:not(.is-disabled) {
+                .is-focused:not(.is-disabled) {
                   border-color: #3a84ff;
                 }
 
                 .bk-form-error-tips {
                   top: 12px;
                   z-index: 1;
                 }
-
-                .select-text {
-                  height: 42px;
-                  border: none;
-                }
 
                 .iti__country-list {
                   width: 325px;
                   overflow-x: hidden;
                 }
+
+                #phone-id {
+                  .iti--separate-dial-code {
+                    &:hover .select-text {
+                      border-color: #979BA5;
+                    }
+
+                    .select-text {
+                      height: 42px;
+                      border: 1px solid transparent;
+
+                      &:hover {
+                        border-color: #979BA5;
+                      }
+
+                      &:focus {
+                        border-color: #3a84ff;
+                      }
+                    }
+                  }
+                }
               }
             }
 

diff --git a/src/pages/src/views/organization/details/EditDetailsInfo.vue b/src/pages/src/views/organization/details/EditDetailsInfo.vue
@@ -192,6 +192,7 @@ const fieldItemFn = (row: any) => {
         ) : (
           column.field === 'phone'
             ? <PhoneInput
+                id="phone-id"
                 form-data={formData.managers[index]}
                 disabled />
             : <bk-input
@@ -202,6 +203,7 @@ const fieldItemFn = (row: any) => {
       ) : (
         column.field === 'phone'
           ? <PhoneInput
+              id="phone-id"
               form-data={formData.managers[index]}
               telError={formData.managers[index].error}
               disabled={data.id}

diff --git a/src/pages/src/views/tenant/group-details/OperationDetails.vue b/src/pages/src/views/tenant/group-details/OperationDetails.vue
@@ -301,13 +301,15 @@ const fieldItemFn = (row: any) => {
             : (
               column.field === 'phone'
                 ? <PhoneInput
+                    id="phone-id"
                     form-data={formData.managers[index]}
                     disabled={props.type === 'edit'} />
                 : <bk-input v-model={formData.managers[index][column.field]} disabled={column.field !== 'username'} />
             )
           : (
             column.field === 'phone'
               ? <PhoneInput
+                  id="phone-id"
                   form-data={formData.managers[index]}
                   telError={formData.managers[index].error}
                   disabled={props.type === 'edit'}