From 5d3199cb4ae45aa12faf50d57329bd72915cc65a Mon Sep 17 00:00:00 2001
From: v_yutyi <a670003190@qq.com>
Date: Tue, 14 Nov 2023 16:40:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A4=E8=AF=81=E6=BA=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=20&=20=E6=9C=AC=E5=9C=B0=E8=B4=A6=E5=AF=86=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/MainBreadcrumbsDetails.vue        |   9 +-
 src/pages/src/http/authSourceFiles.ts         |  24 +
 src/pages/src/http/types/authSourceFiles.ts   |  15 +
 src/pages/src/images/wecom.svg                |   1 +
 src/pages/src/router/index.ts                 |  39 +-
 src/pages/src/views/Header.vue                |   2 +-
 src/pages/src/views/auth-source/List.vue      | 337 +++++++++++
 .../src/views/auth-source/ViewDetails.vue     | 340 ++++++++++++
 .../src/views/auth-source/edit-data/index.vue |  17 +
 src/pages/src/views/auth-source/index.vue     | 271 +--------
 .../src/views/auth-source/new-data/Local.vue  | 495 +++++++++++++++++
 .../views/auth-source/new-data/NewConfig.vue  | 253 ---------
 .../src/views/auth-source/new-data/WeCom.vue  | 522 ++++++++++++++++++
 .../src/views/auth-source/new-data/config.vue | 197 +++++++
 .../src/views/auth-source/new-data/index.vue  |  98 ++++
 .../views/data-source/local-details/index.vue |   6 +-
 .../src/views/data-source/new-data/index.vue  |   6 +-
 17 files changed, 2095 insertions(+), 537 deletions(-)
 create mode 100644 src/pages/src/http/authSourceFiles.ts
 create mode 100644 src/pages/src/http/types/authSourceFiles.ts
 create mode 100644 src/pages/src/images/wecom.svg
 create mode 100644 src/pages/src/views/auth-source/List.vue
 create mode 100644 src/pages/src/views/auth-source/ViewDetails.vue
 create mode 100644 src/pages/src/views/auth-source/edit-data/index.vue
 create mode 100644 src/pages/src/views/auth-source/new-data/Local.vue
 delete mode 100644 src/pages/src/views/auth-source/new-data/NewConfig.vue
 create mode 100644 src/pages/src/views/auth-source/new-data/WeCom.vue
 create mode 100644 src/pages/src/views/auth-source/new-data/config.vue
 create mode 100644 src/pages/src/views/auth-source/new-data/index.vue

diff --git a/src/pages/src/components/layouts/MainBreadcrumbsDetails.vue b/src/pages/src/components/layouts/MainBreadcrumbsDetails.vue
index 029af7230..077b0714a 100644
--- a/src/pages/src/components/layouts/MainBreadcrumbsDetails.vue
+++ b/src/pages/src/components/layouts/MainBreadcrumbsDetails.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { computed, defineEmits, defineProps } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useMainViewStore } from '@/store/mainView';
 
@@ -33,9 +33,10 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['toBack']);
+
 const store = useMainViewStore();
 const route = useRoute();
-const router = useRouter();
 store.customBreadcrumbs = true;
 /**
  * 当前面包屑展示文案
@@ -45,7 +46,7 @@ const current = computed(() => store.breadCrumbsTitle || route.meta.navName);
  * back control
  */
 const handleBack = () => {
-  router.push({ name: 'dataSource' });
+  emit('toBack');
 };
 </script>
 
diff --git a/src/pages/src/http/authSourceFiles.ts b/src/pages/src/http/authSourceFiles.ts
new file mode 100644
index 000000000..ccef32e9b
--- /dev/null
+++ b/src/pages/src/http/authSourceFiles.ts
@@ -0,0 +1,24 @@
+import http from './fetch';
+import type {
+  NewIdpsParams,
+} from './types/authSourceFiles';
+
+/**
+ * 认证源列表
+ */
+export const getIdps = (keyword: string) => http.get(`/api/v1/web/idps/?keyword=${keyword}`);
+
+/**
+ * 认证源插件列表
+ */
+export const getIdpsPlugins = () => http.get('/api/v1/web/idps/plugins/');
+
+/**
+ * 新建认证源
+ */
+export const postIdps = (params: NewIdpsParams) => http.post('/api/v1/web/idps/plugins/', params);
+
+/**
+ * 认证源详情
+ */
+export const getIdpsDetails = (id: string) => http.get(`/api/v1/web/idps/${id}/`);
diff --git a/src/pages/src/http/types/authSourceFiles.ts b/src/pages/src/http/types/authSourceFiles.ts
new file mode 100644
index 000000000..8a8e490f0
--- /dev/null
+++ b/src/pages/src/http/types/authSourceFiles.ts
@@ -0,0 +1,15 @@
+/**
+ * 新建认证源参数
+ */
+export interface NewIdpsParams {
+  name: string,
+  plugin_id: string,
+  plugin_config: {},
+  data_source_match_rules?: {
+    data_source_id: number,
+    field_compare_rules: {
+      source_field: string,
+      target_field: string,
+    }[],
+  }[],
+}
diff --git a/src/pages/src/images/wecom.svg b/src/pages/src/images/wecom.svg
new file mode 100644
index 000000000..02a95b6d3
--- /dev/null
+++ b/src/pages/src/images/wecom.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fill="#FB6500" d="M671.7924352 732.8202464C669.028624 735.613712 667.5879072 739.452672 667.8318336 743.3737568 668.241952 747.256496 670.2128192 750.806064 673.2923104 753.2081632 702.0898816 780.0118048 720.6883136 816.0513824 725.6074304 855.1477376 732.9345216 882.1246816 759.237008 899.4065472 786.920528 895.4330816 814.6040512 891.459616 834.9779232 867.4782144 834.4135776 839.5306016 833.849232 811.582992 812.5238336 788.4427616 784.7024512 785.5889696 748.3611008 778.7163552 715.2515104 760.1910528 690.3908672 732.8202464 685.2049344 727.8094336 676.978368 727.8094336 671.7924352 732.8202464L671.7924352 732.8202464Z"/><path fill="#0082EF" d="M896.2930432 645.2721408C887.3450496 654.2070624 881.7153792 665.9263168 880.334624 678.4926816 873.79128 715.17512 855.3423456 748.6824352 827.8390496 773.8361696 824.4749792 777.355584 823.3457792 782.4516224 824.9084992 787.0616224 826.471216 791.6716256 830.4670496 795.0321216 835.278656 795.7829248 840.3081248 796.5241952 845.2933408 794.1862144 847.9373536 789.8462112 875.185952 760.9942656 911.6235648 742.5093856 951.009136 737.5576736 967.6504192 733.1874656 981.2833728 721.2795392 987.8457792 705.3821088 994.4081824 689.4846784 993.1424928 671.432896 984.4258496 656.6056544 975.7991296 641.7577344 960.7664704 631.7522432 943.7334496 629.5214624 926.7004256 627.2906848 909.5960992 633.0872608 897.4331808 645.2124096L896.2930432 645.2124096 896.2930432 645.2721408Z"/><path fill="#2DBC00" d="M740.4854752 489.6046432C725.4607552 504.6410112 720.4129088 526.966144 727.508288 546.9989184 734.6036672 567.0316895999999 752.5806112 581.2099903999999 773.7240768 583.4490175999999 810.1405408 590.2243008 843.3182112 608.6340896 868.2747008 635.9179168 871.7470336 639.632144 877.0521312 641.0098656 881.894256 639.4548832 886.756768 637.8330464 890.2564448 633.5658816 890.8934976 628.4820928 891.6874272 623.4917216 889.419904 618.5103168 885.1342176 615.829824 856.420192 588.9235744 837.931248 552.8966112 832.8190976 513.8902496000001 827.6418048 494.8810144 812.7053184 480.0801664 793.6425248 475.0694464 774.5797344 470.0587264 754.2907008 475.6004288 740.4268864 489.6046432L740.4854752 489.6046432Z"/><path fill="#FC0" d="M713.3682272 575.7133696000001L713.3682272 576.852928C686.4133248 606.6324704 649.678512 625.7778816 609.8183616 630.8209408 582.8366016 638.1446784 565.5494624 664.4224512 569.5152704 692.0847232 573.4810816 719.7469952 597.455648 740.1152832 625.4093728 739.5711808 653.3631008 739.0270752 676.5260704 717.7412832 679.4113248 689.9456608 686.120688 653.5450944 704.6823616 620.3828 732.2068736 595.6211008 737.1288256 590.4011968 737.1288256 582.2520224 732.2068736 577.0321184 729.9163264 574.30864 726.6181984 572.630624 723.0671936 572.3820448 719.5161888 572.1334656 716.0162368 573.3356031999999 713.3682272 575.7133696000001Z"/><path fill="#0082EF" d="M379.1366368 98.6363836864C283.26640704 107.964191296 193.6096272 150.26886112 125.47872 218.32520544 100.20980352 243.93513248 79.27795136 273.48353152000004 63.503475424 305.81241152 14.688812224 404.30629088 23.068813696 521.4985727999999 85.40162944 612.052768 106.37206112 642.4323072 130.74816479999998 670.3164096 158.05527103999998 695.1620992L146.05628256 788.8272832 144.7368624 792.7249728 144.7368624 802.3790176C145.549984 812.7206432 151.6538176 821.9074144 160.8750128 826.6682592 170.096208 831.429104 181.12447168 831.0875296 190.03304448 825.7651552L191.77313216 824.4464064 220.20979744 810.2341248 305.16357408 766.4600736C345.45444384 778.2216864 387.2604576 783.9802592 429.2324128 783.5499424 481.473744 783.8957664 533.3593312 774.9413088 582.4597312 757.1058528 557.5522368 749.5214784 541.4425472 725.4441696 543.9434464000001 699.5399744 493.4369152 715.9387808 439.9857344 721.2566176 387.235952 715.1307328L378.8964224 713.9911744C359.7920384 711.5705888 340.91301408 707.6203808 322.44141472 702.1786432 312.41782496 699.0674208 301.55123264 700.2621408 292.44394304 705.476688L290.0441456 706.5553472 220.20979744 747.6919008 217.21005056 749.4908352C216.27427168 750.294128 215.0840688 750.740176 213.850568 750.7498528 212.5955328 750.6908288 211.42049184 750.116784 210.60289536 749.1632576 209.78529888 748.2097312 209.39762112 746.9612512 209.53140096 745.7126048L212.11048032 734.9787328 215.17115968 723.4062944 220.20979744 703.9178464 225.90931712 682.0905504C229.79185952 670.09168 225.56394688 656.9554976 215.41020224 649.4696512 187.98301024 629.5058784 164.1462528 605.0325504 144.91614432 577.0930208 95.94397599999999 505.9397056 89.3332576 413.8686528 127.63830368 336.45518591999996 140.42023168 310.79405184 157.18611776 287.31721568 177.31341344 266.89641568 233.70862528 210.72066048 307.95352928 175.98184320000001 387.2371232 168.67416672000002 415.740112 165.39305919999998 444.5257344 165.39305919999998 473.02872 168.67416672000002 551.9161408 176.70370431999999 625.6369536 211.61909984 681.8111232 267.5569616 702.0898816 287.70361376 719.1286816 310.97029152 732.1471136 336.45518591999996 748.171792 369.21122976 756.560896 405.17114304 756.6841088 441.6330784L756.6841088 452.7862336C778.4015776 439.468336 806.4176064 442.7390912 824.4795648 460.701072L827.1195776 463.699296C831.2483904 409.67473408 820.8282176 355.53064704 796.9416512 306.89224 781.2940288 274.65312896 760.595216 245.11875936 735.6272896 219.40503424000002 667.863232 151.35225536000002 578.6154752 108.848356384 483.0485792 99.1153966336 448.5347872 95.1287996576 413.6858368 94.9677602976 379.1366368 98.6352125056L379.1366368 98.6363836864Z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/src/router/index.ts b/src/pages/src/router/index.ts
index f9871508e..19d4c0e00 100644
--- a/src/pages/src/router/index.ts
+++ b/src/pages/src/router/index.ts
@@ -118,15 +118,40 @@ export default createRouter({
     {
       path: '/auth-source',
       name: 'authSource',
-      component: () => import('@/views/auth-source/index.vue'),
-    },
-    {
-      path: '/auth-source/new',
-      name: 'newAuthSource',
       meta: {
-        navName: '新建认证源',
+        navName: '认证源管理',
       },
-      component: () => import('@/views/auth-source/new-data/NewConfig.vue'),
+      component: () => import('@/views/auth-source/index.vue'),
+      children: [
+        {
+          path: '',
+          name: 'authSourceList',
+          meta: {
+            routeParentName: 'authSource',
+            navName: '认证源管理',
+          },
+          component: () => import('@/views/auth-source/List.vue'),
+        },
+        {
+          path: 'new',
+          name: 'newAuthSource',
+          meta: {
+            routeParentName: 'authSource',
+            navName: '新建认证源',
+          },
+          component: () => import('@/views/auth-source/new-data/index.vue'),
+        },
+        {
+          path: 'edit/:id',
+          name: 'editAuthSource',
+          meta: {
+            routeParentName: 'authSource',
+            navName: '编辑本地认证源',
+            showBack: true,
+          },
+          component: () => import('@/views/auth-source/edit-data/index.vue'),
+        },
+      ],
     },
     {
       path: '/audit',
diff --git a/src/pages/src/views/Header.vue b/src/pages/src/views/Header.vue
index 76725a7d6..c3eb60d16 100644
--- a/src/pages/src/views/Header.vue
+++ b/src/pages/src/views/Header.vue
@@ -114,7 +114,7 @@ const userInfo = computed(() => {
   const baseNav = [
     { name: '组织架构', path: 'organization' },
     { name: '数据源管理', path: 'dataSource' },
-    { name: '认证源管理', path: 'authSource' },
+    { name: '认证源管理', path: 'authSourceList' },
   ];
   if (role === 'super_manager') {
     headerNav.value = [...baseNav, { name: '租户管理', path: 'tenant' }, { name: '设置', path: 'setting' }];
diff --git a/src/pages/src/views/auth-source/List.vue b/src/pages/src/views/auth-source/List.vue
new file mode 100644
index 000000000..f0e475ac1
--- /dev/null
+++ b/src/pages/src/views/auth-source/List.vue
@@ -0,0 +1,337 @@
+<template>
+  <div class="auth-source-wrapper user-scroll-y">
+    <header>
+      <bk-button theme="primary" @click="newAuthSource">
+        <i class="user-icon icon-add-2 mr8" />
+        新建
+      </bk-button>
+      <bk-input
+        class="header-right"
+        v-model="searchVal"
+        placeholder="搜索认证源名称"
+        type="search"
+        clearable
+        @enter="handleEnter"
+        @clear="handleClear"
+      />
+    </header>
+    <bk-loading :loading="isLoading">
+      <bk-table
+        class="user-info-table"
+        :data="tableData"
+        :border="['outer']"
+        show-overflow-tooltip
+        @column-filter="handleFilter"
+      >
+        <template #empty>
+          <Empty
+            :is-data-empty="isDataEmpty"
+            :is-search-empty="isEmptySearch"
+            :is-data-error="isDataError"
+            @handleEmpty="handleClear"
+            @handleUpdate="fetchAuthSourceList"
+          />
+        </template>
+        <bk-table-column prop="name" label="认证源名称">
+          <template #default="{ row }">
+            <bk-button text theme="primary" @click="handleClick(row)">
+              {{ row.name }}
+            </bk-button>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="plugin.id" label="类型">
+          <template #default="{ row }">
+            <div class="data-source-type">
+              <img :src="row.plugin?.logo">
+              <span>{{ row.plugin?.name }}</span>
+            </div>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="matched_data_sources" label="匹配数据源">
+          <template #default="{ row }">
+            <bk-tag v-for="(item, index) in row.matched_data_sources" :key="index">{{ item }}</bk-tag>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="status" label="状态" :filter="{ list: statusFilters }">
+          <template #default="{ row }">
+            <div>
+              <img :src="dataSourceStatus[row.status]?.icon" class="status-icon" />
+              <span>{{ dataSourceStatus[row.status]?.text }}</span>
+            </div>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="updater" label="更新人">
+          <template #default="{ row }">
+            <span>{{ row.updater || '--' }}</span>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="updated_at" label="更新时间"></bk-table-column>
+        <bk-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <bk-button class="mr10" theme="primary" text @click="handleEdit(row)">编辑</bk-button>
+            <bk-popover
+              class="dot-menu"
+              placement="bottom-start"
+              theme="light"
+              :arrow="false">
+              <i class="user-icon icon-more dot-menu-trigger"></i>
+              <template #content>
+                <ul class="dot-menu-list">
+                  <li class="dot-menu-item">删除</li>
+                </ul>
+              </template>
+            </bk-popover>
+          </template>
+        </bk-table-column>
+      </bk-table>
+    </bk-loading>
+    <bk-sideslider
+      v-model:isShow="detailsConfig.show"
+      :title="detailsConfig.title"
+      quick-close
+      width="640"
+    >
+      <template #header>
+        <span>{{ detailsConfig.title }}</span>
+        <div>
+          <bk-button
+            outline
+            theme="primary"
+            @click="handleEdit(currentRow)">
+            编辑
+          </bk-button>
+          <bk-button>删除</bk-button>
+        </div>
+      </template>
+      <template #default>
+        <ViewDetails :data="authDetails" @updateRow="updateRow" />
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+
+import ViewDetails from './ViewDetails.vue';
+
+import Empty from '@/components/Empty.vue';
+import { getIdps } from '@/http/authSourceFiles';
+import router from '@/router/index';
+import { dataSourceStatus } from '@/utils';
+
+const searchVal = ref('');
+const isLoading = ref(false);
+const tableData = ref([]);
+const isDataEmpty = ref(false);
+const isEmptySearch = ref(false);
+const isDataError = ref(false);
+
+const statusFilters = [
+  { text: '正常', value: 'enabled' },
+  { text: '未启用', value: 'disabled' },
+];
+
+onMounted(() => {
+  fetchAuthSourceList();
+});
+
+const fetchAuthSourceList = async () => {
+  try {
+    isLoading.value = true;
+    isDataEmpty.value = false;
+    isEmptySearch.value = false;
+    isDataError.value = false;
+    const res = await getIdps(searchVal.value);
+    if (res.data.length === 0) {
+      searchVal.value === '' ? isDataEmpty.value = true : isEmptySearch.value = true;
+    }
+    tableData.value = res.data;
+    isLoading.value = false;
+  } catch (error) {
+    isDataError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 搜索数据源列表
+const handleEnter = (value: string) => {
+  searchVal.value = value;
+  fetchAuthSourceList();
+};
+
+const handleClear = () => {
+  searchVal.value = '';
+  fetchAuthSourceList();
+};
+
+const handleFilter = ({ checked }) => {
+  if (checked.length === 0) return isDataEmpty.value = false;
+  isDataEmpty.value = !tableData.value.some(item => checked.includes(item.status));
+};
+
+const newAuthSource = () => {
+  router.push({
+    name: 'newAuthSource',
+  });
+};
+
+const detailsConfig = reactive({
+  show: false,
+  title: '认证源详情',
+});
+
+const authDetails = ref({});
+
+const handleClick = (row) => {
+  authDetails.value = row;
+  detailsConfig.show = true;
+};
+
+const handleEdit = (row) => {
+  router.push({
+    name: 'editAuthSource',
+    params: {
+      id: row.id,
+    },
+  });
+};
+
+const currentRow = ref({});
+const updateRow = (row) => {
+  currentRow.value = row;
+};
+</script>
+
+<style lang="less" scoped>
+.auth-source-wrapper {
+  height: calc(100vh - 52px);
+  padding: 24px 160px;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .header-right {
+      width: 400px;
+    }
+  }
+
+  :deep(.user-info-table) {
+    .bk-table-head {
+      table thead th {
+        text-align: center;
+      }
+
+      .table-head-settings {
+        border-right: none;
+      }
+    }
+
+    .bk-table-footer {
+      padding: 0 15px;
+      background: #fff;
+    }
+
+    .type-icon {
+      margin-right: 8px;
+      font-size: 14px;
+      color: #979BA5;
+    }
+
+    .status-icon {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+
+    .data-source-type {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 14px;
+        height: 14px;
+      }
+
+      span {
+        margin-left: 8px;
+      }
+    }
+  }
+
+}
+
+.dot-menu {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.tippy-tooltip.dot-menu-theme {
+  padding: 0;
+}
+
+.dot-menu-trigger {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  font-size: 0;
+  line-height: 30px;
+  color: #979BA5;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.dot-menu-trigger:hover {
+  color: #3A84FF;
+  background-color: #EBECF0;
+}
+
+.dot-menu-trigger::before {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background-color: currentcolor;
+  border-radius: 50%;
+  content: "";
+  box-shadow: 0 -4px 0 currentcolor, 0 4px 0 currentcolor;
+}
+
+.dot-menu-list {
+  min-width: 50px;
+  padding: 5px 0;
+  margin: 0;
+  list-style: none;
+}
+
+.dot-menu-list .dot-menu-item {
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 26px;
+  color: #63656e;
+  cursor: pointer;
+
+  &:hover {
+    color: #3a84ff;
+    background-color: #eaf3ff;
+  }
+}
+
+:deep(.bk-sideslider-title) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px 0 50px !important;
+
+  .bk-button {
+    padding: 5px 17px !important;
+  }
+}
+</style>
diff --git a/src/pages/src/views/auth-source/ViewDetails.vue b/src/pages/src/views/auth-source/ViewDetails.vue
new file mode 100644
index 000000000..f5577d955
--- /dev/null
+++ b/src/pages/src/views/auth-source/ViewDetails.vue
@@ -0,0 +1,340 @@
+<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">回调地址</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">认证源信息</p>
+      <ul class="content">
+        <li>
+          <span class="name">名称：</span>
+          <div>{{ authSourceData.name }}</div>
+        </li>
+        <li>
+          <span class="name">基础配置：</span>
+          <div class="basic-config">
+            <p>以下数据源已开启[账密登录]</p>
+            <div class="on">
+              <span v-for="(item, index) in onDataSources" :key="index">
+                {{ item.data_source_name }}
+              </span>
+            </div>
+            <p>以下数据源未开启[账密登录]</p>
+            <div class="off" v-for="(item, index) in notDataSources" :key="index">
+              <span>
+                {{ item.data_source_name }}
+                <bk-button text theme="primary" @click="handleOpen(item)">去开启</bk-button>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li>
+          <span class="name">数据源匹配：</span>
+          <div class="content-matching">
+            <div class="content-box" v-for="(item, index) in onDataSources" :key="index">
+              <p>{{ item.data_source_name }}</p>
+              <div class="content-item">
+                <dl>
+                  <dt>数据源字段：</dt>
+                  <dd v-for="(val, i) in item.field_compare_rules" :key="i">
+                    {{ val.source_field }}
+                  </dd>
+                </dl>
+                <dl>
+                  <dt>认证源字段：</dt>
+                  <dd v-for="(val, i) in item.field_compare_rules" :key="i">
+                    {{ val.target_field }}
+                  </dd>
+                </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 { getIdpsDetails } from '@/http/authSourceFiles';
+import { getDataSourceList } from '@/http/dataSourceFiles';
+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))
+    .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 {
+          p {
+            margin-bottom: 12px;
+            font-size: 14px;
+            color: #63656E;
+          }
+
+          span {
+            display: inline-block;
+            width: 300px;
+            height: 40px;
+            padding-left: 24px;
+            margin-bottom: 12px;
+            margin-left: 40px;
+            line-height: 40px;
+            color: #313238;
+            background: #F5F7FA;
+            border-radius: 2px;
+          }
+
+          .off {
+            span {
+              position: relative;
+              color: #C4C6CC;
+
+              .bk-button {
+                position: absolute;
+                top: 13px;
+                right: 16px;
+              }
+            }
+          }
+        }
+
+        .name {
+          min-width: 100px;
+          color: #63656E;
+          text-align: right;
+        }
+
+        div {
+          color: #313238;
+        }
+      }
+
+      .content-matching {
+        margin-left: 20px;
+
+        .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: '';
+            }
+          }
+        }
+
+        p {
+          position: relative;
+          width: 440px;
+          padding: 0 24px;
+          line-height: 32px;
+          background: #F0F1F5;
+          border-radius: 2px 2px 0 0;
+        }
+
+        .content-item {
+          display: flex;
+          margin-bottom: 16px;
+          background: #FAFBFD;
+          border-radius: 2px;
+
+          dl {
+            padding: 12px 50px;
+
+            dt {
+              font-size: 14px;
+              line-height: 22px;
+              color: #979BA5;
+            }
+
+            dd {
+              font-size: 14px;
+              line-height: 22px;
+              color: #313238;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/auth-source/edit-data/index.vue b/src/pages/src/views/auth-source/edit-data/index.vue
new file mode 100644
index 000000000..375b7802c
--- /dev/null
+++ b/src/pages/src/views/auth-source/edit-data/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <MainBreadcrumbs />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MainBreadcrumbs from '@/components/layouts/MainBreadcrumbs.vue';
+import { useMainViewStore } from '@/store/mainView';
+
+const store = useMainViewStore();
+store.breadCrumbsTitle = '编辑本地认证源';
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/src/views/auth-source/index.vue b/src/pages/src/views/auth-source/index.vue
index f532b1ecf..98393de41 100644
--- a/src/pages/src/views/auth-source/index.vue
+++ b/src/pages/src/views/auth-source/index.vue
@@ -1,278 +1,9 @@
 <template>
-  <div class="auth-source-wrapper user-scroll-y">
-    <header>
-      <bk-button theme="primary" @click="newAuthSource">
-        <i class="user-icon icon-add-2 mr8" />
-        新建认证源
-      </bk-button>
-      <bk-input
-        class="header-right"
-        v-model="searchVal"
-        placeholder="搜索认证源名称"
-        type="search"
-        clearable
-        @enter="handleEnter"
-        @clear="handleClear"
-      />
-    </header>
-    <bk-loading :loading="isLoading">
-      <bk-table
-        class="user-info-table"
-        :data="tableData"
-        :border="['outer']"
-        :pagination="pagination"
-        show-overflow-tooltip
-        settings
-      >
-        <template #empty>
-          <Empty
-            :is-data-empty="isDataEmpty"
-            :is-search-empty="isEmptySearch"
-            :is-data-error="isDataError"
-            @handleEmpty="handleClear"
-            @handleUpdate="fetchDataSourceList"
-          />
-        </template>
-        <bk-table-column prop="name" label="认证源名称">
-          <template #default="{ row }">
-            <bk-button text theme="primary" @click="handleClick(row)">
-              {{ row.name }}
-            </bk-button>
-          </template>
-        </bk-table-column>
-        <bk-table-column prop="plugin_id" label="类型">
-          <template #default="{ row }">
-            <div class="data-source-type" v-for="item in typeList" :key="item">
-              <img v-if="item.id === row.plugin_id && item.logo" :src="item.logo">
-              <span v-if="item.id === row.plugin_id">{{ row.plugin_name }}</span>
-            </div>
-          </template>
-        </bk-table-column>
-        <bk-table-column prop="status" label="状态" :filter="{ list: statusFilters }">
-          <template #default="{ row }">
-            <div>
-              <img :src="dataSourceStatus[row.status]?.icon" class="account-status-icon" />
-              <span>{{ dataSourceStatus[row.status]?.text }}</span>
-            </div>
-          </template>
-        </bk-table-column>
-        <bk-table-column prop="updater" label="更新人">
-          <template #default="{ row }">
-            <span>{{ row.updater || '--' }}</span>
-          </template>
-        </bk-table-column>
-        <bk-table-column prop="updated_at" label="更新时间"></bk-table-column>
-        <bk-table-column label="操作" width="150">
-          <template #default="{ row }">
-            <bk-button class="mr10" theme="primary" text @click="handleEdit(row)">编辑</bk-button>
-            <bk-popover
-              class="dot-menu"
-              placement="bottom-start"
-              theme="light"
-              :arrow="false">
-              <i class="user-icon icon-more dot-menu-trigger"></i>
-              <template #content>
-                <ul class="dot-menu-list">
-                  <li class="dot-menu-item">导入</li>
-                  <li class="dot-menu-item">导出</li>
-                </ul>
-              </template>
-            </bk-popover>
-          </template>
-        </bk-table-column>
-      </bk-table>
-    </bk-loading>
-  </div>
+  <RouterView />
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
-
-import Empty from '@/components/Empty.vue';
-import { getDataSourceList, getDataSourcePlugins } from '@/http/dataSourceFiles';
-import router from '@/router/index';
-import { dataSourceStatus } from '@/utils';
-
-const searchVal = ref('');
-const isLoading = ref(false);
-const tableData = ref([]);
-const typeList = ref([]);
-const isDataEmpty = ref(false);
-const isEmptySearch = ref(false);
-const isDataError = ref(false);
-
-const statusFilters = [
-  { text: '正常', value: 'enabled' },
-  { text: '未启用', value: 'disabled' },
-];
-
-const pagination = reactive({
-  count: 0,
-  current: 1,
-  limit: 10,
-});
-
-onMounted(() => {
-  fetchDataSourceList();
-  getDataSourcePlugins().then((res) => {
-    typeList.value = res.data;
-  });
-});
-
-const fetchDataSourceList = async () => {
-  try {
-    isLoading.value = true;
-    isDataEmpty.value = false;
-    isEmptySearch.value = false;
-    isDataError.value = false;
-    const res = await getDataSourceList(searchVal.value);
-    if (res.data.length === 0) {
-      searchVal.value === '' ? isDataEmpty.value = true : isEmptySearch.value = true;
-    }
-    tableData.value = res.data;
-    isLoading.value = false;
-  } catch (error) {
-    isDataError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// 搜索数据源列表
-const handleEnter = (value: string) => {
-  searchVal.value = value;
-  fetchDataSourceList();
-};
-
-const handleClear = () => {
-  searchVal.value = '';
-  fetchDataSourceList();
-};
-
-const newAuthSource = () => {
-  router.push({
-    name: 'newAuthSource',
-  });
-};
 </script>
 
 <style lang="less" scoped>
-.auth-source-wrapper {
-  height: calc(100vh - 52px);
-  padding: 24px 160px;
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-
-    .header-right {
-      width: 400px;
-    }
-  }
-
-  :deep(.user-info-table) {
-    .bk-table-head {
-      table thead th {
-        text-align: center;
-      }
-
-      .table-head-settings {
-        border-right: none;
-      }
-    }
-
-    .bk-table-footer {
-      padding: 0 15px;
-      background: #fff;
-    }
-
-    .type-icon {
-      margin-right: 8px;
-      font-size: 14px;
-      color: #979BA5;
-    }
-
-    .account-status-icon {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-
-    .data-source-type {
-      display: flex;
-      align-items: center;
-
-      img {
-        width: 14px;
-        height: 14px;
-      }
-
-      span {
-        margin-left: 8px;
-      }
-    }
-  }
-
-}
-
-.dot-menu {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.tippy-tooltip.dot-menu-theme {
-  padding: 0;
-}
-
-.dot-menu-trigger {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  font-size: 0;
-  line-height: 30px;
-  color: #979BA5;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border-radius: 50%;
-}
-
-.dot-menu-trigger:hover {
-  color: #3A84FF;
-  background-color: #EBECF0;
-}
-
-.dot-menu-trigger::before {
-  display: inline-block;
-  width: 3px;
-  height: 3px;
-  background-color: currentcolor;
-  border-radius: 50%;
-  content: "";
-  box-shadow: 0 -4px 0 currentcolor, 0 4px 0 currentcolor;
-}
-
-.dot-menu-list {
-  min-width: 50px;
-  padding: 5px 0;
-  margin: 0;
-  list-style: none;
-}
-
-.dot-menu-list .dot-menu-item {
-  padding: 0 10px;
-  font-size: 12px;
-  line-height: 26px;
-  color: #63656e;
-  cursor: pointer;
-
-  &:hover {
-    color: #3a84ff;
-    background-color: #eaf3ff;
-  }
-}
 </style>
diff --git a/src/pages/src/views/auth-source/new-data/Local.vue b/src/pages/src/views/auth-source/new-data/Local.vue
new file mode 100644
index 000000000..e63202243
--- /dev/null
+++ b/src/pages/src/views/auth-source/new-data/Local.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="details-wrapper">
+    <div class="details-type">
+      <img :src="plugin.logo" class="w-[24px] h-[24px] mr-[15px]">
+      <div>
+        <p class="title">{{ plugin.name }}</p>
+        <p class="subtitle">{{ plugin.description }}</p>
+      </div>
+    </div>
+    <bk-form
+      class="auth-source-form"
+      ref="formRef"
+      form-type="vertical"
+      :model="formData"
+      :rules="rules">
+      <div class="content-item">
+        <p class="item-title">基础信息</p>
+        <bk-form-item class="w-[600px]" label="名称" property="name" required>
+          <bk-input v-model="formData.name" @focus="handleChange" />
+        </bk-form-item>
+      </div>
+      <div class="content-item">
+        <p class="item-title">基础配置</p>
+        <bk-form-item class="w-[600px]">
+        </bk-form-item>
+      </div>
+      <div class="content-item pb-[24px]">
+        <p class="item-title">数据源匹配</p>
+        <div class="data-source-matching">
+          <div
+            :class="['matching-item', { 'hover-item': hoverItem === index }]"
+            v-for="(item, index) in formData.data_source_match_rules"
+            :key="index"
+            @mouseenter="mouseenter(index)"
+            @mouseleave="mouseleave">
+            <bk-form-item
+              class="w-[518px]"
+              label="数据源"
+              :property="`data_source_match_rules.${index}.data_source_id`"
+              :rules="rulesData.data_source_id"
+              required>
+              <bk-select v-model="item.data_source_id">
+                <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-[250px]" label="数据源字段" required />
+              <bk-form-item class="w-[250px] auth-source-fields" label="认证源字段" required />
+            </div>
+            <div class="item-flex" v-for="(field, i) in item.field_compare_rules" :key="i">
+              <bk-form-item
+                class="w-[250px]"
+                error-display-type="tooltips"
+                :property="`data_source_match_rules.${index}.field_compare_rules.${i}.source_field`"
+                :rules="rulesData.source_field">
+                <bk-select v-model="field.source_field">
+                  <bk-option
+                    v-for="option in dataSourceFields"
+                    :key="option.key"
+                    :id="option.key"
+                    :name="option.name"
+                    :disabled="option.disabled">
+                    <span>{{option.name}}</span>
+                  </bk-option>
+                </bk-select>
+              </bk-form-item>
+              <bk-form-item
+                class="w-[250px] auth-source-fields"
+                error-display-type="tooltips"
+                :property="`data_source_match_rules.${index}.field_compare_rules.${i}.target_field`"
+                :rules="rulesData.target_field">
+                <bk-input v-model="field.target_field" @focus="handleChange" />
+              </bk-form-item>
+              <bk-button
+                text
+                @click="handleItemChange(item.field_compare_rules, i, 'add')"
+              >
+                <i class="user-icon icon-plus-fill" />
+              </bk-button>
+              <bk-button
+                text
+                :disabled="item.field_compare_rules.length === 1"
+                @click="handleItemChange(item.field_compare_rules, i, 'remove')">
+                <i class="user-icon icon-minus-fill" />
+              </bk-button>
+              <span class="and" v-if="i !== 0">and</span>
+            </div>
+            <i
+              class="bk-sq-icon icon-close-fill"
+              v-if="formData.data_source_match_rules.length > 1 && hoverItem === index"
+              @click="handleDelete(index)"></i>
+            <span class="or" v-if="index !== 0">or</span>
+          </div>
+        </div>
+        <div class="add-data-source" @click="handleAdd">
+          <i class="user-icon icon-add-2"></i>
+          <span>新增数据源匹配</span>
+        </div>
+      </div>
+    </bk-form>
+    <div class="footer-wrapper">
+      <bk-button @click="emit('prev')">
+        上一步
+      </bk-button>
+      <bk-button theme="primary" @click="handleSubmit">
+        提交
+      </bk-button>
+      <bk-button @click="handleCancel">
+        取消
+      </bk-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import useValidate from '@/hooks/use-validate';
+import router from '@/router/index';
+
+const validate = useValidate();
+
+const emit = defineEmits(['prev']);
+
+defineProps({
+  plugin: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const formRef = ref();
+const formData = ref({
+  name: '',
+  plugin_id: '',
+  plugin_config: {},
+  data_source_match_rules: [
+    {
+      data_source_id: '',
+      field_compare_rules: [
+        {
+          source_field: '',
+          target_field: '',
+        },
+      ],
+    },
+  ],
+});
+
+const rules = {
+  name: [validate.required],
+};
+
+const rulesData = {
+  data_source_id: [validate.required],
+  source_field: [validate.required],
+  target_field: [validate.required],
+};
+
+const dataSourceList = ref([
+  { key: 'a', name: '数据源111' },
+  { key: 'b', name: '数据源222' },
+]);
+const dataSourceFields = ref([
+  { key: 'a', name: 'aaaa' },
+  { key: 'b', name: 'bbbb' },
+]);
+
+const getFields = () => ({
+  source_field: '',
+  target_field: '',
+});
+
+const handleItemChange = (fields, index, action: 'add' | 'remove') => {
+  if (action === 'add') {
+    fields.splice(index + 1, 0, getFields());
+  } else {
+    fields.splice(index, 1);
+  }
+};
+
+// 新增数据源匹配
+const handleAdd = () => {
+  formData.value.data_source_match_rules.push({
+    data_source_id: '',
+    field_compare_rules: [
+      {
+        source_field: '',
+        target_field: '',
+      },
+    ],
+  });
+};
+// 删除数据源匹配
+const handleDelete = (index) => {
+  formData.value.data_source_match_rules.splice(index, 1);
+};
+
+const hoverItem = ref(null);
+const mouseenter = (index: number) => {
+  hoverItem.value = index;
+};
+
+const mouseleave = () => {
+  hoverItem.value = null;
+};
+
+const handleChange = () => {
+  window.changeInput = true;
+};
+
+const handleCancel = () => {
+  router.push({
+    name: 'authSourceList',
+  });
+};
+
+const handleSubmit = async () => {
+  await formRef.value.validate();
+};
+</script>
+
+<style lang="less" scoped>
+.details-wrapper {
+  width: 1000px;
+  margin: 0 auto;
+
+  .details-type {
+    display: flex;
+    padding: 10px 16px;
+    margin: 16px 0;
+    background: #FFF;
+    border-radius: 2px;
+    align-items: center;
+
+    .title {
+      font-size: 14px;
+      color: #313238;
+    }
+
+    .subtitle {
+      font-size: 12px;
+      color: #979BA5;
+    }
+  }
+
+  .auth-source-form {
+    .content-item {
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      .item-title {
+        padding: 16px 0 16px 24px;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      ::v-deep .bk-form-item {
+        padding-bottom: 24px;
+        margin-bottom: 0;
+        margin-left: 64px;
+        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: '';
+              }
+
+              &::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: '';
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+
+        span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  .footer-wrapper {
+    margin: 24px 0;
+
+    .bk-button {
+      width: 88px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/auth-source/new-data/NewConfig.vue b/src/pages/src/views/auth-source/new-data/NewConfig.vue
deleted file mode 100644
index 34d6ccb54..000000000
--- a/src/pages/src/views/auth-source/new-data/NewConfig.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <div>
-    <MainBreadcrumbsDetails>
-      <template #content>
-        <bk-steps
-          ext-cls="steps-wrapper"
-          :controllable="controllable"
-          :cur-step="curStep"
-          :steps="stepsConfig"
-          class="mb20"
-          @click="stepChanged"
-        />
-      </template>
-    </MainBreadcrumbsDetails>
-    <div class="config-wrapper">
-      <div class="config-content">
-        <div class="config-type">
-          <P class="title">企业认证源</P>
-          <ul>
-            <li
-              v-for="(item, index) in dataList"
-              :key="index"
-              :class="{ 'active': isActive === item.name }"
-              @click="handleClick(item)">
-              <div class="config-item">
-                <i :class="item.logo"></i>
-                <div>
-                  <p>{{item.name}}</p>
-                  <span>{{item.description}}</span>
-                </div>
-              </div>
-              <i class="user-icon icon-check-line" />
-            </li>
-          </ul>
-        </div>
-        <div class="config-type">
-          <P class="title">社会化认证源</P>
-          <ul>
-            <li
-              v-for="(item, index) in dataList2"
-              :key="index"
-              :class="{ 'active': isActive === item.name }"
-              @click="handleClick(item)">
-              <div class="config-item">
-                <i :class="item.logo"></i>
-                <div>
-                  <p>{{item.name}}</p>
-                  <span>{{item.description}}</span>
-                </div>
-              </div>
-              <i class="user-icon icon-check-line" />
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="footer-wrapper">
-        <bk-button theme="primary" class="mr8" @click="handleSubmit">下一步</bk-button>
-        <bk-button @click="handleClickCancel">取消</bk-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-
-import MainBreadcrumbsDetails from '@/components/layouts/MainBreadcrumbsDetails.vue';
-import router from '@/router/index';
-
-const curStep = ref(1);
-const controllable = ref(true);
-const stepsConfig = reactive([
-  { title: '认证源选择', icon: 1 },
-  { title: '登录配置', icon: 2 },
-]);
-const isActive = ref('企业微信');
-
-const dataList = reactive([
-  {
-    name: '企业微信',
-    description: '企业微信是腾讯微信团队为企业打造的专业办公…',
-    logo: 'user-icon icon-qiyeweixin',
-  },
-  {
-    name: 'Windows AD',
-    description: 'Windows AD 是 Microsoft 提供的本地…',
-    logo: 'user-icon icon-win',
-  },
-  {
-    name: 'Open LDAP',
-    description: 'LDAP 是一个开放的，中立的，工业标准的应用…',
-    logo: 'user-icon icon-qiyeweixin',
-  },
-]);
-
-const dataList2 = reactive([
-  {
-    name: '微信',
-    description: '微信是一款跨平台的通信工具。支持单人、多人…',
-    logo: 'user-icon icon-wechat',
-  },
-  {
-    name: '腾讯 QQ',
-    description: '腾讯 QQ 是一款基于互联网的即时通讯软件。',
-    logo: 'user-icon icon-win',
-  },
-  {
-    name: 'GitHub',
-    description: 'GitHub 是一个面向开源及私有软件项目的托管…',
-    logo: 'user-icon icon-qiyeweixin',
-  },
-  {
-    name: 'Google',
-    description: 'Google 是全球最大的搜索引擎公司。',
-    logo: 'user-icon icon-qiyeweixin',
-  },
-]);
-
-// 改变当前选中值
-const stepChanged = (index) => {
-  curStep.value = index;
-};
-
-const handleClick = (item) => {
-  isActive.value = item.name;
-};
-
-const handleClickCancel = () => {
-  router.push({
-    name: 'authSource',
-  });
-};
-</script>
-
-<style lang="less">
-.main-breadcrumbs-details {
-  .icon-arrow-left {
-    margin-right: 10px;
-    font-size: 18px;
-    color: #3a84ff;
-    cursor: pointer;
-  }
-
-  .tittle{
-    margin-right: 8px;
-    font-size: 16px;
-    color: #313238;
-  }
-
-  .steps-wrapper {
-    width: 360px;
-    margin: 0 auto;
-  }
-}
-
-.config-wrapper {
-  width: 1000px;
-  margin: 0 auto;
-
-  .config-content {
-    margin: 24px 0;
-    background-color: #fff;
-
-    .config-type {
-      padding: 24px 40px;
-
-      .title {
-        font-size: 14px;
-        font-weight: 700;
-        color: #313238;
-      }
-
-      ul {
-        display: flex;
-        margin: 16px 0;
-
-        li {
-          width: 200px;
-          height: 84px;
-          margin-right: 16px;
-          cursor: pointer;
-          background: #F5F7FA;
-          border-radius: 2px;
-          box-sizing: content-box;
-
-          .icon-check-line {
-            display: none;
-          }
-
-          // &:hover {
-          //   border: 1px solid #3A84FF;
-          // }
-
-          .config-item {
-            display: flex;
-            padding: 12px 16px;
-            align-items: center;
-            justify-content: space-between;
-
-            i {
-              margin-right: 12px;
-              font-size: 24px;
-            }
-
-            p {
-              font-size: 14px;
-              color: #313238;
-            }
-
-            span {
-              color: #979BA5;
-            }
-          }
-        }
-
-        .active {
-          position: relative;
-          background-color: #fff;
-          border: 1px solid #3A84FF;
-
-          .icon-check-line {
-            position: absolute;
-            top: 0;
-            right: 0;
-            z-index: 999;
-            display: inline-block;
-            font-size: 14px;
-            color: #fff;
-          }
-
-          &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            display: inline-block;
-            width: 0;
-            height: 0;
-            border-top: 24px solid #3A84FF;
-            border-left: 24px solid transparent;
-            content: '';
-          }
-        }
-      }
-    }
-  }
-
-  .footer-wrapper {
-    button {
-      width: 88px;
-    }
-  }
-}
-</style>
diff --git a/src/pages/src/views/auth-source/new-data/WeCom.vue b/src/pages/src/views/auth-source/new-data/WeCom.vue
new file mode 100644
index 000000000..a0e63a61e
--- /dev/null
+++ b/src/pages/src/views/auth-source/new-data/WeCom.vue
@@ -0,0 +1,522 @@
+<template>
+  <div class="details-wrapper">
+    <div class="details-type">
+      <img :src="plugin.logo" class="w-[24px] h-[24px] mr-[15px]">
+      <div>
+        <p class="title">{{ plugin.name }}</p>
+        <p class="subtitle">{{ plugin.description }}</p>
+      </div>
+    </div>
+    <bk-form
+      class="auth-source-form"
+      ref="formRef"
+      form-type="vertical"
+      :model="formData"
+      :rules="rules">
+      <div class="content-item">
+        <p class="item-title">基础信息</p>
+        <bk-form-item class="w-[600px]" label="名称" property="name" required>
+          <bk-input v-model="formData.name" @focus="handleChange" />
+        </bk-form-item>
+      </div>
+      <div class="content-item">
+        <p class="item-title">基础配置</p>
+        <bk-form-item class="w-[600px]" label="企业 ID" property="plugin_config.corp_id" required>
+          <bk-input v-model="formData.plugin_config.corp_id" @focus="handleChange" />
+        </bk-form-item>
+        <bk-form-item class="w-[600px]" label="Agent ID" property="plugin_config.agent_id" required>
+          <bk-input v-model="formData.plugin_config.agent_id" @focus="handleChange" />
+        </bk-form-item>
+        <bk-form-item class="w-[600px]" label="Secret" property="plugin_config.secret" required>
+          <bk-input type="password" v-model="formData.plugin_config.secret" @focus="handleChange" />
+        </bk-form-item>
+      </div>
+      <div class="content-item">
+        <p class="item-title">登录模式</p>
+        <bk-form-item>
+          <bk-radio-group
+            v-model="LoginMethod"
+          >
+            <bk-radio-button label="a">仅用于登录</bk-radio-button>
+            <bk-radio-button label="b" :disabled="true">可用于登录注册</bk-radio-button>
+          </bk-radio-group>
+        </bk-form-item>
+      </div>
+      <div class="content-item pb-[24px]">
+        <p class="item-title">数据源匹配</p>
+        <div class="data-source-matching">
+          <div
+            :class="['matching-item', { 'hover-item': hoverItem === index }]"
+            v-for="(item, index) in formData.data_source_match_rules"
+            :key="index"
+            @mouseenter="mouseenter(index)"
+            @mouseleave="mouseleave">
+            <bk-form-item
+              class="w-[518px]"
+              label="数据源"
+              :property="`data_source_match_rules.${index}.data_source_id`"
+              :rules="rulesData.data_source_id"
+              required>
+              <bk-select v-model="item.data_source_id">
+                <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-[250px]" label="数据源字段" required />
+              <bk-form-item class="w-[250px] auth-source-fields" label="认证源字段" required />
+            </div>
+            <div class="item-flex" v-for="(field, i) in item.field_compare_rules" :key="i">
+              <bk-form-item
+                class="w-[250px]"
+                error-display-type="tooltips"
+                :property="`data_source_match_rules.${index}.field_compare_rules.${i}.source_field`"
+                :rules="rulesData.source_field">
+                <bk-select v-model="field.source_field">
+                  <bk-option
+                    v-for="option in dataSourceFields"
+                    :key="option.key"
+                    :id="option.key"
+                    :name="option.name"
+                    :disabled="option.disabled">
+                    <span>{{option.name}}</span>
+                  </bk-option>
+                </bk-select>
+              </bk-form-item>
+              <bk-form-item
+                class="w-[250px] auth-source-fields"
+                error-display-type="tooltips"
+                :property="`data_source_match_rules.${index}.field_compare_rules.${i}.target_field`"
+                :rules="rulesData.target_field">
+                <bk-input v-model="field.target_field" @focus="handleChange" />
+              </bk-form-item>
+              <bk-button
+                text
+                @click="handleItemChange(item.field_compare_rules, i, 'add')"
+              >
+                <i class="user-icon icon-plus-fill" />
+              </bk-button>
+              <bk-button
+                text
+                :disabled="item.field_compare_rules.length === 1"
+                @click="handleItemChange(item.field_compare_rules, i, 'remove')">
+                <i class="user-icon icon-minus-fill" />
+              </bk-button>
+              <span class="and" v-if="i !== 0">and</span>
+            </div>
+            <i
+              class="bk-sq-icon icon-close-fill"
+              v-if="formData.data_source_match_rules.length > 1 && hoverItem === index"
+              @click="handleDelete(index)"></i>
+            <span class="or" v-if="index !== 0">or</span>
+          </div>
+        </div>
+        <div class="add-data-source" @click="handleAdd">
+          <i class="user-icon icon-add-2"></i>
+          <span>新增数据源匹配</span>
+        </div>
+      </div>
+    </bk-form>
+    <div class="footer-wrapper">
+      <bk-button @click="emit('prev')">
+        上一步
+      </bk-button>
+      <bk-button theme="primary" @click="handleSubmit">
+        提交
+      </bk-button>
+      <bk-button @click="handleCancel">
+        取消
+      </bk-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import useValidate from '@/hooks/use-validate';
+import router from '@/router/index';
+
+const validate = useValidate();
+
+const emit = defineEmits(['prev']);
+
+defineProps({
+  plugin: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const formRef = ref();
+const formData = ref({
+  name: '',
+  plugin_id: '',
+  plugin_config: {
+    corp_id: '',
+    agent_id: '',
+    secret: '',
+  },
+  data_source_match_rules: [
+    {
+      data_source_id: '',
+      field_compare_rules: [
+        {
+          source_field: '',
+          target_field: '',
+        },
+      ],
+    },
+  ],
+});
+
+const LoginMethod = ref('a');
+
+const rules = {
+  name: [validate.required],
+  'plugin_config.corp_id': [validate.required],
+  'plugin_config.agent_id': [validate.required],
+  'plugin_config.secret': [validate.required],
+};
+
+const rulesData = {
+  data_source_id: [validate.required],
+  source_field: [validate.required],
+  target_field: [validate.required],
+};
+
+const dataSourceList = ref([
+  { key: 'a', name: '数据源111' },
+  { key: 'b', name: '数据源222' },
+]);
+const dataSourceFields = ref([
+  { key: 'a', name: 'aaaa' },
+  { key: 'b', name: 'bbbb' },
+]);
+
+const getFields = () => ({
+  source_field: '',
+  target_field: '',
+});
+
+const handleItemChange = (fields, index, action: 'add' | 'remove') => {
+  if (action === 'add') {
+    fields.splice(index + 1, 0, getFields());
+  } else {
+    fields.splice(index, 1);
+  }
+};
+
+// 新增数据源匹配
+const handleAdd = () => {
+  formData.value.data_source_match_rules.push({
+    data_source_id: '',
+    field_compare_rules: [
+      {
+        source_field: '',
+        target_field: '',
+      },
+    ],
+  });
+};
+// 删除数据源匹配
+const handleDelete = (index) => {
+  formData.value.data_source_match_rules.splice(index, 1);
+};
+
+const hoverItem = ref(null);
+const mouseenter = (index: number) => {
+  hoverItem.value = index;
+};
+
+const mouseleave = () => {
+  hoverItem.value = null;
+};
+
+const handleChange = () => {
+  window.changeInput = true;
+};
+
+const handleCancel = () => {
+  router.push({
+    name: 'authSourceList',
+  });
+};
+
+const handleSubmit = async () => {
+  await formRef.value.validate();
+};
+</script>
+
+<style lang="less" scoped>
+.details-wrapper {
+  width: 1000px;
+  margin: 0 auto;
+
+  .details-type {
+    display: flex;
+    padding: 10px 16px;
+    margin: 16px 0;
+    background: #FFF;
+    border-radius: 2px;
+    align-items: center;
+
+    .title {
+      font-size: 14px;
+      color: #313238;
+    }
+
+    .subtitle {
+      font-size: 12px;
+      color: #979BA5;
+    }
+  }
+
+  .auth-source-form {
+    .content-item {
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      .item-title {
+        padding: 16px 0 16px 24px;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      ::v-deep .bk-form-item {
+        padding-bottom: 24px;
+        margin-bottom: 0;
+        margin-left: 64px;
+        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: '';
+              }
+
+              &::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: '';
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+
+        span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  .footer-wrapper {
+    margin: 24px 0;
+
+    .bk-button {
+      width: 88px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/auth-source/new-data/config.vue b/src/pages/src/views/auth-source/new-data/config.vue
new file mode 100644
index 000000000..f2dd4ec24
--- /dev/null
+++ b/src/pages/src/views/auth-source/new-data/config.vue
@@ -0,0 +1,197 @@
+<template>
+  <bk-loading class="config-wrapper" :loading="isLoading">
+    <div class="config-content">
+      <div class="config-type">
+        <P class="title">认证源选择</P>
+        <ul>
+          <li
+            v-for="(item, index) in dataList"
+            v-show="item.id !== 'local'"
+            :key="index"
+            :class="{ 'active': currentPlugin.id === item.id }"
+            @click="handleClick(item)">
+            <div class="config-item">
+              <img :src="item.logo">
+              <div>
+                <p>{{item.name}}</p>
+                <span>{{item.description}}</span>
+              </div>
+            </div>
+            <i class="user-icon icon-check-line" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-wrapper">
+      <span v-bk-tooltips="{
+        content: '请选择认证源',
+        distance: 20,
+        disabled: !isDisabled,
+      }">
+        <bk-button
+          theme="primary"
+          class="mr8"
+          @click="handleNext"
+          :disabled="isDisabled"
+        >下一步</bk-button>
+      </span>
+      <bk-button @click="handleClickCancel">取消</bk-button>
+    </div>
+  </bk-loading>
+</template>
+
+<script setup lang="ts">
+import { bkTooltips as vBkTooltips } from 'bkui-vue';
+import { computed, onMounted, ref } from 'vue';
+
+import { getIdpsPlugins } from '@/http/authSourceFiles';
+import router from '@/router/index';
+import { useMainViewStore } from '@/store/mainView';
+
+const store = useMainViewStore();
+store.breadCrumbsTitle = '新建认证源';
+
+const emit = defineEmits(['next']);
+
+const dataList = ref([]);
+const isLoading = ref(false);
+const currentPlugin = ref({});
+
+const isDisabled = computed(() => JSON.stringify(currentPlugin.value) === '{}');
+
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    const res = await getIdpsPlugins();
+    dataList.value = res.data;
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const handleClick = (item) => {
+  currentPlugin.value = item;
+};
+
+const handleNext = () => {
+  if (currentPlugin.value.id === 'local') return;
+  emit('next', currentPlugin.value);
+};
+
+const handleClickCancel = () => {
+  router.push({
+    name: 'authSourceList',
+  });
+};
+</script>
+
+<style lang="less" scoped>
+.config-wrapper {
+  width: 1000px;
+  margin: 0 auto;
+
+  .config-content {
+    margin: 24px 0;
+    background-color: #fff;
+
+    .config-type {
+      padding: 24px 40px;
+
+      .title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #313238;
+      }
+
+      ul {
+        display: flex;
+        margin: 16px 0;
+
+        li {
+          width: 200px;
+          height: 84px;
+          margin-right: 16px;
+          cursor: pointer;
+          background: #F5F7FA;
+          border-radius: 2px;
+          box-sizing: content-box;
+
+          .icon-check-line {
+            display: none;
+          }
+
+          // &:hover {
+          //   border: 1px solid #3A84FF;
+          // }
+
+          .config-item {
+            display: flex;
+            padding: 12px 16px;
+            align-items: center;
+            justify-content: space-between;
+
+            img {
+              width: 24px;
+              height: 24px;
+              margin-right: 15px;
+            }
+
+            p {
+              font-size: 14px;
+              color: #313238;
+            }
+
+            span {
+              display: -webkit-box;
+              overflow: hidden;
+              color: #979BA5;
+              text-overflow: ellipsis;
+              word-break: break-all;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+            }
+          }
+        }
+
+        .active {
+          position: relative;
+          background-color: #fff;
+          border: 1px solid #3A84FF;
+
+          .icon-check-line {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 999;
+            display: inline-block;
+            font-size: 14px;
+            color: #fff;
+          }
+
+          &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-top: 24px solid #3A84FF;
+            border-left: 24px solid transparent;
+            content: '';
+          }
+        }
+      }
+    }
+  }
+
+  .footer-wrapper {
+    margin-bottom: 24px;
+
+    button {
+      width: 88px;
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/auth-source/new-data/index.vue b/src/pages/src/views/auth-source/new-data/index.vue
new file mode 100644
index 000000000..eb6ea5753
--- /dev/null
+++ b/src/pages/src/views/auth-source/new-data/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <MainBreadcrumbsDetails @toBack="toBack">
+      <template #content>
+        <bk-steps
+          ext-cls="steps-wrapper"
+          :cur-step="curStep"
+          :steps="stepsConfig"
+          class="mb20"
+        />
+      </template>
+    </MainBreadcrumbsDetails>
+    <div class="user-scroll-y">
+      <Config v-if="curStep === 1" @next="handleNext" />
+      <div v-else>
+        <WeCom
+          v-if="currentPlugin.id === 'wecom'"
+          :plugin="currentPlugin"
+          @prev="handlePrev" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, reactive, ref } from 'vue';
+
+import Config from './config.vue';
+import WeCom from './WeCom.vue';
+
+import MainBreadcrumbsDetails from '@/components/layouts/MainBreadcrumbsDetails.vue';
+import router from '@/router/index';
+
+const editLeaveBefore = inject('editLeaveBefore');
+const curStep = ref(1);
+const stepsConfig = reactive([
+  { title: '认证源选择', icon: 1 },
+  { title: '登录配置', icon: 2 },
+]);
+
+const toBack = async () => {
+  if (curStep.value === 2) {
+    getStatus();
+  } else {
+    router.push({ name: 'authSourceList' });
+  }
+};
+
+const currentPlugin = ref({});
+
+const handleNext = (item) => {
+  curStep.value = 2;
+  currentPlugin.value = item;
+};
+
+const handlePrev = () => {
+  getStatus();
+};
+
+const getStatus = async () => {
+  let enableLeave = true;
+  if (window.changeInput) {
+    enableLeave = await editLeaveBefore();
+    curStep.value = 1;
+  } else {
+    curStep.value = 1;
+  }
+  if (!enableLeave) {
+    return Promise.resolve(enableLeave);
+  }
+};
+</script>
+
+<style lang="less">
+.main-breadcrumbs-details {
+  .icon-arrow-left {
+    margin-right: 10px;
+    font-size: 18px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .tittle{
+    margin-right: 8px;
+    font-size: 16px;
+    color: #313238;
+  }
+
+  .steps-wrapper {
+    width: 360px;
+    margin: 0 auto;
+  }
+}
+
+.user-scroll-y {
+  height: calc(100vh - 104px);
+}
+</style>
diff --git a/src/pages/src/views/data-source/local-details/index.vue b/src/pages/src/views/data-source/local-details/index.vue
index cce54d76a..67fcf762c 100644
--- a/src/pages/src/views/data-source/local-details/index.vue
+++ b/src/pages/src/views/data-source/local-details/index.vue
@@ -1,6 +1,6 @@
 <template>
   <bk-loading :loading="isLoading">
-    <MainBreadcrumbsDetails :subtitle="subtitle">
+    <MainBreadcrumbsDetails :subtitle="subtitle" @toBack="toBack">
       <template #tag>
         <div class="data-source-type" v-for="item in typeList" :key="item">
           <img v-if="item.id === pluginId && item.logo" :src="item.logo">
@@ -99,6 +99,10 @@ const handleSync = async () => {
   const status = res.data?.status === 'failed' ? 'error' : 'success';
   Message({ theme: status, message: res.data.summary });
 };
+
+const toBack = () => {
+  router.push({ name: 'dataSource' });
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/pages/src/views/data-source/new-data/index.vue b/src/pages/src/views/data-source/new-data/index.vue
index e725efbd7..f0e057fd3 100644
--- a/src/pages/src/views/data-source/new-data/index.vue
+++ b/src/pages/src/views/data-source/new-data/index.vue
@@ -1,6 +1,6 @@
 <template>
   <bk-loading :loading="isLoading" class="data-source-wrapper">
-    <MainBreadcrumbsDetails>
+    <MainBreadcrumbsDetails @toBack="toBack">
       <template #tag>
         <bk-dropdown
           class="data-source-type"
@@ -109,6 +109,10 @@ const toggleType = (item) => {
     },
   });
 };
+
+const toBack = () => {
+  router.push({ name: 'dataSource' });
+};
 </script>
 
 <style lang="less" scoped>