npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/components/PersonnelSelector.module.scss

@@ -0,0 +1,331 @@
+// 人员选择器样式
+.personnelSelector {
+    position: relative;
+    width: 100%;
+}
+
+// 自定义输入框
+.customInput {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    padding: 1px 11px;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    outline: none;
+    box-sizing: border-box;
+
+    &:hover {
+        border-color: #c0c4cc;
+    }
+
+    &.focused {
+        border-color: #409eff;
+    }
+
+    &.disabled {
+        background-color: #f5f7fa;
+        border-color: #e4e7ed;
+        color: #c0c4cc;
+        cursor: not-allowed;
+    }
+}
+
+// 输入框内容区域
+.inputContent {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 30px;
+    padding: 2px 0;
+}
+
+// 占位符
+.placeholder {
+    color: #c0c4cc;
+    font-size: 14px;
+}
+
+// 前置标签
+.label {
+    color: #606266;
+    font-size: 14px;
+    margin-right: 4px;
+    flex-shrink: 0;
+}
+
+// 单选文本
+.text {
+    color: #606266;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 标签容器
+.tagsWrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+// 标签
+.tag {
+    margin: 0;
+    max-width: 100%;
+
+    :global(.el-tag__content) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+// 按钮模式包装器
+.buttonWrapper {
+    // width: 100%;
+}
+
+// 按钮内部容器
+.buttonInner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 8px;
+}
+
+// 按钮内容区域
+.buttonContent {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    text-align: left;
+    overflow: hidden;
+}
+
+// 按钮文字包装器（用于显示文字+徽章）
+.buttonTextWrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+// 数量徽章（圆圈显示 +N）
+.countBadge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 4px;
+    background-color: #ecf5ff;
+    color: #409eff;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 10px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+// 右侧图标区域
+.suffixIcons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    flex-shrink: 0;
+}
+
+// 清除图标
+.clearIcon {
+    font-size: 14px;
+    color: #c0c4cc;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+        color: #909399;
+    }
+}
+
+// 下拉箭头图标
+.arrowIcon {
+    font-size: 14px;
+    color: #c0c4cc;
+    transition: transform 0.3s;
+
+    &.reverse {
+        transform: rotate(180deg);
+    }
+}
+
+.disabled {
+    .clearIcon,
+    .arrowIcon {
+        cursor: not-allowed;
+    }
+}
+
+// 下拉框容器
+.dropdown {
+    position: fixed;
+    background: #fff;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+// 悬浮窗内容
+.dropdownContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: inherit; // 继承父容器的 maxHeight
+    overflow: hidden; // 防止内容溢出到悬浮窗外
+}
+
+// 搜索框区域
+.searchBox {
+    padding: 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #fff;
+}
+
+// 列表容器
+.listWrapper {
+    flex: 1;
+    overflow-y: auto;
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+}
+
+// 人员列表
+.personnelList {
+    padding: 4px 0;
+}
+
+// 人员列表项
+.personnelItem {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+        background-color: #f5f7fa;
+    }
+
+    &.selected {
+        background-color: #ecf5ff;
+
+        .personName {
+            color: #409eff;
+            font-weight: 500;
+        }
+    }
+}
+
+// 复选框
+.checkbox {
+    margin-right: 8px;
+    pointer-events: none;
+}
+
+// 人员信息
+.personInfo {
+    flex: 1;
+    min-width: 0;
+}
+
+// 人员姓名
+.personName {
+    font-size: 14px;
+    color: #606266;
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 人员元数据
+.personMeta {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #909399;
+}
+
+// 职位
+.position {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 分隔符
+.divider {
+    margin: 0 6px;
+    color: #dcdfe6;
+}
+
+// 电话
+.phone {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 空状态
+.empty {
+    padding: 40px 16px;
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+}
+
+// 加载状态
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 16px;
+    color: #909399;
+    font-size: 14px;
+
+    .el-icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+    }
+}

package/app/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/components/PopoverSelector.jsx

@@ -0,0 +1,392 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import styles from './PopoverSelector.module.scss'
+
+/**
+ * 通用悬浮窗选择器组件
+ * @component PopoverSelector
+ * @description 提供触发器和悬浮窗两个插槽，实现解耦的选择器组件
+ *
+ * @example
+ * <PopoverSelector width={400} maxHeight={500}>
+ *   {{
+ *     trigger: ({ open, visible }) => (
+ *       <el-button onClick={open}>选择部门</el-button>
+ *     ),
+ *     default: ({ close }) => (
+ *       <div>悬浮窗内容</div>
+ *     )
+ *   }}
+ * </PopoverSelector>
+ */
+export default defineComponent({
+    name: 'PopoverSelector',
+
+    props: {
+        /**
+         * 悬浮窗宽度
+         * @type {number|string}
+         */
+        width: {
+            type: [Number, String],
+            default: 400,
+        },
+        /**
+         * 悬浮窗高度（不设置则自适应）
+         * @type {number|string}
+         */
+        height: {
+            type: [Number, String],
+            default: null,
+        },
+        /**
+         * 悬浮窗最大高度
+         * @type {number}
+         */
+        maxHeight: {
+            type: Number,
+            default: 400,
+        },
+        /**
+         * 悬浮窗自定义 class
+         * @type {string|Array|Object}
+         */
+        dropdownClass: {
+            type: [String, Array, Object],
+            default: '',
+        },
+        /**
+         * 悬浮窗自定义 style
+         * @type {Object}
+         */
+        dropdownStyle: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * 是否禁用
+         * @type {boolean}
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 悬浮窗位置：auto 自动 | top 上方 | bottom 下方
+         * @type {string}
+         */
+        placement: {
+            type: String,
+            default: 'auto',
+            validator: (value) => ['auto', 'top', 'bottom'].includes(value),
+        },
+        /**
+         * 悬浮窗与触发器的间距
+         * @type {number}
+         */
+        offset: {
+            type: Number,
+            default: 4,
+        },
+        /**
+         * 是否显示动画
+         * @type {boolean}
+         */
+        animated: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * 触发方式：click 点击 | hover 悬浮
+         * @type {string}
+         */
+        triggerEvent: {
+            type: String,
+            default: 'click',
+            validator: (value) => ['click', 'hover'].includes(value),
+        },
+        /**
+         * hover 触发时的延迟（毫秒）
+         * @type {number}
+         */
+        hoverDelay: {
+            type: Number,
+            default: 200,
+        },
+    },
+
+    emits: ['open', 'close', 'update:visible'],
+
+    setup(props, { emit, slots }) {
+        // 是否显示悬浮窗
+        const visible = ref(false)
+
+        // 触发器 ref
+        const triggerRef = ref(null)
+
+        // 悬浮窗 ref
+        const dropdownRef = ref(null)
+
+        // 悬浮窗动态样式
+        const computedDropdownStyle = ref({})
+
+        // hover 延迟定时器
+        let hoverTimer = null
+
+        /**
+         * 计算悬浮窗位置
+         */
+        const calculatePosition = () => {
+            if (!triggerRef.value || !dropdownRef.value) return
+
+            // 获取真正的 DOM 元素（处理 el-button 等组件实例）
+            const triggerEl = triggerRef.value.$el || triggerRef.value
+            const rect = triggerEl.getBoundingClientRect()
+
+            // 悬浮窗尺寸
+            const dropdownWidth = typeof props.width === 'number' ? props.width : parseInt(props.width)
+            const dropdownHeight = props.height
+                ? (typeof props.height === 'number' ? props.height : parseInt(props.height))
+                : null
+
+            // 计算可用空间
+            const spaceBelow = window.innerHeight - rect.bottom
+            const spaceAbove = rect.top
+
+            // 判断显示位置
+            let showAbove = false
+            if (props.placement === 'top') {
+                showAbove = true
+            } else if (props.placement === 'bottom') {
+                showAbove = false
+            } else {
+                // auto 模式：根据空间自动判断
+                showAbove = spaceBelow < props.maxHeight && spaceAbove > spaceBelow
+            }
+
+            // 基础样式
+            const baseStyle = {
+                position: 'fixed',
+                left: `${rect.left}px`,
+                width: `${dropdownWidth}px`,
+            }
+
+            // 根据位置计算样式
+            if (showAbove) {
+                // 显示在上方
+                const availableHeight = Math.min(props.maxHeight, spaceAbove - props.offset)
+                computedDropdownStyle.value = {
+                    ...baseStyle,
+                    bottom: `${window.innerHeight - rect.top + props.offset}px`,
+                    maxHeight: dropdownHeight ? 'none' : `${availableHeight}px`,
+                    height: dropdownHeight ? `${Math.min(dropdownHeight, availableHeight)}px` : 'auto',
+                }
+            } else {
+                // 显示在下方
+                const availableHeight = Math.min(props.maxHeight, spaceBelow - props.offset)
+                computedDropdownStyle.value = {
+                    ...baseStyle,
+                    top: `${rect.bottom + props.offset}px`,
+                    maxHeight: dropdownHeight ? 'none' : `${availableHeight}px`,
+                    height: dropdownHeight ? `${Math.min(dropdownHeight, availableHeight)}px` : 'auto',
+                }
+            }
+
+            // 合并用户自定义样式
+            computedDropdownStyle.value = {
+                ...computedDropdownStyle.value,
+                ...props.dropdownStyle,
+            }
+        }
+
+        /**
+         * 打开悬浮窗
+         */
+        const open = async () => {
+            if (props.disabled) return
+
+            visible.value = true
+            emit('update:visible', true)
+            emit('open')
+
+            // 等待 DOM 更新后计算位置
+            await nextTick()
+            calculatePosition()
+        }
+
+        /**
+         * 关闭悬浮窗
+         */
+        const close = () => {
+            visible.value = false
+            emit('update:visible', false)
+            emit('close')
+        }
+
+        /**
+         * 切换悬浮窗
+         */
+        const toggle = () => {
+            if (visible.value) {
+                close()
+            } else {
+                open()
+            }
+        }
+
+        /**
+         * 处理 hover 进入
+         */
+        const handleMouseEnter = () => {
+            if (props.triggerEvent !== 'hover' || props.disabled) return
+
+            // 清除之前的定时器
+            if (hoverTimer) {
+                clearTimeout(hoverTimer)
+            }
+
+            // 延迟打开
+            hoverTimer = setTimeout(() => {
+                open()
+            }, props.hoverDelay)
+        }
+
+        /**
+         * 处理 hover 离开
+         */
+        const handleMouseLeave = () => {
+            if (props.triggerEvent !== 'hover') return
+
+            // 清除定时器
+            if (hoverTimer) {
+                clearTimeout(hoverTimer)
+            }
+
+            // 延迟关闭
+            hoverTimer = setTimeout(() => {
+                close()
+            }, props.hoverDelay)
+        }
+
+        /**
+         * 取消关闭（鼠标进入悬浮窗时）
+         */
+        const cancelClose = () => {
+            if (hoverTimer) {
+                clearTimeout(hoverTimer)
+            }
+        }
+
+        /**
+         * 点击外部关闭
+         */
+        const handleClickOutside = (e) => {
+            if (!visible.value) return
+
+            const triggerEl = triggerRef.value?.$el || triggerRef.value
+            const dropdownEl = dropdownRef.value
+
+            if (
+                triggerEl &&
+                dropdownEl &&
+                !triggerEl.contains(e.target) &&
+                !dropdownEl.contains(e.target)
+            ) {
+                close()
+            }
+        }
+
+        /**
+         * 窗口大小改变时重新计算位置
+         */
+        const handleResize = () => {
+            if (visible.value) {
+                calculatePosition()
+            }
+        }
+
+        // 生命周期
+        onMounted(() => {
+            document.addEventListener('click', handleClickOutside)
+            window.addEventListener('resize', handleResize)
+            window.addEventListener('scroll', handleResize, true)
+        })
+
+        onBeforeUnmount(() => {
+            document.removeEventListener('click', handleClickOutside)
+            window.removeEventListener('resize', handleResize)
+            window.removeEventListener('scroll', handleResize, true)
+
+            // 清除定时器
+            if (hoverTimer) {
+                clearTimeout(hoverTimer)
+            }
+        })
+
+        return () => {
+            // 检查是否提供了必需的插槽
+            if (!slots.trigger) {
+                console.warn('PopoverSelector: trigger 插槽是必需的')
+                return null
+            }
+
+            // 构建触发器事件
+            const triggerEvents = {}
+            if (props.triggerEvent === 'hover') {
+                triggerEvents.onMouseenter = handleMouseEnter
+                triggerEvents.onMouseleave = handleMouseLeave
+            }
+
+            // 渲染触发器插槽
+            const triggerSlot = slots.trigger?.({
+                open,
+                close,
+                toggle,
+                visible: visible.value,
+                // 传递事件给插槽，让用户可以自定义
+                events: triggerEvents,
+            })
+
+            // 渲染悬浮窗内容插槽
+            const dropdownContent = slots.default?.({
+                close,
+                visible: visible.value,
+            })
+
+            // 悬浮窗的 hover 事件（用于 hover 模式）
+            const dropdownEvents = {}
+            if (props.triggerEvent === 'hover') {
+                dropdownEvents.onMouseenter = cancelClose
+                dropdownEvents.onMouseleave = handleMouseLeave
+            }
+
+            return (
+                <div class={styles.popoverSelector}>
+                    {/* 触发器 */}
+                    <div
+                        ref={triggerRef}
+                        class={styles.trigger}
+                        {...triggerEvents}
+                    >
+                        {triggerSlot}
+                    </div>
+
+                    {/* 悬浮窗 */}
+                    {visible.value && (
+                        <div
+                            ref={dropdownRef}
+                            class={[
+                                styles.dropdown,
+                                props.animated && styles.animated,
+                                props.dropdownClass,
+                            ]}
+                            style={computedDropdownStyle.value}
+                            {...dropdownEvents}
+                        >
+                            {dropdownContent}
+                        </div>
+                    )}
+                </div>
+            )
+        }
+    },
+})