ct-component-plus 2.1.3 → 2.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.1.3",
+  "version": "2.1.5",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/index.js

@@ -3,7 +3,9 @@ import radio from './radio';
 import checkbox from './checkbox';
 import input from './input';
 import inputRange from './input-range';
+import numberInputRange from './number-input-range';
 import select from './select';
+import pagingSelect from './paging-select';
 import yearSelect from './year-select';
 import datePicker from './date-picker';
 import cascader from './cascader';
@@ -34,7 +36,9 @@ const components = [
   checkbox,
   input,
   inputRange,
+  numberInputRange,
   select,
+  pagingSelect,
   yearSelect,
   datePicker,
   cascader,
@@ -79,4 +83,4 @@ export default {
   install
 }
 export { CtMessage }
-export * from 'element-plus'
+export * from 'element-plus'

package/packages/components/number-input-range/index.js

@@ -0,0 +1,9 @@
+import CtNumberInputRange from "./src/number-input-range.vue";
+
+/* istanbul ignore next */
+CtNumberInputRange.install = function (Vue) {
+  // TODO 这里D组件名是这这里写死的，不是使用CtNumberInputRange.name的形式，因为setup里面不可以直接什么组件的name属性，故而这里没有这个属性，后续可以考虑使用defineOptions（需要安装unplugin-vue-macros插件）
+  Vue.component("CtNumberInputRange", CtNumberInputRange);
+};
+
+export default CtNumberInputRange;

package/packages/components/number-input-range/src/index.js

@@ -0,0 +1,31 @@
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+
+export const numberInputRangeEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+  "change",
+];
+export const numberInputRangeProps = {
+  ...searchComponentProps,
+  modelValue: Array,
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1,
+  },
+  precision: Number,
+  disabled: Boolean,
+  separator: {
+    type: String,
+    default: "--",
+  },
+  controlsPosition: {
+    type: String,
+    default: "right",
+  },
+  placeholder: {
+    type: String,
+    default: "请输入数字",
+  },
+};

package/packages/components/number-input-range/src/number-input-range.vue

@@ -0,0 +1,168 @@
+<template>
+  <div :class="[ns.b(), ns.is('disabled', disabled)]">
+    <div :class="[ns.e('wrapper')]">
+      <el-input-number
+        ref="inputRef1"
+        v-model="leftModel"
+        :placeholder="placeholder"
+        :min="min"
+        :max="max"
+        :step="step"
+        :precision="precision"
+        :disabled="disabled"
+        v-bind="rawAttr"
+        :controls-position="controlsPosition"
+        @change="handleChange($event, 0)"
+      />
+      <span :class="[ns.e('separator')]">
+        <slot name="separator">{{ separator }}</slot>
+      </span>
+      <el-input-number
+        ref="inputRef2"
+        v-model="rightModel"
+        :placeholder="placeholder"
+        :min="min"
+        :max="max"
+        :step="step"
+        :precision="precision"
+        :disabled="disabled"
+        v-bind="rawAttr"
+        :controls-position="controlsPosition"
+        @change="handleChange($event, 1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { numberInputRangeEmits, numberInputRangeProps } from "./index";
+const props = defineProps(numberInputRangeProps);
+const emit = defineEmits(numberInputRangeEmits);
+
+useBuriedParams(props, emit);
+const ns = useNamespace("number-input-range");
+
+const inputRef1 = ref(null);
+const inputRef2 = ref(null);
+
+const normalizePair = (left, right) => {
+  const l = left;
+  const r = right;
+  if (l !== undefined && r !== undefined && l > r) {
+    return [r, l];
+  }
+  return [l, r];
+};
+
+const leftModel = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue[0] : undefined;
+  },
+  set(newValue) {
+    const right = Array.isArray(props.modelValue)
+      ? props.modelValue[1]
+      : undefined;
+    emit("update:modelValue", [newValue, right]);
+  },
+});
+const rightModel = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue[1] : undefined;
+  },
+  set(newValue) {
+    const left = Array.isArray(props.modelValue)
+      ? props.modelValue[0]
+      : undefined;
+    emit("update:modelValue", [left, newValue]);
+  },
+});
+
+const handleChange = (val, index) => {
+  const currentLeft = index === 0
+    ? val
+    : (Array.isArray(props.modelValue) ? props.modelValue[0] : undefined);
+  const currentRight = index === 1
+    ? val
+    : (Array.isArray(props.modelValue) ? props.modelValue[1] : undefined);
+  const bothFilled = typeof currentLeft === "number" && !isNaN(currentLeft)
+    && typeof currentRight === "number" && !isNaN(currentRight);
+  if (bothFilled) {
+    const normalized = normalizePair(currentLeft, currentRight);
+    emit("update:modelValue", normalized);
+    emit("change", normalized, index, val);
+  } else {
+    emit("change", [currentLeft, currentRight], index, val);
+  }
+};
+
+defineExpose({
+  ref: [inputRef1, inputRef2],
+});
+</script>
+
+<style lang="less">
+.ct-number-input-range {
+  position: relative;
+  display: inline-flex;
+  width: var(--ct-component-width);
+  font-size: var(--ct-font-size);
+  color: var(--ct-border-color);
+  box-sizing: border-box;
+  vertical-align: middle;
+  @R: .ct-number-input-range;
+  &.is-disabled {
+    cursor: not-allowed;
+    --ct-component-fill-color: var(--ct-component-disabled-bg-color);
+    @{R}__wrapper {
+      .el-input__wrapper {
+        height: var(--ct-component-inner-height);
+        padding: 1px var(--ct-component-inner-padding);
+        box-shadow: unset;
+        border-radius: 0;
+      }
+    }
+  }
+  &:not(.is-disabled):hover {
+    --ct-component-border-color: var(--ct-component-hover-border-color);
+  }
+  &__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 0;
+    background-color: var(--ct-component-fill-color);
+    background-image: none;
+    border-radius: var(--ct-component-border-radius);
+    transition: var(--el-transition-box-shadow);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0 0 1px var(--ct-component-border-color) inset;
+    &:focus-within {
+      --ct-component-border-color: var(--ct-color-primary);
+    }
+    .el-input-number {
+      width: calc(50% - 8px);
+      &.is-controls-right .el-input__wrapper {
+        padding: 1px var(--ct-component-inner-padding);
+      }
+      .el-input__wrapper {
+        padding: 1px var(--ct-component-inner-padding);
+        box-shadow: unset;
+        border-radius: 0;
+      }
+      .el-input__inner {
+        color: var(--ct-component-color);
+        font-size: inherit;
+      }
+      span[role="button"] {
+        display: none;
+      }
+    }
+  }
+  &__separator {
+    color: var(--ct-color-grey-sub);
+  }
+}
+</style>

package/packages/components/paging-select/index.js

@@ -0,0 +1,8 @@
+import CtPagingSelect from "./src/paging-select.vue";
+
+/* istanbul ignore next */
+CtPagingSelect.install = function (Vue) {
+  Vue.component("CtPagingSelect", CtPagingSelect);
+};
+
+export default CtPagingSelect;

package/packages/components/paging-select/src/arrow-down.vue

@@ -0,0 +1,3 @@
+<template>
+  <ct-icon name="arrow-down_line"></ct-icon>
+</template>

package/packages/components/paging-select/src/clear-icon.vue

@@ -0,0 +1,3 @@
+<template>
+  <ct-icon name="close_line"></ct-icon>
+</template>

package/packages/components/paging-select/src/empty.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="ct-select__empty">
+    <span>{{ text }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: "暂无数据",
+  },
+});
+</script>

package/packages/components/paging-select/src/index.js

@@ -0,0 +1,50 @@
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+import arrowDown from "./arrow-down.vue";
+import clearIcon from "./clear-icon.vue";
+
+export const selectEmits = ["update:modelValue", buriedParamsKey];
+export const selectProps = {
+  ...searchComponentProps,
+  modelValue: [String, Number, Array, Boolean],
+  multiple: Boolean,
+  filterable: Boolean,
+  api: String,
+  serviceMethod: String,
+  serviceParams: Object,
+  mapObj: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  pageSize: {
+    type: Number,
+    default: 50,
+  },
+  selectAllText: {
+    type: String,
+    default: "全部",
+  },
+  connectors: {
+    type: String,
+    default: "、",
+  },
+  fitInputWidth: {
+    type: Boolean,
+    default: true,
+  },
+  clearIcon: {
+    type: [String, Object],
+    default() {
+      return clearIcon;
+    },
+  },
+  suffixIcon: {
+    type: [String, Object],
+    default() {
+      return arrowDown;
+    },
+  },
+  noMatchText: String,
+  noDataText: String,
+};

package/packages/components/paging-select/src/paging-select.vue

@@ -0,0 +1,469 @@
+<template>
+  <!-- {{ rawAttr }}-- -->
+  <el-select
+    ref="selectRef"
+    :class="[ns.b(), ns.is('multiple', multiple)]"
+    v-model="valueModel"
+    collapse-tags
+    v-bind="rawAttr"
+    :multiple="multiple"
+    :filterable="filterable"
+    :clear-icon="clearIcon"
+    :suffix-icon="suffixIcon"
+    :fit-input-width="fitInputWidth"
+    :select-text="selectText"
+    :popper-class="ns.e('popper')"
+    @focus="showSearchPrefix"
+    @blur="hideSearchPrefix"
+    @click="focusSearchInput"
+    @visible-change="handleListSort"
+  >
+    <template #prefix>
+      <div
+        :class="[ns.e('filterable-icon')]"
+        v-if="filterable && showSearch && !multiple"
+      >
+        <ct-icon name="search_line"></ct-icon>
+      </div>
+      <slot name="prefix"></slot>
+    </template>
+    <div :class="[ns.e('top')]" v-if="multiple">
+      <div :class="[ns.e('filter')]">
+        <el-input v-model="keyword" ref="filterInput" @input="changeKeyword">
+          <template #prefix>
+            <ct-icon name="search_line"></ct-icon>
+          </template>
+        </el-input>
+      </div>
+      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
+        <span :class="[ns.e('select-title')]">
+          <span v-if="!keyword">已选{{ selectLength }}项</span>
+          <span v-else>检索结果</span>
+        </span>
+      </div>
+    </div>
+    <div
+      :class="[ns.e('options')]"
+      v-show="!noFilterOptions"
+      ref="optionsRef"
+      @scroll="handleScrollLoad"
+    >
+      <slot>
+        <el-option
+          v-for="(item, index) in filterOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="item.disabled"
+        >
+          <slot name="option" :item="item" :index="index">
+            <span :title="selectTooltip ? item.label : undefined">{{
+              item.label
+            }}</span>
+          </slot>
+        </el-option>
+      </slot>
+    </div>
+    <Empty :text="emptyText" v-if="multiple && noFilterOptions" />
+    <template #empty>
+      <div :class="[ns.e('top')]" v-if="multiple">
+        <div :class="[ns.e('filter')]">
+          <el-input v-model="keyword" ref="filterInput" @input="changeKeyword">
+            <template #prefix>
+              <ct-icon name="search_line"></ct-icon>
+            </template>
+          </el-input>
+        </div>
+        <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
+          <span :class="[ns.e('select-title')]">
+            <span v-if="!keyword">已选{{ selectLength }}项</span>
+            <span v-else>检索结果</span>
+          </span>
+        </div>
+      </div>
+      <slot name="empty">
+        <Empty :text="emptyText" />
+      </slot>
+    </template>
+  </el-select>
+</template>
+
+<script setup>
+import { onMounted, computed, ref, watch, inject, nextTick } from "vue";
+import { selectEmits, selectProps } from "./index";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isFunction, isArray } from "../../../utils";
+import Empty from "./empty.vue";
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+const selectTooltip = inject("$selectTooltip");
+
+const props = defineProps(selectProps);
+const emit = defineEmits(selectEmits);
+
+const ns = useNamespace("select");
+const optionsByApi = ref([]);
+const showOptions = computed(() => {
+  return optionsByApi.value;
+});
+const valueModel = computed({
+  get() {
+    return props.modelValue || (props.multiple ? [] : props.modelValue);
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+const keyword = ref("");
+const selectRef = ref(null);
+const filterInput = ref(null);
+
+const selectLength = computed(() => {
+  return valueModel.value.length;
+});
+const filterOptions = ref([]);
+const noFilterOptions = ref(false);
+const pageNo = ref(1);
+const pageSize = computed(() => props.pageSize || 20);
+const total = ref(0);
+const loading = ref(false);
+const selectObj = computed({
+  get() {
+    if (!props.multiple)
+      return showOptions.value.find((item) => item.value === valueModel.value);
+    return showOptions.value.filter((item) => {
+      return valueModel.value.includes(item.value);
+    });
+  },
+  set(newValue) {
+    if (!props.multiple) {
+      valueModel.value = newValue.value;
+    } else {
+      valueModel.value = newValue.map((item) => item.value);
+    }
+  },
+});
+const selectText = computed(() => {
+  let result = "";
+  if (!props.multiple) {
+    return result;
+  } else {
+    if (
+      showOptions.value.length &&
+      showOptions.value.length === valueModel.value.length
+    ) {
+      result = props.selectAllText;
+    } else {
+      const cnt = props.connectors;
+      result = selectObj.value.map((item) => item.label).join(cnt);
+    }
+  }
+  //nextTick(() => {
+  // if (selectRef.value) {
+  // selectRef.value.$refs.reference.input.value = result;
+  // }
+  //});
+  return result;
+});
+const emptyText = computed(() => {
+  return showOptions.value.length
+    ? props.noMatchText || "暂无匹配数据"
+    : props.noDataText || "暂无数据";
+});
+const getUseLabel = (label) => {
+  return typeof label === "string" ? label : String(label);
+};
+
+watch(
+  () => selectText.value,
+  (newVal) => {
+    if (!selectRef.value) return;
+    selectRef.value.selectedLabel = newVal;
+  }
+);
+watch(optionsByApi, () => {
+  const arr = optionsByApi.value || [];
+  if (arr.length) {
+    filterOptions.value = arr;
+    noFilterOptions.value = false;
+  } else {
+    filterOptions.value = [];
+    noFilterOptions.value = true;
+  }
+});
+
+const optionsRef = ref(null);
+//针对多选时，已选的项要排在整个列表的最前面
+const handleListSort = (val) => {
+  if (props.multiple) {
+    if (val) {
+      const selectedSet = new Set(valueModel.value);
+      filterOptions.value = [
+        ...filterOptions.value.filter((item) => selectedSet.has(item.value)), // 选中的项
+        ...filterOptions.value.filter((item) => !selectedSet.has(item.value)), // 未选中的项
+      ];
+      nextTick(() => {
+        optionsRef.value.scrollTop = 0;
+      });
+    } else {
+      keyword.value = "";
+      if (!valueModel.value.length) {
+        filterOptions.value = [...showOptions.value];
+      }
+    }
+  }
+};
+const watchServiceHandle = async (reset = false) => {
+  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
+  const cbs = props.cbs || {};
+  if (props.api && baseDao) {
+    try {
+      const method = props.serviceMethod || serviceConfig.defaultMethod;
+      let params = { ...(props.serviceParams || {}) };
+      if (reset) {
+        pageNo.value = 1;
+        optionsByApi.value = [];
+      }
+      params.keyword = keyword.value;
+      params.page_no = pageNo.value;
+      params.page_size = pageSize.value;
+      if (isFunction(cbs.beforeSearch)) {
+        const paramsHandle = await cbs.beforeSearch(params);
+        if (paramsHandle === false) return;
+        params = paramsHandle || params;
+      }
+      loading.value = true;
+      baseDao[method](props.api, params)
+        .then((res) => {
+          const mapObj = props.mapObj || {};
+          const {
+            list,
+            label = "label",
+            value = "value",
+            self,
+            total: totalKey = "total",
+          } = mapObj;
+          let data = [];
+          if (list) {
+            data = res[list];
+          } else {
+            data = res;
+          }
+          data = data.map((item) => {
+            if (self) {
+              return { label: getUseLabel(item), value: item };
+            }
+            return {
+              ...item,
+              label: getUseLabel(item[label]),
+              value: item[value],
+            };
+          });
+          total.value = (res && res[totalKey]) || 0;
+          optionsByApi.value =
+            pageNo.value > 1 ? optionsByApi.value.concat(data) : data;
+          if (isFunction(cbs.afterSearch)) {
+            cbs.afterSearch(res, optionsByApi, valueModel);
+          }
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        valueModel
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+};
+watch(
+  [
+    () => props.api,
+    () => props.serviceParams,
+    () => props.serviceMethod,
+    () => props.mapObj,
+  ],
+  (newVal, oldVal) => {
+    watchServiceHandle(true);
+  },
+  {
+    immediate: true,
+  }
+);
+// watch(
+//   () => keyword.value,
+//   () => {
+
+//     watchServiceHandle(true);
+//   }
+// );
+
+function debounce(fn, delay = 300) {
+  //防抖
+  var timer = null; //借助闭包
+  return function (...args) {
+    const context = this;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+const changeKeyword = debounce(() => {
+  watchServiceHandle(true);
+});
+
+const handleScrollLoad = (e) => {
+  const el = e.target;
+  const reach = el.scrollTop + el.clientHeight >= el.scrollHeight - 2;
+  const hasMore = total.value > pageNo.value * pageSize.value;
+  if (reach && hasMore && !loading.value) {
+    pageNo.value += 1;
+    watchServiceHandle();
+  }
+};
+
+const focusFilter = () => {
+  if (filterInput.value && filterInput.value.focus) {
+    filterInput.value.focus();
+  }
+};
+
+const showSearch = ref(false);
+const focusSearchInput = () => {
+  setTimeout(() => {
+    filterInput.value && filterInput.value.focus();
+    // keyword.value = "";
+  }, 300);
+};
+const showSearchPrefix = () => {
+  showSearch.value = true;
+};
+const hideSearchPrefix = () => {
+  showSearch.value = false;
+};
+
+useBuriedParams(props, emit, {
+  getContent: () => {
+    const select = selectObj.value || {};
+    if (isArray(select)) {
+      return select.map((item) => item.label);
+    }
+    return select.label;
+  },
+});
+
+onMounted(() => {
+  if (!baseDao) {
+    console.error("请先配置baseDao");
+  }
+});
+defineExpose({
+  ref: selectRef,
+  keyword,
+  filterInput,
+  focusFilter,
+  baseDao,
+  serviceConfig,
+  noFilterOptions,
+  selectObj,
+});
+</script>
+<style lang="less">
+.ct-select {
+  width: 214px;
+  &.el-select {
+    position: relative;
+  }
+  &__top {
+    padding: 0 16px;
+    font-size: var(--ct-font-size);
+  }
+  &__options {
+    max-height: 274px;
+    overflow-y: auto;
+  }
+  &__select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    &-title {
+      color: var(--ct-color-grey-sub);
+      line-height: 1;
+    }
+    .el-checkbox {
+      height: auto;
+    }
+  }
+  &__filter {
+    margin-bottom: 16px;
+    .el-input {
+      --el-input-height: 28px;
+    }
+  }
+  &__popper {
+    &.is-multiple {
+      min-width: 140px;
+    }
+    .el-select-dropdown__wrap {
+      max-height: unset;
+    }
+  }
+  .el-select__tags {
+    display: none;
+  }
+  .el-input__prefix-inner {
+    & > :last-child {
+      margin-right: 0;
+    }
+  }
+  &__filterable-icon {
+    position: absolute;
+    z-index: 3;
+    right: var(--ct-component-inner-padding);
+    top: 50%;
+    height: calc(var(--ct-component-size) - 2px);
+    transform: translateY(-50%);
+    background-color: #fff;
+  }
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px 16px;
+    color: var(--ct-color-grey-sub);
+  }
+  &.is-multiple {
+    &::after {
+      content: attr(select-text);
+      position: absolute;
+      left: var(--ct-component-inner-padding);
+      right: calc(var(--ct-component-inner-padding) * 2);
+      top: 50%;
+      transform: translateY(-50%);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      cursor: pointer;
+      pointer-events: none;
+    }
+    .el-select__placeholder.is-transparent {
+      display: block;
+    }
+    .el-select__selected-item {
+      display: none;
+    }
+  }
+}
+</style>

package/packages/components/search-box/index.js

@@ -1,11 +1,13 @@
-import CtSearchBox from './src/search-box.vue';
+import CtSearchBox from "./src/search-box.vue";
 
-import CtInput from '../input';
-import CtSelect from '../select';
-import CtDatePicker from '../date-picker';
-import CtCascader from '../cascader';
-import CtYearSelect from '../year-select';
-import CtRadio from '../radio';
+import CtInput from "../input";
+import CtSelect from "../select";
+import CtDatePicker from "../date-picker";
+import CtCascader from "../cascader";
+import CtYearSelect from "../year-select";
+import CtRadio from "../radio";
+import CtNumberInputRange from "../number-input-range";
+import CtPagingSelect from "../paging-select";
 
 export const searchComponents = {
   CtInput,
@@ -13,15 +15,17 @@ export const searchComponents = {
   CtDatePicker,
   CtCascader,
   CtYearSelect,
-  CtRadio
-}
+  CtRadio,
+  CtNumberInputRange,
+  CtPagingSelect,
+};
 
 /* istanbul ignore next */
 CtSearchBox.install = function (Vue) {
-  Vue.component('CtSearchBox', CtSearchBox);
+  Vue.component("CtSearchBox", CtSearchBox);
   // for (const key in searchComponents) {
   //   Vue.component(key, searchComponents[key]);
   // }
 };
 
-export default CtSearchBox;
+export default CtSearchBox;

package/packages/components/search-box/src/search-box.vue

@@ -98,7 +98,7 @@ const judgeIsHideLabelTooltip = (item) => {
 
 const clickItem = (item) => {
   emit("clickItem", item);
-}
+};
 const getComponentClass = (item) => {
   const classList = [];
   if (item.componentClass) {
@@ -117,8 +117,16 @@ const getComponentStyle = (item) => {
   return style;
 };
 const componentAll = computed(() => {
-  const { CtInput, CtSelect, CtDatePicker, CtCascader, CtYearSelect, CtRadio } =
-    searchComponents;
+  const {
+    CtInput,
+    CtSelect,
+    CtDatePicker,
+    CtCascader,
+    CtYearSelect,
+    CtRadio,
+    CtNumberInputRange,
+    CtPagingSelect,
+  } = searchComponents;
   const componentMap = {
     0: CtInput,
     1: CtSelect,
@@ -127,6 +135,8 @@ const componentAll = computed(() => {
     12: CtYearSelect,
     13: "div",
     20: CtRadio,
+    21: CtNumberInputRange,
+    22: CtPagingSelect,
     ...userDefinedSearchComponent,
   };
   return componentMap;
@@ -239,7 +249,8 @@ onMounted(() => {});
       }
       .el-input__wrapper,
       .el-select__wrapper,
-      .ct-year-select__wrapper {
+      .ct-year-select__wrapper,
+      .ct-number-input-range__wrapper {
         --el-select-input-focus-border-color: var(
           --ct-search-box-inner-border-color
         );

package/packages/components/select/src/select.vue

@@ -183,7 +183,10 @@ watch(
 watchEffect(async () => {
   // 输入框过滤，触发的事件
   let arr = showOptions.value.filter((item) => {
-    return item.label && item.label.includes(keyword.value);
+    return (
+      item.label &&
+      item.label.toLowerCase().includes(keyword.value.toLowerCase())
+    );
   });
   const cbs = props.cbs || {};
   if (isFunction(cbs.filterCallback)) {