diff --git a/dbm-ui/frontend/.eslintignore b/dbm-ui/frontend/.eslintignore
index 541a2a38d7..55042961bd 100644
--- a/dbm-ui/frontend/.eslintignore
+++ b/dbm-ui/frontend/.eslintignore
@@ -2,3 +2,4 @@ node_modules/
 dist/
 public/
 src/types/auto-imports.d.ts
+patch/
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index ff381b9dbc..b3ed0da68d 100644
--- a/dbm-ui/frontend/package.json
+++ b/dbm-ui/frontend/package.json
@@ -18,6 +18,7 @@
     "@blueking/bk-weweb": "0.0.15",
     "@blueking/bkflow.js": "0.1.10",
     "@blueking/ip-selector": "0.0.1-beta.126",
+    "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "10.2.1",
     "axios": "1.2.1",
     "bkui-vue": "0.0.2-beta.68",
diff --git a/dbm-ui/frontend/patch/user-selector/alternate-item.tsx b/dbm-ui/frontend/patch/user-selector/alternate-item.tsx
new file mode 100644
index 0000000000..ebeafc51ef
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/alternate-item.tsx
@@ -0,0 +1,120 @@
+// @ts-nocheck
+import { computed, defineComponent, toRefs, withModifiers } from 'vue';
+
+import RenderAvatar from './render-avatar';
+import RenderList from './render-list';
+import tooltips from './tooltips';
+
+export default defineComponent({
+  name: 'AlternateItem',
+  directives: {
+    tooltips,
+  },
+  // props: ['selector', 'user', 'keyword', 'index'],
+  props: {
+    selector: {
+      type: Object,
+    },
+    user: {
+      type: Object,
+    },
+    keyword: {
+      type: String,
+    },
+    index: {
+      type: Number,
+    },
+  },
+  setup(props) {
+    const { selector, user, keyword } = toRefs(props);
+    const disabled = computed(() => selector.value.disabledUsers.includes(user.value.username));
+    const getItemContent = () => {
+      const [nameWithoutDomain, domain] = user.value.username.split('@');
+      let displayText = nameWithoutDomain;
+      if (keyword.value) {
+        displayText = displayText.replace(
+          new RegExp(keyword.value, 'g'),
+          `<span>${keyword.value}</span>`,
+        );
+      }
+      const displayUsername = selector.value.displayDomain && domain
+        ? `${displayText}@${domain}`
+        : displayText;
+
+      const displayName = user.value.display_name;
+      if (displayName) {
+        return `${displayUsername}(${displayName})`;
+      }
+
+      return displayUsername;
+    };
+    const getTitle = () => selector.value.getDisplayText(user.value);
+
+    return {
+      disabled,
+      getItemContent,
+      getTitle,
+    };
+  },
+  render() {
+    return (
+      <li
+        class={[
+          'alternate-item',
+          this.index === this.selector.highlightIndex ? 'highlight' : '',
+          this.disabled && !this.selector.renderList ? 'disabled' : '',
+        ]}
+        onClick={e => e.stopPropagation()}
+        onMousedown={withModifiers(() => this.selector.handleUserMousedown(this.user, this.disabled), ['left', 'stop'])}
+        onMouseup={withModifiers(() => this.selector.handleUserMouseup(this.user, this.disabled), ['left', 'stop'])}>
+        {
+          this.selector.renderList
+            ? <>
+              <RenderList
+                selector={this.selector}
+                keyword={this.keyword}
+                user={this.user}
+                disabled={this.disabled}
+              >
+              </RenderList>
+            </>
+            : <>
+              {
+                this.selector.tagType === 'avatar'
+                  ? <>
+                    <RenderAvatar
+                      class="item-avatar"
+                      user={this.user}
+                      urlMethod={this.selector.avatarUrl}>
+                    </RenderAvatar>
+                  </>
+                  : null
+              }
+              {
+                this.selector.displayListTips && this.user.category_name
+                  ? <>
+                    <span
+                      class="item-folder"
+                      v-tooltips={{
+                        placement: 'right',
+                        interactive: true,
+                        theme: 'light list-item-tips',
+                        content: this.user.category_name,
+                        offset: [0, 18],
+                      }}>
+                      { this.user.category_name }
+                    </span>
+                  </>
+                  : null
+              }
+              <span
+                class="item-name"
+                title={this.getTitle()}
+                v-html={this.getItemContent()}
+              ></span>
+            </>
+        }
+      </li>
+    );
+  },
+});
diff --git a/dbm-ui/frontend/patch/user-selector/alternate-list.tsx b/dbm-ui/frontend/patch/user-selector/alternate-list.tsx
new file mode 100644
index 0000000000..fdb08056ed
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/alternate-list.tsx
@@ -0,0 +1,165 @@
+/* eslint-disable no-prototype-builtins */
+
+import { hideAll } from 'tippy.js';
+import {
+  type ComponentPublicInstance,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  type HTMLAttributes,
+  nextTick,
+  ref,
+  watch,
+  withModifiers,
+} from 'vue';
+
+import AlternateItem from './alternate-item';
+import instanceStore from './instance-store';
+
+export default defineComponent({
+  setup() {
+    const { proxy } = getCurrentInstance();
+    instanceStore.setInstance('alternateContent', 'alternateList', proxy);
+
+    const selector = ref(null);
+    const keyword = ref('');
+    const next = ref(true);
+    const loading = ref(true);
+    const matchedUsers = ref([]);
+    const wrapperStyle = computed(() => {
+      const style: any = {};
+      if (selector.value?.panelWidth) {
+        style.width = `${parseInt(selector.value.panelWidth, 10)}px`;
+      }
+      return style;
+    });
+    const listStyle = computed(() => {
+      const style = {
+        'max-height': '192px',
+      };
+      if (selector.value) {
+        const maxHeight = parseInt(selector.value.listScrollHeight, 10);
+        if (!isNaN(maxHeight)) {
+          style['max-height'] = `${maxHeight}px`;
+        }
+      }
+      return style;
+    });
+    const getIndex = (index: number, childIndex = 0) => {
+      let flattenedIndex = 0;
+      matchedUsers.value.slice(0, index).forEach((user) => {
+        if (user.hasOwnProperty('children')) {
+          flattenedIndex += user.children.length;
+        } else {
+          flattenedIndex += 1;
+        }
+      });
+      return flattenedIndex + childIndex;
+    };
+
+    const handleScroll = () => {
+      hideAll({ exclude: selector.value.inputRef, duration: 0 });
+      if (loading.value || !next.value) {
+        return false;
+      }
+      const list = alternateList.value;
+      const threshold = 32;
+      if (list.scrollTop + list.clientHeight > list.scrollHeight - threshold) {
+        selector.value.search(keyword.value, next.value);
+      }
+    };
+
+    watch(keyword, () => {
+      alternateItem.value = [];
+      nextTick(() => {
+        alternateList.value.scrollTop = 0;
+      });
+    });
+
+    const alternateListContainer = ref(null);
+    const alternateList = ref(null);
+    const alternateItem = ref([]);
+
+    const setRef = (el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => {
+      alternateItem.value.push(el);
+    };
+
+    return {
+      selector,
+      keyword,
+      next,
+      loading,
+      matchedUsers,
+      wrapperStyle,
+      listStyle,
+      getIndex,
+      handleScroll,
+      alternateListContainer,
+      alternateList,
+      alternateItem,
+      setRef,
+    };
+  },
+  render() {
+    return (
+      <div ref="alternateListContainer"
+        class={[
+          'user-selector-alternate-list-wrapper',
+          this.selector?.displayListTips ? 'has-folder' : '',
+          this.loading ? 'is-loading' : '',
+        ]}
+        style={this.wrapperStyle}>
+        <ul
+          class="alternate-list"
+          ref="alternateList"
+          style={this.listStyle}
+          onScroll={() => void this.handleScroll()}>
+          {
+            this.matchedUsers.map((user, index) => {
+              if (user.hasOwnProperty('children')) {
+                return <>
+                  <li
+                    class="alternate-group"
+                    onClick={e => e.stopPropagation()}
+                    onMousedown={withModifiers((): any => void this.selector.handleGroupMousedown(), ['left', 'stop'])}
+                    onMouseup={withModifiers((): any => void this.selector.handleGroupMouseup(), ['left', 'stop'])}>
+                    { `${user.display_name}(${user.children.length})` }
+                  </li>
+                  {
+                    user.children.map((child: any, childIndex: number) => <>
+                      <AlternateItem
+                        // ref="alternateItem"
+                        ref={(el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => void this.setRef(el)}
+                        index={this.getIndex(index, childIndex)}
+                        selector={this.selector}
+                        user={child}
+                        keyword={this.keyword} />
+                    </>)
+                  }
+                </>;
+              }
+              return <>
+                <AlternateItem
+                  // ref="alternateItem"
+                  ref={(el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => void this.setRef(el)}
+                  selector={this.selector}
+                  user={user}
+                  index={this.getIndex(index)}
+                  keyword={this.keyword} />
+              </>;
+            })
+          }
+        </ul>
+        {
+           (!this.loading && !this.matchedUsers.length)
+             ? <>
+              <p class="alternate-empty" >
+                { this.selector.emptyText }
+              </p>
+             </>
+             : null
+        }
+      </div>
+    );
+  },
+});
diff --git a/dbm-ui/frontend/patch/user-selector/icon-user.svg b/dbm-ui/frontend/patch/user-selector/icon-user.svg
new file mode 100644
index 0000000000..4bdf4f533d
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/icon-user.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C6CC"  d="M60,32c0,14.1-10.5,26-24.5,27.8c-14,1.8-27.1-7.2-30.6-20.9S8.7,11.1,21.8,6 c6.5-2.6,13.8-2.6,20.4,0C52.9,10.2,60,20.5,60,32 M21.2,26.1c-0.1,4.4,2.2,8.5,5.9,10.8c2.9,1.7,6.6,1.7,9.5,0.1 c3.9-2.3,6.2-6.4,6.1-10.9c0.5-4.1-1.5-8.1-5-10.4c-3.5-2.2-8-2.2-11.5,0S20.8,22,21.2,26.1 M32.1,58.1c7.9,0,15.3-3.5,20.3-9.6 c-0.6-4.6-5.1-8.6-11.5-10.6c-5.1,4.7-12.9,4.6-17.9-0.2c-6.2,1.8-10.8,5.4-11.9,9.7C16,54.2,23.8,58.1,32.1,58.1"/></svg>
\ No newline at end of file
diff --git a/dbm-ui/frontend/patch/user-selector/index.ts b/dbm-ui/frontend/patch/user-selector/index.ts
new file mode 100644
index 0000000000..250dbc4e80
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/index.ts
@@ -0,0 +1,31 @@
+import type { App, Plugin } from 'vue';
+
+import request from './request';
+import UserSelector from './selector.vue';
+
+// UserSelector.install = (Vue) => {
+//   window.$vueApp.component(UserSelector.name, UserSelector);
+// };
+
+// export default UserSelector;
+
+// export { request };
+
+export interface OriginComponent {
+  name: string;
+  install?: Plugin;
+}
+
+const withInstall = <T extends OriginComponent>(component: T): T & Plugin  => {
+  // eslint-disable-next-line no-param-reassign
+  component.install = function (app: App, { prefix } = {}) {
+    const pre = app.config.globalProperties.bkUIPrefix || prefix || 'Bk';
+    app.component(pre + component.name, component);
+  };
+  return component as T & Plugin;
+};
+
+export { request };
+
+const BkUserSelector = withInstall(UserSelector);
+export default BkUserSelector;
diff --git a/dbm-ui/frontend/patch/user-selector/instance-store.ts b/dbm-ui/frontend/patch/user-selector/instance-store.ts
new file mode 100644
index 0000000000..fedc963480
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/instance-store.ts
@@ -0,0 +1,16 @@
+import { type ComponentPublicInstance } from 'vue';
+
+const store = {};
+
+export default {
+  setInstance(group: string, id: string, proxy: ComponentPublicInstance) {
+    if (!store[group]) {
+      store[group] = {};
+    }
+
+    store[group][id] = proxy;
+  },
+  getInstance(group: string, id: string) {
+    return store[group][id];
+  },
+};
diff --git a/dbm-ui/frontend/patch/user-selector/render-alternate.ts b/dbm-ui/frontend/patch/user-selector/render-alternate.ts
new file mode 100644
index 0000000000..3d7cc39a91
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/render-alternate.ts
@@ -0,0 +1,20 @@
+// import * as Vue from 'vue';
+// export default {
+//   name: 'render-alternate',
+//   data() {
+//     return { selector: null };
+//   },
+//   render() {
+//     return this.selector.defaultAlternate(Vue.h);
+//   },
+// };
+
+import { h } from 'vue';
+
+export default {
+  name: 'render-alternate',
+  props: ['selector'],
+  setup(props: any): any {
+    return () => props.selector.defaultAlternate(h);
+  },
+};
diff --git a/dbm-ui/frontend/patch/user-selector/render-avatar.tsx b/dbm-ui/frontend/patch/user-selector/render-avatar.tsx
new file mode 100644
index 0000000000..886945aaa1
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/render-avatar.tsx
@@ -0,0 +1,51 @@
+// export default {
+//   name: 'render-avatar',
+//   props: ['user', 'urlMethod'],
+//   render() {
+//     return <span class="user-selector-avatar"></span>;
+//   },
+//   async created() {
+//     try {
+//       let avatar = null;
+//       if (typeof this.user === 'string') {
+//         avatar = await this.urlMethod(this.user);
+//       } else if (typeof this.user === 'object') {
+//         avatar = this.user.avatar
+//           || this.user.logo
+//           || (await this.urlMethod(this.user.username));
+//       }
+//       if (avatar) {
+//         this.$el.style.backgroundImage = `url(${avatar})`;
+//       }
+//     } catch (e) {}
+//   },
+// };
+
+import { onMounted, ref, watch } from 'vue';
+
+export default {
+  name: 'render-avatar',
+  props: ['user', 'urlMethod'],
+  setup(props: any) {
+    const avatar = ref('');
+    onMounted(async () => {
+      try {
+        if (typeof props.user === 'string') {
+          avatar.value = await props.urlMethod(props.user);
+        } else if (typeof props.user === 'object') {
+          avatar.value = props.user.avatar || props.user.logo || (await props.urlMethod(props.user.username));
+        }
+      } catch (e) {}
+    });
+
+    const userSelectorAvatarRef = ref(null);
+
+    watch(avatar, (v: string) => {
+      if (v) {
+        userSelectorAvatarRef.value.style.backgroundImage = `url(${avatar.value})`;
+      }
+    });
+
+    return () => <span ref={userSelectorAvatarRef} class="user-selector-avatar"></span>;
+  },
+};
diff --git a/dbm-ui/frontend/patch/user-selector/render-list.ts b/dbm-ui/frontend/patch/user-selector/render-list.ts
new file mode 100644
index 0000000000..2712e201f8
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/render-list.ts
@@ -0,0 +1,43 @@
+import { h } from 'vue';
+
+// export default {
+//   name: 'render-list',
+//   props: ['selector', 'user', 'index', 'keyword', 'disabled'],
+//   render() {
+//     return this.selector.renderList(h, {
+//       user: this.user,
+//       index: this.index,
+//       keyword: this.keyword,
+//       disabled: this.disabled,
+//     });
+//   },
+// };
+
+export default {
+  name: 'render-list',
+  props: {
+    selector: {
+      type: Object,
+    },
+    user: {
+      type: Object,
+    },
+    keyword: {
+      type: String,
+    },
+    index: {
+      type: Number,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
+  setup(props: any): any {
+    return () => props.selector.renderList(h, {
+      user: props.user,
+      index: props.index,
+      keyword: props.keyword,
+      disabled: props.disabled,
+    });
+  },
+};
diff --git a/dbm-ui/frontend/patch/user-selector/render-tag.ts b/dbm-ui/frontend/patch/user-selector/render-tag.ts
new file mode 100644
index 0000000000..113f18216d
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/render-tag.ts
@@ -0,0 +1,44 @@
+// import * as Vue from 'vue';
+// export default {
+//   name: 'render-tag',
+//   props: ['username', 'user', 'index'],
+//   render() {
+//     return this.$parent.renderTag(Vue.h, {
+//       username: this.username,
+//       index: this.index,
+//       user: this.user,
+//     });
+//   },
+// };
+
+import { h, inject } from 'vue';
+
+export default {
+  name: 'render-tag',
+  props: ['username', 'user', 'index'],
+  // props: {
+  //   selector: {
+  //     type: Object,
+  //   },
+  //   user: {
+  //     type: Object,
+  //   },
+  //   keyword: {
+  //     type: String,
+  //   },
+  //   index: {
+  //     type: Number,
+  //   },
+  //   disabled: {
+  //     type: Boolean,
+  //   },
+  // },
+  setup(props: any) {
+    const parentSelector = inject('parentSelector');
+    return () => (parentSelector as any).renderTag(h, {
+      username: props.username,
+      index: props.index,
+      user: props.user,
+    });
+  },
+};
diff --git a/dbm-ui/frontend/patch/user-selector/request.ts b/dbm-ui/frontend/patch/user-selector/request.ts
new file mode 100644
index 0000000000..7fea1455fc
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/request.ts
@@ -0,0 +1,222 @@
+// @ts-nocheck
+
+import { createApp, getCurrentInstance, ref, watch } from 'vue';
+
+import instanceStore from './instance-store';
+
+let callbackSeed = 0;
+function JSONP(api: string, params = {}, options: any = {}) {
+  return new Promise((resolve, reject) => {
+    let timer: number;
+    const callbackName = `USER_LIST_CALLBACK_${callbackSeed += 1}`;
+    window[callbackName] = (response: any) => {
+      timer && clearTimeout(timer);
+      document.body.removeChild(script);
+      delete window[callbackName];
+      resolve(response);
+    };
+    const script = document.createElement('script');
+    script.onerror = (_event) => {
+      document.body.removeChild(script);
+      delete window[callbackName];
+      reject('Get user list failed.');
+    };
+    const query = [];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key in params) {
+      query.push(`${key}=${params[key]}`);
+    }
+    script.src = `${api}?${query.join('&')}&callback=${callbackName}`;
+    if (options.timeout) {
+      setTimeout(() => {
+        document.body.removeChild(script);
+        delete window[callbackName];
+        reject('Get user list timeout.');
+      }, options.timeout);
+    }
+    document.body.appendChild(script);
+  });
+}
+
+// 缓存已经加载过的人员
+// 以api为key，存储不同数据源的用户
+const userMap = new Map();
+
+function getMap(api: string) {
+  if (userMap.has(api)) {
+    return userMap.get(api);
+  }
+  const map = new Map();
+  userMap.set(api, map);
+  return map;
+}
+
+function storeUsers(api: string, users: any) {
+  const map = getMap(api);
+  users.forEach((user: any) => map.set(user.username, user));
+}
+
+function getUsers(api: string, usernames: any) {
+  const map = getMap(api);
+  const users: string[] = [];
+  usernames.forEach((username: string) => {
+    if (map.has(username)) {
+      users.push(map.get(username));
+    }
+  });
+  return users;
+}
+
+// 接口最大支持100条记录，超过100条需要将请求拆分为多个
+async function handleBatchSearch(api: string, usernames: string[], options: any) {
+  const map = getMap(api);
+  const unique = [...new Set(usernames)].filter(username => !map.has(username));
+  if (!unique.length) {
+    return Promise.resolve(getUsers(api, usernames));
+  }
+  const slices: string[][] = [];
+  unique.reduce((slice, username, index) => {
+    if (slice.length < 100) {
+      slice.push(username);
+      if (index === unique.length - 1) {
+        slices.push(slice);
+      }
+      return slice;
+    }
+    slices.push(slice);
+    return [];
+  }, []);
+  try {
+    const responses = await Promise.all(slices.map(slice => JSONP(
+      api,
+      {
+        app_code: 'bk-magicbox',
+        exact_lookups: slice.join(','),
+        page_size: 100,
+        page: 1,
+      },
+      options,
+    )));
+    responses.forEach((response: any) => {
+      if (response.code !== 0) return;
+      storeUsers(api, response.data.results || []);
+    });
+  } catch (error) {
+    console.error(error);
+  }
+  return Promise.resolve(getUsers(api, usernames));
+}
+
+function createVm(apiStr: string) {
+  const app = {
+    setup() {
+      const { proxy } = getCurrentInstance();
+      instanceStore.setInstance('exactSearch', apiStr, proxy);
+
+      const api = ref('');
+      api.value = apiStr;
+
+      const queue = ref([]);
+
+      watch(() => queue, (q: any) => {
+        q.value.length && dispatchSeach();
+      }, { deep: true });
+
+      const search = usernames => new Promise((resolve) => {
+        queue.value.push({
+          resolve,
+          usernames,
+        });
+      });
+
+      const dispatchSeach = async () => {
+        const currentQueue = [...queue.value];
+        queue.value = [];
+        try {
+          const allNames = currentQueue.reduce(
+            (all, { usernames }) => all.concat(usernames),
+            [],
+          );
+          const users = await request.exactSearch(api.value, allNames);
+          const map = {};
+          users.forEach((user) => {
+            map[user.username] = user;
+          });
+          currentQueue.forEach(({ resolve, usernames }) => {
+            const resolveData = [];
+            usernames.forEach((username) => {
+              // eslint-disable-next-line no-prototype-builtins
+              if (map.hasOwnProperty(username)) {
+                resolveData.push(map[username]);
+              }
+            });
+            resolve(resolveData);
+          });
+        } catch (error) {
+          currentQueue.forEach(({ resolve }) => {
+            resolve([]);
+          });
+          console.error(error);
+        }
+      };
+
+      return {
+        api,
+        queue,
+        search,
+        dispatchSeach,
+      };
+    },
+  };
+
+  const vm = createApp(app);
+  const vmContainer = document.createElement('div');
+  vm.mount(vmContainer);
+  // document.body.appendChild(vmContainer);
+  // vmMap.set(apiStr, vm);
+  return vm;
+}
+
+const request = {
+  // 模糊搜索，失败时返回空
+  async fuzzySearch(api, params, options) {
+    const data = {};
+    try {
+      const response = await JSONP(api, params, options);
+      if (response.code !== 0) {
+        throw new Error(response);
+      }
+      data.count = response.data.count;
+      data.results = response.data.results || [];
+      storeUsers(api, data.results);
+    } catch (error) {
+      console.error(error.message);
+      data.count = 0;
+      data.results = [];
+    }
+    return data;
+  },
+  // 精确搜索，不在此处捕获异常，在上层捕获并显示在tooltips中
+  async exactSearch(api, username, options) {
+    const isArray = Array.isArray(username);
+    const usernames = isArray ? username : [username];
+    const users = await handleBatchSearch(api, usernames, options);
+    if (isArray) {
+      return users;
+    }
+    return users[0];
+  },
+  // 粘贴时对粘贴的用户进行校验
+  pasteValidate(api, usernames, options) {
+    return handleBatchSearch(api, usernames, options);
+  },
+  // 队列式查询，用于多个组件共存时，批量拉取已存在的用户信息
+  scheduleExactSearch(api, username) {
+    const usernames = Array.isArray(username) ? username : [username];
+    createVm(api);
+    const vm = instanceStore.getInstance('exactSearch', api);
+    return vm.search(usernames);
+  },
+};
+
+export default request;
diff --git a/dbm-ui/frontend/patch/user-selector/selector.vue b/dbm-ui/frontend/patch/user-selector/selector.vue
new file mode 100644
index 0000000000..6a2ff9f538
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/selector.vue
@@ -0,0 +1,1198 @@
+<template>
+  <!-- eslint-disable vue/space-unary-ops -->
+  <div
+    v-if="isSelector"
+    class="user-selector"
+    v-bind="$attrs"
+    :style="{
+      height: fixedHeight ? selectorHeight + 'px' : 'auto',
+    }"
+    @click="focus"
+    @mousedown="shouldUpdate = false">
+    <div class="user-selector-layout">
+      <div
+        ref="containerRef"
+        class="user-selector-container"
+        :class="{
+          focus: isFocus,
+          disabled: disabled,
+          placeholder: !localValue.length && !isFocus,
+          'is-fast-clear': fastClear,
+          'has-avatar': tagType === 'avatar',
+          'is-loading': loading,
+          'is-flex-height': !fixedHeight,
+        }"
+        :data-placeholder="placeholder"
+        :style="containerStyle"
+        @mousewheel="handleContainerScroll">
+        <template v-if="multiple || !isFocus">
+          <!-- :ref="getRefSetter('selected')" -->
+          <span
+            v-for="(user, index) in localValueUsers"
+            :key="user.username"
+            class="user-selector-selected"
+            @click.stop
+            @mousedown.left.stop="handleSelectedMousedown($event, index)"
+            @mouseenter="handleSelectedMouseenter($event, user)"
+            @mouseleave="handleSelectedMouseleave($event, user)"
+            @mouseup.left.stop="handleSelectedMouseup($event, index)">
+            <template v-if="renderTag">
+              <RenderTag
+                :index="index"
+                :user="user"
+                :username="user.username" />
+            </template>
+
+            <template v-else>
+              <RenderAvatar
+                v-if="tagType === 'avatar'"
+                class="user-selector-selected-avatar"
+                :url-method="avatarUrl"
+                :user="user" />
+              <span class="user-selector-selected-value">
+                {{ getDisplayText(user) }}
+              </span>
+            </template>
+
+            <i
+              v-if="tagClearable && tagType === 'tag'"
+              class="user-selector-selected-clear bk-biz-components-icon bk-biz-icon-close"
+              @click.stop.prevent="handleRemoveSelected(user, index)"
+              @mousedown.left.stop="handleRemoveMouseDown"
+              @mouseup.left.stop />
+          </span>
+        </template>
+        <span
+          v-show="isFocus"
+          ref="inputRef"
+          class="user-selector-input"
+          contenteditable
+          spellcheck="false"
+          @blur="handleBlur"
+          @click.stop
+          @input="handleInput($event)"
+          @keydown="handleKeydown($event)"
+          @paste.prevent.stop="handlePaste($event)" />
+      </div>
+      <i
+        v-if="fastClear && !disabled && localValue.length"
+        class="user-selector-clear bk-biz-components-icon bk-biz-icon-close-circle-shape"
+        @click.stop="handleFastClear" />
+    </div>
+  </div>
+  <span
+    v-else
+    class="user-selector user-selector-info">
+    {{ userInfo }}
+  </span>
+</template>
+
+<script>
+/* eslint-disable @typescript-eslint/no-misused-promises, max-len, no-prototype-builtins, vue/space-infix-ops */
+  import { throttle } from 'lodash';
+  import Tippy from 'tippy.js';
+  import {
+    computed,
+    createApp,
+    defineComponent,
+    getCurrentInstance,
+    nextTick,
+    onMounted,
+    provide,
+    ref,
+    toRefs,
+    watch,
+  } from 'vue';
+
+  import AlternateList from './alternate-list';
+  import instanceStore from './instance-store';
+  import RenderAvatar from './render-avatar';
+  import RenderTag from './render-tag';
+  import request from './request';
+
+  import 'tippy.js/dist/tippy.css';
+  import 'tippy.js/themes/light.css';
+  import '@icon-cool/bk-icon-bk-biz-components';
+  export default defineComponent({
+    name: 'BkUserSelector',
+    components: {
+      RenderTag,
+      RenderAvatar,
+    },
+    props: {
+      modelValue: {
+        type: Array,
+        default: () => [],
+      },
+      placeholder: {
+        type: String,
+        default: '请输入用户',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
+      exclude: {
+        type: Boolean,
+        default: true,
+      },
+      focusRowLimit: {
+        type: Number,
+        default: 6,
+      },
+      defaultAlternate: {
+        type: [String, Array, Function],
+        validator(value) {
+          return (
+            value === 'history'
+            || typeof value === 'function'
+            || value instanceof Array
+          );
+        },
+      },
+      searchFromDefaultAlternate: {
+        type: Boolean,
+        default: true,
+      },
+      historyKey: String,
+      historyLabel: {
+        type: String,
+        default: '最近选择',
+      },
+      historyRecord: {
+        type: Number,
+        default: 5,
+      },
+      displayListTips: Boolean,
+      fuzzySearchMethod: Function,
+      exactSearchMethod: Function,
+      emptyText: {
+        type: String,
+        default: '无匹配人员',
+      },
+      tagClearable: {
+        type: Boolean,
+        default: true,
+      },
+      fastClear: Boolean,
+      renderList: Function,
+      renderTag: Function,
+      displayTagTips: Boolean,
+      tagTipsContent: Function,
+      tagTipsDelay: {
+        type: Number,
+        default: 300,
+      },
+      tagType: {
+        type: String,
+        default: 'tag',
+        validator(value) {
+          return ['tag', 'avatar'].includes(value);
+        },
+      },
+      avatarUrl: {
+        type: Function,
+        default: () => null,
+      },
+      fixedHeight: {
+        type: Boolean,
+        default: true,
+      },
+      disabledUsers: {
+        type: Array,
+        default: () => [],
+      },
+      listScrollHeight: [Number, String],
+      api: String,
+      searchLimit: {
+        type: Number,
+        default: 20,
+      },
+      pasteFormatter: {
+        type: Function,
+        default(value) {
+          return value.replace(/\(.*/, '');
+        },
+      },
+      pasteValidator: Function,
+      panelWidth: {
+        type: [Number, String],
+        validator(value) {
+          const pixel = parseInt(value, 10);
+          return pixel >= 190;
+        },
+      },
+      displayDomain: {
+        type: Boolean,
+        default: true,
+      },
+      type: {
+        type: String,
+        default: 'selector',
+        validator(value) {
+          return ['selector', 'info'].includes(value);
+        },
+      },
+    },
+    emits: [
+      'update:modelValue',
+      'change',
+      'remove-selected',
+      'select-user',
+      'keydown',
+      'focus',
+      'blur',
+      'clear',
+    ],
+    setup(props, ctx) {
+      const {
+        modelValue,
+        disabled,
+        multiple,
+        exclude,
+        focusRowLimit,
+        defaultAlternate,
+        searchFromDefaultAlternate,
+        historyKey,
+        historyLabel,
+        historyRecord,
+        fuzzySearchMethod,
+        exactSearchMethod,
+        displayTagTips,
+        tagTipsContent,
+        tagTipsDelay,
+        fixedHeight,
+        disabledUsers,
+        api,
+        searchLimit,
+        pasteFormatter,
+        pasteValidator,
+        displayDomain,
+        type,
+      } = toRefs(props);
+
+      const search = async (value, next) => {
+        try {
+          const popoverInstance = getPopoverInstance();
+          getAlternateContent();
+          popoverInstance.setContent(alternateContent.value.$refs.alternateListContainer);
+          showPopover();
+          alternateContent.value.loading = !!value;
+          const { results: users, next: nextPage } = await new Promise(async (resolve, _reject) => {
+            if (value) {
+              const promise = [(fuzzySearchMethod.value || defaultFuzzySearchMethod)(value, next)];
+              if (searchFromDefaultAlternate.value) {
+                promise.push(getDefaultAlternateData(value));
+              }
+              const [fuzzySearchData, defaultAlternateData] = await Promise.all(promise);
+              if (defaultAlternateData) {
+                fuzzySearchData.results.unshift(...defaultAlternateData.results);
+              }
+              resolve(fuzzySearchData);
+            } else {
+              const defaultAlternateData = getDefaultAlternateData();
+              resolve(defaultAlternateData);
+            }
+          });
+
+          if (!isFocus.value) {
+            return;
+          }
+          const { matched, flattened } = filterUsers(users);
+          if (!value && !flattened.length) {
+            hidePopover();
+            return;
+          }
+
+          matchedUsers.value = next ? [...matchedUsers.value, ...matched] : matched;
+          flattenedUsers.value = next ? [...flattenedUsers.value, ...flattened] : flattened;
+          highlightIndex.value = flattened.length && !!inputValue.value ? 0 : -1;
+
+          alternateContent.value.next = nextPage;
+          alternateContent.value.keyword = value;
+          alternateContent.value.matchedUsers = matchedUsers.value;
+          alternateContent.value.loading = false;
+        } catch (e) {
+          if (e.type === 'reset') {
+            return;
+          }
+          matchedUsers.value = [];
+          flattenedUsers.value = [];
+          console.error(e);
+        }
+      };
+
+      const containerRef = ref(null);
+      const inputRef = ref(null);
+      const { proxy } = getCurrentInstance();
+
+      provide('parentSelector', proxy);
+
+      const selectorHeight = ref(32);
+      const singleRowHeight = ref(30);
+      const inputValue = ref('');
+      const inputIndex = ref(0);
+      const highlightIndex = ref(-1);
+      const shouldUpdate = ref(true);
+      const isFocus = ref(false);
+      const overflowTagIndex = ref(null);
+      const currentUsers = ref([]);
+      const matchedUsers = ref([]);
+      const flattenedUsers = ref([]);
+      const scheduleSearch = throttle(search, 800, { leading: false });
+      const popoverInstance = ref(null);
+      const alternateContent = ref(null);
+      const selectedTipsTimer = ref({});
+      const overflowTagNode = ref(null);
+      const loading = ref(false);
+      const isSelector = computed(() => type.value === 'selector');
+      const containerStyle = computed(() => {
+        const style = {};
+        if (isFocus.value) {
+          style.maxHeight = fixedHeight.value
+            ? `${focusRowLimit.value * singleRowHeight.value}px`
+            : 'auto';
+        } else if (fixedHeight.value) {
+          style.height = `${singleRowHeight.value}px`;
+        }
+        return style;
+      });
+
+      // const localValue = computed({
+      //   get() {
+      //     return [...modelValue.value];
+      //   },
+      //   set(value) {
+      //     ctx.emit('update:modelValue', value);
+      //     ctx.emit('change', value);
+      //   },
+      // });
+      const localValue = ref([]);
+      localValue.value = [...modelValue.value];
+
+      const localValueUsers = computed(() => localValue.value.map((username) => {
+        const user = currentUsers.value.find(user => user.username === username);
+        return user || { username };
+      }));
+
+      const userInfo = computed(() => localValueUsers.value
+        .map(user => getDisplayText(user))
+        .join(';'));
+
+      const getCurrentUsers = async () => {
+        try {
+          if (api.value) {
+            currentUsers.value = await request.scheduleExactSearch(
+              api.value,
+              localValue.value,
+            );
+          } else if (exactSearchMethod.value) {
+            currentUsers.value = await exactSearchMethod.value(localValue.value);
+          } else {
+            console.warn('No exact search method has been set');
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      };
+      const getDefaultAlternateData = async (keyword) => {
+        let users = [];
+        const isMatch = (user, keyword) => user.username.toLowerCase().indexOf(keyword.toString().toLowerCase())
+          > -1;
+        if (defaultAlternate.value === 'history') {
+          users = [
+            { display_name: historyLabel.value, children: getHistoryUsers() },
+          ];
+        } else if (defaultAlternate.value instanceof Array) {
+          users = defaultAlternate.value;
+        } else if (typeof defaultAlternate.value === 'function') {
+          users = await defaultAlternate.value();
+        }
+        if (keyword) {
+          const filterResult = [];
+          users.forEach((user) => {
+            if (user.hasOwnProperty('children')) {
+              const children = user.children.filter(child => isMatch(child, keyword));
+              if (children.length) {
+                filterResult.push({
+                  ...user,
+                  children,
+                });
+              }
+            } else if (isMatch(user, keyword)) {
+              filterResult.push(user);
+            }
+          });
+          users = filterResult;
+        }
+        return Promise.resolve({ results: users, next: false });
+      };
+      const filterUsers = (users) => {
+        const matched = [];
+        const flattened = [];
+        users.forEach((user) => {
+          if (user.hasOwnProperty('children')) {
+            const children = user.children.filter(child => !flattened.some(flattenedUser => flattenedUser.username === child.username));
+            if (multiple.value) {
+              const unexistUser = children.filter(child => !localValue.value.includes(child.username));
+              if (unexistUser.length) {
+                user.children = unexistUser;
+                matched.push(user);
+                flattened.push(...unexistUser);
+              }
+            } else {
+              matched.push(user);
+              flattened.push(...children);
+            }
+            return;
+          }
+          const exist = localValue.value.includes(user.username);
+          const repeat = flattened.some(flattenedUser => flattenedUser.username === user.username);
+          if ((!multiple.value || !exist) && !repeat) {
+            matched.push(user);
+            flattened.push(user);
+          }
+        });
+        return {
+          matched,
+          flattened,
+        };
+      };
+      const defaultFuzzySearchMethod = async (value, next) => {
+        if (api.value) {
+          const params = {
+            app_code: 'bk-magicbox',
+            page: next || 1,
+            page_size: searchLimit.value,
+            fuzzy_lookups: value,
+          };
+          const { count, results } = await request.fuzzySearch(api.value, params);
+          const nextPage = count > params.page * params.page_size ? params.page + 1 : false;
+
+          return {
+            next: nextPage,
+            results,
+          };
+        }
+
+        if (!fuzzySearchMethod.value) {
+          console.warn('No fuzzy search method has been set');
+          return Promise.resolve({ next: false, results: [] });
+        }
+        return fuzzySearchMethod.value(value, next);
+      };
+      const getUserTips = async (instance, username) => {
+        try {
+          const contentElement = document.createElement('span');
+          if (typeof tagTipsContent.value === 'function') {
+            const content = await tagTipsContent.value(username);
+            contentElement.innerHTML = content;
+          } else {
+            const user = await (
+              exactSearchMethod.value || defaultExactSearchMethod
+            )(username);
+            contentElement.innerHTML = user
+              ? user.category_name
+              : 'Non existing user';
+          }
+          instance.setContent(contentElement);
+        } catch (e) {
+          console.error(e);
+          instance.setContent(e.message);
+        }
+      };
+      const defaultExactSearchMethod = (value) => {
+        if (api.value) {
+          return request.exactSearch(api.value, value);
+        }
+        if (!exactSearchMethod.value) {
+          console.warn('No exact search method has been set');
+          return Promise.resolve({});
+        }
+        return exactSearchMethod.value(value);
+      };
+      const getPopoverInstance = () => {
+        if (!popoverInstance.value) {
+          popoverInstance.value = Tippy(inputRef.value, {
+            theme: 'light user-selector-popover',
+            appendTo: document.body,
+            trigger: 'manual',
+            placement: 'bottom-start',
+            offset: [0, 5],
+            arrow: false,
+            hideOnClick: false,
+            content: '',
+            interactive: true,
+            onHide: () => {
+              handlePopoverHide();
+            },
+            onShow: () => isFocus.value,
+          });
+        }
+        return popoverInstance.value;
+      };
+      const getAlternateContent = () => {
+        if (!alternateContent.value) {
+          const alternateContentApp = createApp(AlternateList);
+          const alternateContentContainer = document.createElement('div');
+          alternateContentApp.mount(alternateContentContainer);
+          alternateContent.value = instanceStore.getInstance('alternateContent', 'alternateList');
+          // alternateContent.value.selector = proxy;
+          alternateContent.value.selector = proxy;
+        // document.body.appendChild(alternateContentContainer);
+        }
+      // return alternateContent;
+      };
+      const getHistoryUsers = () => {
+        try {
+          if (historyKey.value) {
+            const users = JSON.parse(window.localStorage.getItem(historyKey.value)) || [];
+            return users.filter(user => !disabledUsers.value.includes(user.username));
+          }
+          throw new Error('History key not provide');
+        } catch (e) {
+          console.error(e);
+          return [];
+        }
+      };
+      const updateHistoryUsers = (user) => {
+        if (historyKey.value) {
+          try {
+            const histories = getHistoryUsers();
+            const exist = histories.findIndex(history => history.username === user.username);
+            if (exist > -1) {
+              histories.splice(exist, 1);
+            }
+            Array.isArray(user)
+              ? histories.unshift(...user)
+              : histories.unshift(user);
+            const newHistories = histories
+              .filter(history => !disabledUsers.value.includes(history.username))
+              .slice(0, historyRecord.value);
+            window.localStorage.setItem(
+              historyKey.value,
+              JSON.stringify(newHistories),
+            );
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      };
+      const updatePopover = () => {
+        popoverInstance.value?.popperInstance?.update();
+      };
+      const showPopover = () => {
+        updatePopover();
+        popoverInstance.value?.show(0);
+      };
+      const hidePopover = () => {
+        popoverInstance.value?.hide(0);
+      };
+      const handlePopoverHide = () => {
+        nextTick(() => {
+          matchedUsers.value = [];
+          flattenedUsers.value = [];
+          alternateContent.value.matchedUsers = [];
+        });
+      };
+      const getDisplayText = (user) => {
+        const isObject = typeof user === 'object';
+        let displayText = isObject ? user.username : user;
+        displayText = displayDomain.value
+          ? displayText
+          : displayText.replace(/@.*/, '');
+        if (isObject && user.display_name) {
+          displayText += `(${user.display_name})`;
+        }
+        return displayText;
+      };
+      const focus = () => {
+        if (disabled.value) {
+          return false;
+        }
+        clearOverflowTimer();
+        inputIndex.value = localValue.value.length;
+        if (!multiple.value && modelValue.value.length) {
+          inputValue.value = getDisplayText(modelValue.value[0]);
+          inputRef.value.innerHTML = inputValue.value;
+          moveInput(0, { selectRange: true });
+        } else {
+          moveInput(0);
+        }
+      };
+      const handleContainerScroll = (event) => {
+        popoverInstance.value?.state.isVisible && event.preventDefault();
+      };
+      const handleSelectedMousedown = (_event, _index) => {
+        if (disabled.value) {
+          return false;
+        }
+        shouldUpdate.value = false;
+      };
+      const handleSelectedMouseup = (event, index) => {
+        if (disabled.value) {
+          return false;
+        }
+        if (multiple.value) {
+          const $referenceTarget = event.target;
+          const { offsetWidth } = $referenceTarget;
+          const eventX = event.offsetX;
+          inputIndex.value = eventX > offsetWidth / 2 ? index + 1 : index;
+          moveInput(0);
+        } else {
+          inputValue.value = getDisplayText(modelValue.value[0]);
+          inputRef.value.innerHTML = inputValue.value;
+          moveInput(0, { selectRange: true });
+        }
+      };
+      const handleSelectedMouseenter = (event, { username }) => {
+        if (!displayTagTips.value) {
+          return false;
+        }
+        const target = event.currentTarget;
+        if (target._user_tips_) {
+          return false;
+        }
+        selectedTipsTimer.value[username] = setTimeout(() => {
+          target._user_tips_ = Tippy(target, {
+            theme: 'light small-arrow user-selected-tips',
+            offset: [0, 5],
+            appendTo: document.body,
+            arrow: true,
+            content: 'loading...',
+            placement: 'top',
+            interactive: true,
+            onShow: (instance) => {
+              getUserTips(instance, username);
+            },
+          });
+          target._user_tips_.show();
+          delete selectedTipsTimer.value[username];
+        }, tagTipsDelay.value);
+      };
+      const handleSelectedMouseleave = (event, { username }) => {
+        if (displayTagTips.value) {
+          selectedTipsTimer.value[username]
+            && clearTimeout(selectedTipsTimer.value[username]);
+        }
+      };
+      const handleRemoveMouseDown = () => {
+        shouldUpdate.value = false;
+      };
+      const handleRemoveSelected = ({ username }, index) => {
+        if (disabled.value) {
+          return false;
+        }
+        const lv = [...localValue.value];
+        lv.splice(index, 1);
+        localValue.value = lv;
+        reset();
+        if (isFocus.value) {
+          moveInput(index >= inputIndex.value ? 0 : -1);
+        } else {
+          handleBlur();
+        }
+        ctx.emit('remove-selected', username);
+      };
+      const handleUserMousedown = (_user, _disabled) => {
+        shouldUpdate.value = false;
+      };
+      const handleUserMouseup = (user, disabled) => {
+        // debugger;
+        if (disabled || disabled.value) {
+          moveInput(0);
+          return false;
+        }
+        updateHistoryUsers(user);
+        currentUsers.value.push(user);
+        if (multiple.value) {
+          const lv = [...localValue.value];
+          lv.splice(inputIndex.value, 0, user.username);
+          localValue.value = lv;
+          setTimeout(() => {
+            moveInput(1);
+            setSelection({ reset: true });
+            search();
+          }, 0);
+        } else {
+          localValue.value = [user.username];
+          reset();
+          handleBlur();
+        }
+        ctx.emit('select-user', user);
+      };
+      const handleGroupMousedown = () => {
+        shouldUpdate.value = false;
+      };
+      const handleGroupMouseup = () => {
+        moveInput(0);
+      };
+
+      const setSelection = (option = {}) => {
+        if (option.reset) {
+          reset();
+        }
+        isFocus.value = true;
+        shouldUpdate.value = true;
+        nextTick(() => {
+          const $input = inputRef.value;
+          if (!$input) {
+            return;
+          }
+          $input.focus();
+          const range = window.getSelection();
+          range.selectAllChildren($input);
+          !option.selectRange && range.collapseToEnd();
+        });
+      };
+      const handleKeydown = (event) => {
+        if (loading.value) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        const { key } = event;
+        const keyMap = {
+          Enter: handleEnter,
+          Backspace: handleBackspace,
+          Delete: handleBackspace,
+          ArrowLeft: handleArrow,
+          ArrowRight: handleArrow,
+          ArrowUp: handleArrow,
+          ArrowDown: handleArrow,
+        };
+        if (keyMap.hasOwnProperty(key)) {
+          keyMap[key](event);
+        }
+        ctx.emit('keydown', event);
+      };
+      const handleEnter = (e) => {
+        // debugger;
+        e.preventDefault();
+        e.stopPropagation();
+        shouldUpdate.value = false;
+        if (highlightIndex.value !== -1) {
+          const { username } = flattenedUsers.value[highlightIndex.value];
+          const disabled = disabledUsers.value.includes(username);
+          if (disabled) {
+            return false;
+          }
+          if (multiple.value) {
+            const lv = [...localValue.value];
+            lv.splice(inputIndex.value, 0, username);
+            localValue.value = lv;
+            moveInput(1, { reset: true });
+          } else {
+            localValue.value = [username];
+            reset();
+            handleBlur();
+          }
+        } else if (inputValue.value) {
+          if (!exclude.value && !localValue.value.includes(inputValue.value)) {
+            if (multiple.value) {
+              const lv = [...localValue.value];
+              lv.splice(inputIndex.value, 0, inputValue.value);
+              localValue.value = lv;
+              moveInput(1, { reset: true });
+            } else {
+              localValue.value = [inputValue.value];
+              reset();
+              handleBlur();
+            }
+          } else {
+            reset();
+          }
+        } else {
+          reset();
+          handleBlur();
+        }
+        hidePopover();
+      };
+      const handleBackspace = (_event) => {
+        if (inputValue.value || !localValue.value.length || !inputIndex.value) {
+          return true;
+        }
+        shouldUpdate.value = false;
+        const lv = [...localValue.value];
+        lv.splice(inputIndex.value - 1, 1);
+        localValue.value = lv;
+        moveInput(-1);
+        search();
+      };
+      const handleArrow = (event) => {
+        const arrow = event.key;
+        if (['ArrowLeft', 'ArrowRight'].includes(arrow)) {
+          if (inputValue.value || !localValue.value.length) {
+            return true;
+          }
+          if (arrow === 'ArrowLeft' && inputIndex.value !== 0) {
+            moveInput(-1);
+          } else if (
+            arrow === 'ArrowRight'
+            && inputIndex.value !== localValue.value.length
+          ) {
+            moveInput(1);
+          }
+        } else if (flattenedUsers.value.length) {
+          event.preventDefault();
+          if (arrow === 'ArrowDown') {
+            if (highlightIndex.value < flattenedUsers.value.length - 1) {
+              highlightIndex.value += 1;
+            } else if (alternateContent.value.next) {
+              alternateContent.value.$refs.alternateList.scrollTop += 32;
+              alternateContent.value.handleScroll();
+            } else {
+              highlightIndex.value = 0;
+            }
+          } else if (arrow === 'ArrowUp' && highlightIndex.value !== -1) {
+            highlightIndex.value -= 1;
+          }
+        }
+      };
+      const handleInput = (event) => {
+        if (loading.value) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        inputValue.value = inputRef.value.textContent.trim();
+      };
+      const handleBlur = () => {
+        if (!shouldUpdate.value) {
+          return true;
+        }
+        isFocus.value = false;
+        hidePopover();
+      };
+      const getMatchedUser = (nameToMatch) => {
+        const user = flattenedUsers.value.find((user) => {
+          const enName = user.username;
+          const cnName = user.display_name;
+          const isMatch = [enName, cnName].some(name => name.toLowerCase() === nameToMatch.toLowerCase());
+          const isSelected = localValue.value.includes(enName);
+          return isMatch && !isSelected;
+        });
+        return user;
+      };
+      const defaultPasteValidator = async (originalValues) => {
+        if (api.value) {
+          const users = await request.pasteValidate(api.value, originalValues);
+          const validValues = users.map(user => user.username);
+          if (!exclude.value) {
+            return [...new Set(validValues.concat(originalValues))];
+          }
+          return validValues;
+        }
+        if (!pasteValidator.value) {
+          console.warn('No paste validator has been set');
+          return Promise.resolve([]);
+        }
+        return pasteValidator.value(values);
+      };
+      const handlePaste = async (event) => {
+        hidePopover();
+        if (loading.value) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        try {
+          loading.value = true;
+          const pasteStr = event.clipboardData.getData('text').replace(/\s/g, '');
+          const values = pasteStr
+            .split(/,|;/)
+            .map(value => pasteFormatter.value(value))
+            .filter(value => value.length);
+          const uniqueValues = [...new Set(values)];
+          if (!uniqueValues.length) {
+            return;
+          }
+          const validValues = await (
+            pasteValidator.value || defaultPasteValidator
+          )(uniqueValues);
+
+          const newValues = validValues.filter(value => !localValue.value.includes(value));
+          if (!validValues.length) {
+            return;
+          }
+          const lv = [...localValue.value];
+          lv.splice(inputIndex.value, 0, ...newValues);
+          localValue.value = lv;
+          if (multiple.value) {
+            isFocus.value && moveInput(newValues.length, { reset: true });
+          } else {
+            handleBlur();
+          }
+        } catch (error) {
+          console.error(error);
+        } finally {
+          loading.value = false;
+        }
+      };
+
+      const getSelectedDOM = () => Array.from(containerRef.value.querySelectorAll('.user-selector-selected'));
+
+      const moveInput = (step, option = {}) => {
+        inputIndex.value = inputIndex.value + step;
+        nextTick(() => {
+          const selected = getSelectedDOM();
+          const $referenceTarget = selected[inputIndex.value] || null;
+          containerRef.value.insertBefore(inputRef.value, $referenceTarget);
+          setSelection(option);
+          updatePopover();
+        });
+      };
+      const updateScroller = () => {
+        if (!alternateContent.value || !isSelector.value) {
+          return false;
+        }
+        nextTick(() => {
+          const { highlightIndex } = proxy;
+          const $alternateList = alternateContent.value.$refs.alternateList;
+          if (!$alternateList) {
+            return false;
+          }
+          if (highlightIndex !== -1) {
+            const $alternateItem = alternateContent.value.alternateItem[highlightIndex].$el;
+            const listClientHeight = $alternateList.clientHeight;
+            const listScrollTop = $alternateList.scrollTop;
+            const itemOffsetTop = $alternateItem.offsetTop;
+            const itemOffsetHeight = $alternateItem.offsetHeight;
+            if (
+              itemOffsetTop >= listScrollTop
+              && itemOffsetTop + itemOffsetHeight <= listScrollTop + listClientHeight
+            ) {
+              return false;
+            }
+            if (itemOffsetTop <= listScrollTop) {
+              $alternateList.scrollTop = itemOffsetTop;
+            } else if (itemOffsetTop + itemOffsetHeight > listScrollTop + listClientHeight) {
+              $alternateList.scrollTop = itemOffsetTop + itemOffsetHeight - listClientHeight;
+            }
+          } else {
+            $alternateList.scrollTop = 0;
+          }
+        });
+      };
+      const overflowTimer = ref(0);
+      const calcOverflow = () => {
+        if (!isSelector.value) {
+          return false;
+        }
+
+        removeOverflowTagNode();
+
+        if (
+          !fixedHeight.value
+          || isFocus.value
+          || localValue.value.length < 2
+        ) {
+          return false;
+        }
+        clearOverflowTimer();
+        overflowTimer.value = setTimeout(() => {
+          const selectedUsers = getSelectedDOM();
+          const userIndexInSecondRow = selectedUsers.findIndex((currentUser, index) => {
+            if (!index) {
+              return false;
+            }
+            const previousUser = selectedUsers[index - 1];
+            return previousUser.offsetTop !== currentUser.offsetTop;
+          });
+          if (userIndexInSecondRow > -1) {
+            overflowTagIndex.value = userIndexInSecondRow;
+          } else {
+            overflowTagIndex.value = null;
+          }
+          containerRef.value.scrollTop = 0;
+          insertOverflowTag();
+        }, 0);
+      };
+      const clearOverflowTimer = () => {
+        overflowTimer.value && clearTimeout(overflowTimer.value);
+      };
+      const insertOverflowTag = () => {
+        if (!overflowTagIndex.value) {
+          return;
+        }
+        getOverflowTagNode();
+
+        const selectedUser = getSelectedDOM();
+        const referenceUser = selectedUser[overflowTagIndex.value];
+        if (referenceUser) {
+          overflowTagNode.value.textContent = `+${
+            localValue.value.length - overflowTagIndex.value
+          }`;
+          containerRef.value.insertBefore(overflowTagNode.value, referenceUser);
+        } else {
+          overflowTagIndex.value = null;
+          return;
+        }
+        setTimeout(() => {
+          const previousUser = selectedUser[overflowTagIndex.value - 1];
+          if (overflowTagNode.value.offsetTop !== previousUser.offsetTop) {
+            overflowTagIndex.value -= 1;
+            containerRef.value.insertBefore(
+              overflowTagNode.value,
+              overflowTagNode.value.previousSibling,
+            );
+            overflowTagNode.value.textContent = `+${
+              localValue.value.length - overflowTagIndex.value
+            }`;
+          }
+        }, 0);
+      };
+      const getOverflowTagNode = () => {
+        if (overflowTagNode.value) {
+          return overflowTagNode.value;
+        }
+        const node = document.createElement('span');
+        node.className = 'user-selector-overflow-tag';
+        overflowTagNode.value = node;
+      };
+      const removeOverflowTagNode = () => {
+        if (
+          overflowTagNode.value
+          && overflowTagNode.value.parentNode === containerRef.value
+        ) {
+          containerRef.value.removeChild(overflowTagNode.value);
+        }
+      };
+      const handleFastClear = () => {
+        localValue.value = [];
+        ctx.emit('clear');
+      };
+      const reset = () => {
+        shouldUpdate.value = true;
+        highlightIndex.value = -1;
+        inputValue.value = '';
+        inputRef.value.innerHTML = '';
+      };
+      // const getRefSetter = refKey => (ref) => {
+      //   !ctx.root.$arrRefs && (ctx.root.$arrRefs = {});
+      //   !ctx.root.$arrRefs[refKey] && (ctx.root.$arrRefs[refKey] = []);
+      //   ref && ctx.root.$arrRefs[refKey].push(ref);
+      // };
+      watch(inputValue, (value) => {
+        if (value.length) {
+          highlightIndex.value = -1;
+          updateScroller();
+          scheduleSearch(value);
+        } else if (isFocus.value) {
+          search();
+        }
+      });
+      watch(isFocus, (isFocus) => {
+        if (isFocus) {
+          search();
+          ctx.emit('focus');
+        } else {
+          reset();
+          ctx.emit('blur');
+        }
+        calcOverflow();
+      });
+      watch(highlightIndex, () => {
+        updateScroller();
+      });
+
+      watch(localValue, (_localValue) => {
+        ctx.emit('update:modelValue', _localValue);
+        ctx.emit('change', _localValue);
+        calcOverflow();
+        getCurrentUsers();
+      });
+
+      onMounted(() => {
+        calcOverflow();
+        getCurrentUsers();
+      });
+
+      // onBeforeUpdate(() => {
+      //   ctx.root.$arrRefs && (ctx.root.$arrRefs = {});
+      // });
+      return {
+        selectorHeight,
+        singleRowHeight,
+        inputValue,
+        inputIndex,
+        highlightIndex,
+        shouldUpdate,
+        isFocus,
+        overflowTagIndex,
+        currentUsers,
+        matchedUsers,
+        flattenedUsers,
+        scheduleSearch,
+        popoverInstance,
+        alternateContent,
+        selectedTipsTimer,
+        overflowTagNode,
+        loading,
+        isSelector,
+        containerStyle,
+        localValue,
+        localValueUsers,
+        userInfo,
+        getCurrentUsers,
+        search,
+        getDefaultAlternateData,
+        filterUsers,
+        defaultFuzzySearchMethod,
+        getUserTips,
+        defaultExactSearchMethod,
+        getPopoverInstance,
+        getAlternateContent,
+        getHistoryUsers,
+        updateHistoryUsers,
+        updatePopover,
+        showPopover,
+        hidePopover,
+        handlePopoverHide,
+        getDisplayText,
+        focus,
+        handleContainerScroll,
+        handleSelectedMousedown,
+        handleSelectedMouseup,
+        handleSelectedMouseenter,
+        handleSelectedMouseleave,
+        handleRemoveMouseDown,
+        handleRemoveSelected,
+        handleUserMousedown,
+        handleUserMouseup,
+        handleGroupMousedown,
+        handleGroupMouseup,
+        setSelection,
+        handleKeydown,
+        handleEnter,
+        handleBackspace,
+        handleArrow,
+        handleInput,
+        handleBlur,
+        getMatchedUser,
+        defaultPasteValidator,
+        handlePaste,
+        getSelectedDOM,
+        moveInput,
+        updateScroller,
+        calcOverflow,
+        clearOverflowTimer,
+        insertOverflowTag,
+        getOverflowTagNode,
+        removeOverflowTagNode,
+        handleFastClear,
+        reset,
+        // getRefSetter,
+        containerRef,
+        inputRef,
+      };
+    },
+  });
+</script>
+
+<style lang="css">
+@import './style.css';
+</style>
diff --git a/dbm-ui/frontend/patch/user-selector/style.css b/dbm-ui/frontend/patch/user-selector/style.css
new file mode 100644
index 0000000000..947e99f1cc
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/style.css
@@ -0,0 +1,398 @@
+.user-selector * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.user-selector {
+  display: inline-block;
+  min-width: 120px;
+  font-size: 14px;
+  color: #63656e;
+  cursor: text;
+}
+
+.user-selector.user-selector-info {
+  display: inline;
+  min-width: initial;
+  color: inherit;
+}
+
+.user-selector .user-selector-layout {
+  position: relative;
+  height: 100%;
+}
+
+.user-selector .user-selector-layout .user-selector-container {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+  padding: 0 9px 0 3px;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 1;
+  background-color: #fff;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+}
+
+.user-selector .user-selector-layout .user-selector-container.is-flex-height {
+  min-height: 32px;
+}
+
+.user-selector .user-selector-layout .user-selector-container.is-fast-clear {
+  padding-right: 22px;
+}
+
+.user-selector .user-selector-layout .user-selector-container.disabled {
+  cursor: not-allowed;
+  background-color: #fafbfd !important;
+  border-color: #dcdee5 !important;
+}
+
+.user-selector .user-selector-layout .user-selector-container.focus {
+  z-index: 1;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: normal;
+  border-color: #3a84ff;
+}
+
+.user-selector .user-selector-layout .user-selector-container.focus::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.user-selector .user-selector-layout .user-selector-container.focus::-webkit-scrollbar-thumb {
+  background: #c4c6cc;
+  border-radius: 2px;
+  box-shadow: inset 0 0 6px rgb(204 204 204 / 30%);
+}
+
+.user-selector .user-selector-layout .user-selector-container.placeholder::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding: 0 0 0 10px;
+  font-size: 12px;
+  line-height: 30px;
+  color: #c3cdd7;
+  content: attr(data-placeholder);
+}
+
+.user-selector .user-selector-layout .user-selector-container.has-avatar .user-selector-selected {
+  padding: 0;
+  margin: 4px 5px;
+  background: transparent;
+}
+
+.user-selector .user-selector-layout .user-selector-container.has-avatar .user-selector-overflow-tag {
+  border-radius: 10px;
+}
+
+.user-selector .user-selector-layout .user-selector-container.is-loading::before {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background-color: rgb(255 255 255 / 70%);
+  content: "";
+}
+
+.user-selector .user-selector-layout .user-selector-container.is-loading::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  width: 6px;
+  height: 6px;
+  margin-left: -24px;
+  border-radius: 50%;
+  content: "";
+  box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 0 #57a3f1;
+  animation: user-selector-loading 1s linear infinite;
+}
+
+.user-selector .user-selector-layout .user-selector-overflow-count {
+  height: 22px;
+  min-width: 22px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 22px;
+  color: #63656e;
+  text-align: center;
+  background-color: #f0f1f5;
+}
+
+.user-selector .user-selector-layout .user-selector-clear {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+  z-index: 1;
+  font-size: 12px;
+  color: #c4c6cc;
+  cursor: pointer;
+}
+
+.user-selector .user-selector-layout .user-selector-clear:hover {
+  color: #979ba5;
+}
+
+.user-selector .user-selector-selected {
+  display: inline-flex;
+  max-width: 100%;
+  padding: 0 2px 0 4px;
+  margin: 4px 0 4px 6px;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: top;
+  cursor: pointer;
+  background: #f0f1f5;
+  border-radius: 2px;
+  outline: 0;
+  align-items: center;
+}
+
+.user-selector .user-selector-selected:hover {
+  background: #dcdee5;
+}
+
+.user-selector .user-selector-selected .user-selector-selected-value {
+  overflow: hidden;
+  font-size: 12px;
+  color: #63656e;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.user-selector .user-selector-selected .user-selector-selected-clear {
+  height: 18px;
+  font-size: 18px;
+  line-height: 18px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  flex: 18px 0 0;
+}
+
+.user-selector .user-selector-selected .user-selector-selected-clear:hover {
+  color: #63656e;
+}
+
+.user-selector .user-selector-input {
+  display: inline-block;
+  height: 22px;
+  max-width: 100%;
+  padding: 0 0 0 6px;
+  margin: 4px 0 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 22px;
+  white-space: nowrap;
+  vertical-align: top;
+  outline: none;
+}
+
+.user-selector .user-selector-overflow-tag {
+  display: inline-flex;
+  min-width: 22px;
+  padding: 0 5px;
+  margin: 4px 0 4px 6px;
+  font-size: 12px;
+  line-height: 22px;
+  text-align: center;
+  background: #f0f1f5;
+}
+
+.user-selector .user-selector-overflow-tag ~ .user-selector-selected {
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.user-selector .alternate-empty {
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  line-height: 32px;
+  text-align: center;
+}
+
+@keyframes user-selector-loading {
+  0% {
+    box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 0 #57a3f1;
+  }
+
+  14% {
+    box-shadow: 12px 0 0 1px #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 0 #57a3f1;
+  }
+
+  28% {
+    box-shadow: 12px 0 0 2px #fd6154, 24px 0 0 1px #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 0 #57a3f1;
+  }
+
+  42% {
+    box-shadow: 12px 0 0 1px #fd6154, 24px 0 0 2px #ffb726, 36px 0 0 1px #4cd084, 48px 0 0 0 #57a3f1;
+  }
+
+  56% {
+    box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 1px #ffb726, 36px 0 0 2px #4cd084, 48px 0 0 1px #57a3f1;
+  }
+
+  70% {
+    box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 1px #4cd084, 48px 0 0 2px #57a3f1;
+  }
+
+  84% {
+    box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 1px #57a3f1;
+  }
+}
+
+.user-selector-alternate-list-wrapper {
+  position: relative;
+  width: 190px;
+  color: #63656e;
+  background-color: #fff;
+}
+
+.user-selector-alternate-list-wrapper.has-folder {
+  width: 300px;
+}
+
+.user-selector-alternate-list-wrapper.is-loading {
+  min-height: 32px;
+}
+
+.user-selector-alternate-list-wrapper.is-loading::before {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255 255 255 / 70%);
+  content: '';
+}
+
+.user-selector-alternate-list-wrapper.is-loading::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  margin-left: -30px;
+  background-color: transparent;
+  border-radius: 50%;
+  content: '';
+  box-shadow: 12px 0 0 0 #fd6154, 24px 0 0 0 #ffb726, 36px 0 0 0 #4cd084, 48px 0 0 0 #57a3f1;
+  animation: user-selector-loading 1s linear infinite;
+}
+
+.user-selector-alternate-list-wrapper .alternate-list {
+  max-height: 162px;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  font-size: 12px;
+  line-height: 32px;
+  background: #fff;
+}
+
+.user-selector-alternate-list-wrapper .alternate-list::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.user-selector-alternate-list-wrapper .alternate-list::-webkit-scrollbar-thumb {
+  background: #c4c6cc;
+  border-radius: 2px;
+  box-shadow: inset 0 0 6px rgb(204 204 204 / 30%);
+}
+
+.user-selector-alternate-list-wrapper .alternate-item {
+  padding: 0 10px;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item.highlight, .user-selector-alternate-list-wrapper .alternate-item:hover {
+  background-color: #f1f7ff;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item.disabled {
+  cursor: not-allowed;
+  opacity: 50%;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item .item-avatar {
+  float: left;
+  margin: 5px 8px 0 0;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item .item-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item .item-name span {
+  color: #3a84ff;
+}
+
+.user-selector-alternate-list-wrapper .alternate-item .item-folder {
+  float: right;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: 0;
+}
+
+.user-selector-alternate-list-wrapper .alternate-group {
+  padding: 0 11px;
+  overflow: hidden;
+  color: #979ba5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-selector-alternate-list-wrapper .alternate-empty {
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 44px;
+  text-align: center;
+}
+
+.user-selector-avatar {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-color: #eff0f5;
+  background-image: url('./icon-user.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 50%;
+}
+
+.tippy-box[data-theme~="light"] {
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
+}
+
+.tippy-box[data-theme~="light"][data-theme~="user-selected-tips"], .tippy-box[data-theme~="light"][data-theme~="list-item-tips"] {
+  padding: 0 9px;
+}
+
+.tippy-box[data-theme~="light"][data-theme~="small-arrow"] > .tippy-arrow::before {
+  transform: scale(0.75);
+}
+
+.tippy-content {
+  padding: 0;
+}
diff --git a/dbm-ui/frontend/patch/user-selector/tooltips.ts b/dbm-ui/frontend/patch/user-selector/tooltips.ts
new file mode 100644
index 0000000000..56fe85926a
--- /dev/null
+++ b/dbm-ui/frontend/patch/user-selector/tooltips.ts
@@ -0,0 +1,29 @@
+import Tippy, { type ReferenceElement } from 'tippy.js';
+import type { DirectiveBinding } from 'vue';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/themes/light.css';
+export default {
+  mounted(el: ReferenceElement, binding: DirectiveBinding) {
+    const props = typeof binding.value === 'object'
+      ? binding.value
+      : { disabled: false, content: binding.value };
+    const instance = Tippy(
+      el,
+      Object.assign({ appendTo: document.body }, props),
+    );
+    if (props.disabled) {
+      instance.disable();
+    }
+  },
+  unmounted(el: ReferenceElement) {
+    el._tippy?.destroy();
+  },
+  updated(el: ReferenceElement, binding: DirectiveBinding) {
+    const props = typeof binding.value === 'object'
+      ? binding.value
+      : { disabled: false, content: binding.value };
+    props.disabled ? el._tippy.disable() : el._tippy.enable();
+    el._tippy.setContent(props.content);
+  },
+};
diff --git a/dbm-ui/frontend/src/common/importComps.ts b/dbm-ui/frontend/src/common/importComps.ts
index ac330079af..af8c543991 100644
--- a/dbm-ui/frontend/src/common/importComps.ts
+++ b/dbm-ui/frontend/src/common/importComps.ts
@@ -31,6 +31,7 @@ import MoreActionExtend from '@components/more-action-extend/Index.vue';
 import SmartAction from '@components/smart-action/index.vue';
 import { ipSelector } from '@components/vue2/ip-selector';
 
+import UserSelector from '@patch/user-selector/selector.vue';
 
 export const setGlobalComps = (app: App<Element>) => {
   app.component('DbCard', DbCard);
@@ -50,4 +51,5 @@ export const setGlobalComps = (app: App<Element>) => {
   app.component('I18nT', Translation);
   app.component('FunController', FunController);
   app.component('MoreActionExtend', MoreActionExtend);
+  app.component('UserSelector', UserSelector);
 };
diff --git a/dbm-ui/frontend/src/services/monitorAlarm.ts b/dbm-ui/frontend/src/services/monitorAlarm.ts
index b2fafbfff3..802e62f436 100644
--- a/dbm-ui/frontend/src/services/monitorAlarm.ts
+++ b/dbm-ui/frontend/src/services/monitorAlarm.ts
@@ -18,11 +18,13 @@ import type { ListBase } from '@services/types/common';
 interface AlarmGroup {
   id: number,
   name: string,
+  create_at: string,
+  creator: string,
   updater: string,
   update_at: string,
   bk_biz_id: number,
   monitor_group_id: number,
-  related_policy_count: number,
+  used_count: number,
   group_type: string,
   db_type: string,
   receivers: AlarmGroupRecivers[],
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue
index 424f48e58a..38a8181405 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue
@@ -32,7 +32,8 @@
       ref="tableRef"
       class="alert-group-table"
       :columns="columns"
-      :data-source="getAlarmGroupList" />
+      :data-source="getAlarmGroupList"
+      :row-class="setRowClass" />
     <DetailDialog
       v-model="detailDialogShow"
       :biz-id="bizId"
@@ -43,6 +44,7 @@
 </template>
 
 <script setup lang="tsx">
+  import dayjs from 'dayjs';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -63,6 +65,16 @@
   import DetailDialog from './components/DetailDialog.vue';
   import RenderRow from './components/RenderRow.vue';
 
+  const isNewUser = (createTime: string) => {
+    if (!createTime) {
+      return '';
+    }
+
+    const createDay = dayjs(createTime);
+    const today = dayjs();
+    return today.diff(createDay, 'hour') <= 24;
+  };
+
   type AlarmGroupItem = ServiceReturnType<typeof getAlarmGroupList>['results'][number]
 
   interface TableRenderData {
@@ -99,7 +111,12 @@
               isRenderTag
                 ? <MiniTag content={ t('内置') } class="ml-4"></MiniTag>
                 : null
-              }
+            }
+            {
+              isNewUser(row.create_at)
+                ? <span class="glob-new-tag ml-4" data-text="NEW" />
+                : null
+            }
           </>
         );
       },
@@ -130,15 +147,15 @@
       field: 'relatedPolicyCount',
       width: 100,
       render: ({ row }: TableRenderData) => {
-        const { related_policy_count: relatedPolicyCount } = row;
+        const { used_count: usedCount } = row;
 
         return (
-          relatedPolicyCount
+          usedCount
             ? <bk-button
               text
               theme="primary"
               onClick={ () => toRelatedPolicy(row.id) }>
-              { relatedPolicyCount }
+              { usedCount }
             </bk-button>
             : <span>0</span>
         );
@@ -162,7 +179,7 @@
       width: 180,
       render: ({ row }: TableRenderData) => {
         const tipDisabled = isPlatform || !row.is_built_in;
-        const btnDisabled = (!isPlatform && row.is_built_in) || row.related_policy_count > 0;
+        const btnDisabled = (!isPlatform && row.is_built_in) || row.used_count > 0;
         const tips = {
           disabled: tipDisabled,
           content: t('内置告警不支持删除'),
@@ -226,6 +243,8 @@
     });
   };
 
+  const setRowClass = (row: AlarmGroupItem) => (isNewUser(row.create_at) ? 'is-new' : '');
+
   const toRelatedPolicy = (notifyGroupId: number) => {
     const routerData = router.resolve({
       name: 'DBMonitorStrategy',
@@ -283,6 +302,12 @@
       .alarm-group-name {
         color: @primary-color;
       }
+
+      .is-new {
+        td {
+          background-color: #f3fcf5 !important;
+        }
+      }
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue
index 86cb0d3f87..29d543faac 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue
@@ -126,6 +126,9 @@
         </template>
       </BkTabPanel>
     </BkTab>
+    <div
+      :class="{'notice-mothod-open-mask': isTimePickerOpen}"
+      @click="handleOpenMackClick" />
   </BkFormItem>
 </template>
 
@@ -223,6 +226,7 @@
   ];
 
   const active = ref('');
+  const currentPanelIndex = ref(-1);
   const panelList = ref<{
     name: string,
     open: boolean,
@@ -248,6 +252,8 @@
     return !isIntervalsFullDay(timeArr);
   });
 
+  const isTimePickerOpen = computed(() => panelList.value.some(panelItem => panelItem.open));
+
   useRequest(getAlarmGroupNotifyList, {
     onSuccess(notifyList) {
       const checkboxHead: TableHead[] = [];
@@ -427,6 +433,7 @@
 
     if (item.name === active.value) {
       item.open = !item.open;
+      currentPanelIndex.value = index;
     }
   };
 
@@ -444,6 +451,11 @@
     return '';
   };
 
+  const handleOpenMackClick = () => {
+    panelList.value[currentPanelIndex.value].open = false;
+    currentPanelIndex.value = -1;
+  };
+
   defineExpose<Exposes>({
     getSubmitData() {
       const submitData = panelList.value.map((item) => {
@@ -600,5 +612,14 @@
         height: 52px;
       }
     }
+
+    .notice-mothod-open-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%
+    }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/ReceiversSelector.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/ReceiversSelector.vue
index 9fa3059872..89fd834fd0 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/ReceiversSelector.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/ReceiversSelector.vue
@@ -12,76 +12,33 @@
 -->
 
 <template>
-  <div
-    class="receivers-selector-wrapper"
-    :class="{'is-focus': isFocus}">
-    <BkSelect
+  <div class="receivers-selector-wrapper">
+    <UserSelector
+      v-if="!loading"
+      v-model="modelValue"
       class="receivers-selector"
-      :clearable="false"
-      filterable
-      :input-search="false"
-      :model-value="modelValue"
-      multiple
-      multiple-mode="tag"
-      @blur="handleBlur"
-      @change="handleChange"
-      @focus="handleFocus">
-      <BkOptionGroup
-        collapsible
-        :label="t('用户组')">
-        <BkOption
-          v-for="item of userGroupListData"
-          :key="item.id"
-          :disabled="item.disabled"
-          :label="item.display_name"
-          :value="item.id" />
-      </BkOptionGroup>
-      <BkOptionGroup
-        collapsible
-        :label="t('个人用户')">
-        <BkOption
-          v-for="item of userList"
-          :key="item.id"
-          :disabled="item.disabled"
-          :label="item.id"
-          :value="item.id" />
-      </BkOptionGroup>
-      <template
-        v-if="!userGroupLoading"
-        #tag="{ selected }">
-        <BkTag
-          v-for="selectedItem in findSeletedItem(selected)"
-          :key="selectedItem.id"
-          :closable="isClosable(selectedItem.id)"
-          @close="handleSelectedClose(selectedItem.id)">
-          <template #icon>
-            <DbIcon
-              class="selected-tag-icon"
-              :type="selectedItem.type === 'group' ? 'yonghuzu' : 'dba-config'" />
-          </template>
-          {{ selectedItem.display_name }}
-        </BkTag>
-      </template>
-    </BkSelect>
-    <DbIcon
-      v-bk-tooltips="t('复制')"
-      type="copy receivers-selector-copy"
-      @click.stop="handleCopy" />
+      :default-alternate="defaultAlternate"
+      :fuzzy-search-method="fuzzySearchMethod"
+      :render-list="renderList"
+      :render-tag="renderTag"
+      :search-from-default-alternate="false"
+      tag-clearable />
   </div>
 </template>
 
 <script setup lang="ts">
-  import type { ISelected } from 'bkui-vue/lib/select/type';
   import _ from 'lodash';
+  import { Fragment } from 'vue/jsx-runtime';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
+  import { getUseList } from '@services/common';
   import {
     getAlarmGroupList,
     getUserGroupList,
   } from '@services/monitorAlarm';
 
-  import { useCopy } from '@hooks';
+  import dbIcon from '@components/db-icon';
 
   interface Props {
     type: 'add' | 'edit' | 'copy' | '',
@@ -94,10 +51,9 @@
   }
 
   interface RecipientItem {
-    id: string,
+    username: string,
     display_name: string,
     type: string,
-    disabled?: boolean
   }
 
   const props = defineProps<Props>();
@@ -106,79 +62,34 @@
   });
 
   const { t } = useI18n();
-  const copy = useCopy();
   const route = useRoute();
 
   const isPlatform = route.matched[0]?.name === 'Platform';
   const modelValueOrigin = _.cloneDeep(modelValue.value);
   const itemMap: Record<string, RecipientItem> = {};
-  let selectedReceivers: RecipientItem[] = [];
 
-  const userList = ref<{
-    id: string,
-    disabled: boolean
-  }[]>([]);
-  const isFocus = ref(false);
+  const roleList = ref<RecipientItem[]>([]);
 
   // 获取用户组数据
-  const {
-    data: userGroupListData,
-    loading: userGroupLoading, // 避免数据回显时，获取用户组请求未完成造成显示错误
-    mutate,
-  } = useRequest(getUserGroupList, {
+  const { loading } = useRequest(getUserGroupList, {
     defaultParams: [props.bizId],
     onSuccess(userGroupList) {
-      const newUserGroupList = [];
-      const userArr: {
-        id: string,
-        disabled: boolean
-      }[] = [];
+      const newUserGroupList: RecipientItem[] = [];
 
-      for (let i = 0; i < userGroupList.length; i++) {
-        const userGroupItem = userGroupList[i];
+      userGroupList.forEach((userGroupItem) => {
         const newUserGroupItem = {
-          ...userGroupItem,
-          disabled: modelValue.value.includes(userGroupItem.id) && props.isBuiltIn,
+          username: userGroupItem.id,
+          display_name: userGroupItem.display_name,
+          type: 'group',
         };
         itemMap[userGroupItem.id] = newUserGroupItem;
         newUserGroupList.push(newUserGroupItem);
+      });
 
-        const memberList = userGroupItem.members.map(memberItem => ({
-          id: memberItem,
-          disabled: modelValue.value.includes(memberItem) && props.isBuiltIn,
-        }));
-        userArr.push(...memberList);
-      }
-
-      userList.value = userArr;
-      mutate(newUserGroupList);
+      roleList.value = newUserGroupList;
     },
   });
 
-  const handleChange = (values: string[]) => {
-    modelValue.value = values;
-  };
-
-  const findSeletedItem = (selected: ISelected[]) => {
-    const mapItems = selected.reduce((prev, current) => {
-      if (itemMap[current.value]) {
-        prev.push(itemMap[current.value]);
-      } else {
-        prev.push({
-          id: current.value,
-          type: 'user',
-          display_name: current.value,
-        });
-      }
-
-      return prev;
-    }, [] as RecipientItem[]);
-
-    selectedReceivers = mapItems;
-
-    return mapItems;
-  };
-
   const isClosable = (id: string) => {
     if (isPlatform || props.type !== 'edit') {
       return true;
@@ -186,72 +97,92 @@
     return !(props.isBuiltIn && modelValueOrigin.includes(id));
   };
 
-  const handleSelectedClose = (id: string) => {
-    const index = modelValue.value.findIndex(item => item === id);
-    if (index > -1) {
-      const values = _.cloneDeep(modelValue.value);
-
-      values.splice(index, 1);
-      modelValue.value = values;
-    }
+  const defaultAlternate = () => [{
+    display_name: t('用户组'),
+    username: 'role',
+    children: _.cloneDeep(roleList.value),
+  }];
+
+  const fuzzySearchMethod = (keyword: string) => getUseList({
+    fuzzy_lookups: keyword,
+  }).then(searchList => ({
+    next: false,
+    results: [{
+      display_name: t('个人用户'),
+      username: 'role',
+      children: searchList.results.map(userItem => ({
+        username: userItem.username,
+        display_name: userItem.username,
+        type: 'group',
+      })),
+    }],
+  }));
+
+  const renderTag = (renderMethod: typeof h, node: Record<string, string>) => {
+    const type = itemMap[node.username]?.type || 'user';
+
+    return renderMethod(
+      'div', {
+        class: isClosable(node.username) ? '' : 'built-in',
+      },
+      [
+        renderMethod(dbIcon, {
+          class: 'receivers-selector-selected-tag-icon mr-4',
+          type: type === 'group' ? 'yonghuzu' : 'dba-config',
+        }),
+        renderMethod(
+          'span', {
+            class: 'mr-4',
+          },
+          itemMap[node.username]?.display_name || node.username,
+        ),
+      ],
+    );
   };
 
-  const handleFocus = () => {
-    isFocus.value = true;
-  };
-
-  const handleBlur = () => {
-    isFocus.value = false;
-  };
-
-  const handleCopy = () => {
-    copy(modelValue.value.join(';'));
+  const renderList = (renderMethod: typeof h, node: {
+    user: RecipientItem
+  }) => {
+    const {
+      type,
+      display_name: displayName,
+    } = node.user;
+
+    return renderMethod(Fragment, [
+      renderMethod(dbIcon, {
+        class: 'receivers-selector-selected-tag-icon mr-4',
+        type: type === 'group' ? 'yonghuzu' : 'dba-config',
+      }),
+      renderMethod('span', displayName),
+    ]);
   };
 
   defineExpose<Exposes>({
     getSelectedReceivers() {
-      return selectedReceivers.map(item => ({
-        type: item.type,
-        id: item.id,
+      return modelValue.value.map(modelValueItem => ({
+        type: itemMap[modelValueItem]?.type || 'user',
+        id: modelValueItem,
       }));
     },
   });
 </script>
 
 <style lang="less" scoped>
-  .receivers-selector-wrapper {
-    position: relative;
-
-    &:hover,
-    &.is-focus {
-      .receivers-selector-copy {
-        display: block;
-      }
-    }
-
-    .selected-tag-icon {
-      font-size: 20px;
-    }
+.receivers-selector-wrapper {
+  .receivers-selector {
+    width: 100%;
   }
 
-  .receivers-selector-copy {
-    position: absolute;
-    top: 50%;
-    right: 2px;
-    z-index: 99;
-    display: none;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
-    margin-right: 4px;
-    font-size: 16px;
-    line-height: 20px;
-    cursor: pointer;
-    background-color: white;
-
-    &:hover {
-      color: @primary-color;
-      background-color: #e1ecff;
+  :deep(.user-selector-selected) {
+    .built-in + .user-selector-selected-clear {
+      display: none;
     }
   }
+}
+</style>
+
+<style>
+.receivers-selector-selected-tag-icon {
+  font-size: 17.5px;
+}
 </style>
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/RenderRow.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/RenderRow.vue
index 04d56b9016..8b0cf2fac7 100644
--- a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/RenderRow.vue
+++ b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/RenderRow.vue
@@ -46,13 +46,11 @@
         {{ item.displayName }}
       </BkTag>
       <BkPopover
+        v-if="overflowData.length > 0"
         placement="top"
-        render-type="auto"
         theme="light"
-        width="400px">
-        <BkTag
-          v-if="overflowData.length > 0"
-          class="overflow-collapse-tag">
+        width="400">
+        <BkTag class="overflow-collapse-tag">
           +{{ overflowData.length }}
         </BkTag>
         <template #content>
diff --git a/dbm-ui/frontend/vite.config.ts b/dbm-ui/frontend/vite.config.ts
index 3e5cb69c7b..7a4892eb8e 100644
--- a/dbm-ui/frontend/vite.config.ts
+++ b/dbm-ui/frontend/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig(({ mode }) => {
         '@locales': resolve(__dirname, 'src/locales'),
         '@images': resolve(__dirname, 'src/images'),
         '@lib': resolve(__dirname, 'lib'),
+        '@patch': resolve(__dirname, 'patch'),
       },
       extensions: ['.tsx', '.ts', '.js'],
     },