diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index fd63b014ad..396751294d 100644
--- a/dbm-ui/frontend/package.json
+++ b/dbm-ui/frontend/package.json
@@ -27,7 +27,7 @@
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",
     "axios": "^1.7.7",
-    "bkui-vue": "2.0.1-beta.72",
+    "bkui-vue": "2.0.1-beta.74",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
     "html-to-image": "1.11.11",
diff --git a/dbm-ui/frontend/src/components/db-member-selector/index.vue b/dbm-ui/frontend/src/components/db-member-selector/index.vue
index 23f000c555..b4fe4867c1 100644
--- a/dbm-ui/frontend/src/components/db-member-selector/index.vue
+++ b/dbm-ui/frontend/src/components/db-member-selector/index.vue
@@ -13,75 +13,124 @@
 
 <template>
   <div
-    class="db-member-selector-wrapper"
-    :class="{ 'is-focus': isFocous }">
-    <BkTagInput
+    class="member-selector-wrapper"
+    :class="{ 'is-hover': isHover }"
+    @mouseenter="handleHover"
+    @mouseleave="handleBlur">
+    <UserSelector
+      ref="userSelectorRef"
       v-model="modelValue"
-      allow-auto-match
-      allow-create
-      :create-tag-validator="createTagValidator"
-      has-delete-icon
-      :list="peopleList"
-      v-bind="listeners"
-      @input="remoteFilter" />
+      class="member-selector"
+      :exact-search-method="exactSearchMethod"
+      fast-clear
+      :fixed-height="false"
+      :fuzzy-search-method="fuzzySearchMethod"
+      :paste-validator="pasteValidator"
+      :render-list="renderList"
+      :render-tag="renderTag"
+      :search-from-default-alternate="false"
+      tag-clearable
+      @remove-selected="handleRemoveSelected" />
     <DbIcon
+      v-if="modelValue.length > 0"
       v-bk-tooltips="t('复制')"
-      type="copy db-member-selector-copy"
+      class="db-member-selector-copy"
+      type="copy"
       @click.stop="handleCopy" />
   </div>
 </template>
 
-<script setup lang="tsx">
-  import _ from 'lodash';
+<script setup lang="ts">
+  import { Fragment } from 'vue/jsx-runtime';
   import { useI18n } from 'vue-i18n';
 
   import { getUserList } from '@services/source/user';
 
-  import { useCopy, useListeners } from '@hooks';
+  import { useCopy } from '@hooks';
 
-  type GetUsesParams = ServiceParameters<typeof getUserList>;
+  const emits = defineEmits<{
+    (e: 'change', value: string[]): void;
+  }>();
 
   const modelValue = defineModel<string[]>({
-    default: () => [],
+    required: true,
   });
 
-  const listeners = useListeners();
-
-  const copy = useCopy();
   const { t } = useI18n();
+  const copy = useCopy();
+
+  const userSelectorRef = ref();
+  const isHover = ref(false);
+
+  const exactSearchMethod = () =>
+    getUserList({
+      exact_lookups: modelValue.value.join(','),
+    }).then((result) => result.results);
+
+  const pasteValidator = (values: string[]) => values;
+
+  const fuzzySearchMethod = (keyword: string) =>
+    getUserList({
+      fuzzy_lookups: keyword,
+    }).then((searchList) => ({
+      next: false,
+      results: searchList.results.map((userItem) => ({
+        username: userItem.username,
+        display_name: userItem.display_name,
+      })),
+    }));
+
+  const renderTag = (
+    renderMethod: typeof h,
+    node: {
+      username: string;
+      user: {
+        username: string;
+        display_name: string;
+      };
+    },
+  ) =>
+    renderMethod('div', null, [
+      renderMethod(
+        'span',
+        {
+          class: 'mr-4',
+        },
+        `${node.username}(${node.user?.display_name || node.username})`,
+      ),
+    ]);
+
+  const renderList = (
+    renderMethod: typeof h,
+    node: {
+      user: {
+        username: string;
+        display_name: string;
+        type: string;
+      };
+    },
+  ) => {
+    const { display_name: displayName, username } = node.user;
+
+    return renderMethod(Fragment, [renderMethod('span', `${username}(${displayName})`)]);
+  };
+
+  watch(modelValue, () => {
+    console.log('from watchch modelvall = ', modelValue.value);
+    emits('change', modelValue.value);
+  });
+
+  const handleRemoveSelected = () => {
+    userSelectorRef.value.search();
+  };
 
-  const peopleList = ref<
-    {
-      id: string;
-      name: string;
-    }[]
-  >([]);
-
-  const isFocous = ref(false);
-
-  const createTagValidator = (tag: string) => !!peopleList.value.find((item) => item.name === tag);
-
-  /**
-   * 获取人员列表
-   */
-  const fetchUseList = async (params: GetUsesParams = {}) => {
-    await getUserList(params).then((res) => {
-      // 过滤已经选中的用户
-      peopleList.value = res.results
-        .filter((item) => !modelValue.value?.includes(item.username))
-        .map((item) => ({
-          id: item.username,
-          name: item.username,
-        }));
-    });
+  const handleHover = () => {
+    isHover.value = true;
   };
-  // 初始化加载
-  fetchUseList({ limit: 200, offset: 0 });
 
-  /**
-   * 远程搜索人员
-   */
-  const remoteFilter = _.debounce((value: string) => fetchUseList({ fuzzy_lookups: value }), 500);
+  const handleBlur = () => {
+    isHover.value = false;
+  };
 
   const handleCopy = () => {
     copy(modelValue.value.join(';'));
@@ -89,35 +138,45 @@
 </script>
 
 <style lang="less" scoped>
-  .db-member-selector-wrapper {
+  .member-selector-wrapper {
     position: relative;
+    line-height: 1;
 
-    &:hover,
-    &.is-focus {
+    &.is-hover {
+      :deep(.user-selector-clear) {
+        visibility: visible;
+      }
+    }
+
+    &:hover {
       .db-member-selector-copy {
         display: block;
       }
     }
-  }
 
-  .db-member-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;
+    .member-selector {
+      width: 100%;
+    }
 
-    &:hover {
-      color: @primary-color;
-      background-color: #e1ecff;
+    .db-member-selector-copy {
+      position: absolute;
+      top: 50%;
+      right: 24px;
+      z-index: 99;
+      display: none;
+      width: 20px;
+      height: 20px;
+      margin-top: -15px;
+      font-size: 12px;
+      line-height: 20px;
+      color: #979ba5;
+      cursor: pointer;
+      background-color: white;
+
+      &:hover {
+        color: @primary-color;
+        background-color: #e1ecff;
+      }
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue
index 0d5a4d6c01..9b2dacbf0f 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue
@@ -12,7 +12,9 @@
         text
         theme="primary"
         @click="handleShowSql">
-        {{ modelValue.length < 1 ? t('点击添加') : t('n 个 SQL 文件', { n: modelValue.length }) }}
+        <span v-if="modelValue.length < 1">{{ t('点击添加') }}</span>
+        <span v-else-if="modelValue.length === 1">{{ modelValue[0] }}</span>
+        <span v-else>{{ t('n 个 SQL 文件', { n: modelValue.length }) }}</span>
       </BkButton>
     </span>
   </RenderTextPlain>
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue
index 9657e5880b..3ab2606b17 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue
@@ -20,13 +20,15 @@
   </div>
 </template>
 <script setup lang="ts">
+  import { DBTypes } from '@common/const';
+
   import DbTab from '@components/db-tab/Index.vue';
 
   import RenderContent from './components/content/Index.vue';
 
   const route = useRoute();
 
-  const activeTab = ref<string>(route.query.db_type as string);
+  const activeTab = ref<string>((route.query.db_type as string) || DBTypes.MYSQL);
 </script>
 <style lang="less">
   .duty-rule-manage-content {
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue
index aa5d728e4f..6141a31406 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue
@@ -15,12 +15,12 @@
   <div class="title-spot custom-item-title mt-24">{{ t('轮值起止时间') }}<span class="required" /></div>
   <BkDatePicker
     ref="datePickerRef"
+    v-model="dateTimeRange"
     append-to-body
     :clearable="false"
-    :model-value="dateTimeRange"
     style="width: 100%"
     type="daterange"
-    @change="handlerChangeDatetime" />
+    @change="handleDatetimeRangeChange" />
   <div class="title-spot custom-item-title mt-24">{{ t('轮值排班') }}<span class="required" /></div>
   <DbOriginalTable
     class="custom-table-box"
@@ -31,17 +31,16 @@
 <script setup lang="tsx">
   import dayjs from 'dayjs';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
   import type { DutyCustomItem } from '@services/model/monitor/duty-rule';
   import DutyRuleModel from '@services/model/monitor/duty-rule';
-  import { getUserList } from '@services/source/user';
+
+  import MemberSelector from '@components/db-member-selector/index.vue';
 
   import { getDiffDays, random } from '@utils';
 
   interface Props {
     data?: DutyRuleModel;
-    isSetEmpty?: boolean;
   }
 
   interface RowData {
@@ -50,7 +49,7 @@
       id: string,
       value: string[];
     }[],
-    peoples: string[],
+    members: string[],
   }
 
   interface Exposes {
@@ -67,34 +66,12 @@
 
   const props = defineProps<Props>();
 
-  function formatDate(date: string) {
-    return dayjs(date).format('YYYY-MM-DD');
-  }
-
-  // 临时处理，待时间选择器修复后去除
-  function transferToTimePicker(timeStr: string) {
-    const arr = timeStr.split(':');
-    if (arr.length === 2) {
-      return `${timeStr}:00`;
-    }
-    return timeStr;
-  }
-
-  function initDateRange() {
-    return [
-      formatDate(new Date().toISOString()),
-      formatDate(new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString()),
-    ] as [string, string];
-  }
-
   const { t } = useI18n();
 
-  const dateTimeRange = ref<[string, string]>(initDateRange());
-  const copiedStr = ref('');
+  const dateTimeRange = ref<[string, string]>();
   const tableData = ref<RowData[]>([]);
-  const contactList = ref<SelectItem<string>[]>([]);
 
-  const columns = computed(() => ([
+  const columns = [
     {
       label: t('轮值日期'),
       field: 'dateTime',
@@ -131,119 +108,58 @@
     },
     {
       label: t('轮值人员'),
-      field: 'peoples',
-      render: ({ data }: {data: RowData}) => (
-        <div class="peoples">
-          <bk-select
-            class="people-select"
-            clearable={false}
-            v-model={data.peoples}
-            placeholder={t('请选择人员')}
-            filterable
-            multiple
-            input-search={false}
-            multiple-mode="tag"
-          >
-          {
-            contactList.value.map((item, index) => <bk-option
-              key={index}
-              value={item.value}
-              label={item.label}
-            />)
-          }
-          </bk-select>
-          {/* <bk-tag-input
-            clearable={false}
-            v-model={data.peoples}
-            placeholder={t('请选择人员')}
-            allow-create
-            has-delete-icon
-            collapse-tags
-          /> */}
-          <div class="operate-box">
-            {copiedStr.value !== '' && <db-icon
-              class="operate-icon"
-              type="paste"
-              onClick={() => handleClickPaste(data)}/>}
-            {data.peoples.length > 0 && <db-icon
-              class="ml-10 operate-icon"
-              type="copy-2"
-              onClick={() => handleClickCopy(data)}/>}
-          </div>
-        </div>
-        ),
+      field: 'members',
+      render: ({data, index}: {data: RowData, index: number}) =>(
+        <MemberSelector
+          modelValue={data.members}
+          onChange={(value: string[]) => handelPeopleChange(value, index)} />
+      ),
     },
-  ]));
+  ];
 
-  useRequest(getUserList, {
-    onSuccess: (res) => {
-      const list = res.results.map(item => ({ label: item.username, value: item.username }));
-      contactList.value = list;
-    },
+  watch(() => props.data, (data) => {
+    const transferToTimePicker = (timeStr: string) => {
+      const arr = timeStr.split(':');
+      if (arr.length === 2) {
+        return `${timeStr}:00`;
+      }
+      return timeStr;
+    }
+
+    if (data && data.category === 'regular') {
+      dateTimeRange.value = [data.effective_time, data.end_time];
+      tableData.value = (data.duty_arranges as DutyCustomItem[]).map(item => ({
+        dateTime: item.date,
+        timeRange: item.work_times.map(i => ({
+          id: random(),
+          value: i.split('--').map(time => transferToTimePicker(time)),
+        })),
+        members: item.members,
+      }));
+    } else {
+      tableData.value = []
+    }
+  }, {
+    immediate: true,
   });
 
-  watch(dateTimeRange, (range) => {
-    const dateArr = getDiffDays(range[0] as string, range[1]);
+
+  const handleDatetimeRangeChange = (value: [string, string]) => {
+    dateTimeRange.value = value;
+    const dateArr = getDiffDays(value[0], value[1]);
     tableData.value = dateArr.map(item => ({
       dateTime: item,
       timeRange: [{
         id: random(),
         value: ['00:00:00', '23:59:59'],
       }],
-      peoples: [],
+      members: [],
     }));
-  }, {
-    immediate: true,
-  });
-
-  watch(() => props.data, (data) => {
-    if (data) {
-      dateTimeRange.value = [data.effective_time, data.end_time];
-      setTimeout(() => {
-        const arranges = data.duty_arranges as DutyCustomItem[];
-        tableData.value = arranges.map(item => ({
-          dateTime: item.date,
-          timeRange: item.work_times.map(i => ({
-            id: random(),
-            value: i.split('--').map(time => transferToTimePicker(time)),
-          })),
-          peoples: item.members,
-        }));
-      });
-    }
-  }, {
-    immediate: true,
-  });
-
-  watch(() => props.isSetEmpty, (status) => {
-    if (status) {
-      // 设置初始化
-      setTimeout(() => {
-        dateTimeRange.value = initDateRange();
-      });
-    }
-  }, {
-    immediate: true,
-  });
-
-  const handleClickCopy = (row: RowData) => {
-    copiedStr.value = row.peoples.join(',');
-  };
+  }
 
-  const handleClickPaste = (row: RowData) => {
-    const oldArr = row.peoples;
-    if (oldArr.length === 0) {
-      Object.assign(row, {
-        peoples: copiedStr.value.split(','),
-      });
-    } else {
-      const addArr = copiedStr.value.split(',');
-      const newArr = [...new Set([...oldArr, ...addArr])];
-      Object.assign(row, {
-        peoples: newArr,
-      });
-    }
-  };
+  const handelPeopleChange = (value: string[], index: number) => {
+    tableData.value[index].members = value
+  }
 
   const handleAddTime = (index: number) => {
     tableData.value[index].timeRange.push({
@@ -256,33 +172,24 @@
     tableData.value[outerIndex].timeRange.splice(innerIndex, 1);
   };
 
-  const handlerChangeDatetime = (range: [string, string]) => {
-    dateTimeRange.value = range;
-  };
-
-  // 临时处理，待组件支持分钟后去除
-  const splitTimeToMinute = (str: string) => {
-    const strArr = str.split(':');
-    if (strArr.length <= 2) {
-      return str;
-    }
-    strArr.pop();
-    return strArr.join(':');
-  };
 
   defineExpose<Exposes>({
     getValue() {
-      let effctTime = dateTimeRange.value[0];
-      effctTime = `${effctTime.split(' ')[0]} 00:00:00`;
-      let endTime = dateTimeRange.value[1];
-      endTime = `${endTime.split(' ')[0]} 00:00:00`;
+      const splitTimeToMinute = (str: string) => {
+        const strArr = str.split(':');
+        if (strArr.length <= 2) {
+          return str;
+        }
+        strArr.pop();
+        return strArr.join(':');
+      };
       return {
-        effective_time: effctTime,
-        end_time: endTime,
+        effective_time: dayjs(dateTimeRange.value![0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        end_time: dayjs(dateTimeRange.value![1]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
         duty_arranges: tableData.value.map(item => ({
           date: item.dateTime,
           work_times: item.timeRange.map(data => data.value.map(str => splitTimeToMinute(str)).join('--')),
-          members: item.peoples,
+          members: item.members,
         })),
       };
     },
@@ -306,7 +213,7 @@
       background-color: #f5f7fa !important;
     }
 
-    :deep(.peoples) {
+    :deep(.members) {
       position: relative;
       display: flex;
       width: 100%;
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue
index 28c43b4771..d137ba1e6a 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue
@@ -23,9 +23,7 @@
       property="peopleList"
       required>
       <span class="cycle-title-tip">（{{ t('排班时将会按照人员的顺序进行排班，可拖动 Tag 进行排序') }}）</span>
-      <SortTagInput
-        :list="formModel.peopleList"
-        @change="handleSortTagInputChange" />
+      <MemberSelector v-model="formModel.peopleList" />
     </BkFormItem>
     <div class="cycle-duty-box">
       <BkFormItem
@@ -60,12 +58,11 @@
   <div class="title-spot cycle-table-box mt-24">{{ t('轮值起止时间') }}<span class="required" /></div>
   <BkDatePicker
     ref="datePickerRef"
+    v-model="dateTimeRange"
     append-to-body
     :clearable="false"
-    :model-value="dateTimeRange"
     style="width: 100%"
-    type="daterange"
-    @change="handlerChangeDatetime" />
+    type="daterange" />
   <div class="cycle-time-select-box">
     <div class="select-item">
       <BkSelect
@@ -138,13 +135,13 @@
   import type { DutyCycleItem } from '@services/model/monitor/duty-rule';
   import DutyRuleModel from '@services/model/monitor/duty-rule';
 
+  import MemberSelector from '@components/db-member-selector/index.vue';
+
   import {
     getDiffDays,
     random,
   } from '@utils';
 
-  import SortTagInput from './SortTagInput.vue';
-
   interface RowData {
     dateTime: string,
     timeRange: string[],
@@ -185,13 +182,6 @@
     return timeStr;
   }
 
-  function initDateTimrRange() {
-    return [
-      formatDate(new Date().toISOString()),
-      formatDate(new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString()),
-    ] as [string, string];
-  }
-
   function initDateSelect() {
     return ({
       date: 'daily',
@@ -205,7 +195,7 @@
 
   const { t } = useI18n();
 
-  const dateTimeRange = ref(initDateTimrRange());
+  const dateTimeRange = ref<[string, string]>([dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss')]);
   const dateSelect = ref(initDateSelect());
   const tableData = ref<RowData[]>([]);
   const formRef = ref();
@@ -305,6 +295,19 @@
   watch(
     [dateTimeRange, dateSelect, formModel],
     ([dateRange, data, formModel]) => {
+      const getRangeList = (arr: string[], startIndex: number, counts: number) => {
+        const ret = [];
+        let start = startIndex;
+        for (let i = 0; i < counts; i++) {
+          if (start >= arr.length) {
+            start = 0;
+          }
+          ret.push(arr[start]);
+          start = start + 1;
+        }
+        return ret;
+      };
+
       if (data.date && formModel.peopleList.length > 0) {
         const { singleDutyPeoples, sinlgeDutyDays, peopleList } = formModel;
         const days = sinlgeDutyDays;
@@ -378,22 +381,6 @@
     immediate: true,
   });
 
-  const getRangeList = (arr: string[], startIndex: number, counts: number) => {
-    const ret = [];
-    let start = startIndex;
-    for (let i = 0; i < counts; i++) {
-      if (start >= arr.length) {
-        start = 0;
-      }
-      ret.push(arr[start]);
-      start = start + 1;
-    }
-    return ret;
-  };
-
-  const handleSortTagInputChange = (arr: string[]) => {
-    formModel.peopleList = arr;
-  };
 
   const handleAddTime = () => {
     dateSelect.value.timeList.push({
@@ -406,30 +393,20 @@
     dateSelect.value.timeList.splice(index, 1);
   };
 
-  const handlerChangeDatetime = (range: [string, string]) => {
-    dateTimeRange.value = range;
-  };
-
-  // 临时处理，待组件支持分钟后去除
-  const splitTimeToMinute = (str: string) => {
-    const strArr = str.split(':');
-    if (strArr.length <= 2) {
-      return str;
-    }
-    strArr.pop();
-    return strArr.join(':');
-  };
 
   defineExpose<Exposes>({
     async getValue() {
-      await formRef.value.validate();
-      let effctTime = dateTimeRange.value[0];
-      effctTime = `${effctTime.split(' ')[0]} 00:00:00`;
-      let endTime = dateTimeRange.value[1];
-      endTime = `${endTime.split(' ')[0]} 00:00:00`;
+      const splitTimeToMinute = (str: string) => {
+        const strArr = str.split(':');
+        if (strArr.length <= 2) {
+          return str;
+        }
+        strArr.pop();
+        return strArr.join(':');
+      };
       return {
-        effective_time: effctTime,
-        end_time: endTime,
+        effective_time: dayjs(dateTimeRange.value![0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        end_time: dayjs(dateTimeRange.value![1]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
         duty_arranges: tableData.value.map(item => ({
           duty_number: formModel.singleDutyPeoples,
           duty_day: formModel.sinlgeDutyDays,
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
index 199337f42c..a8ad21db66 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
@@ -46,8 +46,7 @@
       <div class="title-spot item-title">{{ t('轮值方式') }}<span class="required" /></div>
       <BkRadioGroup
         v-model="rotateType"
-        type="card"
-        @change="handleChangeRotateType">
+        type="card">
         <BkRadioButton
           v-for="(item, index) in rotateTypeList"
           :key="index"
@@ -63,80 +62,30 @@
           <BkRadio :label="0">
             {{ t('全部业务') }}
           </BkRadio>
-          <!-- <div class="biz-box-control">
-            <div
-              class="biz-box-append"
-              @click="handleClickAppendExcludeBizs">
-              <template v-if="!isShowSelectExcludeBizBox">
-                <DbIcon
-                  class="mr-6"
-                  style="color: #3A84FF;"
-                  type="add" />
-                <span>{{ t('追加排除业务') }}</span>
-              </template>
-              <template v-else>
-                <BkSelect
-                  v-model="partialBizs"
-                  class="biz-select"
-                  multiple
-                  :placeholder="t('请选择排除业务')"
-                  show-select-all>
-                  <BkOption
-                    v-for="(item, index) in bizList"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value" />
-                </BkSelect>
-                <DbIcon
-                  v-if="partialBizs.length > 0"
-                  v-bk-tooltips="{
-                    content: t('删除排除项'),
-                    theme: 'dark'
-                  }"
-                  class="ml-10"
-                  style="font-size: 16px;color:#979BA5;"
-                  type="delete"
-                  @click="handleDeleteExcludes" />
-              </template>
-            </div>
-          </div> -->
         </div>
-        <!-- <div class="biz-box">
-          <BkRadio :label="t('部分业务')" />
-          <div class="biz-box-control">
-            <BkSelect
-              v-model="partialBizs"
-              class="biz-select"
-              multiple
-              show-select-all>
-              <BkOption
-                v-for="(item, index) in bizList"
-                :key="index"
-                :label="item.label"
-                :value="item.value" />
-            </BkSelect>
-          </div>
-        </div> -->
       </BkRadioGroup>
-      <CycleRotate
-        v-if="rotateType === '0'"
-        ref="cycleRef"
-        :data="data" />
-      <CustomRotate
-        v-else
-        ref="customRef"
-        :data="data"
-        :is-set-empty="isSetCutomEmpty" />
+      <KeepAlive>
+        <CycleRotate
+          v-if="rotateType === 'handoff'"
+          ref="cycleRef"
+          :data="data" />
+        <CustomRotate
+          v-else
+          ref="customRef"
+          :data="data" />
+      </KeepAlive>
     </div>
-
     <template #footer>
       <BkButton
         class="mr-8"
+        :loading="isCreateLoading || isUpdateLoading"
         theme="primary"
         @click="handleConfirm">
         {{ t('确定') }}
       </BkButton>
-      <BkButton @click="handleClose">
+      <BkButton
+        :disabled="isCreateLoading || isUpdateLoading"
+        @click="handleClose">
         {{ t('取消') }}
       </BkButton>
     </template>
@@ -180,19 +129,15 @@
   const handleBeforeClose = useBeforeClose();
 
   const nameTip = ref('');
-  const rotateType = ref('0');
+  const rotateType = ref('handoff');
   const bizType = ref(0);
   const customRef = ref();
   const cycleRef = ref();
-  const isSetCutomEmpty = ref(false);
   const formRef = ref();
   const formModel = reactive({
     ruleName: '',
   });
 
-  // const partialBizs = ref([]);
-  // const isShowSelectExcludeBizBox = ref(false);
-
   const isCreate = computed(() => props.pageType !== 'edit');
 
   const titleMap = {
@@ -203,11 +148,11 @@
 
   const rotateTypeList = [
     {
-      value: '0',
+      value: 'handoff',
       label: t('周期轮值'),
     },
     {
-      value: '1',
+      value: 'regular',
       label: t('自定义轮值'),
     },
   ];
@@ -249,86 +194,66 @@
     ],
   };
 
-  const { run: runCreateDutyRule } = useRequest(createDutyRule, {
+  const { loading: isCreateLoading, run: runCreateDutyRule } = useRequest(createDutyRule, {
     manual: true,
-    onSuccess: (createResult) => {
-      if (createResult) {
-        messageSuccess(t('保存成功'));
-        emits('success');
-      }
+    onSuccess: () => {
+      messageSuccess(t('保存成功'));
+      emits('success');
+      isShow.value = false;
     },
   });
 
-  const { run: runUpdateDutyRule } = useRequest(updateDutyRule, {
+  const { loading: isUpdateLoading, run: runUpdateDutyRule } = useRequest(updateDutyRule, {
     manual: true,
-    onSuccess: (updateResult) => {
-      if (updateResult) {
-        // 成功
-        messageSuccess(t('保存成功'));
-        emits('success');
-      }
+    onSuccess: () => {
+      // 成功
+      messageSuccess(t('编辑成功'));
+      emits('success');
+      isShow.value = false;
     },
   });
 
-  // const bizList = ref<SelectItem[]>([]);
-
   watch(
     () => [props.pageType, props.data],
     () => {
-      checkPageTypeAndData();
+      if (props.pageType !== 'create' && props.data) {
+        // 编辑或者克隆
+        formModel.ruleName = props.data.name;
+        rotateType.value = props.data.category;
+        return;
+      }
+      formModel.ruleName = '';
     },
   );
 
-  const checkPageTypeAndData = () => {
-    if (props.pageType !== 'create' && props.data) {
-      // 编辑或者克隆
-      formModel.ruleName = props.data.name;
-      rotateType.value = props.data.category === 'handoff' ? '0' : '1';
-      return;
-    }
-    formModel.ruleName = '';
-  };
-
-  const handleChangeRotateType = (value: string) => {
-    isSetCutomEmpty.value = value === '1';
-  };
-
-  // const handleClickAppendExcludeBizs = () => {
-  //   isShowSelectExcludeBizBox.value = true;
-  // };
-
-  // const handleDeleteExcludes = () => {
-  //   partialBizs.value = [];
-  // };
-
   // 点击确定
   const handleConfirm = async () => {
     await formRef.value.validate();
-    if (rotateType.value === '0') {
+    if (rotateType.value === 'handoff') {
       const cycleValues = await cycleRef.value.getValue();
       const cycleParams = {
         name: formModel.ruleName,
         priority: 1,
         db_type: props.dbType,
-        category: 'handoff',
+        category: rotateType.value,
         effective_time: cycleValues.effective_time,
         end_time: cycleValues.end_time,
         duty_arranges: cycleValues.duty_arranges,
       };
       if (isCreate.value) {
         // 新建/克隆
-        runCreateDutyRule(cycleParams);
+        await runCreateDutyRule(cycleParams);
       } else {
         // 克隆或者编辑
         if (props.data) {
           cycleParams.effective_time = cycleValues.effective_time;
           cycleParams.end_time = cycleValues.end_time;
-          runUpdateDutyRule(props.data.id, cycleParams);
+          await runUpdateDutyRule(props.data.id, cycleParams);
         }
       }
     } else {
       // 自定义轮值
-      const customValues = customRef.value.getValue();
+      const customValues = await customRef.value.getValue();
       const customParams = {
         name: formModel.ruleName,
         priority: 2,
@@ -340,26 +265,25 @@
       };
       if (isCreate.value) {
         // 新建/克隆
-        runCreateDutyRule(customParams);
+        await runCreateDutyRule(customParams);
       } else {
         // 克隆或者编辑
         if (props.data) {
-          runUpdateDutyRule(props.data.id, customParams);
+          await runUpdateDutyRule(props.data.id, customParams);
         }
       }
     }
-    isShow.value = false;
   };
 
   async function handleClose() {
     const result = await handleBeforeClose();
 
     if (!result) {
-      return;
+      return false;
     }
-    checkPageTypeAndData();
     window.changeConfirm = false;
     isShow.value = false;
+    return true;
   }
 </script>
 
diff --git a/dbm-ui/frontend/src/views/staff-manage/Index.vue b/dbm-ui/frontend/src/views/staff-manage/Index.vue
index 256b0c90c8..4dab8f8cda 100644
--- a/dbm-ui/frontend/src/views/staff-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/staff-manage/Index.vue
@@ -72,7 +72,7 @@
 
   import { getAdmins, updateAdmins } from '@services/source/dbadmin';
 
-  import MemberSelector from './components/MemberSelector.vue';
+  import MemberSelector from '@components/db-member-selector/index.vue';
 
   const { t } = useI18n();
   const route = useRoute();
diff --git a/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue b/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue
deleted file mode 100644
index c7c0cf693f..0000000000
--- a/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div
-    class="member-selector-wrapper"
-    :class="{ 'is-hover': isHover }"
-    @mouseenter="handleHover"
-    @mouseleave="handleBlur">
-    <UserSelector
-      ref="userSelectorRef"
-      v-model="modelValue"
-      class="member-selector"
-      :exact-search-method="exactSearchMethod"
-      fast-clear
-      :fixed-height="false"
-      :fuzzy-search-method="fuzzySearchMethod"
-      :paste-validator="pasteValidator"
-      :render-list="renderList"
-      :render-tag="renderTag"
-      :search-from-default-alternate="false"
-      tag-clearable
-      @remove-selected="handleRemoveSelected" />
-    <DbIcon
-      v-if="modelValue.length > 0"
-      v-bk-tooltips="t('复制')"
-      class="db-member-selector-copy"
-      type="copy"
-      @click.stop="handleCopy" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { Fragment } from 'vue/jsx-runtime';
-  import { useI18n } from 'vue-i18n';
-
-  import { getUserList } from '@services/source/user';
-
-  import { useCopy } from '@hooks';
-
-  const modelValue = defineModel<string[]>({
-    required: true,
-  });
-
-  const { t } = useI18n();
-  const copy = useCopy();
-
-  const userSelectorRef = ref();
-  const isHover = ref(false);
-
-  const exactSearchMethod = () =>
-    getUserList({
-      exact_lookups: modelValue.value.join(','),
-    }).then((result) => result.results);
-
-  const pasteValidator = (values: string[]) => values;
-
-  const fuzzySearchMethod = (keyword: string) =>
-    getUserList({
-      fuzzy_lookups: keyword,
-    }).then((searchList) => ({
-      next: false,
-      results: searchList.results.map((userItem) => ({
-        username: userItem.username,
-        display_name: userItem.display_name,
-      })),
-    }));
-
-  const renderTag = (
-    renderMethod: typeof h,
-    node: {
-      username: string;
-      user: {
-        username: string;
-        display_name: string;
-      };
-    },
-  ) =>
-    renderMethod('div', null, [
-      renderMethod(
-        'span',
-        {
-          class: 'mr-4',
-        },
-        `${node.username}(${node.user?.display_name || node.username})`,
-      ),
-    ]);
-
-  const renderList = (
-    renderMethod: typeof h,
-    node: {
-      user: {
-        username: string;
-        display_name: string;
-        type: string;
-      };
-    },
-  ) => {
-    const { display_name: displayName, username } = node.user;
-
-    return renderMethod(Fragment, [renderMethod('span', `${username}(${displayName})`)]);
-  };
-
-  const handleRemoveSelected = () => {
-    userSelectorRef.value.search();
-  };
-
-  const handleHover = () => {
-    isHover.value = true;
-  };
-
-  const handleBlur = () => {
-    isHover.value = false;
-  };
-
-  const handleCopy = () => {
-    copy(modelValue.value.join(';'));
-  };
-</script>
-
-<style lang="less" scoped>
-  .member-selector-wrapper {
-    position: relative;
-
-    &.is-hover {
-      :deep(.user-selector-clear) {
-        visibility: visible;
-      }
-    }
-
-    &:hover {
-      .db-member-selector-copy {
-        display: block;
-      }
-    }
-
-    .member-selector {
-      width: 100%;
-    }
-
-    .db-member-selector-copy {
-      position: absolute;
-      top: 50%;
-      right: 24px;
-      z-index: 99;
-      display: none;
-      width: 20px;
-      height: 20px;
-      margin-top: -15px;
-      font-size: 12px;
-      line-height: 20px;
-      cursor: pointer;
-      background-color: white;
-      color: #979ba5;
-
-      &:hover {
-        color: @primary-color;
-        background-color: #e1ecff;
-      }
-    }
-  }
-</style>