npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,39 @@
+// 通用悬浮窗选择器样式
+.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

@@ -0,0 +1,248 @@
+# 部门选择器组件
+
+本目录包含一个核心组件：`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

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