npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,228 @@
+// 部门选择器V2样式（基于PopoverSelector）
+
+// 输入框触发器
+.inputTrigger {
+    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;
+    }
+}
+
+// 按钮触发器
+.buttonTrigger {
+    width: 100%;
+}
+
+// 按钮内部容器
+.buttonInner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 8px;
+}
+
+// 内容区域
+.content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 30px;
+    padding: 2px 0;
+    text-align: left;
+    overflow: hidden;
+}
+
+// 图标区域
+.icons {
+    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);
+    }
+}
+
+// 前置标签
+.label {
+    color: #606266;
+    font-size: 14px;
+    margin-right: 4px;
+    flex-shrink: 0;
+}
+
+// 占位符
+.placeholder {
+    color: #c0c4cc;
+    font-size: 14px;
+}
+
+// 文本
+.text {
+    color: #606266;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 文字包装器
+.textWrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+// 数量徽章
+.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;
+}
+
+// 悬浮窗内容
+.dropdownContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: inherit; // 继承父容器的 maxHeight
+    overflow: hidden; // 防止内容溢出到悬浮窗外
+}
+
+// 搜索框
+.searchBox {
+    padding: 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #fff;
+}
+
+// 树容器
+.treeWrapper {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+
+    // 自定义滚动条
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+
+    // 树样式
+    :global {
+        .el-tree {
+            background: transparent;
+
+            .el-tree-node__content {
+                height: 32px;
+                padding-right: 12px;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #f5f7fa;
+                }
+            }
+
+            .el-tree-node__label {
+                font-size: 14px;
+                color: #606266;
+            }
+
+            .el-tree-node.is-current > .el-tree-node__content {
+                background-color: #ecf5ff;
+                color: #409eff;
+
+                .el-tree-node__label {
+                    color: #409eff;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}
+
+// 加载状态
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 16px;
+    color: #909399;
+    font-size: 14px;
+    gap: 12px;
+
+    :global(.el-icon) {
+        font-size: 24px;
+        color: #409eff;
+    }
+}

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

@@ -0,0 +1,399 @@
+import { defineComponent, ref, computed } from 'vue'
+import { ArrowDown, CircleClose, Check } from '@element-plus/icons-vue'
+import PopoverSelector from './PopoverSelector.jsx'
+import styles from './OptionsSelector.module.scss'
+
+/**
+ * 通用选项选择器组件（基于 PopoverSelector）
+ * @component OptionsSelector
+ * @description 基于 PopoverSelector 构建的通用选项选择器，支持单选/多选
+ *
+ * @example
+ * // 单选
+ * const selected = ref({ label: '选项 1', value: 1 })
+ * <OptionsSelector
+ *   v-model={selected.value}
+ *   options={[
+ *     { label: '全部', value: '' },
+ *     { label: '选项 1', value: 1 },
+ *     { label: '选项 2', value: 2 }
+ *   ]}
+ * />
+ *
+ * // 多选
+ * const selected = ref([{ label: '选项 1', value: 1 }, { label: '选项 2', value: 2 }])
+ * <OptionsSelector
+ *   v-model={selected.value}
+ *   options={options}
+ *   multiple={true}
+ * />
+ */
+export default defineComponent({
+    name: 'OptionsSelector',
+
+    props: {
+        /**
+         * 选中的选项（单选时为对象，多选时为数组）
+         * @type {Object|Array<Object>}
+         * @example 单选：{ label: '选项 1', value: 1 }
+         * @example 多选：[{ label: '选项 1', value: 1 }, { label: '选项 2', value: 2 }]
+         */
+        modelValue: {
+            type: [Object, Array],
+            default: null,
+        },
+        /**
+         * 选项列表
+         * @type {Array<{label: string, value: any}>}
+         * @example [{ label: '全部', value: '' }, { label: '选项 1', value: 1 }]
+         */
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * 是否多选
+         */
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 占位文本
+         */
+        placeholder: {
+            type: String,
+            default: '请选择',
+        },
+        /**
+         * 前置标签
+         */
+        label: {
+            type: String,
+            default: '',
+        },
+        /**
+         * 显示类型：input | button
+         */
+        displayType: {
+            type: String,
+            default: 'input',
+            validator: (value) => ['input', 'button'].includes(value),
+        },
+        /**
+         * 是否禁用
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 是否可清空
+         */
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 是否显示搜索框
+         */
+        filterable: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * 悬浮窗宽度
+         */
+        width: {
+            type: [Number, String],
+            default: 240,
+        },
+        /**
+         * 悬浮窗最大高度
+         */
+        maxHeight: {
+            type: Number,
+            default: 300,
+        },
+    },
+
+    emits: ['update:modelValue', 'change'],
+
+    setup(props, { emit }) {
+        // 是否 hover
+        const isHovering = ref(false)
+        // 搜索关键词
+        const searchKeyword = ref('')
+
+        /**
+         * 获取选中的选项信息
+         */
+        const selectedOptions = computed(() => {
+            if (!props.modelValue) return []
+            // v-model 直接绑定对象，单选转数组，多选直接使用
+            return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+        })
+
+        /**
+         * 显示文本
+         */
+        const displayText = computed(() => {
+            const selected = selectedOptions.value
+            if (selected.length === 0) return ''
+            return selected.map(d => d.label).join(', ')
+        })
+
+        /**
+         * 过滤后的选项列表
+         */
+        const filteredOptions = computed(() => {
+            if (!searchKeyword.value) return props.options
+            const keyword = searchKeyword.value.toLowerCase()
+            return props.options.filter(option =>
+                option.label.toLowerCase().includes(keyword)
+            )
+        })
+
+        /**
+         * 选项点击
+         */
+        const handleOptionClick = (option, close) => {
+            if (props.multiple) {
+                // 多选
+                const selected = selectedOptions.value
+                const index = selected.findIndex(item => item.value === option.value)
+
+                let newValue
+                if (index > -1) {
+                    // 已选中，取消选择
+                    newValue = selected.filter((_, i) => i !== index)
+                } else {
+                    // 未选中，添加选择
+                    newValue = [...selected, option]
+                }
+
+                emit('update:modelValue', newValue)
+                emit('change', newValue)
+            } else {
+                // 单选：选中后关闭
+                emit('update:modelValue', option)
+                emit('change', option)
+                close()
+            }
+        }
+
+        /**
+         * 判断选项是否选中
+         */
+        const isOptionSelected = (option) => {
+            return selectedOptions.value.some(item => item.value === option.value)
+        }
+
+        /**
+         * 清空选择
+         */
+        const handleClear = (e) => {
+            e.stopPropagation()
+            emit('update:modelValue', props.multiple ? [] : null)
+            emit('change', props.multiple ? [] : null)
+        }
+
+        /**
+         * 移除单个选中项（多选模式）
+         */
+        const handleRemoveTag = (e, option) => {
+            e.stopPropagation()
+            const selected = selectedOptions.value.filter(item => item.value !== option.value)
+            emit('update:modelValue', selected)
+            emit('change', selected)
+        }
+
+        /**
+         * 悬浮窗打开时
+         */
+        const handleOpen = () => {
+            searchKeyword.value = ''
+        }
+
+        return () => {
+            // 渲染显示内容
+            const renderContent = () => {
+                let content = null
+
+                if (props.multiple) {
+                    const selected = selectedOptions.value
+                    if (selected.length === 0) {
+                        content = <span class={styles.placeholder}>{props.placeholder}</span>
+                    } else if (props.displayType === 'button') {
+                        // 按钮模式：显示文字 + 徽章
+                        const first = selected[0]
+                        const restCount = selected.length - 1
+                        content = (
+                            <div class={styles.textWrapper}>
+                                <span class={styles.text}>{first.label}</span>
+                                {restCount > 0 && (
+                                    <span class={styles.countBadge}>+{restCount}</span>
+                                )}
+                            </div>
+                        )
+                    } else {
+                        // 输入框模式：显示 tag 列表
+                        content = (
+                            <div class={styles.tagsWrapper}>
+                                {selected.map(option => (
+                                    <el-tag
+                                        key={option.value}
+                                        closable
+                                        size="small"
+                                        type="info"
+                                        onClose={(e) => handleRemoveTag(e, option)}
+                                        class={styles.tag}
+                                    >
+                                        {option.label}
+                                    </el-tag>
+                                ))}
+                            </div>
+                        )
+                    }
+                } else {
+                    content = displayText.value ? (
+                        <span class={styles.text}>{displayText.value}</span>
+                    ) : (
+                        <span class={styles.placeholder}>{props.placeholder}</span>
+                    )
+                }
+
+                if (props.label) {
+                    return (
+                        <>
+                            <span class={styles.label}>{props.label}</span>
+                            {content}
+                        </>
+                    )
+                }
+
+                return content
+            }
+
+            // 渲染图标
+            const renderIcons = (visible) => {
+                const hasValue = props.multiple
+                    ? selectedOptions.value.length > 0
+                    : !!displayText.value
+
+                const showClearIcon = props.clearable && hasValue && isHovering.value
+
+                return (
+                    <div class={styles.icons}>
+                        {showClearIcon && (
+                            <el-icon class={styles.clearIcon} onClick={handleClear}>
+                                <CircleClose />
+                            </el-icon>
+                        )}
+                        {!showClearIcon && (
+                            <el-icon class={[styles.arrowIcon, visible && styles.reverse]}>
+                                <ArrowDown />
+                            </el-icon>
+                        )}
+                    </div>
+                )
+            }
+
+            return (
+                <PopoverSelector
+                    width={props.width}
+                    maxHeight={props.maxHeight}
+                    disabled={props.disabled}
+                    onOpen={handleOpen}
+                >
+                    {{
+                        // 触发器插槽
+                        trigger: ({ open, visible }) => {
+                            if (props.displayType === 'button') {
+                                return (
+                                    <el-button
+                                        disabled={props.disabled}
+                                        onClick={open}
+                                        onMouseenter={() => (isHovering.value = true)}
+                                        onMouseleave={() => (isHovering.value = false)}
+                                        class={styles.buttonTrigger}
+                                    >
+                                        {{
+                                            default: () => (
+                                                <div class={styles.buttonInner}>
+                                                    <div class={styles.content}>
+                                                        {renderContent()}
+                                                    </div>
+                                                    {renderIcons(visible)}
+                                                </div>
+                                            ),
+                                        }}
+                                    </el-button>
+                                )
+                            }
+
+                            return (
+                                <div
+                                    class={[
+                                        styles.inputTrigger,
+                                        props.disabled && styles.disabled,
+                                        visible && styles.focused,
+                                    ]}
+                                    onClick={open}
+                                    onMouseenter={() => (isHovering.value = true)}
+                                    onMouseleave={() => (isHovering.value = false)}
+                                >
+                                    <div class={styles.content}>{renderContent()}</div>
+                                    {renderIcons(visible)}
+                                </div>
+                            )
+                        },
+
+                        // 悬浮窗内容插槽
+                        default: ({ close }) => (
+                            <div class={styles.dropdownContent}>
+                                {/* 搜索框 */}
+                                {props.filterable && (
+                                    <div class={styles.searchBox}>
+                                        <el-input
+                                            v-model={searchKeyword.value}
+                                            placeholder="搜索选项"
+                                            prefix-icon="Search"
+                                            clearable
+                                            size="small"
+                                        />
+                                    </div>
+                                )}
+
+                                {/* 选项列表 */}
+                                <div class={styles.optionsList}>
+                                    {filteredOptions.value.length > 0 ? (
+                                        filteredOptions.value.map(option => (
+                                            <div
+                                                key={option.value}
+                                                class={[
+                                                    styles.optionItem,
+                                                    isOptionSelected(option) && styles.selected,
+                                                ]}
+                                                onClick={() => handleOptionClick(option, close)}
+                                            >
+                                                <span class={styles.optionLabel}>{option.label}</span>
+                                                {isOptionSelected(option) && (
+                                                    <el-icon class={styles.checkIcon}>
+                                                        <Check />
+                                                    </el-icon>
+                                                )}
+                                            </div>
+                                        ))
+                                    ) : (
+                                        <div class={styles.empty}>暂无数据</div>
+                                    )}
+                                </div>
+                            </div>
+                        ),
+                    }}
+                </PopoverSelector>
+            )
+        }
+    },
+})