npmapps 1.0.24 → 1.0.26

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

@@ -1,228 +0,0 @@
-// 部门选择器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-vue3-child/src/views/aiCoach/departmentPersonnel/components/OptionsSelector.jsx

@@ -1,399 +0,0 @@
-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>
-            )
-        }
-    },
-})