@jari-ace/element-plus-component 0.2.2 → 0.3.0

package/packages/components/userPicker/src/UserPicker.vue

@@ -1,472 +1,472 @@
-<script setup lang="ts">
-import {
-    ElButton,
-    ElIcon,
-    ElInput,
-    ElPopover,
-    ElText,
-    ElSpace,
-} from "element-plus";
-
-import type { PopoverInstance } from 'element-plus'
-
-import {computed,  ref, shallowRef, watch} from "vue"
-import {
-    Delete,
-    Finished,
-    Notebook,
-    Plus,
-    Search, Setting,
-    StarFilled
-} from "@element-plus/icons-vue";
-
-
-
-import {
-    type BooleanResultExpression,
-    createAxiosWithoutCache,
-    QUser, useLoginUser,
-    type UserReference,
-    useUserApi, useUserQueryBuilder
-} from "@jari-ace/app-bolts";
-import {useUserRefQuery} from "../../../hooks/useUserRefQuery";
-import vShortcut from "../../../directives/shortcut"
-import {JaUserInfoTag} from "../../userTag"
-import {JaButton} from "../../button";
-import {JaUserSelectDialog} from "../../userSelectDialog";
-import {JaScrollbar} from "../../scrollbar";
-import CustomGroupManager from "./CustomGroupManager.vue";
-import JaUserList from "./JaUserList.vue";
-import {useRealms} from '../../../hooks/useRealms'
-
-const props = withDefaults( defineProps<{
-    /**
-     * Popover 弹出框的触发方式
-     */
-    trigger?:'click' | 'focus' | 'hover' | 'contextmenu',
-    /**
-     * 可选择用户的用户域ID
-     */
-    realmId?:string,
-    /**
-     * 弹出下拉选框的快捷键
-     */
-    shortcut?:string,
-    /**
-     * 是否多选模式
-     */
-    multiple?:boolean
-    /**
-     * 密级过滤
-     */
-    classificationLevel?:number
-    /**
-     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-     */
-    customFilter?:(qUser: InstanceType<typeof QUser>) => BooleanResultExpression,
-    /**
-     * 最多显示多少已选中的用户数量
-     */
-    maxShowCount?:number,
-    /**
-     * 高度，默认100%
-     */
-    height?:number|string
-    /**
-     * 最大高度
-     */
-    maxHeight?: number|string,
-    /**
-     * 是否显示已选用户标签
-     */
-    showUserTag?:boolean
-
-}>(),{
-    trigger:'hover',
-    shortcut: "Ctrl+Alt+U",
-    multiple:false,
-    classificationLevel: 0,
-    maxShowCount: 20,
-    maxHeight: '100%',
-    showUserTag: true,
-})
-
-// const props = defineProps({
-
-    /**
-     * 可选择用户的用户域ID
-     */
-    // realmId: {type: String, required: false},
-    /**
-     * 弹出下拉选框的快捷键
-     */
-    // shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
-    /**
-     * 是否多选模式
-     */
-    // multiple: {type: Boolean, required: false, default: false},
-    /**
-     * 密级过滤
-     */
-    // classificationLevel: {type: Number,  required: false, default: 0},
-    /**
-     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-     */
-    // customFilter: {
-    //     type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
-    //     required: false
-    // },
-    /**
-     * 最多显示多少已选中的用户数量
-     */
-    // maxShowCount: {type: Number, required: false, default: 20},
-    /**
-     * 高度，默认100%
-     */
-    // height: {type: [Number, String], required: false, default: '100%'},
-    /**
-     * 最大高度
-     */
-    // maxHeight: {type: [Number, String], required: false},
-// })
-
-const localRealmId = ref<string>();
-
-const bookmarkDropdown = ref<PopoverInstance>()
-
-async function loadRealmId() {
-    if (props.realmId) {
-        localRealmId.value = props.realmId;
-    } else {
-        const defaultRealm = await useRealms().getDefaultRealm();
-        localRealmId.value = defaultRealm.id;
-    }
-}
-
-loadRealmId();
-
-watch(() => props.realmId, loadRealmId)
-
-const minLengthToTriggerUserQuery = 0;
-const axios = createAxiosWithoutCache();
-const api = useUserApi(axios);
-const users = shallowRef<UserReference[]>([]);
-const selectedUsers = defineModel<UserReference[] | UserReference | null>({
-    required: true
-});
-const inputSearchText = ref<typeof ElInput>();
-const popoverVisible = ref(false);
-const {queryResult, queryParams, pageParams, loading} = useUserRefQuery(
-    () => queryParams.value.name != undefined && queryParams.value.name.length
-          > minLengthToTriggerUserQuery,
-    props.customFilter,
-    (r, paramsChanged) => {
-        if (r) {
-            users.value = queryResult.value.users;
-            if (paramsChanged) {
-                scrollbar.value?.elScrollbar?.scrollTo(0, 0);
-            }
-        } else {
-            onPopoverShow();
-        }
-    }, true, axios, false);
-const btn = ref<typeof ElButton>();
-const scrollbar = ref<InstanceType<typeof JaScrollbar>>();
-const dialogUserSelector = ref<InstanceType<typeof JaUserSelectDialog>>();
-const dlgCustomGroupManager = ref<InstanceType<typeof CustomGroupManager>>();
-const userList = ref<InstanceType<typeof JaUserList>>();
-
-function switchUserSelect(u: UserReference) {
-    if (props.multiple) {
-        if (!Array.isArray(selectedUsers.value)) {
-            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
-        }
-        const index = selectedUsers.value.findIndex(su => su.id == u.id);
-        if (index < 0) {
-            selectedUsers.value.push(u);
-        } else {
-            selectedUsers.value.splice(index, 1);
-        }
-    } else {
-        if (Array.isArray(selectedUsers.value)) {
-            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或者null")
-        }
-        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
-            selectedUsers.value = null;
-        }else{
-            selectedUsers.value = u;
-        }
-    }
-}
-
-
-function onPopoverShow() {
-    if (props.realmId) {
-        queryParams.value.realmId = props.realmId
-    }
-    if (queryParams.value.name && queryParams.value.name.length > minLengthToTriggerUserQuery) {
-        queryParams.value.name = undefined;
-    }
-    const builder = useUserQueryBuilder();
-    if (props.customFilter) {
-        const qUser = builder.getQEntity();
-        builder.and(props.customFilter(qUser));
-    }
-    api.getBookmarkedUsers(builder.build()).then(r => {
-        users.value = r;
-    })
-    setTimeout(() => {
-        inputSearchText.value?.focus();
-    }, 300)
-}
-
-function onPopoverHide() {
-    popoverVisible.value = false
-    btn.value?.$el.focus();
-}
-
-function onSaveToCustomGroupClick() {
-    dlgCustomGroupManager.value?.show();
-}
-
-function onDeselected(uid?: string) {
-    if (Array.isArray(selectedUsers.value)) {
-        const index = selectedUsers.value.findIndex(su => su.id == uid);
-        if (index >= 0) {
-            selectedUsers.value.splice(index, 1)
-        }
-    } else {
-        selectedUsers.value = null;
-    }
-}
-
-function onInputArrowDown() {
-    userList.value.scrollDown();
-    inputSearchText.value?.focus();
-}
-
-function onInputArrowUp() {
-    userList.value.scrollUp();
-    inputSearchText.value?.focus();
-}
-
-function onInputKeyEnter() {
-    switchUserSelect(users.value[userList.value?.activeIndex]);
-}
-
-function popup() {
-    popoverVisible.value = true;
-}
-
-function selectAll() {
-    const arr = (
-        selectedUsers.value as UserReference[]
-    );
-    arr.push(...users.value.filter(u => !arr.some(su => su.id === u.id)));
-}
-
-function clearSelection() {
-    if (props.multiple) {
-        selectedUsers.value = [];
-    } else {
-        selectedUsers.value = null;
-    }
-}
-
-function onArrowKeyDown() {
-    inputSearchText.value?.focus();
-}
-
-const selectedForBinding = computed(() => {
-    if (props.multiple && Array.isArray(selectedUsers.value)) {
-        return selectedUsers.value;
-    } else if (!props.multiple && !Array.isArray(selectedUsers.value)) {
-        if (selectedUsers.value) {
-            return [selectedUsers.value as UserReference];
-        } else {
-            return [] as UserReference[];
-        }
-    } else {
-        throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
-    }
-})
-
-function showUserSelectDialog() {
-    dialogUserSelector.value?.show();
-    popoverVisible.value = false;
-}
-
-function handleMouseOver() {
-    popoverVisible.value = true
-}
-
-
-const selectedUsersForRender = computed(() => selectedForBinding.value.slice(0, props.maxShowCount))
-
-
-
-watch(()=>props.classificationLevel, ()=>{
-    queryParams.value.classificationLevel = props.classificationLevel
-})
-
-</script>
-
-<template>
-    <ja-scrollbar :max-height="props.maxHeight" :height="props.height" v-bind="$attrs"
-                  style="overflow-x: hidden;">
-        <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="popup">
-
-            <el-popover ref="bookmarkDropdown" @show="onPopoverShow" @hide="onPopoverHide"
-                        v-model:visible="popoverVisible"
-                        width="auto" teleported
-                        :trigger="props.trigger"
-                >
-                <template #reference>
-                    <div style="display: flex;align-items: center;">
-                        <slot
-                            v-if="$slots.default"
-                            name="default"></slot>
-                        <el-button v-else circle :icon="Plus" :size="'small'" ref="btn"
-                                   @mouseover="handleMouseOver">
-                        </el-button>
-                    </div>
-
-                </template>
-                <template #default>
-                    <div class="ja-user-picker-bookmark__dropdown">
-                        <div
-                            style="width: 100%; display: flex; align-content: center; justify-content: end;  margin-bottom: 4px;">
-                            <el-space style="flex:auto">
-                                <ja-button circle size="small" @click="showUserSelectDialog" plain
-                                           type="primary" tooltip="对话框筛选(大批量选择)"
-                                           shortcut="Ctrl+Alt+I" :icon="Notebook">
-                                </ja-button>
-                                <ja-button circle size="small" @click="clearSelection" type="danger"
-                                           plain :icon="Delete"
-                                           tooltip="清空选择" shortcut="Alt+C">
-                                </ja-button>
-                                <ja-button circle size="small" @click="selectAll" type="success"
-                                           plain :icon="Finished"
-                                           tooltip="全选(已加载的数据)" shortcut="Ctrl+A"
-                                           v-if="props.multiple">
-                                </ja-button>
-                                <ja-button circle size="small" @click="onSaveToCustomGroupClick"
-                                           type="warning" :icon="Setting" plain
-                                           tooltip="将已选中用户保存为自定义组，方便以后选择使用">
-                                </ja-button>
-                            </el-space>
-                            <div style="color: var(--el-color-info-light-5);">
-                                弹出快捷键：{{ props.shortcut }}
-                            </div>
-                        </div>
-                        <el-input v-model="queryParams.name" ref="inputSearchText"
-                                  :suffix-icon="Search"
-                                  placeholder="请输入拼音名、姓名或手机号查询"
-                                  autocomplete="off"
-                                  @keydown.enter="onInputKeyEnter"
-                                  @keydown.up.stop.prevent="onInputArrowUp"
-                                  @keydown.down.stop.prevent="onInputArrowDown">
-                        </el-input>
-
-                        <div class="dropdown-header">
-                            <el-text>
-                                <el-icon
-                                    v-if="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery">
-                                    <Search></Search>
-                                </el-icon>
-                                <el-icon v-else color="#FFBF29">
-                                    <StarFilled></StarFilled>
-                                </el-icon>
-                                {{
-                                    queryParams.name && queryParams.name.length
-                                    > minLengthToTriggerUserQuery ? "查询结果" : "常用人员"
-                                }}
-                            </el-text>
-                        </div>
-                        <ja-user-list
-                            ref="userList"
-                            :total="queryResult.total"
-                            :empty-text="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery ? undefined : '无可选常用人员'"
-                            :page-size="pageParams.pageSize"
-                            :loading="loading"
-                            :users="users"
-                            :height="300"
-                            v-model="selectedUsers"
-                            v-model:page="pageParams.currentPage"
-                            :multiple="props.multiple"
-                            @item-clicked="onArrowKeyDown"
-                            @arrow-key-down="onArrowKeyDown"></ja-user-list>
-                    </div>
-                </template>
-            </el-popover>
-            <div v-if="props.showUserTag" class="ja-user-picker__tag-container">
-                <ja-user-info-tag  v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
-                                  :full-name="u.fullName" closable :has-avatar="u.hasAvatar"
-                                  @closed="onDeselected">
-                </ja-user-info-tag>
-                <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
-                    +{{ selectedForBinding.length - props.maxShowCount }}人
-                </div>
-                <div v-if="selectedForBinding.length === 0">
-                    <el-text type="info"> &lt;暂无选中人员&gt;</el-text>
-                </div>
-            </div>
-
-            <ja-user-select-dialog ref="dialogUserSelector"
-                                   :multiple="props.multiple"
-                                   :realm-id="localRealmId"
-                                   :classificationLevel="props.classificationLevel"
-                                   :customFilter="props.customFilter"
-                                   v-model="selectedUsers"></ja-user-select-dialog>
-        </div>
-    </ja-scrollbar>
-    <custom-group-manager ref="dlgCustomGroupManager"
-                          :users="Array.isArray(selectedUsers)? selectedUsers as UserReference[] : (selectedUsers ? [selectedUsers] : null)"></custom-group-manager>
-</template>
-
-<style scoped lang="scss">
-.ja-user-picker__root {
-    display: flex;
-    //flex-wrap: wrap;
-    justify-content: left;
-    //align-items: center;
-    gap: 8px;
-    padding: 8px 0;
-    .ja-user-picker__tag-container{
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: left;
-        align-items: center;
-        gap: 4px;
-    }
-    .more-tag {
-        border-radius: 28px;
-        height: 28px;
-        padding: 2px 5px;
-        background-color: #E8F5FF;
-        color: #00164D;
-        border: 1px solid #C1CCD7;
-    }
-}
-
-:deep(.el-popover) {
-    padding: 0 !important;
-}
-
-.ja-user-picker-bookmark__dropdown {
-    padding: 0;
-    margin: 0;
-
-    .dropdown-header {
-        padding: 8px 0;
-        width: 280px;
-        cursor: default;
-        font-weight: 600;
-
-        .el-text {
-            font-weight: 600;
-        }
-    }
-
-}
-</style>
+<script setup lang="ts">
+import {
+    ElButton,
+    ElIcon,
+    ElInput,
+    ElPopover,
+    ElText,
+    ElSpace,
+} from "element-plus";
+
+import type { PopoverInstance } from 'element-plus'
+
+import {computed,  ref, shallowRef, watch} from "vue"
+import {
+    Delete,
+    Finished,
+    Notebook,
+    Plus,
+    Search, Setting,
+    StarFilled
+} from "@element-plus/icons-vue";
+
+
+
+import {
+    type BooleanResultExpression,
+    createAxiosWithoutCache,
+    QUser, useLoginUser,
+    type UserReference,
+    useUserApi, useUserQueryBuilder
+} from "@jari-ace/app-bolts";
+import {useUserRefQuery} from "../../../hooks/useUserRefQuery";
+import vShortcut from "../../../directives/shortcut"
+import {JaUserInfoTag} from "../../userTag"
+import {JaButton} from "../../button";
+import {JaUserSelectDialog} from "../../userSelectDialog";
+import {JaScrollbar} from "../../scrollbar";
+import CustomGroupManager from "./CustomGroupManager.vue";
+import JaUserList from "./JaUserList.vue";
+import {useRealms} from '../../../hooks/useRealms'
+
+const props = withDefaults( defineProps<{
+    /**
+     * Popover 弹出框的触发方式
+     */
+    trigger?:'click' | 'focus' | 'hover' | 'contextmenu',
+    /**
+     * 可选择用户的用户域ID
+     */
+    realmId?:string,
+    /**
+     * 弹出下拉选框的快捷键
+     */
+    shortcut?:string,
+    /**
+     * 是否多选模式
+     */
+    multiple?:boolean
+    /**
+     * 密级过滤
+     */
+    classificationLevel?:number
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    customFilter?:(qUser: InstanceType<typeof QUser>) => BooleanResultExpression,
+    /**
+     * 最多显示多少已选中的用户数量
+     */
+    maxShowCount?:number,
+    /**
+     * 高度，默认100%
+     */
+    height?:number|string
+    /**
+     * 最大高度
+     */
+    maxHeight?: number|string,
+    /**
+     * 是否显示已选用户标签
+     */
+    showUserTag?:boolean
+
+}>(),{
+    trigger:'hover',
+    shortcut: "Ctrl+Alt+U",
+    multiple:false,
+    classificationLevel: 0,
+    maxShowCount: 20,
+    maxHeight: '100%',
+    showUserTag: true,
+})
+
+// const props = defineProps({
+
+    /**
+     * 可选择用户的用户域ID
+     */
+    // realmId: {type: String, required: false},
+    /**
+     * 弹出下拉选框的快捷键
+     */
+    // shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
+    /**
+     * 是否多选模式
+     */
+    // multiple: {type: Boolean, required: false, default: false},
+    /**
+     * 密级过滤
+     */
+    // classificationLevel: {type: Number,  required: false, default: 0},
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    // customFilter: {
+    //     type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
+    //     required: false
+    // },
+    /**
+     * 最多显示多少已选中的用户数量
+     */
+    // maxShowCount: {type: Number, required: false, default: 20},
+    /**
+     * 高度，默认100%
+     */
+    // height: {type: [Number, String], required: false, default: '100%'},
+    /**
+     * 最大高度
+     */
+    // maxHeight: {type: [Number, String], required: false},
+// })
+
+const localRealmId = ref<string>();
+
+const bookmarkDropdown = ref<PopoverInstance>()
+
+async function loadRealmId() {
+    if (props.realmId) {
+        localRealmId.value = props.realmId;
+    } else {
+        const defaultRealm = await useRealms().getDefaultRealm();
+        localRealmId.value = defaultRealm.id;
+    }
+}
+
+loadRealmId();
+
+watch(() => props.realmId, loadRealmId)
+
+const minLengthToTriggerUserQuery = 0;
+const axios = createAxiosWithoutCache();
+const api = useUserApi(axios);
+const users = shallowRef<UserReference[]>([]);
+const selectedUsers = defineModel<UserReference[] | UserReference | null>({
+    required: true
+});
+const inputSearchText = ref<typeof ElInput>();
+const popoverVisible = ref(false);
+const {queryResult, queryParams, pageParams, loading} = useUserRefQuery(
+    () => queryParams.value.name != undefined && queryParams.value.name.length
+          > minLengthToTriggerUserQuery,
+    props.customFilter,
+    (r, paramsChanged) => {
+        if (r) {
+            users.value = queryResult.value.users;
+            if (paramsChanged) {
+                scrollbar.value?.elScrollbar?.scrollTo(0, 0);
+            }
+        } else {
+            onPopoverShow();
+        }
+    }, true, axios, false);
+const btn = ref<typeof ElButton>();
+const scrollbar = ref<InstanceType<typeof JaScrollbar>>();
+const dialogUserSelector = ref<InstanceType<typeof JaUserSelectDialog>>();
+const dlgCustomGroupManager = ref<InstanceType<typeof CustomGroupManager>>();
+const userList = ref<InstanceType<typeof JaUserList>>();
+
+function switchUserSelect(u: UserReference) {
+    if (props.multiple) {
+        if (!Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+        }
+        const index = selectedUsers.value.findIndex(su => su.id == u.id);
+        if (index < 0) {
+            selectedUsers.value.push(u);
+        } else {
+            selectedUsers.value.splice(index, 1);
+        }
+    } else {
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或者null")
+        }
+        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
+            selectedUsers.value = null;
+        }else{
+            selectedUsers.value = u;
+        }
+    }
+}
+
+
+function onPopoverShow() {
+    if (props.realmId) {
+        queryParams.value.realmId = props.realmId
+    }
+    if (queryParams.value.name && queryParams.value.name.length > minLengthToTriggerUserQuery) {
+        queryParams.value.name = undefined;
+    }
+    const builder = useUserQueryBuilder();
+    if (props.customFilter) {
+        const qUser = builder.getQEntity();
+        builder.and(props.customFilter(qUser));
+    }
+    api.getBookmarkedUsers(builder.build()).then(r => {
+        users.value = r;
+    })
+    setTimeout(() => {
+        inputSearchText.value?.focus();
+    }, 300)
+}
+
+function onPopoverHide() {
+    popoverVisible.value = false
+    btn.value?.$el.focus();
+}
+
+function onSaveToCustomGroupClick() {
+    dlgCustomGroupManager.value?.show();
+}
+
+function onDeselected(uid?: string) {
+    if (Array.isArray(selectedUsers.value)) {
+        const index = selectedUsers.value.findIndex(su => su.id == uid);
+        if (index >= 0) {
+            selectedUsers.value.splice(index, 1)
+        }
+    } else {
+        selectedUsers.value = null;
+    }
+}
+
+function onInputArrowDown() {
+    userList.value.scrollDown();
+    inputSearchText.value?.focus();
+}
+
+function onInputArrowUp() {
+    userList.value.scrollUp();
+    inputSearchText.value?.focus();
+}
+
+function onInputKeyEnter() {
+    switchUserSelect(users.value[userList.value?.activeIndex]);
+}
+
+function popup() {
+    popoverVisible.value = true;
+}
+
+function selectAll() {
+    const arr = (
+        selectedUsers.value as UserReference[]
+    );
+    arr.push(...users.value.filter(u => !arr.some(su => su.id === u.id)));
+}
+
+function clearSelection() {
+    if (props.multiple) {
+        selectedUsers.value = [];
+    } else {
+        selectedUsers.value = null;
+    }
+}
+
+function onArrowKeyDown() {
+    inputSearchText.value?.focus();
+}
+
+const selectedForBinding = computed(() => {
+    if (props.multiple && Array.isArray(selectedUsers.value)) {
+        return selectedUsers.value;
+    } else if (!props.multiple && !Array.isArray(selectedUsers.value)) {
+        if (selectedUsers.value) {
+            return [selectedUsers.value as UserReference];
+        } else {
+            return [] as UserReference[];
+        }
+    } else {
+        throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+    }
+})
+
+function showUserSelectDialog() {
+    dialogUserSelector.value?.show();
+    popoverVisible.value = false;
+}
+
+function handleMouseOver() {
+    popoverVisible.value = true
+}
+
+
+const selectedUsersForRender = computed(() => selectedForBinding.value.slice(0, props.maxShowCount))
+
+
+
+watch(()=>props.classificationLevel, ()=>{
+    queryParams.value.classificationLevel = props.classificationLevel
+})
+
+</script>
+
+<template>
+    <ja-scrollbar :max-height="props.maxHeight" :height="props.height" v-bind="$attrs"
+                  style="overflow-x: hidden;">
+        <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="popup">
+
+            <el-popover ref="bookmarkDropdown" @show="onPopoverShow" @hide="onPopoverHide"
+                        v-model:visible="popoverVisible"
+                        width="auto" teleported
+                        :trigger="props.trigger"
+                >
+                <template #reference>
+                    <div style="display: flex;align-items: center;">
+                        <slot
+                            v-if="$slots.default"
+                            name="default"></slot>
+                        <el-button v-else circle :icon="Plus" :size="'small'" ref="btn"
+                                   @mouseover="handleMouseOver">
+                        </el-button>
+                    </div>
+
+                </template>
+                <template #default>
+                    <div class="ja-user-picker-bookmark__dropdown">
+                        <div
+                            style="width: 100%; display: flex; align-content: center; justify-content: end;  margin-bottom: 4px;">
+                            <el-space style="flex:auto">
+                                <ja-button circle size="small" @click="showUserSelectDialog" plain
+                                           type="primary" tooltip="对话框筛选(大批量选择)"
+                                           shortcut="Ctrl+Alt+I" :icon="Notebook">
+                                </ja-button>
+                                <ja-button circle size="small" @click="clearSelection" type="danger"
+                                           plain :icon="Delete"
+                                           tooltip="清空选择" shortcut="Alt+C">
+                                </ja-button>
+                                <ja-button circle size="small" @click="selectAll" type="success"
+                                           plain :icon="Finished"
+                                           tooltip="全选(已加载的数据)" shortcut="Ctrl+A"
+                                           v-if="props.multiple">
+                                </ja-button>
+                                <ja-button circle size="small" @click="onSaveToCustomGroupClick"
+                                           type="warning" :icon="Setting" plain
+                                           tooltip="将已选中用户保存为自定义组，方便以后选择使用">
+                                </ja-button>
+                            </el-space>
+                            <div style="color: var(--el-color-info-light-5);">
+                                弹出快捷键：{{ props.shortcut }}
+                            </div>
+                        </div>
+                        <el-input v-model="queryParams.name" ref="inputSearchText"
+                                  :suffix-icon="Search"
+                                  placeholder="请输入拼音名、姓名或手机号查询"
+                                  autocomplete="off"
+                                  @keydown.enter="onInputKeyEnter"
+                                  @keydown.up.stop.prevent="onInputArrowUp"
+                                  @keydown.down.stop.prevent="onInputArrowDown">
+                        </el-input>
+
+                        <div class="dropdown-header">
+                            <el-text>
+                                <el-icon
+                                    v-if="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery">
+                                    <Search></Search>
+                                </el-icon>
+                                <el-icon v-else color="#FFBF29">
+                                    <StarFilled></StarFilled>
+                                </el-icon>
+                                {{
+                                    queryParams.name && queryParams.name.length
+                                    > minLengthToTriggerUserQuery ? "查询结果" : "常用人员"
+                                }}
+                            </el-text>
+                        </div>
+                        <ja-user-list
+                            ref="userList"
+                            :total="queryResult.total"
+                            :empty-text="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery ? undefined : '无可选常用人员'"
+                            :page-size="pageParams.pageSize"
+                            :loading="loading"
+                            :users="users"
+                            :height="300"
+                            v-model="selectedUsers"
+                            v-model:page="pageParams.currentPage"
+                            :multiple="props.multiple"
+                            @item-clicked="onArrowKeyDown"
+                            @arrow-key-down="onArrowKeyDown"></ja-user-list>
+                    </div>
+                </template>
+            </el-popover>
+            <div v-if="props.showUserTag" class="ja-user-picker__tag-container">
+                <ja-user-info-tag  v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
+                                  :full-name="u.fullName" closable :has-avatar="u.hasAvatar"
+                                  @closed="onDeselected">
+                </ja-user-info-tag>
+                <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
+                    +{{ selectedForBinding.length - props.maxShowCount }}人
+                </div>
+                <div v-if="selectedForBinding.length === 0">
+                    <el-text type="info"> &lt;暂无选中人员&gt;</el-text>
+                </div>
+            </div>
+
+            <ja-user-select-dialog ref="dialogUserSelector"
+                                   :multiple="props.multiple"
+                                   :realm-id="localRealmId"
+                                   :classificationLevel="props.classificationLevel"
+                                   :customFilter="props.customFilter"
+                                   v-model="selectedUsers"></ja-user-select-dialog>
+        </div>
+    </ja-scrollbar>
+    <custom-group-manager ref="dlgCustomGroupManager"
+                          :users="Array.isArray(selectedUsers)? selectedUsers as UserReference[] : (selectedUsers ? [selectedUsers] : null)"></custom-group-manager>
+</template>
+
+<style scoped lang="scss">
+.ja-user-picker__root {
+    display: flex;
+    //flex-wrap: wrap;
+    justify-content: left;
+    //align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    .ja-user-picker__tag-container{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: left;
+        align-items: center;
+        gap: 4px;
+    }
+    .more-tag {
+        border-radius: 28px;
+        height: 28px;
+        padding: 2px 5px;
+        background-color: #E8F5FF;
+        color: #00164D;
+        border: 1px solid #C1CCD7;
+    }
+}
+
+:deep(.el-popover) {
+    padding: 0 !important;
+}
+
+.ja-user-picker-bookmark__dropdown {
+    padding: 0;
+    margin: 0;
+
+    .dropdown-header {
+        padding: 8px 0;
+        width: 280px;
+        cursor: default;
+        font-weight: 600;
+
+        .el-text {
+            font-weight: 600;
+        }
+    }
+
+}
+</style>