npmapps 1.1.6 → 1.2.0

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

@@ -1,39 +0,0 @@
-// 通用悬浮窗选择器样式
-.popoverSelector {
-    position: relative;
-    display: inline-block;
-}
-
-// 触发器容器
-.trigger {
-    display: inline-block;
-}
-
-// 悬浮窗容器
-.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;
-    overflow: hidden;
-}
-
-// 带动画的悬浮窗
-.dropdown.animated {
-    animation: dropdownSlideIn 0.2s ease-out;
-    transform-origin: top;
-}
-
-// 下拉框淡入动画
-@keyframes dropdownSlideIn {
-    from {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-    to {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/components/README.md

@@ -1,248 +0,0 @@
-# 部门选择器组件
-
-本目录包含一个核心组件：`DepartmentSelector`（部门选择器）。
-
-## 组件说明
-
-### DepartmentSelector（部门选择器）
-
-下拉树形结构的部门选择器，支持单选或多选，聚焦时悬浮显示。
-
-**功能特性：**
-- 使用 Element Plus 的 el-tree 组件
-- 输入框聚焦时才显示树形结构
-- 智能悬浮定位（根据可用空间自动显示在输入框上方或下方）
-- 支持单选和多选模式
-- 单选时显示文本，右侧带下拉箭头图标
-- 多选时以 Tag 组件形式展示选中值，每个 Tag 可单独删除
-- 支持 `collapse-tags` 属性折叠标签（显示第一个 + 剩余数量）
-- 支持 `collapse-tags-tooltip` 属性，鼠标悬停显示所有选中值
-- 支持 `max-collapse-tags` 属性限制显示的标签数量
-- 支持清空按钮（通过 `clearable` 属性控制，默认关闭）
-- 支持搜索过滤
-- 异步加载数据（模拟接口）
-- 响应式定位（窗口大小改变或滚动时自动调整）
-
-**Props：**
-- `modelValue: number|string|Array` - 选中的部门ID（单选时为 number/string，多选时为 Array）
-- `multiple: boolean` - 是否多选，默认 `false`
-- `placeholder: string` - 输入框占位文本，默认 `"请选择部门"`
-- `disabled: boolean` - 是否禁用，默认 `false`
-- `clearable: boolean` - 是否可清空，默认 `false`
-- `collapseTags: boolean` - 多选时是否将选中值折叠显示（显示第一个+剩余数量），默认 `false`
-- `collapseTagsTooltip: boolean` - 当鼠标悬停于折叠标签时是否显示所有选中的标签，需要配合 `collapseTags` 使用，默认 `false`
-- `maxCollapseTags: number` - 多选时最多显示的标签数量，超出部分折叠显示，为 0 则不限制，默认 `0`
-
-**Events：**
-- `update:modelValue` - 选择变化时触发
-- `change` - 选择变化时触发，参数为选中的部门ID（单选）或ID数组（多选）
-
-**使用示例：**
-
-```jsx
-import DepartmentSelector from './components/DepartmentSelector'
-
-// 单选模式
-const selectedDept = ref(null)
-<DepartmentSelector
-  v-model={selectedDept.value}
-  placeholder="请选择部门"
-  clearable={true}
-  onChange={(id) => console.log('选中部门ID:', id)}
-/>
-
-// 多选模式 - 默认（显示所有标签）
-const selectedDepts = ref([])
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  placeholder="请选择部门（可多选）"
-  clearable={true}
-  onChange={(ids) => console.log('选中部门ID列表:', ids)}
-/>
-
-// 多选模式 - collapse-tags（折叠标签）
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  collapseTags={true}
-  clearable={true}
-/>
-
-// 多选模式 - collapse-tags-tooltip（悬停显示详情）
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  collapseTags={true}
-  collapseTagsTooltip={true}
-  clearable={true}
-/>
-
-// 多选模式 - max-collapse-tags（限制显示标签数量）
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  maxCollapseTags={2}
-  clearable={true}
-/>
-
-// 禁用状态
-<DepartmentSelector
-  v-model={selectedDept.value}
-  disabled={true}
-/>
-```
-
----
-
-## 多选标签展示模式
-
-组件支持多种标签展示模式：
-
-### 1. 默认模式
-显示所有选中的标签，每个标签都可以单独删除。
-
-```jsx
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-/>
-```
-
-### 2. collapse-tags 模式
-只显示第一个标签 + 剩余数量（如：`部门A × +3`）
-
-```jsx
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  collapseTags={true}
-/>
-```
-
-### 3. collapse-tags-tooltip 模式
-在 collapse-tags 基础上，鼠标悬停在剩余数量上时显示所有选中值的提示
-
-```jsx
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  collapseTags={true}
-  collapseTagsTooltip={true}
-/>
-```
-
-### 4. max-collapse-tags 模式
-限制显示的标签数量，超出部分显示为 `+N`（如：`部门A × 部门B × +3`）
-
-```jsx
-<DepartmentSelector
-  v-model={selectedDepts.value}
-  multiple={true}
-  maxCollapseTags={2}
-/>
-```
-
----
-
-## 数据格式说明
-
-### 部门数据格式
-```javascript
-{
-  id: number | string,    // 部门ID
-  label: string,          // 部门名称
-  children?: Array        // 子部门列表（可选）
-}
-```
-
-### 模拟数据和接口
-
-部门数据存储在 `mockData.js` 文件中，提供以下方法：
-
-**1. fetchDepartments(delay)**
-- 模拟异步获取部门树数据
-- 参数：`delay` - 延迟时间（毫秒），默认 500ms
-- 返回：Promise<Array>
-
-```javascript
-import { fetchDepartments } from './mockData.js'
-
-const departments = await fetchDepartments(300)
-```
-
-**2. searchDepartments(keyword, departments)**
-- 根据关键词搜索部门
-- 参数：
-  - `keyword` - 搜索关键词
-  - `departments` - 部门树数据（可选，默认使用 mockDepartments）
-- 返回：过滤后的部门树数组
-
-```javascript
-import { searchDepartments } from './mockData.js'
-
-const filteredDepts = searchDepartments('人力资源', departments)
-```
-
----
-
-## 悬浮定位逻辑
-
-组件实现了智能的悬浮定位：
-
-1. **空间检测**：计算输入框下方和上方的可用空间
-2. **自动定位**：
-   - 如果下方空间足够（≥400px），显示在输入框下方
-   - 如果下方空间不足且上方空间更大，显示在输入框上方
-3. **动态调整**：
-   - 监听窗口大小改变（resize）
-   - 监听页面滚动（scroll）
-   - 自动重新计算位置
-
----
-
-## 文件结构
-
-```
-departmentPersonnel/
-├── components/
-│   ├── DepartmentSelector.jsx           # 部门选择器组件
-│   ├── DepartmentSelector.module.scss   # 部门选择器样式
-│   └── README.md                        # 组件说明文档
-├── mockData.js                          # 模拟数据和接口
-└── index.jsx                            # 演示页面
-```
-
----
-
-## 技术实现
-
-1. **使用的技术**：
-   - Vue 3 Composition API
-   - JSX 语法
-   - Element Plus（el-tree, el-input）
-   - CSS Modules
-
-2. **核心功能实现**：
-   - 使用 `getBoundingClientRect()` 获取元素位置
-   - 使用 `position: fixed` 实现悬浮定位
-   - 使用 `el-tree` 的 `filter-node-method` 实现搜索
-   - 使用事件监听实现点击外部关闭
-
-3. **性能优化**：
-   - 懒加载：首次聚焦时才加载数据
-   - 事件节流：滚动和 resize 事件自动重新计算位置
-   - 组件卸载时清理事件监听器
-
----
-
-## 注意事项
-
-1. 确保项目已安装并正确配置 Element Plus
-2. 组件使用 Vue 3 Composition API 和 JSX 语法
-3. 样式使用 CSS Modules，确保样式隔离
-4. 下拉框使用 `position: fixed` 定位，不受父容器 overflow 限制
-5. 组件会自动处理窗口滚动和大小改变事件
-6. `clearable` 属性默认为 `false`，需要显示清除按钮时需要手动设置为 `true`
-7. 多选模式下，单击 Tag 的关闭按钮可以删除单个选项，点击清除按钮可以清空所有选项
-8. `collapse-tags-tooltip` 需要配合 `collapse-tags` 一起使用才有效果

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

@@ -1,194 +0,0 @@
-import { defineComponent, ref } from 'vue'
-import { ArrowDown, CircleClose } from '@element-plus/icons-vue'
-import styles from './DepartmentSelector.module.scss'
-
-/**
- * 选择器触发器组件
- * @component SelectorTrigger
- * @description 提供统一的触发器UI，支持输入框和按钮两种模式
- *
- * @example
- * // 输入框模式
- * <SelectorTrigger
- *   displayType="input"
- *   visible={visible}
- *   disabled={false}
- *   clearable={true}
- *   hasValue={true}
- *   onClick={handleOpen}
- *   onClear={handleClear}
- * >
- *   <span>选择的内容</span>
- * </SelectorTrigger>
- *
- * // 按钮模式
- * <SelectorTrigger
- *   displayType="button"
- *   visible={visible}
- *   disabled={false}
- *   clearable={true}
- *   hasValue={true}
- *   onClick={handleOpen}
- *   onClear={handleClear}
- * >
- *   <span>选择的内容</span>
- * </SelectorTrigger>
- */
-export default defineComponent({
-    name: 'SelectorTrigger',
-
-    props: {
-        /**
-         * 显示类型：input 输入框模式 | button 按钮模式
-         * @type {string}
-         */
-        displayType: {
-            type: String,
-            default: 'input',
-            validator: (value) => ['input', 'button'].includes(value),
-        },
-        /**
-         * 悬浮窗是否可见
-         * @type {boolean}
-         */
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * 是否禁用
-         * @type {boolean}
-         */
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * 是否可清空
-         * @type {boolean}
-         */
-        clearable: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * 是否有选中值
-         * @type {boolean}
-         */
-        hasValue: {
-            type: Boolean,
-            default: false,
-        },
-    },
-
-    emits: ['click', 'clear'],
-
-    setup(props, { emit, slots }) {
-        // 输入框/按钮是否被hover
-        const isHovering = ref(false)
-
-        /**
-         * 点击处理
-         */
-        const handleClick = () => {
-            if (!props.disabled) {
-                emit('click')
-            }
-        }
-
-        /**
-         * 清空处理
-         * @param {Event} e - 事件对象
-         */
-        const handleClear = (e) => {
-            e.stopPropagation()
-            emit('clear', e)
-        }
-
-        /**
-         * 渲染图标区域
-         */
-        const renderIcons = () => {
-            // 是否显示清除图标（有值 + hover + clearable）
-            const showClearIcon = props.clearable && props.hasValue && isHovering.value
-
-            return (
-                <div class={styles.suffixIcons}>
-                    {/* 清除按钮（hover时显示） */}
-                    {showClearIcon && (
-                        <el-icon
-                            class={styles.clearIcon}
-                            onClick={handleClear}
-                        >
-                            <CircleClose />
-                        </el-icon>
-                    )}
-
-                    {/* 下拉箭头（未hover或无值时显示） */}
-                    {!showClearIcon && (
-                        <el-icon
-                            class={[
-                                styles.arrowIcon,
-                                props.visible && styles.reverse,
-                            ]}
-                        >
-                            <ArrowDown />
-                        </el-icon>
-                    )}
-                </div>
-            )
-        }
-
-        return () => {
-            // 获取插槽内容
-            const content = slots.default?.()
-
-            if (props.displayType === 'button') {
-                return (
-                    <el-button
-                        disabled={props.disabled}
-                        onClick={handleClick}
-                        onMouseenter={() => (isHovering.value = true)}
-                        onMouseleave={() => (isHovering.value = false)}
-                        class={styles.buttonWrapper}
-                    >
-                        {{
-                            default: () => (
-                                <div class={styles.buttonInner}>
-                                    {/* 内容区域 */}
-                                    <div class={styles.buttonContent}>
-                                        {content}
-                                    </div>
-
-                                    {/* 右侧图标区域 */}
-                                    {renderIcons()}
-                                </div>
-                            ),
-                        }}
-                    </el-button>
-                )
-            }
-
-            return (
-                <div
-                    class={[
-                        styles.customInput,
-                        props.disabled && styles.disabled,
-                        props.visible && styles.focused,
-                    ]}
-                    onClick={handleClick}
-                    onMouseenter={() => (isHovering.value = true)}
-                    onMouseleave={() => (isHovering.value = false)}
-                >
-                    {/* 内容区域 */}
-                    <div class={styles.inputContent}>
-                        {content}
-                    </div>
-
-                    {/* 右侧图标区域 */}
-                    {renderIcons()}
-                </div>
-            )
-        }
-    },
-})