diff --git a/src/pages/package.json b/src/pages/package.json
index 7d5f0df2e..412f6483a 100644
--- a/src/pages/package.json
+++ b/src/pages/package.json
@@ -26,7 +26,7 @@
     "acorn": "8.10.0",
     "art-template": "^4.13.2",
     "axios": "^1.4.0",
-    "bkui-vue": "0.0.2-beta.124",
+    "bkui-vue": "^0.0.2-beta.124",
     "connect-history-api-fallback": "^2.0.0",
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",
diff --git a/src/pages/src/components/layouts/DataSourceCard.vue b/src/pages/src/components/layouts/DataSourceCard.vue
index a49b80093..b9d53f73c 100644
--- a/src/pages/src/components/layouts/DataSourceCard.vue
+++ b/src/pages/src/components/layouts/DataSourceCard.vue
@@ -56,7 +56,7 @@
 <script setup lang="ts">
 import { bkTooltips as vBkTooltips } from 'bkui-vue';
 import { AngleDownLine } from 'bkui-vue/lib/icon';
-import { computed, ref, watch } from 'vue';
+import { computed, defineEmits, defineProps, ref } from 'vue';
 
 import { t } from '@/language/index';
 
@@ -92,10 +92,6 @@ const isShow = ref(!props.dataSource?.id);
 
 const text = computed(() => (isShow.value ? t('收起') : t('查看数据源类型')));
 
-watch(() => props.showContent, (val) => {
-  isShow.value = !val;
-});
-
 const toggleState = () => {
   isShow.value = !isShow.value;
 };
diff --git a/src/pages/src/hooks/useDataSource.ts b/src/pages/src/hooks/useDataSource.ts
index 9337a5f12..f18e1800d 100644
--- a/src/pages/src/hooks/useDataSource.ts
+++ b/src/pages/src/hooks/useDataSource.ts
@@ -55,8 +55,8 @@ export const useDataSource = () => {
   const syncStatus = ref({});
   const initSyncRecords = async () => {
     const res = await getSyncRecords({ id: currentDataSourceId.value });
+    if (res.data?.count === 0 || ['success', 'failed'].includes(syncStatus.value?.status)) return;
     syncStatus.value = res.data?.results[0];
-    if (syncStatus.value?.status === 'success' || syncStatus.value?.status === 'failed') return;
     setTimeout(() => {
       initSyncRecords();
     }, 5000);
diff --git a/src/pages/src/http/fetch/index.ts b/src/pages/src/http/fetch/index.ts
index 109528cd3..da958c722 100644
--- a/src/pages/src/http/fetch/index.ts
+++ b/src/pages/src/http/fetch/index.ts
@@ -86,7 +86,7 @@ const handleResponse = <T>({
 
 const handleReject = (error: AxiosError, config: Record<string, any>) => {
   const { status } = error.response;
-  const { message } = error.response.data.error;
+  const { message, data } = error.response.data.error;
 
   if (status === 401) {
     if (error.config.url === '/api/v1/web/basic/current-user/') {
@@ -94,7 +94,11 @@ const handleReject = (error: AxiosError, config: Record<string, any>) => {
     }
     // 登录弹窗
     const loginUrl = getLoginUrl();
-    showLoginModal({ loginUrl });
+    showLoginModal({
+      loginUrl,
+      width: data.width,
+      height: data.height,
+    });
 
     return;
   }
diff --git a/src/pages/src/views/setting/LoginSetting.vue b/src/pages/src/views/setting/LoginSetting.vue
index 72d08bbe4..cc5f92e73 100644
--- a/src/pages/src/views/setting/LoginSetting.vue
+++ b/src/pages/src/views/setting/LoginSetting.vue
@@ -26,6 +26,7 @@
                 <span>{{ item.name }}</span>
                 <bk-tag
                   v-if="item.type === 'local'"
+                  class="tag-info"
                   type="stroke"
                   theme="info"
                 >
@@ -82,7 +83,7 @@
     </ul>
     <!-- 认证源详情 -->
     <bk-sideslider
-      width="640"
+      :width="(authDetails?.type === 'local' && detailsConfig.isEdit) ? 960 : 640"
       :is-show="detailsConfig.show"
       :title="detailsConfig.title"
       :before-close="handleBeforeClose"
@@ -102,27 +103,34 @@
         </div>
       </template>
       <template #default>
-        <Local
-          v-if="authDetails?.type === 'local' && detailsConfig.isEdit"
-          :data="authDetails"
-          @cancelEdit="cancelEdit" />
-        <WeCom
-          v-if="authDetails?.type === 'wecom' && detailsConfig.isEdit"
-          :data="authDetails"
-          @cancelEdit="cancelEdit" />
-        <ViewDetails v-else-if="!detailsConfig.isEdit" :data="authDetails" @updateRow="updateRow" />
+        <template v-if="authDetails?.type === 'local'">
+          <Local
+            v-if="detailsConfig.isEdit"
+            :current-id="authDetails?.id"
+            @cancel="cancelEdit"
+            @success="handleSuccess" />
+          <LocalView v-else :current-id="authDetails?.id" @updateRow="updateRow" />
+        </template>
+        <template v-if="authDetails?.type === 'wecom'">
+          <WeCom
+            v-if="detailsConfig.isEdit"
+            :data="authDetails"
+            @cancelEdit="cancelEdit" :current-id="authDetails?.id" />
+          <WeComView v-else />
+        </template>
       </template>
     </bk-sideslider>
   </div>
 </template>
 
 <script setup lang="ts">
-import { bkTooltips as vBkTooltips } from 'bkui-vue';
-import { inject, reactive, ref } from 'vue';
+import { bkTooltips as vBkTooltips, InfoBox } from 'bkui-vue';
+import { h, inject, reactive, ref } from 'vue';
 
 import Local from './auth-config/Local.vue';
-import ViewDetails from './auth-config/ViewDetails.vue';
+import LocalView from './auth-config/LocalView.vue';
 import WeCom from './auth-config/WeCom.vue';
+import WeComView from './auth-config/WeComView.vue';
 
 import { t } from '@/language/index';
 import { useMainViewStore } from '@/store';
@@ -133,7 +141,7 @@ const editLeaveBefore = inject('editLeaveBefore');
 
 const loginMethods = ref([
   {
-    id: 'a48b55c2f3fb41ec8df661a5ea0e1cb6',
+    id: '1',
     logo: 'bk-sq-icon icon-personal-user',
     name: '账密登录1',
     status: 'enable',
@@ -226,6 +234,32 @@ const handleBeforeClose = async () => {
     return Promise.resolve(enableLeave);
   }
 };
+
+const handleSuccess = () => {
+  window.changeInput = false;
+  detailsConfig.show = false;
+  InfoBox({
+    title: t('配置成功'),
+    infoType: 'success',
+    subTitle: h('div', {
+      style: {
+        height: '44px',
+        background: '#F5F7FA',
+        lineHeight: '44px',
+      },
+    }, [
+      h('i', {
+        class: 'user-icon icon-info-i',
+      }),
+      h('span', {
+        style: {
+          fontSize: '12px',
+          marginLeft: '8px',
+        },
+      }, t('账号重置需要一定时间，账号生效以最终邮件通知为准')),
+    ]),
+  });
+};
 </script>
 
 <style lang="less" scoped>
@@ -291,6 +325,14 @@ const handleBeforeClose = async () => {
               right: -6px;
               background: #2DCB9D;
             }
+
+            .tag-info {
+              background: #F0F5FF;
+
+              :deep(.bk-tag-text) {
+                background: #F0F5FF;
+              }
+            }
           }
 
           .not {
diff --git a/src/pages/src/views/setting/auth-config/Local.less b/src/pages/src/views/setting/auth-config/Local.less
new file mode 100644
index 000000000..5ac088b9d
--- /dev/null
+++ b/src/pages/src/views/setting/auth-config/Local.less
@@ -0,0 +1,49 @@
+.details-wrapper {
+  position: relative;
+  height: calc(100vh - 84px);
+  padding: 24px;
+  background: #F5F7FA;
+
+  .div-flex {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #63656e;
+  }
+
+  .form-item-flex {
+    ::v-deep .bk-form-content {
+      display: flex;
+
+      .input-password {
+        width: 240px;
+        margin-left: 28px;
+      }
+    }
+  }
+
+  .error-text {
+    font-size: 12px;
+    line-height: 1;
+    color: #ea3636;
+    animation: form-error-appear-animation .15s;
+  }
+
+  .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 48px;
+    padding-left: 24px;
+    margin-bottom: 0;
+    line-height: 48px;
+    background: #FAFBFD;
+    box-shadow: 0 -1px 0 0 #DCDEE5;
+
+    button {
+      min-width: 88px;
+    }
+  }
+}
diff --git a/src/pages/src/views/setting/auth-config/Local.vue b/src/pages/src/views/setting/auth-config/Local.vue
index d8a2d8cc9..94ca8ee4b 100644
--- a/src/pages/src/views/setting/auth-config/Local.vue
+++ b/src/pages/src/views/setting/auth-config/Local.vue
@@ -1,590 +1,530 @@
 <template>
-  <bk-loading class="details-wrapper user-scroll-y" :loading="isLoading">
-    <div ref="cardRef">
-      <bk-form
-        class="auth-source-form"
-        ref="formRef"
-        form-type="vertical"
-        :model="authSourceData"
-        :rules="rules">
-        <div class="content-item">
-          <p class="item-title">{{ $t('基本信息') }}</p>
-          <bk-form-item :label="$t('名称')" property="name" required>
-            <bk-input v-model="authSourceData.name" :placeholder="validate.name.message" @change="handleChange" />
-          </bk-form-item>
-          <bk-form-item :label="$t('是否启用')" required>
-            <bk-switcher
-              v-model="authSourceData.open"
-              size="large"
-              theme="primary"
+  <div class="details-wrapper user-scroll-y">
+    <bk-form
+      form-type="vertical"
+      ref="formRef"
+      :model="formData"
+      :rules="rulesInfo"
+      v-bkloading="{ loading: isLoading }">
+      <Row :title="$t('基本信息')">
+        <bk-form-item :label="$t('名称')" property="name" required>
+          <bk-input
+            style="width: 600px;"
+            v-model="formData.name"
+            :placeholder="validate.name.message"
+            @focus="handleChange" />
+        </bk-form-item>
+        <bk-form-item :label="$t('是否启用')" required>
+          <bk-switcher
+            :value="formData.config.enable_account_password_login"
+            theme="primary"
+            size="large"
+            @change="changeAccountPassword"
+          />
+        </bk-form-item>
+      </Row>
+      <template v-if="formData.config.enable_account_password_login">
+        <Row :title="$t('密码规则')">
+          <bk-form-item :label="$t('密码长度')" property="config.password_rule.min_length" required>
+            <bk-input
+              style="width: 200px;"
+              type="number"
+              :suffix="$t('至32位')"
+              :min="10"
+              :max="32"
+              v-model="formData.config.password_rule.min_length"
+              @change="handleChange"
             />
           </bk-form-item>
-        </div>
-        <div class="content-item">
-          <p class="item-title">{{ $t('基础配置') }}</p>
-          <div class="basic-config">
-            <p v-if="onDataSources.length">{{ $t('以下数据源已开启「账密登录」') }}</p>
-            <div class="on">
-              <bk-overflow-title
-                type="tips"
-                class="source-name"
-                v-for="(item, index) in onDataSources"
-                :key="index">
-                {{ item.data_source_name }}
-              </bk-overflow-title>
-            </div>
-            <p v-if="notDataSources.length">{{ $t('以下数据源未开启「账密登录」') }}</p>
-            <div class="off" v-for="(item, index) in notDataSources" :key="index">
-              <bk-overflow-title
-                type="tips"
-                class="source-name">
-                {{ item.data_source_name }}
-                <bk-button text theme="primary" @click="handleOpen(item)">{{ $t('去开启') }}</bk-button>
-              </bk-overflow-title>
+          <bk-form-item :label="$t('密码必须包含')" required>
+            <bk-checkbox v-model="formData.config.password_rule.contain_lowercase">{{ $t('小写字母') }}</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_uppercase">{{ $t('大写字母') }}</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_digit">{{ $t('数字') }}</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_punctuation">{{ $t('特殊字符（除空格）') }}</bk-checkbox>
+            <p class="error-text" v-show="passwordRuleError">{{ $t('至少包含一类字符') }}</p>
+          </bk-form-item>
+          <bk-form-item label="" required>
+            <div class="div-flex">
+              <span>{{ $t('密码不允许连续') }}</span>
+              <bk-input
+                style="width: 85px;"
+                type="number"
+                behavior="simplicity"
+                v-model="formData.config.password_rule.not_continuous_count"
+              />
+              <span>{{ $t('位 出现') }}</span>
             </div>
-          </div>
-        </div>
-        <div class="content-item pb-[24px]">
-          <p class="item-title">{{ $t('数据源匹配') }}</p>
-          <div class="content-matching">
-            <bk-exception
-              v-if="onDataSources.length === 0"
-              class="exception-part"
-              type="empty"
-              scene="part"
-              :description="$t('暂无数据源匹配')"
+            <p class="error-text" v-show="passwordCountError">{{ $t('可选值范围：5-10') }}</p>
+            <bk-checkbox v-model="formData.config.password_rule.not_keyboard_order">
+              {{ $t('键盘序') }}
+            </bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_continuous_letter">
+              {{ $t('连续字母序') }}
+            </bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_continuous_digit">
+              {{ $t('连续数字序') }}
+            </bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_repeated_symbol">
+              {{ $t('重复字母、数字、特殊符号') }}
+            </bk-checkbox>
+            <p class="error-text" v-show="passwordConfigError">{{ $t('至少包含一类连续性场景') }}</p>
+          </bk-form-item>
+          <bk-form-item :label="$t('密码有效期')" required>
+            <bk-radio-group v-model="formData.config.password_rule.valid_time" @change="handleChange">
+              <bk-radio-button
+                v-for="(item, index) in VALID_TIME"
+                :key="index"
+                :label="item.days"
+              >
+                {{ item.text }}
+              </bk-radio-button>
+            </bk-radio-group>
+          </bk-form-item>
+          <bk-form-item :label="$t('密码试错次数')" required>
+            <bk-radio-group v-model="formData.config.password_rule.max_retries" @change="handleChange">
+              <bk-radio-button
+                v-for="(item, index) in maxTrailTimesList"
+                :key="index"
+                :label="item.times"
+              >
+                {{ item.text }}
+              </bk-radio-button>
+            </bk-radio-group>
+          </bk-form-item>
+          <bk-form-item :label="$t('锁定时间')" property="config.password_rule.lock_time" required>
+            <bk-input
+              style="width: 200px;"
+              type="number"
+              :suffix="$t('秒')"
+              :min="0"
+              v-model="formData.config.password_rule.lock_time"
+              @change="handleChange"
             />
-            <div class="content-box" v-else v-for="(item, index) in onDataSources" :key="index">
-              <bk-overflow-title class="data-source-title">{{ item.data_source_name }}</bk-overflow-title>
-              <div class="field-rules">
-                <dl>
-                  <dt>{{ $t('数据源字段') }}：</dt>
-                  <bk-overflow-title
-                    type="tips"
-                    class="source-field"
-                    v-for="(val, i) in item.field_compare_rules"
-                    :key="i">
-                    {{ val.source_field }}
-                  </bk-overflow-title>
-                </dl>
-                <dl>
-                  <dt>{{ $t('认证源字段') }}：</dt>
-                  <bk-overflow-title
-                    type="tips"
-                    class="source-field"
-                    v-for="(val, i) in item.field_compare_rules"
-                    :key="i">
-                    {{ val.target_field }}
-                  </bk-overflow-title>
-                </dl>
-              </div>
-              <span class="or" v-if="index !== 0">or</span>
+          </bk-form-item>
+        </Row>
+        <Row :title="$t('初始密码设置')">
+          <bk-form-item label="" required>
+            <bk-checkbox
+              v-model="formData.config.password_initial.force_change_at_first_login"
+              @change="handleChange">
+              {{ $t('首次登录强制修改密码') }}
+            </bk-checkbox>
+          </bk-form-item>
+          <bk-form-item label="" required>
+            <div class="div-flex">
+              <bk-checkbox
+                v-model="formData.config.password_initial.cannot_use_previous_password"
+                @change="handleChange">
+                {{ $t('修改密码时不能重复前') }}
+              </bk-checkbox>
+              <bk-input
+                style="width: 85px;"
+                type="number"
+                behavior="simplicity"
+                :min="0"
+                :max="5"
+                v-model="formData.config.password_initial.reserved_previous_password_count"
+                @change="handleChange"
+              />
+              <span>{{ $t('次 用过的密码') }}</span>
             </div>
-          </div>
-        </div>
-      </bk-form>
-    </div>
-    <div class="footer-wrapper">
-      <div class="footer-div">
-        <bk-button theme="primary" :loading="btnLoading" @click="handleSubmit">
-          {{ $t('提交') }}
-        </bk-button>
-        <bk-button @click="handleCancel">
-          {{ $t('取消') }}
-        </bk-button>
-      </div>
+          </bk-form-item>
+          <bk-form-item class="form-item-flex" :label="$t('密码生成方式')" required>
+            <bk-radio-group v-model="formData.config.password_initial.generate_method" @change="handleChange">
+              <bk-radio label="random">{{ $t('随机') }}</bk-radio>
+              <bk-radio label="fixed">{{ $t('固定') }}</bk-radio>
+            </bk-radio-group>
+            <div v-if="formData.config.password_initial.generate_method === 'fixed'">
+              <bk-input
+                class="input-password"
+                v-model="formData.config.password_initial.fixed_password"
+                type="password" />
+              <bk-button
+                outline
+                theme="primary"
+                class="ml-[8px]"
+                @click="handleRandomPassword">{{ $t('随机生成') }}</bk-button>
+            </div>
+          </bk-form-item>
+          <bk-form-item
+            :label="$t('通知方式')"
+            :required="formData.config.password_initial.generate_method === 'random'">
+            <NotifyEditorTemplate
+              :active-methods="formData.config.password_initial.notification.enabled_methods"
+              :checkbox-info="NOTIFICATION_METHODS"
+              :data-list="formData.config.password_initial.notification.templates"
+              :is-template="isPasswordInitial"
+              :expiring-email-key="'user_initialize'"
+              :expired-email-key="'reset_password'"
+              :expiring-sms-key="'user_initialize'"
+              :expired-sms-key="'reset_password'"
+              :create-account-email="$t('创建账户邮件')"
+              :reset-password-email="$t('重设密码后的邮件')"
+              :create-account-sms="$t('创建账户短信')"
+              :reset-password-sms="$t('重设密码后的短信')"
+              @handleEditorText="handleEditorText">
+              <template #label>
+                <div class="password-header">
+                  <bk-checkbox-group
+                    v-model="formData.config.password_initial.notification.enabled_methods"
+                    @change="handleChange">
+                    <bk-checkbox
+                      v-for="(item, index) in NOTIFICATION_METHODS" :key="index"
+                      :class="['password-tab', item.status ? 'active-tab' : '']"
+                      style="margin-left: 5px;"
+                      :label="item.value">
+                      <span class="checkbox-item" @click="handleClickLabel(item)">{{item.label}}</span>
+                    </bk-checkbox>
+                  </bk-checkbox-group>
+                  <div class="edit-info" @click="passwordInitialTemplate">
+                    <span style="font-size:14px">{{ $t('编辑通知模板') }}</span>
+                    <AngleUp v-if="isDropdownPasswordInitial" />
+                    <AngleDown v-else />
+                  </div>
+                </div>
+              </template>
+            </NotifyEditorTemplate>
+            <p class="error" v-show="enabledMethodsError">{{ $t('通知方式不能为空') }}</p>
+          </bk-form-item>
+        </Row>
+        <Row :title="$t('密码到期提醒')">
+          <bk-form-item :label="$t('提醒时间')" property="config.password_expire.remind_before_expire" required>
+            <bk-checkbox-group v-model="formData.config.password_expire.remind_before_expire" @change="handleChange">
+              <bk-checkbox
+                v-for="(item, index) in REMIND_DAYS"
+                :key="index"
+                :label="item.value"
+              >{{ item.label }}</bk-checkbox
+              >
+            </bk-checkbox-group>
+          </bk-form-item>
+          <bk-form-item :label="$t('通知方式')" property="config.password_expire.notification.enabled_methods" required>
+            <NotifyEditorTemplate
+              :active-methods="formData.config.password_expire.notification.enabled_methods"
+              :checkbox-info="NOTIFICATION_METHODS"
+              :data-list="formData.config.password_expire.notification.templates"
+              :is-template="isPasswordExpire"
+              :expiring-email-key="'password_expiring'"
+              :expired-email-key="'password_expired'"
+              :expiring-sms-key="'password_expiring'"
+              :expired-sms-key="'password_expired'"
+              @handleEditorText="handleEditorText">
+              <template #label>
+                <div class="password-header">
+                  <bk-checkbox-group
+                    v-model="formData.config.password_expire.notification.enabled_methods"
+                    @change="handleChange">
+                    <bk-checkbox
+                      v-for="(item, index) in NOTIFICATION_METHODS" :key="index"
+                      :class="['password-tab', item.status ? 'active-tab' : '']"
+                      style="margin-left: 5px;"
+                      :label="item.value">
+                      <span class="checkbox-item" @click="handleClickLabel(item)">{{item.label}}</span>
+                    </bk-checkbox>
+                  </bk-checkbox-group>
+                  <div class="edit-info" @click="passwordExpireTemplate">
+                    <span style="font-size:14px">{{ $t('编辑通知模板') }}</span>
+                    <AngleUp v-if="isDropdownPasswordExpire" />
+                    <AngleDown v-else />
+                  </div>
+                </div>
+              </template>
+            </NotifyEditorTemplate>
+          </bk-form-item>
+        </Row>
+      </template>
+    </bk-form>
+    <div class="footer">
+      <bk-button theme="primary" class="mr8" @click="handleSubmit" :loading="btnLoading">{{ $t('提交') }}</bk-button>
+      <bk-button @click="emit('cancel')">{{ $t('取消') }}</bk-button>
     </div>
-  </bk-loading>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { Message } from 'bkui-vue';
-import { onMounted, ref } from 'vue';
+import { InfoBox } from 'bkui-vue';
+import { AngleDown, AngleUp } from 'bkui-vue/lib/icon';
+import { defineEmits, defineProps, h, onMounted, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
+import Row from '@/components/layouts/row.vue';
+import NotifyEditorTemplate from '@/components/notify-editor/NotifyEditorTemplate.vue';
 import { useValidate } from '@/hooks';
-import { getDataSourceList, getIdpsDetails, patchIdps } from '@/http';
-import router from '@/router/index';
-
+import {
+  getDataSourceDetails,
+  getDefaultConfig,
+  newDataSource,
+  putDataSourceDetails,
+  randomPasswords,
+} from '@/http';
+import { t } from '@/language/index';
+import { NOTIFICATION_METHODS, passwordMustIncludes, passwordNotAllowed, REMIND_DAYS, VALID_TIME } from '@/utils';
+
+const route = useRoute();
 const validate = useValidate();
 
-const emit = defineEmits(['cancelEdit']);
+const emit = defineEmits(['cancel', 'success']);
 const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
+  currentId: {
+    type: String,
+    default: '',
   },
 });
 
 const formRef = ref();
+// 初始密码
+const isPasswordInitial = ref(false);
+const isDropdownPasswordInitial = ref(false);
+// 密码到期
+const isPasswordExpire = ref(false);
+const isDropdownPasswordExpire = ref(false);
 const isLoading = ref(false);
-const authSourceData = ref({
+const passwordRuleError = ref(false);
+const passwordCountError = ref(false);
+const passwordConfigError = ref(false);
+const enabledMethodsError = ref(false);
+
+const formData = reactive({
   name: '',
-  open: false,
+  config: {},
 });
-const onDataSources = ref([]);
-const notDataSources = ref([]);
-const btnLoading = ref(false);
 
-const rules = {
+const rulesInfo = {
   name: [validate.required, validate.name],
+  min_length: [validate.required],
 };
 
-const cardRef = ref();
-
 onMounted(async () => {
+  isLoading.value = true;
   try {
-    isLoading.value = true;
-    if (props.data.id) {
-      const [authRes, dataRes] = await Promise.all([
-        getIdpsDetails(props.data.id),
-        getDataSourceList(''),
-      ]);
-      authSourceData.value = authRes.data;
-      processMatchRules(dataRes.data);
+    if (props.currentId) {
+      // 获取数据源详情
+      const res = await getDataSourceDetails(props.currentId);
+      formData.name = res?.data?.name;
+      if (!res?.data?.plugin_config?.enable_account_password_login) {
+        const demo = await getDefaultConfig('local');
+        formData.config = {
+          ...demo?.data?.config,
+          enable_account_password_login: false,
+        };
+      } else {
+        formData.config = res?.data?.plugin_config;
+      }
+    } else {
+      // 获取默认配置
+      const res = await getDefaultConfig('local');
+      formData.config = res?.data?.config;
     }
-  } catch (error) {
-    console.error(error);
+  } catch (e) {
+    console.warn(e);
   } finally {
     isLoading.value = false;
   }
 });
 
-const processMatchRules = (list) => {
-  const dataSourceIds = authSourceData.value.data_source_match_rules.map(item => item.data_source_id);
-  onDataSources.value = list
-    .filter(val => dataSourceIds.includes(val.id))
-    .map(val => ({
-      data_source_id: val.id,
-      data_source_name: val.name,
-      field_compare_rules: authSourceData.value.data_source_match_rules
-        .find(item => item.data_source_id === val.id).field_compare_rules,
-    }));
-  notDataSources.value = list
-    .filter(val => !dataSourceIds.includes(val.id) && val.plugin_id === 'local')
-    .map(val => ({
-      data_source_id: val.id,
-      data_source_name: val.name,
-    }));
+// 监听密码规则
+watch(() => formData.config?.password_rule, (value) => {
+  if (!value) return;
+  const list = Object.entries(value).filter(([key]) => passwordMustIncludes[key]);
+  const list2 = Object.entries(value).filter(([key]) => passwordNotAllowed[key]);
+
+  passwordRuleError.value = !list.some(([, val]) => val);
+  passwordConfigError.value = !list2.some(([, val]) => val);
+
+  const count = formData.config?.password_rule?.not_continuous_count;
+  const isCountInRange = count >= 5 && count <= 10;
+
+  if (!passwordConfigError.value && isCountInRange) {
+    passwordCountError.value = false;
+  } else if (!passwordConfigError.value && !isCountInRange) {
+    passwordCountError.value = !isCountInRange;
+  } else {
+    passwordCountError.value = count === 0 && !passwordConfigError.value;
+    passwordConfigError.value = count !== 0 && passwordConfigError.value;
+  }
+}, { deep: true });
+
+watch(() => formData.config?.password_rule?.not_continuous_count, (value, oldVal) => {
+  if (!value) return;
+  if (value !== oldVal) {
+    window.changeInput = true;
+  }
+  const list = Object.entries(formData.config?.password_rule)
+    .filter(([key, val]) => passwordNotAllowed[key] && val)
+    .map(val => val);
+
+  if (value === 0) return;
+
+  const isValueInRange = value >= 5 && value <= 10;
+  passwordCountError.value = !isValueInRange;
+  passwordConfigError.value = !!list.every(v => !v);
+});
+
+// 监听密码生成方式
+watch(() => formData.config?.password_initial?.generate_method, (value) => {
+  enabledMethodsError.value = value === 'random' && !formData.config.password_initial.notification.enabled_methods.length;
+  if (value === 'random') {
+    formData.config.password_initial.fixed_password = null;
+  }
+});
+
+watch(() => formData.config?.password_initial?.notification?.enabled_methods, (value) => {
+  if (formData.config?.password_initial?.generate_method === 'fixed') {
+    return enabledMethodsError.value = false;
+  }
+  enabledMethodsError.value = !value.length;
+});
+
+const maxTrailTimesList = reactive([
+  { times: 3, text: `3 ${t('次')}` },
+  { times: 5, text: `5 ${t('次')}` },
+  { times: 10, text: `10 ${t('次')}` },
+]);
+
+// 编辑通知方式
+const handleEditorText = (html, text, key, type) => {
+  const templates = ref(key === 'password_expiring' || key === 'password_expired'
+    ? formData.config.password_expire.notification.templates
+    : formData.config.password_initial.notification.templates);
+  templates.value.forEach((item) => {
+    if (item.method === type && item.scene === key) {
+      item.content = text;
+      item.content_html = html;
+    }
+  });
 };
 
-const handleOpen = (item) => {
-  router.push({
-    name: 'newLocal',
-    params: {
-      type: 'local',
-      id: item.data_source_id,
-    },
+const handleClickLabel = (item) => {
+  NOTIFICATION_METHODS.forEach((element) => {
+    element.status = element.value === item.value;
   });
 };
 
-const handleChange = () => {
-  window.changeInput = true;
+const passwordInitialTemplate = () => {
+  isPasswordInitial.value = !isPasswordInitial.value;
+  isDropdownPasswordInitial.value = !isDropdownPasswordInitial.value;
 };
 
-const handleCancel = () => {
-  emit('cancelEdit');
+const passwordExpireTemplate = () => {
+  isPasswordExpire.value = !isPasswordExpire.value;
+  isDropdownPasswordExpire.value = !isDropdownPasswordExpire.value;
 };
 
+const btnLoading = ref(false);
 const handleSubmit = async () => {
-  await formRef.value.validate();
-  btnLoading.value = true;
-  patchIdps({
-    id: props.data.id,
-    name: authSourceData.value.name,
-  }).then(() => {
-    Message({ theme: 'success', message: t('认证源更新成功') });
-    window.changeInput = false;
-    emit('cancelEdit');
-  })
-    .catch((e) => {
-      console.warn(e);
-      Message({ theme: 'error', message: t('认证源更新失败') });
-    })
-    .finally(() => {
-      btnLoading.value = false;
-    });
+  try {
+    if (passwordRuleError.value
+      || passwordCountError.value
+      || passwordConfigError.value
+      || enabledMethodsError.value) return;
+    await formRef.value.validate();
+    btnLoading.value = true;
+    const params = {
+      name: formData.name,
+      plugin_id: route.params.type,
+      field_mapping: [],
+    };
+    if (formData.config.enable_account_password_login) {
+      params.plugin_config = {
+        password_rule: formData.config.password_rule,
+        password_initial: formData.config.password_initial,
+        password_expire: formData.config.password_expire,
+        enable_account_password_login: formData.config.enable_account_password_login,
+      };
+    } else {
+      params.plugin_config = {
+        password_rule: null,
+        password_initial: null,
+        password_expire: null,
+        enable_account_password_login: false,
+      };
+    }
+    props.currentId ? updateDataSource(params) : getDataSource(params);
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    btnLoading.value = false;
+  }
 };
-</script>
-
-<style lang="less" scoped>
-.details-wrapper {
-  height: calc(100vh - 52px);
-  padding: 20px 24px;
-  background: #F5F7FA;
-
-  .auth-source-form {
-    .content-item {
-      padding: 0 24px;
-      margin-bottom: 16px;
-      background: #fff;
-      border-radius: 2px;
-      box-shadow: 0 2px 4px 0 #1919290d;
-
-      .item-title {
-        padding: 16px 0;
-        font-size: 14px;
-        font-weight: 700;
-      }
-
-      .basic-config {
-        padding-bottom: 12px;
-
-        p {
-          margin-bottom: 12px;
-          font-size: 14px;
-          color: #63656E;
-        }
-
-        .source-name {
-          // width: 622px;
-          height: 40px;
-          padding-left: 24px;
-          margin-bottom: 12px;
-          line-height: 40px;
-          color: #313238;
-          background: #F5F7FA;
-          border-radius: 2px;
-        }
-
-        .off {
-          .source-name {
-            position: relative;
-            color: #C4C6CC;
-
-            ::v-deep .text-ov {
-              width: 535px;
-            }
-
-            .bk-button {
-              position: absolute;
-              top: 13px;
-              right: 16px;
-            }
-          }
-        }
-      }
-
-      .content-matching {
-        padding-bottom: 8px;
-
-        ::v-deep .exception-part {
-          position: relative;
-          width: 400px;
 
-          .bk-exception-img {
-            width: 340px;
-            height: 170px;
-          }
-
-          .bk-exception-description {
-            position: absolute;
-            bottom: 0;
-            font-size: 14px;
-          }
-        }
-
-        .content-box {
-          position: relative;
-
-          .or {
-            position: absolute;
-            top: -16px;
-            left: -22px;
-            display: inline-block;
-            width: 19px;
-            height: 16px;
-            line-height: 16px;
-            color: #FE9C00;
-            text-align: center;
-            background: #FFF3E1;
-            border-radius: 2px;
-
-            &::before {
-              position: absolute;
-              top: -16px;
-              left: 10px;
-              width: 12px;
-              height: 16px;
-              border: 1px solid #DCDEE5;
-              border-right: transparent;
-              border-bottom: transparent;
-              border-top-left-radius: 2px;
-              content: '';
-            }
-
-            &::after {
-              position: absolute;
-              top: 16px;
-              left: 10px;
-              width: 12px;
-              height: 16px;
-              border: 1px solid #DCDEE5;
-              border-top: transparent;
-              border-right: transparent;
-              border-bottom-left-radius: 2px;
-              content: '';
-            }
-          }
-        }
-
-        .data-source-title {
-          position: relative;
-          padding: 0 24px;
-          line-height: 32px;
-          background: #F0F1F5;
-          border-radius: 2px 2px 0 0;
-        }
-
-        .field-rules {
-          display: flex;
-          margin-bottom: 16px;
-          background: #FAFBFD;
-          border-radius: 2px;
-
-          dl {
-            padding: 12px 0 12px 50px;;
-
-            dt {
-              font-size: 14px;
-              line-height: 22px;
-              color: #979BA5;
-            }
-
-            .source-field {
-              max-width: 250px;
-              min-width: 120px;
-              font-size: 14px;
-              line-height: 22px;
-              color: #313238;
-            }
-          }
-        }
-      }
-
-      ::v-deep .bk-form-item {
-        padding-bottom: 24px;
-        margin-bottom: 0;
-        font-size: 14px;
-
-        &:last-child {
-          margin-bottom: 16px;
-        }
-
-        .bk-radio-button {
-          .bk-radio-button-label {
-            font-size: 14px !important;
-          }
-        }
-
-        .bk-radio-label {
-          font-size: 14px !important;
-        }
-
-        .error-text {
-          font-size: 12px;
-          line-height: 1;
-          color: #ea3636;
-          animation: form-error-appear-animation .15s;
-        }
-      }
-
-      .data-source-matching {
-        width: 622px;
-        margin-left: 59px;
-        border-radius: 2px;
-
-        .hover-item {
-          cursor: pointer;
-        }
-
-        .matching-item {
-          position: relative;
-          padding: 16px 16px 16px 24px;
-          margin-bottom: 16px;
-          background: #F5F7FA;
-
-          .bk-sq-icon {
-            position: absolute;
-            top: -6px;
-            right: -6px;
-            font-size: 20px;
-            color: #EA3636;
-          }
-
-          .or {
-            position: absolute;
-            top: -16px;
-            left: -22px;
-            display: inline-block;
-            width: 19px;
-            height: 16px;
-            line-height: 16px;
-            color: #FE9C00;
-            text-align: center;
-            background: #FFF3E1;
-            border-radius: 2px;
-
-            &::before {
-              position: absolute;
-              top: -27px;
-              left: 10px;
-              width: 12px;
-              height: 27px;
-              border: 1px solid #DCDEE5;
-              border-right: transparent;
-              border-bottom: transparent;
-              border-top-left-radius: 2px;
-              content: '';
-            }
-
-            &::after {
-              position: absolute;
-              top: 16px;
-              left: 10px;
-              width: 12px;
-              height: 27px;
-              border: 1px solid #DCDEE5;
-              border-top: transparent;
-              border-right: transparent;
-              border-bottom-left-radius: 2px;
-              content: '';
-            }
-          }
-
-          ::v-deep .bk-form-item {
-            padding-bottom: 24px;
-            margin-bottom: 0;
-            margin-left: 0;
-            font-size: 14px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
-
-          .item-flex-header {
-            display: flex;
-            align-items: center;
-
-            ::v-deep .bk-form-item {
-              padding-bottom: 0;
-              margin-bottom: 0;
-              margin-left: 0;
-              font-size: 14px;
-
-              &:last-child {
-                margin-left: 16px;
-              }
-            }
-          }
-
-          .item-flex {
-            position: relative;
-            display: flex;
-            padding-bottom: 8px;
-            align-items: center;
-
-            ::v-deep .bk-form-item {
-              padding-bottom: 0;
-              margin-bottom: 0;
-              margin-left: 0;
-              font-size: 14px;
-            }
-
-            .auth-source-fields {
-              margin-left: 16px;
-            }
-
-            .user-icon {
-              font-size: 16px;
-              color: #dcdee5;
-
-              &:hover {
-                color: #c4c6cc;
-              }
-            }
-
-            .icon-plus-fill {
-              position: absolute;
-              top: 9px;
-              right: 35px;
-            }
-
-            .icon-minus-fill {
-              position: absolute;
-              top: 9px;
-              right: 5px;
-            }
-
-            .and {
-              position: absolute;
-              top: -12px;
-              left: -24px;
-              display: inline-block;
-              width: 24px;
-              height: 16px;
-              line-height: 16px;
-              color: #14A568;
-              text-align: center;
-              background: #E4FAF0;
-              border-radius: 2px;
-
-              &::before {
-                position: absolute;
-                top: -12px;
-                left: 12px;
-                width: 12px;
-                height: 12px;
-                border: 1px solid #DCDEE5;
-                border-right: transparent;
-                border-bottom: transparent;
-                border-top-left-radius: 2px;
-                content: '';
-              }
+const updateDataSource = async (params) => {
+  const data = {
+    id: props.currentId,
+    name: params.name,
+    field_mapping: params.field_mapping,
+    plugin_config: params.plugin_config,
+  };
+  await putDataSourceDetails(data);
+  emit('success');
+};
 
-              &::after {
-                position: absolute;
-                top: 16px;
-                left: 12px;
-                width: 12px;
-                height: 12px;
-                border: 1px solid #DCDEE5;
-                border-top: transparent;
-                border-right: transparent;
-                border-bottom-left-radius: 2px;
-                content: '';
-              }
-            }
-          }
-        }
-      }
+const getDataSource = async (params) => {
+  await newDataSource(params);
+  emit('success');
+};
 
-      .add-data-source {
-        display: flex;
-        width: 622px;
-        height: 32px;
-        margin-left: 59px;
-        font-size: 14px;
-        color: #3A84FF;
-        cursor: pointer;
-        background: #F0F5FF;
-        border: 1px dashed #A3C5FD;
-        border-radius: 2px;
-        align-items: center;
-        justify-content: center;
+const handleChange = () => {
+  window.changeInput = true;
+};
 
-        span {
-          margin-left: 5px;
-        }
-      }
-    }
+const changeAccountPassword = (value) => {
+  if (!value) {
+    InfoBox({
+      title: t('确认要关闭账密登录吗？'),
+      subTitle: h('div', {
+        style: {
+          textAlign: 'left',
+          lineHeight: '24px',
+        },
+      }, [
+        h('p', t('1.关闭后该数据的用户将无法通过账密登录')),
+        h('p', t('2.关闭后，再次开启时，账密规则信息会重置')),
+      ]),
+      onConfirm() {
+        formData.config.enable_account_password_login = value;
+      },
+      onClosed() {
+        formData.config.enable_account_password_login = !value;
+      },
+    });
+  } else {
+    formData.config.enable_account_password_login = value;
   }
+  window.changeInput = true;
+};
 
-  .footer-wrapper {
-    .bk-button {
-      width: 88px;
-      margin-right: 8px;
-    }
+const handleRandomPassword = async () => {
+  try {
+    const passwordRes = await randomPasswords({});
+    formData.config.password_initial.fixed_password = passwordRes.data.password;
+    window.changeInput = true;
+  } catch (e) {
+    console.warn(e);
   }
+};
+</script>
+
+<style lang="less" scoped>
+@import url('@/components/notify-editor/NotifyEditor.less');
+@import url('./Local.less');
+
+.prefix-slot {
+  display: flex;
+  width: 80px;
+  cursor: pointer;
+  background: #e1ecff;
+  align-items: center;
+  justify-content: center;
+}
+
+.error {
+  position: absolute;
+  left: 0;
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: #ea3636;
+  text-align: left;
+  animation: form-error-appear-animation 0.15s;
 }
 </style>
diff --git a/src/pages/src/views/setting/auth-config/LocalView.vue b/src/pages/src/views/setting/auth-config/LocalView.vue
new file mode 100644
index 000000000..77bb63079
--- /dev/null
+++ b/src/pages/src/views/setting/auth-config/LocalView.vue
@@ -0,0 +1,129 @@
+<template>
+  <div v-bkloading="{ loading: isLoading, zIndex: 9 }" class="details-info-wrapper user-scroll-y">
+    <div v-if="openPasswordLogin">
+      <ViewRow :title="$t('基础信息')">
+        <LabelContent :label="$t('名称')"></LabelContent>
+        <LabelContent :label="$t('是否启用')"></LabelContent>
+      </ViewRow>
+      <ViewRow :title="$t('密码规则')">
+        <LabelContent :label="$t('密码长度')">
+          <span>{{ passwordRule?.min_length }}~32{{ $t('位') }}</span>
+        </LabelContent>
+        <LabelContent :label="$t('密码必须包含')">
+          <span>{{ passwordMustIncludesMap(passwordRule) }}</span>
+        </LabelContent>
+        <LabelContent :label="$t('密码不允许')">
+          <span class="value" v-if="passwordRule?.not_continuous_count === 0">--</span>
+          <span class="value" v-else>
+            {{ $t('连续x位出现', { count: passwordRule?.not_continuous_count }) }}
+            {{ passwordNotAllowedMap(passwordRule) }}
+          </span>
+        </LabelContent>
+        <LabelContent :label="$t('密码有效期')">
+          <span>{{ validTimeMap(passwordRule?.valid_time) }}</span>
+        </LabelContent>
+        <LabelContent :label="$t('密码试错次数')">
+          <span>{{ passwordRule?.min_length }}~32{{ $t('位') }}</span>
+        </LabelContent>
+        <LabelContent :label="$t('锁定时间')">
+          <span>{{ passwordRule?.lock_time }}{{ $t('秒') }}</span>
+        </LabelContent>
+      </ViewRow>
+      <ViewRow :title="$t('密码设置')">
+        <LabelContent :label="$t('初始密码获取方式')">{{ passwordMethod }}</LabelContent>
+        <LabelContent :label="$t('初始密码通知方式')">
+          {{ notificationMap(passwordInitial?.notification?.enabled_methods) }}
+        </LabelContent>
+        <LabelContent :label="$t('密码到期提醒时间')">
+          {{ noticeTimeMap(passwordExpire?.remind_before_expire) }}
+        </LabelContent>
+        <LabelContent :label="$t('密码到期通知方式')">
+          {{ notificationMap(passwordExpire?.notification?.enabled_methods) }}
+        </LabelContent>
+      </ViewRow>
+    </div>
+    <div class="details-info-box" v-else>
+      <bk-exception
+        type="empty"
+        :description="$t('暂未开通账密登录')">
+      </bk-exception>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, onMounted, ref } from 'vue';
+
+import LabelContent from '@/components/layouts/LabelContent.vue';
+import ViewRow from '@/components/layouts/ViewRow.vue';
+import { getDataSourceDetails } from '@/http';
+import { t } from '@/language/index';
+import { noticeTimeMap, notificationMap, passwordMustIncludesMap, passwordNotAllowedMap, validTimeMap } from '@/utils';
+
+const props = defineProps({
+  currentId: {
+    type: String,
+    default: '',
+  },
+});
+
+const isLoading = ref(false);
+const openPasswordLogin = ref(true);
+const passwordRule = ref({});
+const passwordInitial = ref({});
+const passwordExpire = ref({});
+const plugin = ref({});
+
+const passwordMethod = computed(() => (passwordInitial.value?.generate_method === 'random' ? t('随机') : t('固定')));
+
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    const res = await getDataSourceDetails(props.currentId);
+    openPasswordLogin.value = res.data?.plugin_config?.enable_account_password_login;
+    passwordRule.value = res.data?.plugin_config?.password_rule;
+    passwordInitial.value = res.data?.plugin_config?.password_initial;
+    passwordExpire.value = res.data?.plugin_config?.password_expire;
+    plugin.value = res.data?.plugin;
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.details-info-wrapper {
+  height: calc(100vh - 52px);
+  padding: 28px 40px;
+
+  .row-wrapper {
+    padding-bottom: 24px;
+    border-bottom: 1px solid #EAEBF0;
+  }
+}
+
+::v-deep .label-content .label-key {
+  width: 150px !important;
+}
+
+::v-deep .details-info-box {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  background: #fff;
+
+  .bk-exception {
+    .bk-exception-description {
+      margin-top: -30px;
+      font-size: 24px;
+      color: #63656E;
+    }
+
+    .bk-button {
+      width: 88px;
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/setting/auth-config/ViewDetails.vue b/src/pages/src/views/setting/auth-config/ViewDetails.vue
deleted file mode 100644
index fae30d7ba..000000000
--- a/src/pages/src/views/setting/auth-config/ViewDetails.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<template>
-  <bk-loading class="details-wrapper user-scroll-y" :loading="isLoading">
-    <div class="details-type">
-      <img :src="authSourceData.plugin?.logo">
-      <div>
-        <p class="title">{{ authSourceData.plugin?.name }}</p>
-        <p class="subtitle">{{ authSourceData.plugin?.description }}</p>
-      </div>
-    </div>
-    <div class="details-url" v-if="authSourceData.callback_uri">
-      <p class="title">{{ $t('回调地址') }}</p>
-      <div class="content">
-        <p>{{ authSourceData.callback_uri }}</p>
-        <i class="user-icon icon-copy" @click="copy(authSourceData.callback_uri)" />
-      </div>
-    </div>
-    <div class="details-info">
-      <p class="title">{{ $t('认证源信息') }}</p>
-      <ul class="content">
-        <li>
-          <span class="item-title">{{ $t('名称') }}：</span>
-          <div>{{ authSourceData.name }}</div>
-        </li>
-        <li>
-          <span class="item-title">{{ $t('是否启用') }}：</span>
-          <div></div>
-        </li>
-        <li v-if="authSourceData.plugin?.id === 'local'">
-          <span class="item-title">{{ $t('基础配置') }}：</span>
-          <div class="basic-config">
-            <p v-if="onDataSources.length">{{ $t('以下数据源已开启「账密登录」') }}</p>
-            <div class="on">
-              <bk-overflow-title
-                type="tips"
-                class="source-name"
-                v-for="(item, index) in onDataSources"
-                :key="index">
-                {{ item.data_source_name }}
-              </bk-overflow-title>
-            </div>
-            <p v-if="notDataSources.length">{{ $t('以下数据源未开启「账密登录」') }}</p>
-            <div class="off" v-for="(item, index) in notDataSources" :key="index">
-              <bk-overflow-title
-                type="tips"
-                class="source-name">
-                {{ item.data_source_name }}
-                <bk-button text theme="primary" @click="handleOpen(item)">{{ $t('去开启') }}</bk-button>
-              </bk-overflow-title>
-            </div>
-          </div>
-        </li>
-        <template v-else>
-          <div v-if="authSourceData.plugin?.id === 'wecom'">
-            <li>
-              <span class="item-title">{{ $t('企业 ID') }}：</span>
-              <div>{{ authSourceData.plugin_config?.corp_id }}</div>
-            </li>
-            <li>
-              <span class="item-title">Agent ID：</span>
-              <div>{{ authSourceData.plugin_config?.agent_id }}</div>
-            </li>
-            <li>
-              <span class="item-title">Secret：</span>
-              <div>**********</div>
-            </li>
-          </div>
-          <div v-else>
-            <li v-for="(item, key, index) in authSourceData.plugin_config" :key="index">
-              <span class="item-title">{{ key }}：</span>
-              <div>{{ item }}</div>
-            </li>
-          </div>
-          <li>
-            <span class="item-title">{{ $t('登录模式') }}：</span>
-            <div>{{ $t('仅用于登录') }}</div>
-          </li>
-        </template>
-        <li>
-          <span class="item-title">{{ $t('数据源匹配') }}：</span>
-          <div class="content-matching">
-            <bk-exception
-              v-if="onDataSources.length === 0"
-              class="exception-part"
-              type="empty"
-              scene="part"
-              :description="$t('暂无数据源匹配')"
-            />
-            <div class="content-box" v-else v-for="(item, index) in onDataSources" :key="index">
-              <bk-overflow-title type="tips" class="data-source-title">{{ item.data_source_name }}</bk-overflow-title>
-              <div class="field-rules">
-                <dl>
-                  <dt>{{ $t('数据源字段') }}：</dt>
-                  <bk-overflow-title
-                    type="tips"
-                    class="source-field"
-                    v-for="(val, i) in item.field_compare_rules"
-                    :key="i">
-                    {{ val.target_field }}
-                  </bk-overflow-title>
-                </dl>
-                <dl>
-                  <dt>{{ $t('认证源字段') }}：</dt>
-                  <bk-overflow-title
-                    type="tips"
-                    class="source-field"
-                    v-for="(val, i) in item.field_compare_rules"
-                    :key="i">
-                    {{ val.source_field }}
-                  </bk-overflow-title>
-                </dl>
-              </div>
-              <span class="or" v-if="index !== 0">or</span>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </bk-loading>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-import { getDataSourceList, getIdpsDetails } from '@/http';
-import router from '@/router';
-import { copy } from '@/utils';
-
-const emit = defineEmits(['updateRow']);
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const isLoading = ref(false);
-const authSourceData = ref({});
-const onDataSources = ref([]);
-const notDataSources = ref([]);
-
-onMounted(async () => {
-  isLoading.value = true;
-  try {
-    const [authRes, dataRes] = await Promise.all([
-      getIdpsDetails(props.data.id),
-      getDataSourceList(''),
-    ]);
-    authSourceData.value = authRes.data;
-    emit('updateRow', authSourceData.value);
-    processMatchRules(dataRes.data);
-  } catch (error) {
-    console.error(error);
-  } finally {
-    isLoading.value = false;
-  }
-});
-
-const processMatchRules = (list) => {
-  const dataSourceIds = authSourceData.value.data_source_match_rules.map(item => item.data_source_id);
-  onDataSources.value = list
-    .filter(val => dataSourceIds.includes(val.id))
-    .map(val => ({
-      data_source_id: val.id,
-      data_source_name: val.name,
-      field_compare_rules: authSourceData.value.data_source_match_rules
-        .find(item => item.data_source_id === val.id).field_compare_rules,
-    }));
-  notDataSources.value = list
-    .filter(val => !dataSourceIds.includes(val.id) && val.plugin_id === 'local')
-    .map(val => ({
-      data_source_id: val.id,
-      data_source_name: val.name,
-    }));
-};
-
-const handleOpen = (item) => {
-  router.push({
-    name: 'newLocal',
-    params: {
-      type: 'local',
-      id: item.data_source_id,
-    },
-  });
-};
-</script>
-
-<style lang="less" scoped>
-.details-wrapper {
-  height: calc(100vh - 52px);
-  padding: 28px 40px;
-
-  .details-type {
-    display: flex;
-    padding: 10px 0;
-    margin-bottom: 24px;
-    background: #F5F7FA;
-    border-radius: 2px;
-    align-items: center;
-
-    img {
-      width: 24px;
-      height: 24px;
-      margin: 0 15px;
-    }
-
-    .title {
-      font-size: 14px;
-      color: #313238;
-    }
-
-    .subtitle {
-      font-size: 12px;
-      color: #979BA5;
-    }
-  }
-
-  .details-url {
-    padding-bottom: 24px;
-    border-bottom: 1px solid #EAEBF0;
-
-    .title {
-      margin-bottom: 12px;
-      font-size: 14px;
-      font-weight: 700;
-      line-height: 22px;
-      color: #63656E;
-    }
-
-    .content {
-      display: flex;
-      padding: 8px 12px;
-      color: #313238;
-      background: #F0F5FF;
-      align-items: center;
-      justify-content: space-between;
-
-      i {
-        width: 5%;
-        font-size: 14px;
-        color: #3A84FF;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .details-info {
-    margin-top: 24px;
-
-    .title {
-      margin-bottom: 12px;
-      font-size: 14px;
-      font-weight: 700;
-      line-height: 22px;
-      color: #63656E;
-    }
-
-    .content {
-      li {
-        display: flex;
-        padding: 9px 0;
-        font-size: 14px;
-
-        .basic-config {
-          width: 100%;
-
-          p {
-            margin-bottom: 12px;
-            font-size: 14px;
-            color: #313238;
-          }
-
-          .source-name {
-            width: 460px;
-            height: 40px;
-            padding-left: 24px;
-            margin-bottom: 12px;
-            line-height: 40px;
-            color: #313238;
-            background: #F5F7FA;
-            border-radius: 2px;
-          }
-
-          .off {
-            .source-name {
-              position: relative;
-              color: #C4C6CC;
-
-              ::v-deep .text-ov {
-                width: 370px;
-              }
-
-              .bk-button {
-                position: absolute;
-                top: 13px;
-                right: 16px;
-              }
-            }
-          }
-        }
-
-        .item-title {
-          min-width: 100px;
-          color: #63656E;
-          text-align: right;
-        }
-
-        div {
-          color: #313238;
-        }
-      }
-
-      .content-matching {
-        width: 100%;
-
-        ::v-deep .exception-part {
-          position: relative;
-
-          .bk-exception-img {
-            width: 340px;
-            height: 170px;
-          }
-
-          .bk-exception-description {
-            position: absolute;
-            bottom: 0;
-            font-size: 14px;
-          }
-        }
-
-        .content-box {
-          position: relative;
-
-          .or {
-            position: absolute;
-            top: -16px;
-            left: -22px;
-            display: inline-block;
-            width: 19px;
-            height: 16px;
-            line-height: 16px;
-            color: #FE9C00;
-            text-align: center;
-            background: #FFF3E1;
-            border-radius: 2px;
-
-            &::before {
-              position: absolute;
-              top: -16px;
-              left: 10px;
-              width: 12px;
-              height: 16px;
-              border: 1px solid #DCDEE5;
-              border-right: transparent;
-              border-bottom: transparent;
-              border-top-left-radius: 2px;
-              content: '';
-            }
-
-            &::after {
-              position: absolute;
-              top: 16px;
-              left: 10px;
-              width: 12px;
-              height: 16px;
-              border: 1px solid #DCDEE5;
-              border-top: transparent;
-              border-right: transparent;
-              border-bottom-left-radius: 2px;
-              content: '';
-            }
-          }
-        }
-
-        .data-source-title {
-          position: relative;
-          width: 460px;
-          padding: 0 24px;
-          line-height: 32px;
-          background: #F0F1F5;
-          border-radius: 2px 2px 0 0;
-        }
-
-        .field-rules {
-          display: flex;
-          margin-bottom: 16px;
-          background: #FAFBFD;
-          border-radius: 2px;
-
-          dl {
-            padding: 12px 50px;
-
-            dt {
-              font-size: 14px;
-              line-height: 22px;
-              color: #979BA5;
-            }
-
-            .source-field {
-              width: 120px;
-              font-size: 14px;
-              line-height: 22px;
-              color: #313238;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/pages/src/views/setting/auth-config/WeCom.less b/src/pages/src/views/setting/auth-config/WeCom.less
index bb369a5fb..f0042da1a 100644
--- a/src/pages/src/views/setting/auth-config/WeCom.less
+++ b/src/pages/src/views/setting/auth-config/WeCom.less
@@ -1,217 +1,68 @@
 .details-wrapper {
-  height: calc(100vh - 52px);
+  height: calc(100vh - 85px);
+  padding: 20px 24px;
   background: #F5F7FA;
 
-  .box {
-    height: calc(100% - 48px);
-    padding: 20px 24px;
-    margin-bottom: 48px;
-  }
-
-  .details-type {
+  .item-flex-header {
     display: flex;
-    padding: 10px 16px;
-    margin-bottom: 16px;
-    background: #FFF;
-    border-radius: 2px;
     align-items: center;
 
-    .title {
+    ::v-deep .bk-form-item {
+      padding: 0;
+      margin-bottom: 0;
+      margin-left: 0;
       font-size: 14px;
-      color: #313238;
-    }
 
-    .subtitle {
-      font-size: 12px;
-      color: #979BA5;
+      &:last-child {
+        margin-left: 12px;
+      }
     }
   }
 
-  .auth-source-form {
-    .content-item {
-      margin-bottom: 16px;
-      background: #fff;
-      border-radius: 2px;
-      box-shadow: 0 2px 4px 0 #1919290d;
-
-      .item-title {
-        padding: 16px 24px;
-        font-size: 14px;
-        font-weight: 700;
-      }
-
-      ::v-deep .bk-form-item {
-        padding: 0 24px 24px;
-        margin-bottom: 0;
-        font-size: 14px;
-
-        &:last-child {
-          margin-bottom: 16px;
-        }
-
-        .bk-radio-button {
-          .bk-radio-button-label {
-            font-size: 14px !important;
-          }
-        }
-
-        .bk-radio-label {
-          font-size: 14px !important;
-        }
-
-        .error-text {
-          font-size: 12px;
-          line-height: 1;
-          color: #ea3636;
-          animation: form-error-appear-animation .15s;
-        }
-      }
-
-      .data-source-matching {
-        padding: 0 24px;
-        border-radius: 2px;
-
-        ::v-deep .bk-form-item {
-          padding: 0;
-        }
-
-        .hover-item {
-          cursor: pointer;
-        }
-
-        .matching-item {
-          position: relative;
-          margin-bottom: 16px;
-
-          .bk-sq-icon {
-            position: absolute;
-            top: -6px;
-            right: -6px;
-            font-size: 20px;
-            color: #EA3636;
-          }
-
-          ::v-deep .bk-form-item {
-            padding-bottom: 24px;
-            margin-bottom: 0;
-            margin-left: 0;
-            font-size: 14px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
-
-          .item-flex-header {
-            display: flex;
-            align-items: center;
-
-            ::v-deep .bk-form-item {
-              padding: 0;
-              margin-bottom: 0;
-              margin-left: 0;
-              font-size: 14px;
-
-              &:last-child {
-                margin-left: 12px;
-              }
-            }
-          }
-
-          .item-flex {
-            position: relative;
-            display: flex;
-            padding-bottom: 8px;
-            align-items: center;
-
-            ::v-deep .bk-form-item {
-              padding-bottom: 0;
-              margin-bottom: 0;
-              margin-left: 0;
-              font-size: 14px;
-            }
-
-            .auth-source-fields {
-              margin-left: 12px;
-            }
-
-            .user-icon {
-              font-size: 16px;
-              color: #dcdee5;
-
-              &:hover {
-                color: #c4c6cc;
-              }
-
-              &.forbid {
-                color: #EAEBF0;
-              }
-            }
-
-            .icon-plus-fill {
-              position: absolute;
-              top: 7px;
-              right: 30px;
-            }
+  .item-flex {
+    position: relative;
+    display: flex;
+    padding-bottom: 8px;
+    align-items: center;
 
-            .icon-minus-fill {
-              position: absolute;
-              top: 7px;
-              right: 4px;
-            }
-          }
-        }
-      }
+    ::v-deep .bk-form-item {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      margin-left: 0;
+      font-size: 14px;
+    }
 
-      .add-data-source {
-        display: flex;
-        height: 32px;
-        margin: 0 24px;
-        font-size: 14px;
-        color: #3A84FF;
-        cursor: pointer;
-        background: #F0F5FF;
-        border: 1px dashed #A3C5FD;
-        border-radius: 2px;
-        align-items: center;
-        justify-content: center;
+    .auth-source-fields {
+      margin-left: 12px;
+    }
 
-        span {
-          margin-left: 5px;
-        }
-      }
+    .user-icon {
+      font-size: 16px;
+      color: #dcdee5;
 
-      .forbid-data-source {
-        color: #fff;
-        cursor: not-allowed;
-        background-color: #dcdee5;
-        border: 1px dashed #dcdee5;
+      &:hover {
+        color: #c4c6cc;
       }
 
-      ::v-deep .bk-schema-form {
-        .bk-form-item {
-          width: 600px;
-          padding-bottom: 0;
-          font-size: 14px;
-
-          &:last-child {
-            padding-bottom: 24px;
-          }
-        }
+      &.forbid {
+        color: #EAEBF0;
       }
     }
-  }
 
-  .footer {
-    position: absolute;
+    .icon-plus-fill {
+      position: absolute;
+      top: 7px;
+      right: 30px;
+    }
 
-    .bk-button {
-      width: 88px;
-      margin-right: 8px;
+    .icon-minus-fill {
+      position: absolute;
+      top: 7px;
+      right: 4px;
     }
   }
 
-  .fixed {
+  .footer {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -223,6 +74,11 @@
     line-height: 48px;
     background: #FAFBFD;
     box-shadow: 0 -1px 0 0 #DCDEE5;
+
+    .bk-button {
+      width: 88px;
+      margin-right: 8px;
+    }
   }
 }
 
diff --git a/src/pages/src/views/setting/auth-config/WeCom.vue b/src/pages/src/views/setting/auth-config/WeCom.vue
index 38afcbe53..4988a8807 100644
--- a/src/pages/src/views/setting/auth-config/WeCom.vue
+++ b/src/pages/src/views/setting/auth-config/WeCom.vue
@@ -1,161 +1,109 @@
 <template>
   <div class="details-wrapper user-scroll-y" v-bkloading="{ loading: isLoading, zIndex: 9 }">
-    <div ref="boxRef" class="box">
-      <div class="details-type">
-        <img :src="authSourceData.plugin?.logo" class="w-[24px] h-[24px] mr-[15px]">
-        <div>
-          <p class="title">{{ authSourceData.plugin?.name }}</p>
-          <p class="subtitle">{{ authSourceData.plugin?.description }}</p>
+    <bk-form
+      class="auth-source-form"
+      ref="formRef"
+      form-type="vertical"
+      :model="formData"
+      :rules="rules">
+      <Row :title="$t('基本信息')">
+        <bk-form-item :label="$t('名称')" property="name" required>
+          <bk-input v-model="formData.name" :placeholder="validate.name.message" @change="handleChange" />
+        </bk-form-item>
+        <bk-form-item label="是否启用" required>
+          <bk-switcher
+            v-model="formData.open"
+            size="large"
+            theme="primary"
+          />
+        </bk-form-item>
+      </Row>
+      <Row :title="$t('基础配置')" v-if="formData.plugin_config">
+        <bk-form-item :label="$t('企业 ID')" property="plugin_config.corp_id" required>
+          <bk-input v-model="formData.plugin_config.corp_id" @change="handleChange" />
+        </bk-form-item>
+        <bk-form-item label="Agent ID" property="plugin_config.agent_id" required>
+          <bk-input v-model="formData.plugin_config.agent_id" @change="handleChange" />
+        </bk-form-item>
+        <bk-form-item label="Secret" property="plugin_config.secret" required>
+          <bk-input type="password" v-model="formData.plugin_config.secret" @change="handleChange" />
+        </bk-form-item>
+      </Row>
+      <Row :title="$t('登录模式')">
+        <bk-form-item>
+          <bk-radio-group v-model="LoginMethod">
+            <bk-radio-button label="a">{{ $t('仅用于登录') }}</bk-radio-button>
+            <bk-radio-button label="b" :disabled="true">{{ $t('可用于登录注册') }}</bk-radio-button>
+          </bk-radio-group>
+        </bk-form-item>
+      </Row>
+      <Row :title="$t('登录模式')">
+        <div class="item-flex-header">
+          <bk-form-item class="w-[236px]" :label="$t('数据源字段')" required />
+          <bk-form-item class="w-[236px] auth-source-fields" :label="$t('认证源字段')" required />
         </div>
-      </div>
-      <div ref="cardRef">
-        <bk-form
-          class="auth-source-form"
-          ref="formRef"
-          form-type="vertical"
-          :model="formData"
-          :rules="rules">
-          <div class="content-item">
-            <p class="item-title">{{ $t('基本信息') }}</p>
-            <bk-form-item :label="$t('名称')" property="name" required>
-              <bk-input v-model="formData.name" :placeholder="validate.name.message" @change="handleChange" />
+        <div v-for="(item, index) in formData.data_source_match_rules" :key="index">
+          <div class="item-flex" v-for="(field, i) in item.field_compare_rules" :key="i">
+            <bk-form-item
+              class="w-[236px]"
+              error-display-type="tooltips"
+              :property="`data_source_match_rules.${index}.field_compare_rules.${i}.target_field`"
+              :rules="rulesData.target_field">
+              <bk-select
+                v-model="field.target_field"
+                @change="changeSourceField"
+                @toggle="handleToggle(index)"
+              >
+                <bk-option
+                  class="option-select"
+                  v-for="option in item.targetFields"
+                  :key="option.name"
+                  :id="option.name"
+                  :name="option.name"
+                  :disabled="option.disabled">
+                  <span>{{option.name}}</span>
+                  <span>{{option.type}}</span>
+                </bk-option>
+              </bk-select>
             </bk-form-item>
-            <bk-form-item label="是否启用" required>
-              <bk-switcher
-                v-model="formData.open"
-                size="large"
-                theme="primary"
-              />
+            <bk-form-item
+              class="w-[236px] auth-source-fields"
+              error-display-type="tooltips"
+              :property="`data_source_match_rules.${index}.field_compare_rules.${i}.source_field`"
+              :rules="rulesData.source_field">
+              <bk-input v-model="field.source_field" @focus="handleChange" />
             </bk-form-item>
+            <bk-button
+              text
+              @click="handleAddItem(item.field_compare_rules, i)"
+            >
+              <i class="user-icon icon-plus-fill" />
+            </bk-button>
+            <bk-button
+              text
+              :disabled="item.field_compare_rules.length === 1"
+              @click="handleDeleteItem(field.target_field, index, item.field_compare_rules, i)">
+              <i :class="['user-icon icon-minus-fill', { 'forbid': item.field_compare_rules.length === 1 }]" />
+            </bk-button>
           </div>
-          <div class="content-item" v-if="formData.plugin_config">
-            <p class="item-title">{{ $t('基础配置') }}</p>
-            <bk-form-item :label="$t('企业 ID')" property="plugin_config.corp_id" required>
-              <bk-input v-model="formData.plugin_config.corp_id" @change="handleChange" />
-            </bk-form-item>
-            <bk-form-item label="Agent ID" property="plugin_config.agent_id" required>
-              <bk-input v-model="formData.plugin_config.agent_id" @change="handleChange" />
-            </bk-form-item>
-            <bk-form-item label="Secret" property="plugin_config.secret" required>
-              <bk-input type="password" v-model="formData.plugin_config.secret" @change="handleChange" />
-            </bk-form-item>
-          </div>
-          <div class="content-item">
-            <p class="item-title">{{ $t('登录模式') }}</p>
-            <bk-form-item>
-              <bk-radio-group v-model="LoginMethod">
-                <bk-radio-button label="a">{{ $t('仅用于登录') }}</bk-radio-button>
-                <bk-radio-button label="b" :disabled="true">{{ $t('可用于登录注册') }}</bk-radio-button>
-              </bk-radio-group>
-            </bk-form-item>
-          </div>
-          <div class="content-item pb-[24px]">
-            <p class="item-title">{{ $t('数据源匹配') }}</p>
-            <div class="data-source-matching">
-              <div
-                :class="['matching-item', {
-                  'hover-item': (hoverItem === index) && formData.data_source_match_rules.length > 1
-                }]"
-                v-for="(item, index) in formData.data_source_match_rules"
-                :key="index"
-                @mouseenter="mouseenter(index)"
-                @mouseleave="mouseleave">
-                <bk-form-item
-                  :label="$t('数据源')"
-                  :property="`data_source_match_rules.${index}.data_source_id`"
-                  :rules="rulesData.data_source_id"
-                  required>
-                  <bk-select v-model="item.data_source_id" @change="changeDataSourceId">
-                    <bk-option
-                      v-for="option in dataSourceList"
-                      :key="option.key"
-                      :id="option.key"
-                      :name="option.name"
-                      :disabled="option.disabled">
-                      <span>{{option.name}}</span>
-                    </bk-option>
-                  </bk-select>
-                </bk-form-item>
-                <div class="item-flex-header">
-                  <bk-form-item class="w-[236px]" :label="$t('数据源字段')" required />
-                  <bk-form-item class="w-[236px] auth-source-fields" :label="$t('认证源字段')" required />
-                </div>
-                <div class="item-flex" v-for="(field, i) in item.field_compare_rules" :key="i">
-                  <bk-form-item
-                    class="w-[236px]"
-                    error-display-type="tooltips"
-                    :property="`data_source_match_rules.${index}.field_compare_rules.${i}.target_field`"
-                    :rules="rulesData.target_field">
-                    <bk-select
-                      v-model="field.target_field"
-                      @change="changeSourceField"
-                      @toggle="handleToggle(index)"
-                    >
-                      <bk-option
-                        class="option-select"
-                        v-for="option in item.targetFields"
-                        :key="option.name"
-                        :id="option.name"
-                        :name="option.name"
-                        :disabled="option.disabled">
-                        <span>{{option.name}}</span>
-                        <span>{{option.type}}</span>
-                      </bk-option>
-                    </bk-select>
-                  </bk-form-item>
-                  <bk-form-item
-                    class="w-[236px] auth-source-fields"
-                    error-display-type="tooltips"
-                    :property="`data_source_match_rules.${index}.field_compare_rules.${i}.source_field`"
-                    :rules="rulesData.source_field">
-                    <bk-input v-model="field.source_field" @focus="handleChange" />
-                  </bk-form-item>
-                  <bk-button
-                    text
-                    @click="handleAddItem(item.field_compare_rules, i)"
-                  >
-                    <i class="user-icon icon-plus-fill" />
-                  </bk-button>
-                  <bk-button
-                    text
-                    :disabled="item.field_compare_rules.length === 1"
-                    @click="handleDeleteItem(field.target_field, index, item.field_compare_rules, i)">
-                    <i :class="['user-icon icon-minus-fill', { 'forbid': item.field_compare_rules.length === 1 }]" />
-                  </bk-button>
-                </div>
-                <i
-                  class="bk-sq-icon icon-close-fill"
-                  v-if="formData.data_source_match_rules.length > 1 && hoverItem === index"
-                  @click="handleDelete(item, index)"></i>
-              </div>
-            </div>
-            <div :class="['add-data-source', {
-                   'forbid-data-source': dataSourceList.every(item => item.disabled === true)
-                 }]"
-                 @click="handleAdd">
-              <i class="user-icon icon-add-2"></i>
-              <span>{{ $t('新增数据源匹配') }}</span>
-            </div>
-          </div>
-        </bk-form>
-      </div>
-      <div class="footer" :class="{ 'fixed': isScroll }">
-        <bk-button theme="primary" :loading="btnLoading" @click="handleSubmit">
-          {{ $t('提交') }}
-        </bk-button>
-        <bk-button @click="handleCancel">
-          {{ $t('取消') }}
-        </bk-button>
-      </div>
+        </div>
+      </Row>
+    </bk-form>
+    <div class="footer">
+      <bk-button theme="primary" :loading="btnLoading" @click="handleSubmit">
+        {{ $t('提交') }}
+      </bk-button>
+      <bk-button @click="handleCancel">
+        {{ $t('取消') }}
+      </bk-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { debounce } from 'bkui-vue/lib/shared';
-import { addListener, removeListener } from 'resize-detector';
-import { defineExpose, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { defineEmits, defineProps, onMounted, ref } from 'vue';
 
+import Row from '@/components/layouts/row.vue';
 import { useCustomPlugin, useValidate } from '@/hooks';
 import { getDataSourceList, getFields, getIdpsDetails } from '@/http';
 import { t } from '@/language/index';
@@ -217,14 +165,6 @@ const dataSourceList = ref([]);
 const builtinFields = ref([]);
 const customFields = ref([]);
 
-const boxRef = ref();
-const cardRef = ref();
-const isScroll = ref(false);
-// 按钮超出屏幕吸底
-const handleResize = () => {
-  isScroll.value = 32 >= (boxRef.value.clientHeight - cardRef.value.clientHeight - 42);
-};
-
 onMounted(async () => {
   try {
     isLoading.value = true;
@@ -272,34 +212,21 @@ onMounted(async () => {
   } catch (error) {
     console.error(error);
   } finally {
-    const listenResize = debounce(300, () => handleResize());
-    addListener(boxRef.value as HTMLElement, listenResize);
-    nextTick(handleResize);
     isLoading.value = false;
   }
 });
 
-onBeforeUnmount(() => {
-  removeListener(boxRef.value as HTMLElement, handleResize);
-});
-
 const handleCancel = () => {
   emit('cancelEdit');
 };
 
 const {
-  changeDataSourceId,
   changeSourceField,
   handleToggle,
   handleAddItem,
   handleDeleteItem,
-  handleAdd,
-  handleDelete,
-  mouseenter,
-  mouseleave,
   handleChange,
   handleSubmit,
-  hoverItem,
 } = useCustomPlugin(
   formData,
   dataSourceList,
@@ -309,11 +236,6 @@ const {
   formRef,
   'edit',
 );
-
-defineExpose({
-  boxRef,
-  cardRef,
-});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/pages/src/views/setting/auth-config/WeComView.vue b/src/pages/src/views/setting/auth-config/WeComView.vue
new file mode 100644
index 000000000..4a25ed434
--- /dev/null
+++ b/src/pages/src/views/setting/auth-config/WeComView.vue
@@ -0,0 +1,278 @@
+<template>
+  <bk-loading class="details-wrapper user-scroll-y" :loading="isLoading">
+    <div class="details-type">
+      <img :src="authSourceData.plugin?.logo">
+      <div>
+        <p class="title">{{ authSourceData.plugin?.name }}</p>
+        <p class="subtitle">{{ authSourceData.plugin?.description }}</p>
+      </div>
+    </div>
+    <div class="details-url" v-if="authSourceData.callback_uri">
+      <p class="title">{{ $t('回调地址') }}</p>
+      <div class="content">
+        <p>{{ authSourceData.callback_uri }}</p>
+        <i class="user-icon icon-copy" @click="copy(authSourceData.callback_uri)" />
+      </div>
+    </div>
+    <ViewRow :title="$t('认证源信息')">
+      <LabelContent :label="$t('名称')">{{ authSourceData.name }}</LabelContent>
+      <LabelContent :label="$t('是否启用')"></LabelContent>
+      <LabelContent :label="$t('企业 ID')">{{ authSourceData.plugin_config?.corp_id }}</LabelContent>
+      <LabelContent label="Agent ID">{{ authSourceData.plugin_config?.agent_id }}</LabelContent>
+      <LabelContent label="Secret">**********</LabelContent>
+      <LabelContent :label="$t('登录模式')">{{ $t('仅用于登录') }}</LabelContent>
+      <LabelContent :label="$t('登录认证匹配')">
+        <div class="content-matching">
+          <bk-exception
+            v-if="onDataSources.length === 0"
+            class="exception-part"
+            type="empty"
+            scene="part"
+            :description="$t('暂无数据源匹配')"
+          />
+          <div class="content-box" v-else v-for="(item, index) in onDataSources" :key="index">
+            <bk-overflow-title type="tips" class="data-source-title">{{ item.data_source_name }}</bk-overflow-title>
+            <div class="field-rules">
+              <dl>
+                <dt>{{ $t('数据源字段') }}：</dt>
+                <bk-overflow-title
+                  type="tips"
+                  class="source-field"
+                  v-for="(val, i) in item.field_compare_rules"
+                  :key="i">
+                  {{ val.target_field }}
+                </bk-overflow-title>
+              </dl>
+              <dl>
+                <dt>{{ $t('认证源字段') }}：</dt>
+                <bk-overflow-title
+                  type="tips"
+                  class="source-field"
+                  v-for="(val, i) in item.field_compare_rules"
+                  :key="i">
+                  {{ val.source_field }}
+                </bk-overflow-title>
+              </dl>
+            </div>
+            <span class="or" v-if="index !== 0">or</span>
+          </div>
+        </div>
+      </LabelContent>
+    </ViewRow>
+  </bk-loading>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, onMounted, ref } from 'vue';
+
+import LabelContent from '@/components/layouts/LabelContent.vue';
+import ViewRow from '@/components/layouts/ViewRow.vue';
+import { getDataSourceList, getIdpsDetails } from '@/http';
+import { copy } from '@/utils';
+
+const emit = defineEmits(['updateRow']);
+const props = defineProps({
+  currentId: {
+    type: String,
+    default: '',
+  },
+});
+
+const isLoading = ref(false);
+const authSourceData = ref({});
+const onDataSources = ref([]);
+const notDataSources = ref([]);
+
+onMounted(async () => {
+  isLoading.value = true;
+  try {
+    const [authRes, dataRes] = await Promise.all([
+      getIdpsDetails(props?.currentId),
+      getDataSourceList(''),
+    ]);
+    authSourceData.value = authRes.data;
+    emit('updateRow', authSourceData.value);
+    processMatchRules(dataRes.data);
+  } catch (error) {
+    console.warn(error);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const processMatchRules = (list) => {
+  const dataSourceIds = authSourceData.value.data_source_match_rules.map(item => item.data_source_id);
+  onDataSources.value = list
+    .filter(val => dataSourceIds.includes(val.id))
+    .map(val => ({
+      data_source_id: val.id,
+      data_source_name: val.name,
+      field_compare_rules: authSourceData.value.data_source_match_rules
+        .find(item => item.data_source_id === val.id).field_compare_rules,
+    }));
+  notDataSources.value = list
+    .filter(val => !dataSourceIds.includes(val.id) && val.plugin_id === 'local')
+    .map(val => ({
+      data_source_id: val.id,
+      data_source_name: val.name,
+    }));
+};
+</script>
+
+<style lang="less" scoped>
+.details-wrapper {
+  height: calc(100vh - 52px);
+  padding: 28px 40px;
+
+  .details-type {
+    display: flex;
+    padding: 10px 0;
+    margin-bottom: 24px;
+    background: #F5F7FA;
+    border-radius: 2px;
+    align-items: center;
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0 15px;
+    }
+
+    .title {
+      font-size: 14px;
+      color: #313238;
+    }
+
+    .subtitle {
+      font-size: 12px;
+      color: #979BA5;
+    }
+  }
+
+  .details-url {
+    padding-bottom: 24px;
+    border-bottom: 1px solid #EAEBF0;
+
+    .title {
+      margin-bottom: 12px;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 22px;
+      color: #63656E;
+    }
+
+    .content {
+      display: flex;
+      padding: 8px 12px;
+      color: #313238;
+      background: #F0F5FF;
+      align-items: center;
+      justify-content: space-between;
+
+      i {
+        width: 5%;
+        font-size: 14px;
+        color: #3A84FF;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .content-matching {
+    width: 100%;
+    background: #F5F7FA;
+
+    ::v-deep .exception-part {
+      position: relative;
+
+      .bk-exception-img {
+        width: 340px;
+        height: 170px;
+      }
+
+      .bk-exception-description {
+        position: absolute;
+        bottom: 0;
+        font-size: 14px;
+      }
+    }
+
+    .content-box {
+      position: relative;
+
+      .or {
+        position: absolute;
+        top: -16px;
+        left: -22px;
+        display: inline-block;
+        width: 19px;
+        height: 16px;
+        line-height: 16px;
+        color: #FE9C00;
+        text-align: center;
+        background: #FFF3E1;
+        border-radius: 2px;
+
+        &::before {
+          position: absolute;
+          top: -16px;
+          left: 10px;
+          width: 12px;
+          height: 16px;
+          border: 1px solid #DCDEE5;
+          border-right: transparent;
+          border-bottom: transparent;
+          border-top-left-radius: 2px;
+          content: '';
+        }
+
+        &::after {
+          position: absolute;
+          top: 16px;
+          left: 10px;
+          width: 12px;
+          height: 16px;
+          border: 1px solid #DCDEE5;
+          border-top: transparent;
+          border-right: transparent;
+          border-bottom-left-radius: 2px;
+          content: '';
+        }
+      }
+    }
+
+    .data-source-title {
+      position: relative;
+      width: 460px;
+      padding: 0 24px;
+      line-height: 32px;
+      background: #F0F1F5;
+      border-radius: 2px 2px 0 0;
+    }
+
+    .field-rules {
+      display: flex;
+      margin-bottom: 16px;
+      background: #FAFBFD;
+      border-radius: 2px;
+
+      dl {
+        padding: 12px 50px;
+
+        dt {
+          font-size: 14px;
+          line-height: 22px;
+          color: #979BA5;
+        }
+
+        .source-field {
+          width: 120px;
+          font-size: 14px;
+          line-height: 22px;
+          color: #313238;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/setting/data-source/Success.vue b/src/pages/src/views/setting/data-source/Success.vue
index 21a7fb4ce..4fbeab585 100644
--- a/src/pages/src/views/setting/data-source/Success.vue
+++ b/src/pages/src/views/setting/data-source/Success.vue
@@ -40,13 +40,18 @@ defineProps({
 
 const { handleOperationsSync } = useDataSource();
 
+// 同步数据后跳转到数据源配置页面
 const handleSync = () => {
   handleOperationsSync();
   router.push({ name: 'dataSource' });
 };
 
-const loginConfig = () => {};
+// 跳转到登录配置页面
+const loginConfig = () => {
+  router.push({ name: 'login' });
+};
 
+// 跳转到组织架构页面
 const viewOrganization = () => {
   router.push({ name: 'organization' });
 };
diff --git a/src/pages/src/views/tenant/OperationDetails.vue b/src/pages/src/views/tenant/OperationDetails.vue
index 35a079bae..d71a0f2f8 100644
--- a/src/pages/src/views/tenant/OperationDetails.vue
+++ b/src/pages/src/views/tenant/OperationDetails.vue
@@ -46,7 +46,7 @@
       <Row v-if="!isEdit" :title="$t('内置管理账号')">
         <bk-form-item :label="$t('用户名')" required>
           <bk-input
-            :model-value="`${userStore.user.username}-${userStore.user.tenant_id}`"
+            :model-value="`${userStore.user.username}-${formData.id}`"
             disabled
           />
         </bk-form-item>
diff --git a/src/pages/src/views/tenant/index.vue b/src/pages/src/views/tenant/index.vue
index 6b32e54d8..01dbeee68 100644
--- a/src/pages/src/views/tenant/index.vue
+++ b/src/pages/src/views/tenant/index.vue
@@ -199,7 +199,7 @@
             <bk-radio label="email">
               <span>{{ $t('邮箱') }}</span>
             </bk-radio>
-            <bk-radio label="phone">
+            <bk-radio label="sms">
               <span>{{ $t('短信') }}</span>
             </bk-radio>
           </bk-radio-group>
diff --git a/src/pages/src/views/virtual-account/index.vue b/src/pages/src/views/virtual-account/index.vue
index 3dd9ae3ad..a835c9f15 100644
--- a/src/pages/src/views/virtual-account/index.vue
+++ b/src/pages/src/views/virtual-account/index.vue
@@ -197,7 +197,7 @@ watch(() => detailsConfig.isShow, (val) => {
   }
 });
 
-const handleClick = async (type: string, id: string) => {
+const handleClick = async (type: string, id?: string) => {
   if (type !== 'add') {
     const res = await getVirtualUsersDetail(id);
     detailsInfo.value = res.data;
diff --git a/src/pages/static/login_success.html b/src/pages/static/login_success.html
index 6b6425626..e3abdcf92 100644
--- a/src/pages/static/login_success.html
+++ b/src/pages/static/login_success.html
@@ -9,6 +9,7 @@
   <script>
     var params = new URLSearchParams(window.location.href)
     window.opener && window.opener.postMessage({ target: 'bk-login', result: true }, params.get('from'))
+    window.opener.location.reload();
     window.close();
   </script>
 </body>
diff --git a/src/pages/yarn.lock b/src/pages/yarn.lock
index a4356013a..8dd7baa7f 100644
--- a/src/pages/yarn.lock
+++ b/src/pages/yarn.lock
@@ -2765,7 +2765,7 @@ binary-extensions@^2.0.0:
   resolved "https://mirrors.tencent.com/npm/binary-extensions/-/binary-extensions-2.3.0.tgz"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-bkui-vue@0.0.2-beta.124:
+bkui-vue@^0.0.2-beta.124:
   version "0.0.2-beta.124"
   resolved "https://mirrors.tencent.com/npm/bkui-vue/-/bkui-vue-0.0.2-beta.124.tgz"
   integrity sha512-Nv8D8UiUonnhTB8PJ5KNEKhLHDypjO8fJ+wkWH4qcJk4SHTQ6+Bud6W/6f8+RFxGq3VCYVSNpIqEGYUiEe/6fQ==