fix: 数据源管理模块体验问题修复

src/pages/src/http/dataSourceFiles.ts

@@ -70,3 +70,8 @@ export const getDefaultConfig = (id: string) => http.get(`/api/v1/web/data-sourc
  * 更新数据源
  */
 export const putDataSourceDetails = (params: PutDataSourceParams) => http.put(`/api/v1/web/data-sources/${params.id}/`, params);
+
+/**
+ * 变更数据源状态
+ */
+export const changeSwitchStatus = (id: string) => http.patch(`/api/v1/web/data-sources/${id}/operations/switch_status/`);

src/pages/src/http/fetch/index.ts

@@ -104,7 +104,7 @@ const handleReject = (error: AxiosError, config: Record<string, any>) => {
 
   // 全局捕获错误给出提示
   if (config.globalError) {
-    Message({ theme: 'error', message });
+    Message({ theme: 'error', message, delay: 10000 });
   }
 
   return Promise.reject(error);

src/pages/src/utils/index.ts

@@ -176,5 +176,5 @@ export function passwordNotAllowedMap(value: any) {
   const list: string[] = Object.entries(value)
     .filter(([key, val]) => passwordNotAllowed[key] && val)
     .map(([key]) => passwordNotAllowed[key]);
-  return list.join('，') || '--';
+  return list.join('，');
 };

src/pages/src/views/data-source/LocalDataSource.vue

@@ -14,7 +14,7 @@
               :key="item"
               @click="newDataSource(item)"
             >
-              <img v-if="item.logo" src="" alt="">
+              <img v-if="item.logo" :src="item.logo">
               <i v-else :class="dataSourceType[item.id].icon"></i>
               <div class="dropdown-item">
                 <span class="dropdown-item-title">{{ item.name }}</span>
@@ -234,6 +234,11 @@ function newDataSource(item) {
     line-height: 32px;
     align-items: center;
 
+    img {
+      width: 16px;
+      height: 16px;
+    }
+
     .user-icon {
       font-size: 24px;
       color: #979ba5;

src/pages/src/views/data-source/local-details/PswInfo.vue

@@ -27,7 +27,10 @@
           </li>
           <li>
             <span class="key">密码不允许：</span>
-            <span class="value">{{ passwordNotAllowedMap(passwordRule) }}</span>
+            <span class="value">
+              连续{{ passwordRule?.not_continuous_count }}位出现
+              {{ passwordNotAllowedMap(passwordRule) }}
+            </span>
           </li>
           <li>
             <span class="key">密码有效期：</span>

src/pages/src/views/data-source/local-details/index.vue

@@ -9,6 +9,11 @@
           {{ typeText }}
         </bk-tag>
       </template>
+      <template #right>
+        <bk-button v-if="statusText" class="w-[64px]" @click="handleClick">
+          {{ statusText }}
+        </bk-button>
+      </template>
     </MainBreadcrumbsDetails>
     <bk-tab
       v-model:active="activeKey"
@@ -29,14 +34,15 @@
 </template>
 
 <script setup lang="ts">
+import { Message } from 'bkui-vue';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import PswInfo from './PswInfo.vue';
 import UserInfo from './UserInfo.vue';
 
 import MainBreadcrumbsDetails from '@/components/layouts/MainBreadcrumbsDetails.vue';
-import { getDataSourceList } from '@/http/dataSourceFiles';
+import { changeSwitchStatus, getDataSourceList } from '@/http/dataSourceFiles';
 import { dataSourceType } from '@/utils';
 
 const route = useRoute();
@@ -54,10 +60,13 @@ const isLoading = ref(false);
 const subtitle = ref('');
 const typeText = ref('');
 const typeIcon = ref('');
+const statusText = ref('');
+const switchStatus = ref('');
 
 onMounted(async () => {
   isLoading.value = true;
   const res = await getDataSourceList('');
+  await getSwitchStatus();
   res.data.forEach((item) => {
     if (item.id === currentId.value) {
       const { text, icon } = dataSourceType[item.plugin_id];
@@ -68,6 +77,18 @@ onMounted(async () => {
   });
   isLoading.value = false;
 });
+
+const getSwitchStatus = async () => {
+  const res = await changeSwitchStatus(route.params.id);
+  switchStatus.value = res.data?.status;
+  statusText.value = res.data?.status === 'disabled' ? '启用' : '停用';
+};
+
+const handleClick = async () => {
+  await getSwitchStatus();
+  const message = switchStatus.value === 'disabled' ? '停用成功' : '启用成功';
+  Message({ theme: 'success', message });
+};
 </script>
 
 <style lang="less">

src/pages/src/views/data-source/new-data/NewLocalData.vue

@@ -4,9 +4,9 @@
       <template #tag>
         <bk-tag>
           <template #icon>
-            <i :class="typeText.icon" />
+            <i :class="dataSourceType[route.params.type].icon" />
           </template>
-          {{ typeText.name }}
+          {{ dataSourceType[route.params.type].text }}
         </bk-tag>
       </template>
     </MainBreadcrumbsDetails>
@@ -46,7 +46,7 @@
             <bk-checkbox v-model="formData.config.password_rule.contain_uppercase">大写字母</bk-checkbox>
             <bk-checkbox v-model="formData.config.password_rule.contain_digit">数字</bk-checkbox>
             <bk-checkbox v-model="formData.config.password_rule.contain_punctuation">特殊字符（除空格）</bk-checkbox>
-            <p class="error-text" v-show="passwordRuleError">密码规则不得为空</p>
+            <p class="error-text" v-show="passwordRuleError">至少包含一类字符</p>
           </bk-form-item>
           <bk-form-item label="" required>
             <div>
@@ -64,7 +64,7 @@
             <bk-checkbox v-model="formData.config.password_rule.not_continuous_letter">连续字母序</bk-checkbox>
             <bk-checkbox v-model="formData.config.password_rule.not_continuous_digit">连续数字序</bk-checkbox>
             <bk-checkbox v-model="formData.config.password_rule.not_repeated_symbol">重复字母、数字、特殊符号</bk-checkbox>
-            <p class="error-text" v-show="passwordConfigError">密码规则不得为空</p>
+            <p class="error-text" v-show="passwordConfigError">至少包含一类连续性场景</p>
           </bk-form-item>
           <bk-form-item label="密码有效期" required>
             <bk-radio-group v-model="formData.config.password_rule.valid_time" @change="handleChange">
@@ -132,17 +132,12 @@
               <bk-radio label="random">随机</bk-radio>
               <bk-radio label="fixed">固定</bk-radio>
             </bk-radio-group>
-            <div>
-              <bk-input
-                :class="['input-password', { 'input-error': fixedPasswordError }]"
-                v-if="formData.config.password_initial.generate_method === 'fixed'"
-                v-model="formData.config.password_initial.fixed_password"
-                @blur="handleBlur"
-                @focus="handleFocus"
-                type="password"
-              />
-              <p class="fixed-password-error" v-show="fixedPasswordError">密码长度至少12位，必须包含大小写字母、数字</p>
-            </div>
+            <bk-input
+              class="input-password"
+              v-if="formData.config.password_initial.generate_method === 'fixed'"
+              v-model="formData.config.password_initial.fixed_password"
+              type="password"
+            />
           </bk-form-item>
           <bk-form-item label="通知方式" property="config.password_initial.notification.enabled_methods" required>
             <NotifyEditorTemplate
@@ -251,28 +246,12 @@ import useValidate from '@/hooks/use-validate';
 import { getDataSourceDetails, getDefaultConfig, newDataSource, putDataSourceDetails } from '@/http/dataSourceFiles';
 import router from '@/router';
 import { useMainViewStore } from '@/store/mainView';
-import { passwordMustIncludes, passwordNotAllowed } from '@/utils';
+import { dataSourceType, passwordMustIncludes, passwordNotAllowed } from '@/utils';
 
 const route = useRoute();
 const validate = useValidate();
 const store = useMainViewStore();
 
-// 当前面包屑展示文案
-const typeText = computed(() => {
-  switch (route.params.type) {
-    case 'local':
-      return {
-        name: '本地',
-        icon: 'user-icon icon-shujuku',
-      };
-    default:
-      return {
-        name: '本地',
-        icon: 'user-icon icon-shujuku',
-      };
-  }
-});
-
 const isDisabled = ref(false);
 const currentId = computed(() => {
   const { id } = route.params;
@@ -493,15 +472,6 @@ const getDataSource = async (params) => {
   });
 };
 
-const handleBlur = () => {
-  const result = /^\S*(?=\S{12,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(formData.config.password_initial.fixed_password);
-  fixedPasswordError.value = !result;
-};
-
-const handleFocus = () => {
-  fixedPasswordError.value = false;
-};
-
 const handleChange = () => {
   window.changeInput = true;
 };
@@ -554,17 +524,6 @@ const handleChange = () => {
           color: #ea3636;
           animation: form-error-appear-animation .15s;
         }
-
-        .fixed-password-error {
-          position: absolute;
-          left: 155px;
-          padding-top: 4px;
-          font-size: 12px;
-          line-height: 1;
-          color: #ea3636;
-          text-align: left;
-          animation: form-error-appear-animation 0.15s;
-        }
       }
 
       .form-item-flex {
@@ -575,10 +534,6 @@ const handleChange = () => {
             width: 240px;
             margin-left: 24px;
           }
-
-          .input-error {
-            border-color: #ea3636;
-          }
         }
       }
     }

src/pages/src/views/tenant/group-details/OperationDetails.vue

@@ -70,17 +70,14 @@
               <bk-radio label="random">随机</bk-radio>
               <bk-radio label="fixed">固定</bk-radio>
             </bk-radio-group>
-            <div>
-              <bk-input
-                :class="['input-password', { 'input-error': fixedPasswordError }]"
-                v-if="formData.password_initial_config.generate_method === 'fixed'"
-                type="password"
-                v-model="formData.password_initial_config.fixed_password"
-                @blur="handleBlur"
-                @focus="handleFocus"
-              />
-              <p class="fixed-password error" v-show="fixedPasswordError">密码长度至少12位，必须包含大小写字母、数字</p>
-            </div>
+            <bk-input
+              class="input-password"
+              v-if="formData.password_initial_config.generate_method === 'fixed'"
+              type="password"
+              v-model="formData.password_initial_config.fixed_password"
+              @blur="handleBlur"
+              @focus="handleFocus"
+            />
           </bk-form-item>
           <bk-form-item label="通知方式" required>
             <NotifyEditorTemplate
@@ -204,7 +201,6 @@ const rulesUserInfo = {
   phone: [validate.required, validate.phone],
 };
 
-const fixedPasswordError = ref(false);
 const enabledMethodsError = ref(false);
 const activeMethods = ref('email');
 // 初始密码
@@ -218,23 +214,13 @@ const checkboxInfo = [
 watch(() => formData.password_initial_config?.generate_method, (value) => {
   if (value === 'random') {
     formData.password_initial_config.fixed_password = null;
-    fixedPasswordError.value = false;
   }
 });
 
 watch(() => formData.password_initial_config?.notification?.enabled_methods, (value) => {
   enabledMethodsError.value = !value.length;
 });
 
-const handleBlur = () => {
-  const result = /^\S*(?=\S{12,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(formData.password_initial_config.fixed_password);
-  fixedPasswordError.value = !result;
-};
-
-const handleFocus = () => {
-  fixedPasswordError.value = false;
-};
-
 const handleClickLabel = (item) => {
   checkboxInfo.forEach((element) => {
     element.status = element.value === item.value;
@@ -385,10 +371,7 @@ function handleItemChange(index: number, action: 'add' | 'remove') {
 }
 // 校验表单
 async function handleSubmit() {
-  fixedPasswordError.value = formData.password_initial_config?.generate_method === 'fixed'
-    && !formData.password_initial_config.fixed_password;
-  
-  if (fixedPasswordError.value || enabledMethodsError.value) return;
+  if (enabledMethodsError.value) return;
 
   await Promise.all([basicRef.value.validate(), userRef.value.validate()]);
 
@@ -496,10 +479,6 @@ const handleChange = () => {
       width: 240px;
       margin-left: 24px;
     }
-
-    .input-error {
-      border-color: #ea3636;
-    }
   }
 }
 
@@ -513,8 +492,4 @@ const handleChange = () => {
   text-align: left;
   animation: form-error-appear-animation 0.15s;
 }
-
-.fixed-password {
-  left: 147px;
-}
 </style>