fix: 体验问题修复

yuri0528 · Dec 21, 2023 · 79accc5 · 79accc5
1 parent 3e4df3b
commit 79accc5
Show file tree

Hide file tree

Showing 19 changed files with 214 additions and 134 deletions.
diff --git a/src/pages/src/css/tenantEditStyle.less b/src/pages/src/css/tenantEditStyle.less
@@ -138,13 +138,9 @@
               &:hover {
                 color: #c4c6cc;
               }
-            }
 
-            .forbid {
-              color: #ea3636;
-
-              &:hover {
-                color: #ea3636;
+              &.forbid {
+                color: #EAEBF0;
               }
             }
           }

diff --git a/src/pages/src/hooks/use-validate.ts b/src/pages/src/hooks/use-validate.ts
@@ -52,13 +52,13 @@ export default () => {
 
   const serverBaseUrl = {
     validator: (value: string) => /^https?:\/\/[a-zA-Z0-9-\\.]+(:\d+)?$/.test(value),
-    message: '请输入正确的地址',
+    message: '请输入服务地址，需以 https/http 开头，不得以 / 结尾',
     trigger: 'blur',
   };
 
   const apiPath = {
     validator: (value: string) => /^\/[\w-]+(\/[\w-]+)*\/?$/.test(value),
-    message: '请输入正确的 API 路径',
+    message: '请输入路径，需以 / 开头',
     trigger: 'blur',
   };
 

diff --git a/src/pages/src/views/auth-source/edit-data/CustomPlugin.vue b/src/pages/src/views/auth-source/edit-data/CustomPlugin.vue
@@ -17,7 +17,7 @@
         <div class="content-item">
           <p class="item-title">基础信息</p>
           <bk-form-item class="w-[600px]" label="名称" property="name" required>
-            <bk-input v-model="formData.name" @change="handleChange" />
+            <bk-input v-model="formData.name" :placeholder="validate.name.message" @change="handleChange" />
           </bk-form-item>
         </div>
         <div class="content-item" v-if="formData.plugin_config">
@@ -197,7 +197,7 @@ const formData = ref({
 const LoginMethod = ref('a');
 
 const rules = {
-  name: [validate.required],
+  name: [validate.required, validate.name],
 };
 
 const rulesData = {

diff --git a/src/pages/src/views/auth-source/edit-data/Local.vue b/src/pages/src/views/auth-source/edit-data/Local.vue
@@ -17,7 +17,7 @@
         <div class="content-item">
           <p class="item-title">基础信息</p>
           <bk-form-item class="w-[600px]" label="名称" property="name" required>
-            <bk-input v-model="authSourceData.name" @change="handleChange" />
+            <bk-input v-model="authSourceData.name" :placeholder="validate.name.message" @change="handleChange" />
           </bk-form-item>
         </div>
         <div class="content-item">

diff --git a/src/pages/src/views/auth-source/edit-data/WeCom.vue b/src/pages/src/views/auth-source/edit-data/WeCom.vue
@@ -17,7 +17,7 @@
         <div class="content-item">
           <p class="item-title">基础信息</p>
           <bk-form-item class="w-[600px]" label="名称" property="name" required>
-            <bk-input v-model="formData.name" @change="handleChange" />
+            <bk-input v-model="formData.name" :placeholder="validate.name.message" @change="handleChange" />
           </bk-form-item>
         </div>
         <div class="content-item" v-if="formData.plugin_config">
@@ -201,7 +201,7 @@ const formData = ref({
 const LoginMethod = ref('a');
 
 const rules = {
-  name: [validate.required],
+  name: [validate.required, validate.name],
   'plugin_config.corp_id': [validate.required],
   'plugin_config.agent_id': [validate.required],
   'plugin_config.secret': [validate.required],

diff --git a/src/pages/src/views/auth-source/new-data/CustomPlugin.vue b/src/pages/src/views/auth-source/new-data/CustomPlugin.vue
@@ -17,7 +17,7 @@
         <div class="content-item">
           <p class="item-title">基础信息</p>
           <bk-form-item class="w-[600px]" label="名称" property="name" required>
-            <bk-input v-model="formData.name" @focus="handleChange" />
+            <bk-input v-model="formData.name" :placeholder="validate.name.message" @focus="handleChange" />
           </bk-form-item>
         </div>
         <div class="content-item">
@@ -196,7 +196,7 @@ const formData = ref({
 const LoginMethod = ref('a');
 
 const rules = {
-  name: [validate.required],
+  name: [validate.required, validate.name],
 };
 
 const rulesData = {

diff --git a/src/pages/src/views/auth-source/new-data/WeCom.less b/src/pages/src/views/auth-source/new-data/WeCom.less
@@ -176,13 +176,9 @@
               &:hover {
                 color: #c4c6cc;
               }
-            }
 
-            .forbid {
-              color: #ea3636;
-
-              &:hover {
-                color: #ea3636;
+              &.forbid {
+                color: #EAEBF0;
               }
             }
 
@@ -312,4 +308,9 @@
 .option-select {
   display: flex !important;
   justify-content: space-between;
+
+  .name {
+    display: inline-block;
+    max-width: 160px;
+  }
 }
diff --git a/src/pages/src/views/auth-source/new-data/WeCom.vue b/src/pages/src/views/auth-source/new-data/WeCom.vue
@@ -17,7 +17,7 @@
         <div class="content-item">
           <p class="item-title">基础信息</p>
           <bk-form-item class="w-[600px]" label="名称" property="name" required>
-            <bk-input v-model="formData.name" @focus="handleChange" />
+            <bk-input v-model="formData.name" :placeholder="validate.name.message" @focus="handleChange" />
           </bk-form-item>
         </div>
         <div class="content-item">
@@ -91,7 +91,7 @@
                       :id="option.name"
                       :name="option.name"
                       :disabled="option.disabled">
-                      <span>{{option.name}}</span>
+                      <bk-overflow-title type="tips" class="name">{{option.name}}</bk-overflow-title>
                       <span>{{option.type}}</span>
                     </bk-option>
                   </bk-select>
@@ -203,7 +203,7 @@ const formData = ref({
 const LoginMethod = ref('a');
 
 const rules = {
-  name: [validate.required],
+  name: [validate.required, validate.name],
   'plugin_config.corp_id': [validate.required],
   'plugin_config.agent_id': [validate.required],
   'plugin_config.secret': [validate.required],

diff --git a/src/pages/src/views/data-source/local-details/ConfigInfo.vue b/src/pages/src/views/data-source/local-details/ConfigInfo.vue
@@ -18,7 +18,7 @@
               <span class="key">用户数据API路径：</span>
               <span class="value">{{ serverConfig.user_api_path }}</span>
             </li>
-            <div class="query-params" v-if="serverConfig?.user_api_query_params?.length > 0">
+            <div class="query-params" v-if="showUserApiQueryParams">
               <span class="key">查询参数：</span>
               <div class="value">
                 <bk-tag v-for="(item, index) in serverConfig.user_api_query_params" :key="index">
@@ -30,7 +30,7 @@
               <span class="key">部门数据API路径：</span>
               <span class="value">{{ serverConfig.department_api_path }}</span>
             </li>
-            <div class="query-params" v-if="serverConfig?.department_api_query_params?.length > 0">
+            <div class="query-params" v-if="showDepartmentApiQueryParams">
               <span class="key">查询参数：</span>
               <div class="value">
                 <bk-tag v-for="(item, index) in serverConfig.department_api_query_params" :key="index">
@@ -143,6 +143,9 @@ const syncConfig = ref({});
 const isPluginConfig = ref(true);
 
 const currentId = computed(() => route.params.id);
+// 是否显示用户api查询参数
+const showUserApiQueryParams = ref(false);
+const showDepartmentApiQueryParams = ref(false);
 
 onMounted(async () => {
   try {
@@ -167,6 +170,12 @@ onMounted(async () => {
     } else {
       serverConfig.value = res.data?.plugin_config?.server_config;
       authConfig.value = res.data?.plugin_config?.auth_config;
+      const {
+        user_api_query_params: userApiQueryParams,
+        department_api_query_params: departmentApiQueryParams,
+      } = res.data?.plugin_config?.server_config;
+      showUserApiQueryParams.value = getQueryParamsStatus(userApiQueryParams);
+      showDepartmentApiQueryParams.value = getQueryParamsStatus(departmentApiQueryParams);
       isPluginConfig.value = true;
     }
     syncConfig.value = res.data?.sync_config;
@@ -178,6 +187,8 @@ onMounted(async () => {
   }
 });
 
+const getQueryParamsStatus = (value: any) => value.every((item: any) => item.key !== '' && item.value !== '');
+
 const handleClickEdit = () => {
   router.push({
     name: 'newLocal',

diff --git a/src/pages/src/views/data-source/local-details/EditUser.vue b/src/pages/src/views/data-source/local-details/EditUser.vue
@@ -15,7 +15,7 @@
       >
         <bk-input
           v-model="formData.username"
-          placeholder="数字、下划线(_)、点(.)、减号(-)字符组成，以字母或数字开头"
+          :placeholder="validate.userName.message"
           :disabled="isEdit"
           @focus="handleChange"
         />
@@ -28,7 +28,7 @@
       >
         <bk-input
           v-model="formData.full_name"
-          placeholder="全名可随时修改"
+          :placeholder="validate.name.message"
           @focus="handleChange"
         />
       </bk-form-item>

diff --git a/src/pages/src/views/data-source/local-details/UserInfo.vue b/src/pages/src/views/data-source/local-details/UserInfo.vue
@@ -90,41 +90,43 @@
       </bk-table-column>
     </bk-table>
     <!-- 查看/编辑用户 -->
-    <bk-sideslider
-      ext-cls="details-edit-wrapper"
-      :width="640"
-      :is-show="detailsConfig.isShow"
-      :title="detailsConfig.title"
-      :before-close="handleBeforeClose"
-      quick-close
-    >
-      <template #header>
-        <span>{{ detailsConfig.title }}</span>
-        <div v-if="isView && pluginId === 'local'">
-          <bk-button
-            outline
-            theme="primary"
-            @click="handleClick('edit', detailsConfig)">
-            编辑
-          </bk-button>
+    <div v-if="showSideBar">
+      <bk-sideslider
+        ext-cls="details-edit-wrapper"
+        :width="640"
+        :is-show="detailsConfig.isShow"
+        :title="detailsConfig.title"
+        :before-close="handleBeforeClose"
+        quick-close
+      >
+        <template #header>
+          <span>{{ detailsConfig.title }}</span>
+          <div v-if="isView && pluginId === 'local'">
+            <bk-button
+              outline
+              theme="primary"
+              @click="handleClick('edit', detailsConfig)">
+              编辑
+            </bk-button>
           <!-- <bk-button>重置</bk-button>
           <bk-button>删除</bk-button> -->
-        </div>
-      </template>
-      <template #default>
-        <bk-loading :loading="detailsLoading">
-          <ViewUser v-if="isView" :users-data="detailsConfig.usersData" :paths="paths" />
-          <EditUser
-            v-else
-            :type="detailsConfig.type"
-            :users-data="detailsConfig.usersData"
-            :current-id="detailsConfig.id"
-            :data-source-id="dataSourceId"
-            @handleCancelEdit="handleCancelEdit"
-            @updateUsers="updateUsers" />
-        </bk-loading>
-      </template>
-    </bk-sideslider>
+          </div>
+        </template>
+        <template #default>
+          <bk-loading :loading="detailsLoading">
+            <ViewUser v-if="isView" :users-data="detailsConfig.usersData" :paths="paths" />
+            <EditUser
+              v-else
+              :type="detailsConfig.type"
+              :users-data="detailsConfig.usersData"
+              :current-id="detailsConfig.id"
+              :data-source-id="dataSourceId"
+              @handleCancelEdit="handleCancelEdit"
+              @updateUsers="updateUsers" />
+          </bk-loading>
+        </template>
+      </bk-sideslider>
+    </div>
     <!-- 导入 -->
     <bk-dialog
       :is-show="importDialog.isShow"
@@ -376,15 +378,24 @@ const getCustomFields = async (type: string) => {
   }
 };
 
+const showSideBar = ref(false);
+// 销毁侧栏，防止tips不消失
+const hideSideBar = () => {
+  setTimeout(() => {
+    showSideBar.value = false;
+  }, 300);
+};
+
 const handleClick = async (type: string, item?: any) => {
+  showSideBar.value = true;
   detailsLoading.value = true;
   if (type !== 'add') {
     const res = await getDataSourceUserDetails(item.id);
     detailsConfig.usersData = res.data;
     detailsConfig.id = item.id;
     if (type === 'view') {
       const pathsRes = await getOrganizationPaths(item.id);
-      paths.value = pathsRes.data?.organization_paths[0] || '--';
+      paths.value = pathsRes.data?.organization_paths.join(' ; ') || '--';
     }
   }
   await getCustomFields(type);
@@ -397,6 +408,7 @@ const handleCancelEdit = () => {
   window.changeInput = false;
   if (detailsConfig.type === 'add') {
     detailsConfig.isShow = false;
+    hideSideBar();
   } else {
     handleClick('view', detailsConfig);
     window.changeInput = false;
@@ -408,8 +420,10 @@ const handleBeforeClose = async () => {
   if (window.changeInput) {
     enableLeave = await editLeaveBefore();
     detailsConfig.isShow = false;
+    hideSideBar();
   } else {
     detailsConfig.isShow = false;
+    hideSideBar();
   }
   if (!enableLeave) {
     return Promise.resolve(enableLeave);
@@ -551,7 +565,7 @@ const tipsText = ref('');
 const tipsShowFn = async (id: string) => {
   try {
     const res = await getOrganizationPaths(id);
-    tipsText.value = res.data?.organization_paths[0] || '';
+    tipsText.value = res.data?.organization_paths.join('\n') || '';
   } catch (e) {
     tipsText.value = '';
   }

diff --git a/src/pages/src/views/data-source/local-details/index.vue b/src/pages/src/views/data-source/local-details/index.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { Message } from 'bkui-vue';
+import { InfoBox, Message } from 'bkui-vue';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -81,14 +81,26 @@ onMounted(async () => {
   typeList.value = pluginsRes.data;
   isLoading.value = false;
 });
-
-const handleClick = async () => {
+// 切换启停状态
+const toggleStatus = async () => {
   const res = await changeSwitchStatus(route.params.id);
   statusText.value = res.data?.status;
   const message = res.data?.status === 'disabled' ? '停用成功' : '启用成功';
   Message({ theme: 'success', message });
 };
 
+const handleClick = async () => {
+  if (statusText.value === 'enabled') {
+    InfoBox({
+      title: '确认停用该数据源吗？',
+      subTitle: '停用后，该数据源下所有用户将无法登录',
+      onConfirm: toggleStatus,
+    });
+  } else {
+    toggleStatus();
+  }
+};
+
 const changeTab = (value) => {
   activeKey.value = value;
 };