From 0784cec47123022ef0f8b82b4dbe9385746186aa Mon Sep 17 00:00:00 2001
From: v_yutyi <a670003190@qq.com>
Date: Tue, 12 Sep 2023 09:55:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=BA=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/package.json                        |   2 +
 .../notify-editor/NotifyEditor.less           |  66 +++
 .../notify-editor/NotifyEditorTemplate.vue    | 363 ++++++++++++++
 .../notify-editor/editorTemplate.vue          |  75 +++
 src/pages/src/css/index.css                   |  10 +
 src/pages/src/css/reset.css                   |   1 -
 src/pages/src/hooks/useMenuInfo.ts            |   4 +
 src/pages/src/http/dataSourceFiles.ts         |  32 ++
 src/pages/src/http/types/dataSourceFiles.ts   |  19 +
 src/pages/src/router/index.ts                 |   4 +-
 src/pages/src/utils/index.ts                  |  72 +++
 .../src/views/data-source/LocalDataSource.vue | 202 ++++----
 .../data-source/local-details/PswInfo.vue     | 209 ++++----
 .../data-source/local-details/UserInfo.vue    |  99 ++--
 .../views/data-source/local-details/index.vue | 106 +---
 .../data-source/new-data/NewLocalData.vue     | 472 ++++++++++++++----
 .../src/views/tenant/group-details/index.vue  |   7 +-
 17 files changed, 1330 insertions(+), 413 deletions(-)
 create mode 100644 src/pages/src/components/notify-editor/NotifyEditor.less
 create mode 100644 src/pages/src/components/notify-editor/NotifyEditorTemplate.vue
 create mode 100644 src/pages/src/components/notify-editor/editorTemplate.vue

diff --git a/src/pages/package.json b/src/pages/package.json
index ea803dc5a..513534a31 100644
--- a/src/pages/package.json
+++ b/src/pages/package.json
@@ -19,6 +19,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "art-template": "^4.13.2",
     "axios": "^1.4.0",
     "bkui-vue": "0.0.1-beta.475",
diff --git a/src/pages/src/components/notify-editor/NotifyEditor.less b/src/pages/src/components/notify-editor/NotifyEditor.less
new file mode 100644
index 000000000..bb0bda9a7
--- /dev/null
+++ b/src/pages/src/components/notify-editor/NotifyEditor.less
@@ -0,0 +1,66 @@
+.tab-box {
+  .password-header {
+    display: flex;
+    line-height: 50px;
+
+    .bk-checkbox-group {
+      display: flex;
+      font-size: 14px;
+      line-height: 50px;
+
+      .password-tab {
+        padding-left: 20px;
+
+        .checkbox-item {
+          display: inline-block;
+          padding: 0 20px 0 5px;
+          font-size: 14px;
+        }
+
+        .bk-checkbox {
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .checkbox-zh {
+      width: 85% !important;
+    }
+
+    .checkbox-en {
+      width: 75% !important;
+    }
+
+    .edit-info {
+      color: #3A84FF;
+
+      :hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+::v-deep .show-tab-color {
+  .password-header {
+    display: flex;
+    border-bottom: 1px solid #dcdee5;
+
+    .active-tab {
+      border-bottom: 2px solid #3A84FF;
+    }
+
+    .password-tab span:hover {
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
+
+  .bk-tab-label-list .bk-tab-label-item.active::after {
+    height: 2px;
+  }
+
+  .bk-tab-header {
+    background-image: linear-gradient(transparent 41px, #dcdee5 0);
+  }
+}
diff --git a/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue b/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue
new file mode 100644
index 000000000..e7cad0ed4
--- /dev/null
+++ b/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue
@@ -0,0 +1,363 @@
+<template>
+  <div :class="['tab-box', isTemplate ? 'show-tab-color' : '']">
+    <slot name="label" />
+    <div class="password-content">
+      <div
+        class="template-config-container"
+        v-show="checkboxInfo[0].status && isTemplate"
+        data-test-id="list_emailInfo">
+        <ul class="template-config clearfix">
+          <li class="email-block">
+            <h3 class="email-block-name">{{createAccountEmail ? createAccountEmail : '即将到期提醒'}}</h3>
+            <div class="email-info clearfix">
+              <p class="title">标题<span class="star">*</span></p>
+              <bk-input
+                type="text" class="input-style"
+                v-model="expiringEmail.title" />
+            </div>
+            <div class="email-info clearfix">
+              <p class="title">发件人<span class="star">*</span></p>
+              <bk-input
+                type="text" class="input-style"
+                v-model="expiringEmail.sender" />
+            </div>
+            <div class="email-info clearfix">
+              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <edtiorTemplate
+                :toolbar-config="emailConfig"
+                :html-text="expiringEmail.content_html"
+                @updateContent="(html, text) => emit('handleEditorText', html, text, expiringEmailKey, 'email')" />
+            </div>
+          </li>
+          <li class="email-block">
+            <h3 class="email-block-name">{{resetPasswordEmail ? resetPasswordEmail : '已过期提醒'}}</h3>
+            <div class="email-info clearfix">
+              <p class="title">标题<span class="star">*</span></p>
+              <bk-input
+                type="text" class="input-style"
+                v-model="expiredEmail.title" />
+            </div>
+            <div class="email-info clearfix">
+              <p class="title">发件人<span class="star">*</span></p>
+              <bk-input
+                type="text" class="input-style"
+                v-model="expiredEmail.sender" />
+            </div>
+            <div class="email-info clearfix">
+              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <edtiorTemplate
+                :toolbar-config="emailConfig"
+                :html-text="expiredEmail.content_html"
+                @updateContent="(html, text) => emit('handleEditorText', html, text, expiredEmailKey, 'email')" />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="template-config-container"
+        v-show="checkboxInfo[1] && checkboxInfo[1].status && isTemplate"
+        data-test-id="list_emailInfo">
+        <ul class="template-config clearfix">
+          <li class="email-block">
+            <h3 class="email-block-name">{{createAccountSms ? createAccountSms : '即将到期提醒'}}</h3>
+            <div class="email-info clearfix">
+              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <edtiorTemplate
+                :toolbar-config="infoConfig"
+                :html-text="expiringSms.content_html"
+                @updateContent="(html, text) => emit('handleEditorText', html, text, expiringSmsKey, 'sms')" />
+            </div>
+          </li>
+          <li class="email-block">
+            <h3 class="email-block-name">{{resetPasswordSms ? resetPasswordSms : '已过期提醒'}}</h3>
+            <div class="email-info clearfix">
+              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <edtiorTemplate
+                :toolbar-config="infoConfig"
+                :html-text="expiredSms.content_html"
+                @updateContent="(html, text) => emit('handleEditorText', html, text, expiredSmsKey, 'sms')" />
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, reactive } from 'vue';
+
+import edtiorTemplate from './editorTemplate.vue';
+
+const props = defineProps({
+  activeMethods: {
+    type: String,
+    default: '',
+  },
+  checkboxInfo: {
+    type: Array,
+    default: () => ([]),
+  },
+  dataList: {
+    type: Object,
+    default: () => ({}),
+  },
+  isTemplate: {
+    type: Boolean,
+    default: false,
+  },
+  expiringEmailKey: {
+    type: String,
+    default: '',
+  },
+  expiredEmailKey: {
+    type: String,
+    default: '',
+  },
+  expiringSmsKey: {
+    type: String,
+    default: '',
+  },
+  expiredSmsKey: {
+    type: String,
+    default: '',
+  },
+  createAccountEmail: {
+    type: String,
+    default: '',
+  },
+  resetPasswordEmail: {
+    type: String,
+    default: '',
+  },
+  createAccountSms: {
+    type: String,
+    default: '',
+  },
+  resetPasswordSms: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['handleEditorText']);
+
+/* 邮箱工具栏配置 */
+const emailConfig = reactive({
+  toolbarKeys: [
+    'bold', 'italic', 'color',
+    {
+      key: 'group-justify',
+      iconSvg: `<svg viewBox="0 0 1024 1024">
+        <path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z
+          m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path>
+      </svg>`,
+      menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
+    },
+    'insertLink',
+  ],
+});
+
+/* 短信工具栏配置 */
+const infoConfig = reactive({
+  toolbarKeys: ['insertLink'],
+});
+
+const findMethodScene = (method, sceneKey) => computed(() => props.dataList
+  .find(item => item.method === method && item.scene === sceneKey) || {});
+
+const expiredEmail = findMethodScene('email', props.expiredEmailKey);
+const expiringEmail = findMethodScene('email', props.expiringEmailKey);
+const expiringSms = findMethodScene('sms', props.expiringSmsKey);
+const expiredSms = findMethodScene('sms', props.expiredSmsKey);
+</script>
+
+<style lang="less" scoped>
+.tab-box {
+  width: 860px;
+  border: 1px solid #3A84FF;
+}
+
+.show-tab-color {
+  .password-content {
+    padding: 20px;
+
+    .template-config-container {
+      border: 1px solid #dcdee5;
+    }
+  }
+
+  .bk-tab-label-list .bk-tab-label-item.active::after {
+    height: 2px;
+  }
+
+  .bk-tab-header {
+    background-image: linear-gradient(transparent 41px, #dcdee5 0);
+  }
+}
+
+.template-config-container {
+  position: relative;
+  width: 100%;
+
+  > ul.template-config > li.email-block {
+    float: left;
+    width: 50%;
+
+    &:first-child {
+      border-right: 1px solid #dcdee5;
+    }
+
+    > .email-block-name {
+      height: 42px;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 42px;
+      text-align: center;
+      background: #fafbfd;
+    }
+
+    > .email-info {
+      display: flex;
+      font-size: 0;
+      border-top: 1px solid #dcdee5;
+
+      input,
+      textarea {
+        border: none;
+        outline: none;
+        resize: none;
+      }
+
+      .title,
+      .input-text,
+      .textarea-text {
+        font-size: 14px;
+      }
+
+      .title {
+        width: 20%;
+        padding: 13px 0 10px;
+        text-align: center;
+        border-right: 1px solid #dcdee5;
+
+        .star {
+          display: inline-block;
+          margin: 0 0 0 3px;
+          line-height: 19px;
+          color: #ff5e5e;
+          vertical-align: middle;
+        }
+      }
+
+      .input-text {
+        width: 80%;
+        padding: 13px 0 10px 19px;
+      }
+
+      .input-style {
+        width: 80%;
+        height: 55px;
+        border: 1px solid transparent;
+      }
+
+      .is-focused {
+        border: 1px solid #3c96ff;
+      }
+
+      .focus-editor {
+        border: 1px solid #3c96ff;
+      }
+
+      ::v-deep .textarea-text {
+        width: 80%;
+        height: 260px;
+        overflow: hidden;
+        overflow-y: auto;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        word-break: break-all;
+        background: #fff;
+
+        &::-webkit-scrollbar {
+          width: 4px;
+          background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #dcdee5;
+          border-radius: 4px;
+        }
+
+        .bk-textarea-wrapper {
+          height: 100%;
+          border: none;
+
+          .bk-form-textarea {
+            height: 100%;
+
+            &::-webkit-scrollbar {
+              width: 4px;
+              background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background-color: #dcdee5;
+              border-radius: 4px;
+            }
+          }
+        }
+      }
+
+      ::v-deep .bk-form-control.control-active .bk-textarea-wrapper {
+        border: 1px solid #3A84FF;
+      }
+
+      ::v-deep .markdown-box {
+        width: 80%;
+        height: 260px;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        word-break: break-all;
+        background: #fff;
+
+        .toolbar-content {
+          height: 40px;
+
+          .w-e-toolbar {
+            padding-left: 15px;
+            background-color: #F0F2F5;
+          }
+        }
+
+        .editor-content {
+          width: 100%;
+          height: calc(100% - 40px);
+          overflow-y: auto;
+
+          &::-webkit-scrollbar {
+            width: 4px;
+            background-color: transparent;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-color: #dcdee5;
+            border-radius: 4px;
+          }
+
+          .w-e-text-container .w-e-scroll {
+            overflow: inherit !important;
+          }
+
+          .w-e-modal {
+            right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/components/notify-editor/editorTemplate.vue b/src/pages/src/components/notify-editor/editorTemplate.vue
new file mode 100644
index 000000000..baedf644d
--- /dev/null
+++ b/src/pages/src/components/notify-editor/editorTemplate.vue
@@ -0,0 +1,75 @@
+<template>
+  <div :class="['markdown-box', { 'focus-editor': isActive }]">
+    <Toolbar
+      class="toolbar-content"
+      :editor="editorRef "
+      :default-config="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      class="editor-content"
+      v-model="valueHtml"
+      :default-config="editorConfig"
+      :mode="mode"
+      @onCreated="handleCreated"
+      @onChange="handleChange"
+      @onFocus="handleFocus"
+      @onBlur="handleBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+
+import '@wangeditor/editor/dist/css/style.css';
+
+const props = defineProps({
+  htmlText: {
+    type: String,
+    default: '',
+  },
+  toolbarConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['updateContent']);
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = computed(() => props.htmlText);
+const editorConfig = { placeholder: '请输入内容...' };
+const mode = ref('simple');
+const isActive = ref(false);
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor === null) return;
+  editor.destroy();
+});
+
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+};
+
+// 当编辑器选区、内容变化时，即触发
+const handleChange = (editor) => {
+  emit('updateContent', editor.getHtml(), editor.getText());
+};
+
+const handleFocus = () => {
+  isActive.value = true;
+};
+
+const handleBlur = () => {
+  isActive.value = false;
+};
+</script>
+
+<style></style>
diff --git a/src/pages/src/css/index.css b/src/pages/src/css/index.css
index cd4c8d148..931f29c09 100644
--- a/src/pages/src/css/index.css
+++ b/src/pages/src/css/index.css
@@ -63,3 +63,13 @@
   border-radius: 4px;
   flex-shrink: 0;
 }
+
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    font-size: 0;
+    content: '';
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/src/css/reset.css b/src/pages/src/css/reset.css
index 80c74a7a8..b5216fd9a 100644
--- a/src/pages/src/css/reset.css
+++ b/src/pages/src/css/reset.css
@@ -51,7 +51,6 @@ big,
  
 cite,
  
-code,
 del,
  
 dfn,
diff --git a/src/pages/src/hooks/useMenuInfo.ts b/src/pages/src/hooks/useMenuInfo.ts
index 1a47df0ee..8c2c27025 100644
--- a/src/pages/src/hooks/useMenuInfo.ts
+++ b/src/pages/src/hooks/useMenuInfo.ts
@@ -1,10 +1,13 @@
 import { computed, inject } from 'vue';
 import { RouteLocationNormalizedLoaded, RouteRecordRaw, useRoute, useRouter } from 'vue-router';
 
+import { useMainViewStore } from '@/store/mainView';
+
 export const useMenuInfo = () => {
   const route = useRoute();
   const router = useRouter();
   const editLeaveBefore = inject('editLeaveBefore');
+  const store = useMainViewStore();
 
   // 获取 menu 相关配置
   const { children } = route.matched[0];
@@ -14,6 +17,7 @@ export const useMenuInfo = () => {
 
   // 获取 menu 默认激活信息
   const activeMenu = computed<RouteLocationNormalizedLoaded | RouteRecordRaw | undefined>(() => {
+    store.breadCrumbsTitle = route.meta.navName;
     const { activeMenu } = route.meta;
     if (activeMenu) {
       return routes.value.find((route: RouteRecordRaw) => route.name === activeMenu);
diff --git a/src/pages/src/http/dataSourceFiles.ts b/src/pages/src/http/dataSourceFiles.ts
index 803b108fc..b93a1056c 100644
--- a/src/pages/src/http/dataSourceFiles.ts
+++ b/src/pages/src/http/dataSourceFiles.ts
@@ -2,7 +2,9 @@ import http from './fetch';
 import type {
   DataSourceUsersParams,
   DataSourceUsersResult,
+  NewDataSourceParams,
   NewDataSourceUserParams,
+  PutDataSourceParams,
   PutDataSourceUserParams,
 } from './types/dataSourceFiles';
 
@@ -38,3 +40,33 @@ export const getDataSourceUserDetails = (id: string) => http.get(`/api/v1/web/da
  * 更新数据源用户
  */
 export const putDataSourceUserDetails = (params: PutDataSourceUserParams) => http.put(`/api/v1/web/data-sources/users/${params.id}/`, params);
+
+/**
+ * 数据源列表
+ */
+export const getDataSourceList = (keyword: string) => http.get(`/api/v1/web/data-sources/?keyword=${keyword}`);
+
+/**
+ * 数据源插件列表
+ */
+export const getDataSourcePlugins = () => http.get('/api/v1/web/data-sources/plugins/');
+
+/**
+ * 新建数据源
+ */
+export const newDataSource = (params: NewDataSourceParams) => http.post('/api/v1/web/data-sources/', params);
+
+/**
+ * 数据源详情
+ */
+export const getDataSourceDetails = (id: string) => http.get(`/api/v1/web/data-sources/${id}/`);
+
+/**
+ * 新建数据源默认配置
+ */
+export const getDefaultConfig = (id: string) => http.get(`/api/v1/web/data-sources/plugins/${id}/default-config/`);
+
+/**
+ * 更新数据源
+ */
+export const putDataSourceDetails = (params: PutDataSourceParams) => http.put(`/api/v1/web/data-sources/${params.id}/`, params);
diff --git a/src/pages/src/http/types/dataSourceFiles.ts b/src/pages/src/http/types/dataSourceFiles.ts
index 1846f30cb..87e5f85e6 100644
--- a/src/pages/src/http/types/dataSourceFiles.ts
+++ b/src/pages/src/http/types/dataSourceFiles.ts
@@ -51,3 +51,22 @@ export interface DataSourceUsersParams {
   page: number,
   pageSize: number,
 }
+
+/**
+ * 新建数据源参数
+ */
+export interface NewDataSourceParams {
+  name: string,
+  plugin_id: string,
+  plugin_config: {},
+  field_mapping: [],
+}
+
+/**
+ * 更新数据源参数
+ */
+export interface PutDataSourceParams {
+  id: string,
+  plugin_config: {},
+  field_mapping: [],
+}
diff --git a/src/pages/src/router/index.ts b/src/pages/src/router/index.ts
index 7addebe55..a62b15aa5 100644
--- a/src/pages/src/router/index.ts
+++ b/src/pages/src/router/index.ts
@@ -84,7 +84,7 @@ export default createRouter({
           ],
         },
         {
-          path: 'local-details/:name/:type/:id',
+          path: 'local-details/:id',
           name: 'dataConfDetails',
           meta: {
             routeParentName: 'dataSource',
@@ -94,7 +94,7 @@ export default createRouter({
           component: () => import('@/views/data-source/local-details/index.vue'),
         },
         {
-          path: 'new-local/:type',
+          path: 'new-local/:type/:id?',
           name: 'newLocal',
           meta: {
             routeParentName: 'dataSource',
diff --git a/src/pages/src/utils/index.ts b/src/pages/src/utils/index.ts
index c44a9124a..b8876a8b7 100644
--- a/src/pages/src/utils/index.ts
+++ b/src/pages/src/utils/index.ts
@@ -106,3 +106,75 @@ export function dateConvert(value: string) {
       return value;
   }
 }
+
+// 数据源启用状态
+export const dataSourceStatus = {
+  enabled: {
+    icon: normalImg,
+    text: '正常',
+  },
+  disabled: {
+    icon: unknownImg,
+    text: '未启用',
+  },
+};
+
+export const validTime = {
+  30: '一个月',
+  90: '三个月',
+  180: '六个月',
+  365: '一年',
+  '-1': '永久',
+};
+
+export function validTimeMap(value: number) {
+  return validTime[value];
+}
+
+export const noticeTime = {
+  1: '1天',
+  7: '7天',
+  15: '15天',
+};
+export function noticeTimeMap(value: any) {
+  const list: string[] = value?.map(key => noticeTime[key]).filter(Boolean) || [];
+  return list.join('，');
+};
+
+export const notification = {
+  email: '邮箱',
+  sms: '短信',
+};
+
+export function notificationMap(value: any) {
+  const list: string[] = value?.map(key => notification[key]).filter(Boolean) || [];
+  return list.join('，');
+};
+
+export const passwordMustIncludes = {
+  contain_lowercase: '小写字母',
+  contain_uppercase: '连续字母序',
+  contain_digit: '数字',
+  contain_punctuation: '特殊字符（除空格）',
+};
+
+export function passwordMustIncludesMap(value: any) {
+  const list: string[] = Object.entries(value)
+    .filter(([key, val]) => passwordMustIncludes[key] && val)
+    .map(([key]) => passwordMustIncludes[key]);
+  return list.join('，');
+};
+
+export const passwordNotAllowed = {
+  not_keyboard_order: '键盘序',
+  not_continuous_letter: '连续字母序',
+  not_continuous_digit: '连续数字序',
+  not_repeated_symbol: '重复字母、数字、特殊符号',
+};
+
+export function passwordNotAllowedMap(value: any) {
+  const list: string[] = Object.entries(value)
+    .filter(([key, val]) => passwordNotAllowed[key] && val)
+    .map(([key]) => passwordNotAllowed[key]);
+  return list.join('，') || '--';
+};
diff --git a/src/pages/src/views/data-source/LocalDataSource.vue b/src/pages/src/views/data-source/LocalDataSource.vue
index 53bf379cd..a8d7400bf 100644
--- a/src/pages/src/views/data-source/LocalDataSource.vue
+++ b/src/pages/src/views/data-source/LocalDataSource.vue
@@ -10,14 +10,15 @@
           <bk-dropdown-menu ext-cls="dropdown-menu-ul">
             <p class="dropdown-title">数据源类型选择</p>
             <bk-dropdown-item
-              v-for="item in dropdownList"
+              v-for="item in state.typeList"
               :key="item"
               @click="newDataSource(item)"
             >
-              <i :class="item.icon"></i>
+              <img v-if="item.logo" src="" alt="">
+              <i v-else :class="dataSourceType[item.id].icon"></i>
               <div class="dropdown-item">
-                <span class="dropdown-item-title">{{ item.title }}</span>
-                <span class="dropdown-item-subtitle">{{ item.subTitle }}</span>
+                <span class="dropdown-item-title">{{ item.name }}</span>
+                <span class="dropdown-item-subtitle">{{ item.description }}</span>
               </div>
             </bk-dropdown-item>
           </bk-dropdown-menu>
@@ -28,105 +29,132 @@
         v-model="searchVal"
         placeholder="搜索数据源名称"
         type="search"
+        clearable
+        @enter="handleEnter"
+        @clear="handleClear"
       />
     </header>
-    <bk-table
-      class="user-info-table"
-      :data="tableData"
-      settings
-      :border="['outer']"
-      show-overflow-tooltip
-    >
-      <bk-table-column prop="name" label="数据源名称">
-        <template #default="{ row }">
-          <bk-button text theme="primary" @click="handleClick(row)">
-            {{ row.name }}
-          </bk-button>
+    <bk-loading :loading="state.isLoading">
+      <bk-table
+        class="user-info-table"
+        :data="state.list"
+        :border="['outer']"
+        show-overflow-tooltip
+      >
+        <template #empty>
+          <Empty
+            :is-data-empty="state.isDataEmpty"
+            :is-search-empty="state.isEmptySearch"
+            :is-data-error="state.isDataError"
+            @handleEmpty="handleClear"
+            @handleUpdate="fetchDataSourceList"
+          />
         </template>
-      </bk-table-column>
-      <bk-table-column prop="type" label="数据源类型">
-        <template #default="{ row }">
-          <div>
-            <i :class="[dataSourceType[row.type]?.icon, 'type-icon']" />
-            <span>{{ dataSourceType[row.type]?.text }}</span>
-          </div>
-        </template>
-      </bk-table-column>
-      <bk-table-column prop="status" label="状态">
-        <template #default="{ row }">
-          <div>
-            <img :src="statusIcon[row.status]?.icon" class="account-status-icon" />
-            <span>{{ statusIcon[row.status]?.text }}</span>
-          </div>
-        </template>
-      </bk-table-column>
-      <bk-table-column prop="modified_by" label="更新人"></bk-table-column>
-      <bk-table-column prop="modified_at" label="更新时间"></bk-table-column>
-    </bk-table>
+        <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>
+              <i :class="[dataSourceType[row.plugin_id]?.icon, 'type-icon']" />
+              <span>{{ dataSourceType[row.plugin_id]?.text }}</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>
+    </bk-loading>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 
+import Empty from '@/components/Empty.vue';
+import { getDataSourceList, getDataSourcePlugins } from '@/http/dataSourceFiles';
 import router from '@/router/index';
-import { dataSourceType, statusIcon } from '@/utils';
+import { useMainViewStore } from '@/store/mainView';
+import { dataSourceStatus, dataSourceType } from '@/utils';
+
+const store = useMainViewStore();
+store.customBreadcrumbs = false;
 
 const searchVal = ref('');
-const dropdownList = ref([
-  {
-    icon: 'user-icon icon-shujuku',
-    title: '本地数据源',
-    subTitle: '支持用户的增删改查，以及用户的登录认证',
-    type: 'local',
-  },
-  // {
-  //   icon: 'user-icon icon-win',
-  //   title: 'Microsoft Active Directory',
-  //   subTitle:
-  //       '支持对接 Microsoft Active Directory，将用户信息同步到本地或者直接通过接口完成用户登录验证',
-  //   type: 'mad',
-  // },
-  // {
-  //   icon: 'user-icon icon-ladp',
-  //   title: 'OpenLDAP',
-  //   subTitle:
-  //       '支持对接 OpenLDAP，将用户信息同步到本地或者直接通过接口完成用户登录验证',
-  //   type: 'ldap',
-  // },
-  // {
-  //   icon: 'user-icon icon-qiyeweixin',
-  //   title: '企业微信',
-  //   subTitle: '支持企业微信用户数据同步和登录认证',
-  //   type: 'wechat',
-  // },
-]);
-
-const tableData = [
-  {
-    id: 2,
-    name: '联通子公司正式员工',
-    type: 'local',
-    status: 'normal',
-    modified_by: 'v_yutyi',
-    modified_at: '2022-04-30  22:35:49',
-  },
-  {
-    id: 10,
-    name: '企业内部',
-    type: 'local',
-    status: 'disabled',
-    modified_by: 'v_yutyi',
-    modified_at: '2022-04-30  22:35:49',
-  },
+const state = reactive({
+  isLoading: false,
+  list: [],
+  // 搜索结果为空
+  isEmptySearch: false,
+  // 表格请求出错
+  isDataError: false,
+  // 表格请求结果为空
+  isDataEmpty: false,
+  typeList: [],
+});
+
+const statusFilters = [
+  { text: '正常', value: 'enabled' },
+  { text: '未启用', value: 'disabled' },
 ];
 
+onMounted(() => {
+  fetchDataSourceList();
+  getDataSourcePlugins().then((res) => {
+    state.typeList = res.data;
+  });
+});
+
+const fetchDataSourceList = async () => {
+  try {
+    state.isLoading = true;
+    state.isDataEmpty = false;
+    state.isEmptySearch = false;
+    state.isDataError = false;
+    const res = await getDataSourceList(searchVal.value);
+    if (res.data.length === 0) {
+      searchVal.value === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
+    }
+    state.list = res.data;
+    state.isLoading = false;
+  } catch (error) {
+    state.isDataError = true;
+  } finally {
+    state.isLoading = false;
+  }
+};
+
+// 搜索数据源列表
+const handleEnter = (value: string) => {
+  searchVal.value = value;
+  fetchDataSourceList();
+};
+
+const handleClear = () => {
+  searchVal.value = '';
+  fetchDataSourceList();
+};
+
 function handleClick(item) {
   router.push({
     name: 'dataConfDetails',
     params: {
-      name: item.name,
-      type: item.type,
       id: item.id,
     },
   });
@@ -135,7 +163,7 @@ function newDataSource(item) {
   router.push({
     name: 'newLocal',
     params: {
-      type: item.type,
+      type: item.id,
     },
   });
 }
diff --git a/src/pages/src/views/data-source/local-details/PswInfo.vue b/src/pages/src/views/data-source/local-details/PswInfo.vue
index 54725f6dc..9086b9271 100644
--- a/src/pages/src/views/data-source/local-details/PswInfo.vue
+++ b/src/pages/src/views/data-source/local-details/PswInfo.vue
@@ -1,28 +1,37 @@
 <template>
-  <div class="details-info-wrapper user-scroll-y">
-    <ul class="details-info-content">
+  <bk-loading :loading="isLoading" class="details-info-wrapper user-scroll-y">
+    <ul class="details-info-content" v-if="openPasswordLogin">
       <li class="content-item">
         <div class="item-header">
-          <p class="item-title">账号信息</p>
+          <p class="item-title">密码规则</p>
           <bk-button outline theme="primary" @click="handleClickEdit">
             编辑
           </bk-button>
         </div>
-        <ul class="item-content">
-          <li v-for="(item, index) in state.accountInfo" :key="index">
-            <span class="key">{{ accountMap[item.key] }}：</span>
-            <span class="value">{{ item.value }}</span>
-          </li>
-        </ul>
-      </li>
-      <li class="content-item">
-        <div class="item-header">
-          <p class="item-title">密码规则</p>
-        </div>
         <ul class="item-content flex">
-          <li v-for="(item, index) in state.passwordRule" :key="index">
-            <span class="key">{{ accountMap[item.key] }}：</span>
-            <span class="value">{{ item.value }}</span>
+          <li>
+            <span class="key">密码长度：</span>
+            <span class="value">{{ passwordRule?.min_length }}~32位</span>
+          </li>
+          <li>
+            <span class="key">密码试错次数：</span>
+            <span class="value">{{ passwordRule?.max_retries }}次</span>
+          </li>
+          <li>
+            <span class="key">密码必须包含：</span>
+            <span class="value">{{ passwordMustIncludesMap(passwordRule) }}</span>
+          </li>
+          <li>
+            <span class="key">锁定时间：</span>
+            <span class="value">{{ passwordRule?.lock_time }}秒</span>
+          </li>
+          <li>
+            <span class="key">密码不允许：</span>
+            <span class="value">{{ passwordNotAllowedMap(passwordRule) }}</span>
+          </li>
+          <li>
+            <span class="key">密码有效期：</span>
+            <span class="value">{{ validTimeMap(passwordRule?.valid_time) }}</span>
           </li>
         </ul>
       </li>
@@ -31,109 +40,107 @@
           <p class="item-title">密码设置</p>
         </div>
         <ul class="item-content">
-          <li v-for="(item, index) in state.passwordSetting" :key="index">
-            <span class="key">{{ accountMap[item.key] }}：</span>
-            <span class="value">{{ item.value }}</span>
+          <li>
+            <span class="key">初始密码获取方式：</span>
+            <span class="value">{{ passwordMethod }}</span>
+          </li>
+          <li>
+            <span class="key">初始密码通知方式：</span>
+            <span class="value">{{ notificationMap(passwordInitial?.notification?.enabled_methods) }}</span>
+          </li>
+          <li>
+            <span class="key">密码到期提醒时间：</span>
+            <span class="value">{{ noticeTimeMap(passwordExpire?.remind_before_expire) }}</span>
+          </li>
+          <li>
+            <span class="key">密码到期通知方式：</span>
+            <span class="value">{{ notificationMap(passwordExpire?.notification?.enabled_methods) }}</span>
           </li>
         </ul>
       </li>
     </ul>
-  </div>
+    <div class="details-info-box" v-else>
+      <bk-exception
+        type="empty"
+        description="暂未开通账密登录">
+        <bk-button theme="primary" @click="handleClickEdit">
+          去开通
+        </bk-button>
+      </bk-exception>
+    </div>
+  </bk-loading>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
+import { getDataSourceDetails } from '@/http/dataSourceFiles';
 import router from '@/router';
+import { noticeTimeMap, notificationMap, passwordMustIncludesMap, passwordNotAllowedMap, validTimeMap } from '@/utils';
 
-const accountMap = {
-  account_validity: '账号有效期',
-  account_expiration_notice_time: '账号到期提醒时间',
-  account_expiration_notice_method: '账号到期提醒方式',
-  password_length: '密码长度',
-  max_trail_times_list: '密码试错次数',
-  password_must_includes: '密码必须包含',
-  auto_unlock_seconds: '锁定时间',
-  password_rule_length: '密码不允许',
-  frozen: '冻结',
-  password_valid_days_list: '密码有效期',
-  init_password_method: '初始密码获取方式',
-  init_password_notice_method: '初始密码通知方式',
-  password_expiration_notice_time: '密码到期提醒时间',
-  password_expiration_notice_method: '密码到期通知方式',
-};
-const state = reactive({
-  accountInfo: [
-    {
-      key: 'account_validity',
-      value: '永久',
-    },
-    {
-      key: 'account_expiration_notice_time',
-      value: ['1天', '7天'],
-    },
-    {
-      key: 'account_expiration_notice_method',
-      value: '邮箱',
-    },
-  ],
-  passwordRule: [
-    {
-      key: 'password_length',
-      value: '8-32位',
-    },
-    {
-      key: 'max_trail_times_list',
-      value: '3次',
-    },
-    {
-      key: 'password_must_includes',
-      value: ['小写字母', '大写字母', '数字'],
-    },
-    {
-      key: 'auto_unlock_seconds',
-      value: '600秒',
-    },
-    {
-      key: 'password_rule_length',
-      value: ['连续8位出现', '连续字母序'],
-    },
-    {
-      key: 'frozen',
-      value: '连续180天未登录自动冻结',
-    },
-    {
-      key: 'password_valid_days_list',
-      value: '一个月',
-    },
-  ],
-  passwordSetting: [
-    {
-      key: 'init_password_method',
-      value: '固定',
-    },
-    {
-      key: 'init_password_notice_method',
-      value: ['邮箱', '短信'],
-    },
-    {
-      key: 'password_expiration_notice_time',
-      value: ['1天', '7天', '15天'],
-    },
-    {
-      key: 'password_expiration_notice_method',
-      value: ['邮箱'],
-    },
-  ],
+const route = useRoute();
+const isLoading = ref(false);
+const openPasswordLogin = ref(true);
+const passwordRule = ref({});
+const passwordInitial = ref({});
+const passwordExpire = ref({});
+const plugin = ref({});
+
+const currentId = computed(() => route.params.id);
+const passwordMethod = computed(() => (passwordInitial.value?.generate_method === 'random' ? '随机' : '固定'));
+
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    const res = await getDataSourceDetails(currentId.value);
+    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) {
+    isLoading.value = false;
+  } finally {
+    isLoading.value = false;
+  }
 });
 
 const handleClickEdit = () => {
   router.push({
     name: 'newLocal',
+    params: {
+      type: plugin.value?.id,
+      id: currentId.value,
+    },
   });
 };
 </script>
 
 <style lang="less" scoped>
 @import url("@/css/tenantViewStyle.less");
+
+::v-deep .details-info-box {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  background: #fff;
+
+  .bk-exception {
+    .bk-exception-img {
+      width: 720px;
+      height: 360px;
+    }
+
+    .bk-exception-description {
+      margin-top: -30px;
+      font-size: 24px;
+      color: #63656E;
+    }
+
+    .bk-button {
+      width: 88px;
+    }
+  }
+}
 </style>
diff --git a/src/pages/src/views/data-source/local-details/UserInfo.vue b/src/pages/src/views/data-source/local-details/UserInfo.vue
index 5db9cc68c..aa1312cbe 100644
--- a/src/pages/src/views/data-source/local-details/UserInfo.vue
+++ b/src/pages/src/views/data-source/local-details/UserInfo.vue
@@ -110,44 +110,19 @@
 
 <script setup lang="ts">
 import { Message } from 'bkui-vue';
-import { computed, defineEmits, defineProps, inject, reactive, ref, watch } from 'vue';
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 import EditUser from './EditUser.vue';
 import ViewUser from './ViewUser.vue';
 
 import Empty from '@/components/Empty.vue';
-import { getDataSourceUserDetails } from '@/http/dataSourceFiles';
+import { getDataSourceUserDetails, getDataSourceUsers } from '@/http/dataSourceFiles';
+
+const route = useRoute();
+
+const currentId = computed(() => Number(route.params.id));
 
-defineProps({
-  users: {
-    type: Array,
-    default: () => ([]),
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  dataSourceId: {
-    type: Number,
-  },
-  isDataEmpty: {
-    type: Boolean,
-    default: false,
-  },
-  isEmptySearch: {
-    type: Boolean,
-    default: false,
-  },
-  isDataError: {
-    type: Boolean,
-    default: false,
-  },
-  pagination: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(['updateUsers', 'updatePageLimit', 'updatePageCurrent']);
 const editLeaveBefore = inject('editLeaveBefore');
 const searchVal = ref('');
 const detailsConfig = reactive({
@@ -202,6 +177,49 @@ watch(
 
 const isView = computed(() => detailsConfig.type === 'view');
 
+onMounted(() => {
+  getUsers();
+});
+
+const isLoading = ref(false);
+const isDataEmpty = ref(false);
+const isEmptySearch = ref(false);
+const isDataError = ref(false);
+
+const params = reactive({
+  id: currentId.value,
+  username: '',
+  page: 1,
+  pageSize: 10,
+});
+
+const pagination = reactive({
+  current: 1,
+  count: 0,
+  limit: 10,
+});
+
+const users = ref([]);
+
+const getUsers = async () => {
+  try {
+    isLoading.value = true;
+    isDataEmpty.value = false;
+    isEmptySearch.value = false;
+    isDataError.value = false;
+    const res = await getDataSourceUsers(params);
+    if (res.data.count === 0) {
+      params.username === '' ? isDataEmpty.value = true : isEmptySearch.value = true;
+    }
+    pagination.count = res.data.count;
+    users.value = res.data.results;
+  } catch (error) {
+    isDataError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
 const handleClick = async (type: string, item?: any) => {
   if (type !== 'add') {
     const res = await getDataSourceUserDetails(item.id);
@@ -244,7 +262,8 @@ const formatConvert = (data) => {
 
 const updateUsers = (value, text) => {
   detailsConfig.isShow = false;
-  emit('updateUsers', value);
+  params.username = value;
+  getUsers();
   Message({
     theme: 'success',
     message: text,
@@ -252,19 +271,25 @@ const updateUsers = (value, text) => {
 };
 
 const handleEnter = () => {
-  emit('updateUsers', searchVal.value);
+  params.username = searchVal.value;
+  getUsers();
 };
 
 const handleClear = () => {
   searchVal.value = '';
-  emit('updateUsers', searchVal.value);
+  params.username = '';
+  getUsers();
 };
 
 const pageLimitChange = (limit) => {
-  emit('updatePageLimit', limit);
+  pagination.limit = limit;
+  params.pageSize = limit;
+  getUsers();
 };
 const pageCurrentChange = (current) => {
-  emit('updatePageCurrent', current);
+  pagination.current = current;
+  params.page = current;
+  getUsers();
 };
 </script>
 
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 756345cf2..2c7a9ae50 100644
--- a/src/pages/src/views/data-source/local-details/index.vue
+++ b/src/pages/src/views/data-source/local-details/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <bk-loading :loading="isLoading">
     <MainBreadcrumbsDetails :subtitle="subtitle">
       <template #tag>
-        <bk-tag>
+        <bk-tag v-if="typeText">
           <template #icon>
-            <i :class="typeText.icon" />
+            <i :class="typeIcon" />
           </template>
-          {{ typeText.text }}
+          {{ typeText }}
         </bk-tag>
       </template>
     </MainBreadcrumbsDetails>
@@ -21,43 +21,26 @@
         :name="item.name"
         :label="item.label"
       >
-        <UserInfo
-          v-if="activeKey === 'user'"
-          :users="state.users"
-          :is-loading="state.isLoading"
-          :data-source-id="currentId"
-          :is-data-empty="state.isDataEmpty"
-          :is-empty-search="state.isEmptySearch"
-          :is-data-error="state.isDataError"
-          :pagination="state.pagination"
-          @updateUsers="updateUsers"
-          @updatePageLimit="updatePageLimit"
-          @updatePageCurrent="updatePageCurrent" />
+        <UserInfo v-if="activeKey === 'user'" />
         <PswInfo v-else />
       </bk-tab-panel>
     </bk-tab>
-  </div>
+  </bk-loading>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import PswInfo from './PswInfo.vue';
 import UserInfo from './UserInfo.vue';
 
 import MainBreadcrumbsDetails from '@/components/layouts/MainBreadcrumbsDetails.vue';
-import { getDataSourceUsers } from '@/http/dataSourceFiles';
+import { getDataSourceList } from '@/http/dataSourceFiles';
 import { dataSourceType } from '@/utils';
 
 const route = useRoute();
 
-// 当前面包屑展示文案
-const subtitle = computed(() => route.params.name);
-const typeText = computed(() => {
-  const { text, icon } = dataSourceType[route.params.type];
-  return { text, icon };
-});
 const currentId = computed(() => Number(route.params.id));
 
 const activeKey = ref('user');
@@ -66,66 +49,25 @@ const panels = reactive([
   { name: 'account', label: '账密信息' },
 ]);
 
-const state = reactive({
-  isLoading: false,
-  users: [],
-  departments: [],
-  // 搜索结果为空
-  isEmptySearch: false,
-  // 表格请求出错
-  isDataError: false,
-  // 表格请求结果为空
-  isDataEmpty: false,
-  pagination: {
-    current: 1,
-    count: 0,
-    limit: 10,
-  },
-});
+const isLoading = ref(false);
 
-const params = reactive({
-  id: currentId.value,
-  username: '',
-  page: 1,
-  pageSize: 10,
-});
+const subtitle = ref('');
+const typeText = ref('');
+const typeIcon = ref('');
 
-const getUsers = async () => {
-  try {
-    state.isLoading = true;
-    state.isDataEmpty = false;
-    state.isEmptySearch = false;
-    state.isDataError = false;
-    const res = await getDataSourceUsers(params);
-    if (res.data.count === 0) {
-      params.username === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
+onMounted(async () => {
+  isLoading.value = true;
+  const res = await getDataSourceList('');
+  res.data.forEach((item) => {
+    if (item.id === currentId.value) {
+      const { text, icon } = dataSourceType[item.plugin_id];
+      subtitle.value = item.name;
+      typeText.value = text;
+      typeIcon.value = icon;
     }
-    state.pagination.count = res.data.count;
-    state.users = res.data.results;
-    state.isLoading = false;
-  } catch (error) {
-    state.isDataError = true;
-  } finally {
-    state.isLoading = false;
-  }
-};
-getUsers();
-
-const updateUsers = (value: string) => {
-  params.username = value;
-  getUsers();
-};
-
-const updatePageLimit = (limit) => {
-  state.pagination.limit = limit;
-  params.pageSize = limit;
-  getUsers();
-};
-const updatePageCurrent = (current) => {
-  state.pagination.current = current;
-  params.page = current;
-  getUsers();
-};
+  });
+  isLoading.value = false;
+});
 </script>
 
 <style lang="less">
diff --git a/src/pages/src/views/data-source/new-data/NewLocalData.vue b/src/pages/src/views/data-source/new-data/NewLocalData.vue
index 906fe2527..6d5c07426 100644
--- a/src/pages/src/views/data-source/new-data/NewLocalData.vue
+++ b/src/pages/src/views/data-source/new-data/NewLocalData.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="data-source-wrapper">
+  <bk-loading :loading="isLoading" class="data-source-wrapper">
     <MainBreadcrumbsDetails>
       <template #tag>
         <bk-tag>
@@ -10,63 +10,65 @@
         </bk-tag>
       </template>
     </MainBreadcrumbsDetails>
-    <bk-form class="data-source-content user-scroll-y" form-type="vertical">
+    <bk-form
+      class="data-source-content user-scroll-y"
+      form-type="vertical"
+      ref="formRef"
+      :model="formData"
+      :rules="rulesInfo">
       <div class="content-item">
         <p class="item-title">基础信息</p>
-        <bk-form-item label="数据源名称" required>
-          <bk-input style="width: 560px;" v-model="data.name" />
+        <bk-form-item label="数据源名称" property="name" required>
+          <bk-input style="width: 560px;" v-model="formData.name" :disabled="isDisabled" />
         </bk-form-item>
         <bk-form-item label="" required>
-          <bk-checkbox v-model="data.openLogin">
+          <bk-checkbox v-model="formData.config.enable_account_password_login">
             开启账密登录
           </bk-checkbox>
         </bk-form-item>
       </div>
-      <template v-if="data.openLogin">
+      <template v-if="formData.config.enable_account_password_login">
         <div class="content-item">
           <p class="item-title">密码规则</p>
-          <bk-form-item label="密码长度" required>
+          <bk-form-item label="密码长度" property="config.password_rule.min_length" required>
             <bk-input
               style="width: 200px;"
               type="number"
               suffix="至32位"
-              v-model="data.passwordLength"
+              :min="10"
+              :max="31"
+              v-model="formData.config.password_rule.min_length"
             />
           </bk-form-item>
           <bk-form-item label="密码必须包含" required>
-            <bk-checkbox-group v-model="data.passwordMustIncludes">
-              <bk-checkbox
-                v-for="(item, index) in dataSourceConfig.passwordMustIncludes"
-                :key="index"
-                :label="item.value"
-              >{{ item.label }}</bk-checkbox
-              >
-            </bk-checkbox-group>
+            <bk-checkbox v-model="formData.config.password_rule.contain_lowercase">小写字母</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_uppercase">大写字母</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_digit">数字</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.contain_punctuation">特殊字符（除空格）</bk-checkbox>
+            <p class="error-text" v-show="passwordRuleError">密码规则不得为空</p>
           </bk-form-item>
-          <bk-form-item label="">
+          <bk-form-item label="" required>
             <div>
               <span>密码不允许连续</span>
               <bk-input
                 style="width: 85px;"
                 type="number"
                 behavior="simplicity"
-                v-model="data.passwordRultLength"
+                v-model="formData.config.password_rule.not_continuous_count"
               />
               <span>位 出现</span>
             </div>
-            <bk-checkbox-group v-model="data.excludeElementsConfig">
-              <bk-checkbox
-                v-for="(item, index) in dataSourceConfig.excludeElementsConfig"
-                :key="index"
-                :label="item.value"
-              >{{ item.label }}</bk-checkbox
-              >
-            </bk-checkbox-group>
+            <p class="error-text" v-show="passwordCountError">不能小于5位，大于10位</p>
+            <bk-checkbox v-model="formData.config.password_rule.not_keyboard_order">键盘序</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_continuous_letter">连续字母序</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_continuous_digit">连续数字序</bk-checkbox>
+            <bk-checkbox v-model="formData.config.password_rule.not_repeated_symbol">重复字母、数字、特殊符号</bk-checkbox>
+            <p class="error-text" v-show="passwordConfigError">密码规则不得为空</p>
           </bk-form-item>
           <bk-form-item label="密码有效期" required>
-            <bk-radio-group v-model="data.passwordValidDaysList">
+            <bk-radio-group v-model="formData.config.password_rule.valid_time">
               <bk-radio-button
-                v-for="(item, index) in dataSourceConfig.passwordValidDaysList"
+                v-for="(item, index) in passwordValidDaysList"
                 :key="index"
                 :label="item.days"
               >
@@ -75,9 +77,9 @@
             </bk-radio-group>
           </bk-form-item>
           <bk-form-item label="密码试错次数" required>
-            <bk-radio-group v-model="data.maxTrailTimesList">
+            <bk-radio-group v-model="formData.config.password_rule.max_retries">
               <bk-radio-button
-                v-for="(item, index) in dataSourceConfig.maxTrailTimesList"
+                v-for="(item, index) in maxTrailTimesList"
                 :key="index"
                 :label="item.times"
               >
@@ -85,78 +87,165 @@
               </bk-radio-button>
             </bk-radio-group>
           </bk-form-item>
-          <bk-form-item label="锁定时间" required>
+          <bk-form-item label="锁定时间" property="config.password_rule.lock_time" required>
             <bk-input
               style="width: 200px;"
               type="number"
               suffix="秒"
-              v-model="data.autoUnlockSeconds"
+              :min="0"
+              v-model="formData.config.password_rule.lock_time"
             />
           </bk-form-item>
         </div>
         <div class="content-item">
           <p class="item-title">初始密码设置</p>
           <bk-form-item label="" required>
-            <bk-checkbox v-model="data.forceResetFirstLogin">
+            <bk-checkbox v-model="formData.config.password_initial.force_change_at_first_login">
               首次登录强制修改密码
             </bk-checkbox>
           </bk-form-item>
           <bk-form-item label="" required>
             <div>
-              <bk-checkbox v-model="data.forceResetFirstLogin">
+              <bk-checkbox v-model="formData.config.password_initial.cannot_use_previous_password">
                 修改密码时不能重复前
               </bk-checkbox>
               <bk-input
                 style="width: 85px;"
                 type="number"
                 behavior="simplicity"
+                :min="5"
+                v-model="formData.config.password_initial.reserved_previous_password_count"
               />
               <span>次 用过的密码</span>
             </div>
           </bk-form-item>
           <bk-form-item class="form-item-flex" label="密码生成方式" required>
-            <bk-radio-group v-model="data.initPasswordMethod">
-              <bk-radio label="random_via_mail">随机</bk-radio>
-              <bk-radio label="fixed_preset">固定</bk-radio>
+            <bk-radio-group v-model="formData.config.password_initial.generate_method">
+              <bk-radio label="random">随机</bk-radio>
+              <bk-radio label="fixed">固定</bk-radio>
             </bk-radio-group>
-            <bk-input
-              class="input-password"
-              v-if="data.initPasswordMethod === 'fixed_preset'"
-              v-model="dataSourceConfig.fixedPassword"
-              type="password"
-            />
+            <div>
+              <bk-input
+                :class="['input-password', { 'input-error': fixedPasswordError }]"
+                v-if="formData.config.password_initial.generate_method === 'fixed'"
+                v-model="formData.config.password_initial.fixed_password"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                type="password"
+              />
+              <p class="fixed-password-error" v-show="fixedPasswordError">密码长度至少12位，必须包含大小写字母、数字</p>
+            </div>
+          </bk-form-item>
+          <bk-form-item label="通知方式" required>
+            <NotifyEditorTemplate
+              :active-methods="activeMethods"
+              :checkbox-info="checkboxInfo"
+              :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="'创建账户邮件'"
+              :reset-password-email="'重设密码后的邮件'"
+              :create-account-sms="'创建账户短信'"
+              :reset-password-sms="'重设密码后的短信'"
+              @handleEditorText="handleEditorText">
+              <template #label>
+                <div class="password-header">
+                  <bk-checkbox-group
+                    class="checkbox-zh"
+                    v-model="formData.config.password_initial.notification.enabled_methods">
+                    <bk-checkbox
+                      v-for="(item, index) in checkboxInfo" :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">编辑通知模板</span>
+                    <AngleUp v-if="isDropdownPasswordExpire" />
+                    <AngleDown v-else />
+                  </div>
+                </div>
+              </template>
+            </NotifyEditorTemplate>
           </bk-form-item>
         </div>
         <div class="content-item">
           <p class="item-title">密码到期提醒</p>
-          <bk-form-item label="提醒时间" required>
-            <bk-checkbox-group v-model="data.noticeTime">
+          <bk-form-item label="提醒时间" property="config.password_expire.remind_before_expire" required>
+            <bk-checkbox-group v-model="formData.config.password_expire.remind_before_expire">
               <bk-checkbox
-                v-for="(item, index) in dataSourceConfig.noticeTime"
+                v-for="(item, index) in noticeTimeList"
                 :key="index"
                 :label="item.value"
               >{{ item.label }}</bk-checkbox
               >
             </bk-checkbox-group>
           </bk-form-item>
+          <bk-form-item label="通知方式" required>
+            <NotifyEditorTemplate
+              :active-methods="activeMethods"
+              :checkbox-info="checkboxInfo"
+              :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
+                    class="checkbox-zh"
+                    v-model="formData.config.password_expire.notification.enabled_methods">
+                    <bk-checkbox
+                      v-for="(item, index) in checkboxInfo" :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">编辑通知模板</span>
+                    <AngleUp v-if="isDropdownPasswordExpire" />
+                    <AngleDown v-else />
+                  </div>
+                </div>
+              </template>
+            </NotifyEditorTemplate>
+          </bk-form-item>
         </div>
       </template>
       <div class="btn">
-        <bk-button theme="primary" class="mr8">提交</bk-button>
+        <bk-button theme="primary" class="mr8" @click="handleSubmit" :loading="btnLoading">提交</bk-button>
         <bk-button @click="handleClickCancel">取消</bk-button>
       </div>
     </bk-form>
-  </div>
+  </bk-loading>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { Message } from 'bkui-vue';
+import { AngleDown, AngleUp } from 'bkui-vue/lib/icon';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import MainBreadcrumbsDetails from '@/components/layouts/MainBreadcrumbsDetails.vue';
+import NotifyEditorTemplate from '@/components/notify-editor/NotifyEditorTemplate.vue';
+import useValidate from '@/hooks/use-validate';
+import { getDataSourceDetails, getDefaultConfig, newDataSource, putDataSourceDetails } from '@/http/dataSourceFiles';
 import router from '@/router';
+import { useMainViewStore } from '@/store/mainView';
+import { passwordMustIncludes, passwordNotAllowed } from '@/utils';
 
 const route = useRoute();
+const validate = useValidate();
+const store = useMainViewStore();
 
 // 当前面包屑展示文案
 const typeText = computed(() => {
@@ -174,63 +263,230 @@ const typeText = computed(() => {
   }
 });
 
-const data = reactive({
+const isDisabled = ref(false);
+const currentId = computed(() => {
+  const { id } = route.params;
+  isDisabled.value = !!id;
+  return id;
+});
+
+const formRef = ref();
+// 初始密码
+const isPasswordInitial = ref(false);
+const isDropdownPasswordInitial = ref(false);
+// 密码到期
+const isPasswordExpire = ref(false);
+const isDropdownPasswordExpire = ref(false);
+const activeMethods = ref('email');
+const isLoading = ref(false);
+const passwordRuleError = ref(false);
+const passwordCountError = ref(false);
+const passwordConfigError = ref(false);
+const fixedPasswordError = ref(false);
+
+const formData = reactive({
   name: '',
-  openLogin: true,
-  passwordLength: '',
-  passwordRultLength: '',
-  passwordMustIncludes: [],
-  excludeElementsConfig: [],
-  passwordValidDaysList: 30,
-  maxTrailTimesList: 3,
-  autoUnlockSeconds: '',
-  forceResetFirstLogin: true,
-  initPasswordMethod: '',
-  noticeTime: [],
+  config: {},
+});
+
+const rulesInfo = {
+  name: [validate.required, validate.name],
+  min_length: [validate.required],
+};
+
+onMounted(async () => {
+  isLoading.value = true;
+  try {
+    if (currentId.value) {
+      store.breadCrumbsTitle = '编辑数据源';
+      const res = await getDataSourceDetails(currentId.value);
+      formData.name = res?.data?.name;
+      if (!res?.data?.plugin_config?.enable_account_password_login) {
+        const demo = await getDefaultConfig(route.params.type);
+        formData.config = {
+          ...demo?.data?.config,
+          enable_account_password_login: false,
+        };
+      } else {
+        formData.config = res?.data?.plugin_config;
+      }
+    } else {
+      const res = await getDefaultConfig(route.params.type);
+      formData.config = res?.data?.config;
+    }
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    isLoading.value = false;
+  }
 });
 
-const dataSourceConfig = reactive({
-  passwordMustIncludes: [
-    { value: 'lower', label: '小写字母' },
-    { value: 'upper', label: '大写字母' },
-    { value: 'int', label: '数字' },
-    { value: 'special', label: '特殊字符（除空格）' },
-  ],
-  excludeElementsConfig: [
-    { value: 'keyboard_seq', label: '键盘序' },
-    { value: 'alphabet_seq', label: '连续字母序' },
-    { value: 'num_seq', label: '连续数字序' },
-    { value: 'special_seq', label: '连续特殊符号序' },
-    { value: 'duplicate_char', label: '重复字母、数字、特殊符号' },
-  ],
-  passwordValidDaysList: [
-    { days: 30, text: '一个月' },
-    { days: 90, text: '三个月' },
-    { days: 180, text: '六个月' },
-    { days: 365, text: '一年' },
-    { days: -1, text: '永久' },
-  ],
-  maxTrailTimesList: [
-    { times: 3, text: '3次' },
-    { times: 5, text: '5次' },
-    { times: 10, text: '10次' },
-  ],
-  forceResetFirstLogin: true,
-  initPasswordMethod: 'fixed_preset',
-  fixedPassword: '',
-  noticeTime: [
-    { value: 1, label: '1天' },
-    { value: 7, label: '7天' },
-    { value: 15, label: '15天' },
-  ],
+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 {
+    passwordCountError.value = count === 0 && !passwordConfigError.value;
+    passwordConfigError.value = count !== 0 && passwordConfigError.value;
+  }
+}, { deep: true });
+
+watch(() => formData.config?.password_rule?.not_continuous_count, (value) => {
+  if (!value) return;
+  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);
+}, { deep: true });
+
+watch(() => formData.config?.password_initial?.generate_method, (value) => {
+  if (value === 'random') {
+    formData.config.password_initial.fixed_password = null;
+    fixedPasswordError.value = false;
+  }
 });
 
+const passwordValidDaysList = reactive([
+  { days: 30, text: '一个月' },
+  { days: 90, text: '三个月' },
+  { days: 180, text: '六个月' },
+  { days: 365, text: '一年' },
+  { days: -1, text: '永久' },
+]);
+
+const maxTrailTimesList = reactive([
+  { times: 3, text: '3次' },
+  { times: 5, text: '5次' },
+  { times: 10, text: '10次' },
+]);
+
+const noticeTimeList = reactive([
+  { value: 1, label: '1天' },
+  { value: 7, label: '7天' },
+  { value: 15, label: '15天' },
+]);
+
+const checkboxInfo = [
+  { value: 'email', label: '邮箱', status: true },
+  { value: 'sms', label: '短信', status: false },
+];
+
+const handleEditorText = (html, text, key, type) => {
+  formData.config.password_expire.notification.templates.forEach((item) => {
+    if (item.method === type && item.scene === key) {
+      item.content = text;
+      item.content_html = html;
+    }
+  });
+};
+
+const handleClickLabel = (item) => {
+  checkboxInfo.forEach((element) => {
+    element.status = element.value === item.value;
+  });
+};
+
+const passwordInitialTemplate = () => {
+  isPasswordInitial.value = !isPasswordInitial.value;
+  isDropdownPasswordInitial.value = !isDropdownPasswordInitial.value;
+};
+
+const passwordExpireTemplate = () => {
+  isPasswordExpire.value = !isPasswordExpire.value;
+  isDropdownPasswordExpire.value = !isDropdownPasswordExpire.value;
+};
+
 const handleClickCancel = () => {
   router.go(-1);
 };
+
+const btnLoading = ref(false);
+const handleSubmit = async () => {
+  try {
+    if (passwordRuleError.value
+      || passwordCountError.value
+      || passwordConfigError.value
+      || fixedPasswordError.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,
+      };
+    }
+    currentId.value ? updateDataSource(params) : getDataSource(params);
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    btnLoading.value = false;
+  }
+};
+
+const updateDataSource = async (params) => {
+  const data = {
+    id: currentId.value,
+    field_mapping: params.field_mapping,
+    plugin_config: params.plugin_config,
+  };
+  await putDataSourceDetails(data);
+  router.push({ name: 'local' });
+  Message({
+    theme: 'success',
+    message: '数据源更新成功',
+  });
+};
+
+const getDataSource = async (params) => {
+  await newDataSource(params);
+  router.push({ name: 'local' });
+  Message({
+    theme: 'success',
+    message: '数据源创建成功',
+  });
+};
+
+const handleBlur = () => {
+  const result = /^\S*(?=\S{12,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(formData.config.password_initial.fixed_password);
+  fixedPasswordError.value = !result;
+};
+
+const handleFocus = () => {
+  fixedPasswordError.value = false;
+};
 </script>
 
 <style lang="less" scoped>
+@import url('@/components/notify-editor/NotifyEditor.less');
+
 .data-source-wrapper {
   .data-source-content {
     height: calc(100vh - 104px);
@@ -247,7 +503,7 @@ const handleClickCancel = () => {
         font-weight: 700;
       }
 
-      :deep(.bk-form-item) {
+      ::v-deep .bk-form-item {
         padding-bottom: 24px;
         margin-bottom: 0;
         margin-left: 64px;
@@ -268,16 +524,38 @@ const handleClickCancel = () => {
         .bk-radio-label {
           font-size: 14px !important;
         }
+
+        .error-text {
+          font-size: 12px;
+          line-height: 1;
+          color: #ea3636;
+          animation: form-error-appear-animation .15s;
+        }
+
+        .fixed-password-error {
+          position: absolute;
+          left: 155px;
+          padding-top: 4px;
+          font-size: 12px;
+          line-height: 1;
+          color: #ea3636;
+          text-align: left;
+          animation: form-error-appear-animation 0.15s;
+        }
       }
 
       .form-item-flex {
-        :deep(.bk-form-content) {
+        ::v-deep .bk-form-content {
           display: flex;
 
           .input-password {
             width: 240px;
             margin-left: 24px;
           }
+
+          .input-error {
+            border-color: #ea3636;
+          }
         }
       }
     }
diff --git a/src/pages/src/views/tenant/group-details/index.vue b/src/pages/src/views/tenant/group-details/index.vue
index d9128e328..df4e44482 100644
--- a/src/pages/src/views/tenant/group-details/index.vue
+++ b/src/pages/src/views/tenant/group-details/index.vue
@@ -58,11 +58,7 @@
               <span>{{ convertFormat(row.data_sources) }}</span>
             </template>
           </bk-table-column>
-          <bk-table-column prop="create_at" label="创建时间">
-            <template #default="{ row }">
-              <span>{{ moment(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}</span>
-            </template>
-          </bk-table-column>
+          <bk-table-column prop="created_at" label="创建时间" />
           <bk-table-column label="操作">
             <template #default="{ row }">
               <bk-button
@@ -113,7 +109,6 @@
 
 <script setup lang="ts">
 import { Message } from 'bkui-vue';
-import moment from 'moment';
 import { computed, inject, reactive, ref, watch } from 'vue';
 
 import OperationDetails from './OperationDetails.vue';