npmapps 1.1.6 → 1.2.0

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

@@ -1,330 +0,0 @@
-// 部门选择器样式
-.departmentSelector {
-    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;
-    }
-}
-
-// 按钮模式包装器
-.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;
-}
-
-// 输入框内容区域
-.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;
-    }
-}
-
-// 右侧图标区域
-.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;
-
-    // 添加动画效果
-    animation: dropdownSlideIn 0.2s ease-out;
-    transform-origin: top;
-}
-
-// 悬浮窗内容
-.dropdownContent {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    max-height: inherit; // 继承父容器的 maxHeight
-    overflow: hidden; // 防止内容溢出到悬浮窗外
-}
-
-// 下拉框淡入动画
-@keyframes dropdownSlideIn {
-    from {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-    to {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-}
-
-// 搜索框区域
-.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 {
-                &:focus > .el-tree-node__content {
-                    background-color: #f5f7fa;
-                }
-            }
-
-            .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;
-                }
-            }
-
-            // 复选框样式
-            .el-checkbox {
-                margin-right: 8px;
-            }
-
-            // 展开/收起图标
-            .el-tree-node__expand-icon {
-                font-size: 12px;
-                color: #c0c4cc;
-
-                &.is-leaf {
-                    color: transparent;
-                }
-            }
-        }
-    }
-}
-
-// 空状态
-.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: 60px 16px;
-    color: #909399;
-    font-size: 14px;
-    gap: 12px;
-
-    :global(.el-icon) {
-        font-size: 24px;
-        color: #409eff;
-    }
-
-    span {
-        margin-top: 4px;
-    }
-}

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

@@ -1,378 +0,0 @@
-import { defineComponent, ref } from 'vue'
-import { ArrowDown, CircleClose, Loading } from '@element-plus/icons-vue'
-import PopoverSelector from './PopoverSelector.jsx'
-import { fetchDepartments } from '../mockData.js'
-import styles from './DepartmentSelectorV2.module.scss'
-
-/**
- * 基于 PopoverSelector 的部门选择器示例
- * @component DepartmentSelectorV2
- * @description 使用通用 PopoverSelector 组件构建的部门选择器
- */
-export default defineComponent({
-    name: 'DepartmentSelectorV2',
-
-    props: {
-        /**
-         * 选中的部门（单选时为对象，多选时为数组）
-         * @type {Object|Array<Object>}
-         * @example 单选：{ id: 911, label: '前端开发组' }
-         * @example 多选：[{ id: 910, label: '后端开发组' }, { id: 911, label: '前端开发组' }]
-         */
-        modelValue: {
-            type: [Object, Array],
-            default: null,
-        },
-        /**
-         * 是否多选
-         */
-        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,
-        },
-    },
-
-    emits: ['update:modelValue', 'change'],
-
-    setup(props, { emit }) {
-        // 部门树数据
-        const departments = ref([])
-        // 数据加载状态
-        const loading = ref(false)
-        // 是否 hover
-        const isHovering = ref(false)
-        // 树组件 ref
-        const treeRef = ref(null)
-        // 搜索关键词
-        const searchKeyword = ref('')
-
-        /**
-         * 获取选中的部门信息
-         */
-        const selectedDepartments = (() => {
-            if (!props.modelValue) return []
-            // v-model 直接绑定对象，单选转数组，多选直接使用
-            return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
-        })
-
-        /**
-         * 显示文本
-         */
-        const displayText = (() => {
-            const selected = selectedDepartments()
-            if (selected.length === 0) return ''
-            return selected.map(d => d.label).join(', ')
-        })
-
-        /**
-         * 加载部门数据
-         */
-        const loadDepartments = async () => {
-            loading.value = true
-            try {
-                departments.value = await fetchDepartments(2000)
-            } catch (error) {
-                console.error('加载部门数据失败:', error)
-            } finally {
-                loading.value = false
-            }
-        }
-
-        /**
-         * 树节点点击
-         */
-        const handleNodeClick = (data, node, close) => {
-            if (!props.multiple) {
-                // 单选：选中后关闭，emit 完整对象
-                emit('update:modelValue', data)
-                emit('change', data)
-                close()
-            } else {
-                // 多选：点击展开/收起
-                if (node.childNodes && node.childNodes.length > 0) {
-                    node.expanded = !node.expanded
-                }
-            }
-        }
-
-        /**
-         * 树节点勾选
-         */
-        const handleCheck = (data, checkedInfo) => {
-            if (props.multiple) {
-                const checkedKeys = checkedInfo.checkedKeys
-                // 找出所有选中的部门对象
-                const findDepartment = (depts, id) => {
-                    for (const dept of depts) {
-                        if (dept.id === id) return dept
-                        if (dept.children) {
-                            const found = findDepartment(dept.children, id)
-                            if (found) return found
-                        }
-                    }
-                    return null
-                }
-                const selectedDepts = checkedKeys.map(id => findDepartment(departments.value, id)).filter(Boolean)
-
-                emit('update:modelValue', selectedDepts) // emit 完整对象数组
-                emit('change', selectedDepts)
-            }
-        }
-
-        /**
-         * 清空选择
-         */
-        const handleClear = (e) => {
-            e.stopPropagation()
-            emit('update:modelValue', props.multiple ? [] : null)
-            emit('change', props.multiple ? [] : null)
-        }
-
-        /**
-         * 过滤节点
-         */
-        const filterNode = (value, data) => {
-            if (!value) return true
-            return data.label.toLowerCase().includes(value.toLowerCase())
-        }
-
-        /**
-         * 搜索变化
-         */
-        const handleSearchChange = (value) => {
-            if (treeRef.value) {
-                treeRef.value.filter(value)
-            }
-        }
-
-        /**
-         * 悬浮窗打开时
-         */
-        const handleOpen = async () => {
-            // 如果数据未加载，加载数据
-            if (departments.value.length === 0) {
-                await loadDepartments()
-            }
-
-            // 设置树的选中状态
-            setTimeout(() => {
-                if (treeRef.value) {
-                    if (props.multiple) {
-                        // 多选：从对象数组中提取 id
-                        const ids = Array.isArray(props.modelValue)
-                            ? props.modelValue.map(item => item.id)
-                            : []
-                        treeRef.value.setCheckedKeys(ids)
-                    } else {
-                        // 单选：从对象中提取 id
-                        const id = props.modelValue?.id || null
-                        treeRef.value.setCurrentKey(id)
-                    }
-                }
-            }, 100)
-        }
-
-        return () => {
-            // 渲染显示内容
-            const renderContent = () => {
-                let content = null
-
-                if (props.multiple) {
-                    const selected = selectedDepartments()
-                    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 {
-                        // 输入框模式：显示文本
-                        content = <span class={styles.text}>{displayText()}</span>
-                    }
-                } else {
-                    content = displayText() ? (
-                        <span class={styles.text}>{displayText()}</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
-                    ? selectedDepartments().length > 0
-                    : !!displayText()
-
-                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={400}
-                    maxHeight={400}
-                    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}>
-                                {/* 搜索框 */}
-                                <div class={styles.searchBox}>
-                                    <el-input
-                                        v-model={searchKeyword.value}
-                                        placeholder="搜索部门"
-                                        prefix-icon="Search"
-                                        clearable
-                                        size="small"
-                                        onInput={handleSearchChange}
-                                    />
-                                </div>
-
-                                {/* 树形结构 */}
-                                <div class={styles.treeWrapper}>
-                                    {loading.value ? (
-                                        <div class={styles.loading}>
-                                            <el-icon class="is-loading">
-                                                <Loading />
-                                            </el-icon>
-                                            <span>加载中...</span>
-                                        </div>
-                                    ) : (
-                                        <el-tree
-                                            ref={treeRef}
-                                            data={departments.value}
-                                            node-key="id"
-                                            props={{ label: 'label', children: 'children' }}
-                                            show-checkbox={props.multiple}
-                                            check-strictly={true}
-                                            default-expand-all={false}
-                                            highlight-current={!props.multiple}
-                                            expand-on-click-node={false}
-                                            filter-node-method={filterNode}
-                                            onNodeClick={(data, node) => handleNodeClick(data, node, close)}
-                                            onCheck={handleCheck}
-                                        />
-                                    )}
-                                </div>
-                            </div>
-                        ),
-                    }}
-                </PopoverSelector>
-            )
-        }
-    },
-})