npmapps 1.0.21 → 1.0.23

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

@@ -0,0 +1,252 @@
+// 通用选项选择器样式（基于 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;
+}
+
+// Tags 包装器（多选输入框模式）
+.tagsWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+}
+
+// 单个 tag
+.tag {
+    max-width: 150px;
+
+    :global(.el-tag__content) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+// 图标区域
+.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;
+    overflow: hidden;
+}
+
+// 搜索框
+.searchBox {
+    padding: 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #fff;
+}
+
+// 选项列表
+.optionsList {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+
+    // 自定义滚动条
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+}
+
+// 选项项
+.optionItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    height: 34px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+        background-color: #f5f7fa;
+    }
+
+    &.selected {
+        background-color: #ecf5ff;
+        color: #409eff;
+
+        .optionLabel {
+            color: #409eff;
+            font-weight: 500;
+        }
+    }
+}
+
+// 勾选图标
+.checkIcon {
+    font-size: 16px;
+    color: #409eff;
+    flex-shrink: 0;
+    margin-left: 8px;
+}
+
+// 选项标签
+.optionLabel {
+    flex: 1;
+    font-size: 14px;
+    color: #606266;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 空状态
+.empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
+    color: #909399;
+    font-size: 14px;
+}