ct-component-plus 2.2.2 → 3.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.2.2",
+  "version": "3.0.1",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "cingta-icon": "^2.1.6",
-    "element-plus": "~2.4.4",
+    "element-plus": "2.11.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

package/packages/components/cascader/src/cascader.vue

@@ -75,19 +75,19 @@ watch(showValue, async (newValue) => {
     });
     props.cbs.change(dataList, cascaderRef.value);
   }
-  if (propsShow.value.multiple && props.filterable) {
-    await nextTick();
+  // if (propsShow.value.multiple && props.filterable) {
+  //   await nextTick();
 
-    // 如果组件内部没找到，尝试在文档中通过类名查找（作为最后的兜底，注意可能会影响页面上其他同类组件，所以最好通过el限制范围，如果el也拿不到才用document）
-    const targetInput = document.querySelector(
-      `.${componentId} .el-cascader__search-input`
-    );
+  //   // 如果组件内部没找到，尝试在文档中通过类名查找（作为最后的兜底，注意可能会影响页面上其他同类组件，所以最好通过el限制范围，如果el也拿不到才用document）
+  //   const targetInput = document.querySelector(
+  //     `.${componentId} .el-cascader__search-input`
+  //   );
 
-    if (targetInput) {
-      targetInput.value = "";
-      targetInput.dispatchEvent(new Event("input", { bubbles: true }));
-    }
-  }
+  //   if (targetInput) {
+  //     targetInput.value = "";
+  //     targetInput.dispatchEvent(new Event("input", { bubbles: true }));
+  //   }
+  // }
 });
 const popperClassShow = computed(() => {
   let popperClass = ns.e("dropdown");

package/packages/components/date-picker/src/date-picker.vue

@@ -2,12 +2,14 @@
   <el-date-picker
     :class="[ns.b()]"
     v-model="showValue"
+    :name="componentName"
     :value-format="valueFormat"
     :range-separator="rangeSeparator"
     :clear-icon="clearIcon"
     :prefix-icon="prefixIcon"
     :unlink-panels="unlinkPanels"
-    v-bind="rawAttr">
+    v-bind="rawAttr"
+  >
     <template #default="cell">
       <slot v-bind="cell"></slot>
     </template>
@@ -24,6 +26,15 @@ const emit = defineEmits(datePickerEmits);
 const attr = useAttrs();
 const ns = useNamespace("date-picker");
 
+const componentName = computed(() => {
+  const rawType = props.rawAttr?.type || attr.type;
+  if (isArray(props.name)) return props.name;
+  if (rawType && rawType.includes("range")) {
+    return props.name ? [props.name, props.name] : [];
+  }
+  return props.name;
+});
+
 const showValue = computed({
   get() {
     return props.modelValue;

package/packages/components/date-picker/src/index.js

@@ -1,6 +1,6 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
-import clearIcon from './clear-icon.vue';
-import dateIcon from './date-icon.vue';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+import clearIcon from "./clear-icon.vue";
+import dateIcon from "./date-icon.vue";
 
 export const datePickerEmits = ["update:modelValue", buriedParamsKey];
 export const datePickerProps = {
@@ -8,27 +8,31 @@ export const datePickerProps = {
   modelValue: [Date, Number, String, Array],
   valueFormat: {
     type: String,
-    default: 'x'
+    default: "x",
   },
   addTimestamp: [Number, String, Array, Function],
   rangeSeparator: {
     type: String,
-    default: '至',
+    default: "至",
   },
   clearIcon: {
     type: [String, Object],
     default() {
-      return clearIcon
-    }
+      return clearIcon;
+    },
   },
   prefixIcon: {
     type: [String, Object],
     default() {
-      return dateIcon
-    }
+      return dateIcon;
+    },
   },
   unlinkPanels: {
     type: Boolean,
-    default: true
-  }
-}
+    default: true,
+  },
+  name: {
+    type: [String, Array],
+    default: "",
+  },
+};

package/packages/components/index.js

@@ -3,6 +3,7 @@ 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';
@@ -35,6 +36,7 @@ const components = [
   checkbox,
   input,
   inputRange,
+  numberInputRange,
   select,
   pagingSelect,
   yearSelect,

package/packages/components/input/src/input.vue

@@ -62,7 +62,7 @@ defineExpose({
   ref: inputRef,
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-input {
   @R: .ct-input;
   --ct-input-focus-color: var(--ct-color-primary);
@@ -104,4 +104,4 @@ defineExpose({
     }
   }
 }
-</style>
+</style>

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/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

@@ -5,14 +5,14 @@
     :class="[ns.b(), ns.is('multiple', multiple)]"
     v-model="valueModel"
     collapse-tags
-    v-bind="rawAttr"
+    v-bind="bindAttrs"
     :multiple="multiple"
     :filterable="filterable"
     :clear-icon="clearIcon"
     :suffix-icon="suffixIcon"
     :fit-input-width="fitInputWidth"
     :select-text="selectText"
-    :popper-class="ns.e('popper')"
+    :popper-class="popperClass"
     @focus="showSearchPrefix"
     @blur="hideSearchPrefix"
     @click="focusSearchInput"
@@ -35,7 +35,7 @@
           </template>
         </el-input>
       </div>
-      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
+      <div :class="[ns.e('select')]" v-if="!bindAttrs.multipleLimit">
         <span :class="[ns.e('select-title')]">
           <span v-if="!keyword">已选{{ selectLength }}项</span>
           <span v-else>检索结果</span>
@@ -74,6 +74,12 @@
   </el-select>
 </template>
 
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup>
 import {
   onMounted,
@@ -83,6 +89,7 @@ import {
   inject,
   watchEffect,
   nextTick,
+  useAttrs,
 } from "vue";
 import { selectEmits, selectProps } from "./index";
 import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
@@ -104,15 +111,70 @@ const emit = defineEmits(selectEmits);
 // };
 const ns = useNamespace("select");
 const optionsByApi = ref([]);
+
+const EMPTY_VALUE = "___CT_EMPTY_STRING___";
+const attrs = useAttrs();
+
+const bindAttrs = computed(() => {
+  const merged = { ...attrs, ...props.rawAttr };
+  // 剔除已在组件内部显式处理的属性，避免 v-bind 覆盖或冲突
+  delete merged["popper-class"];
+  delete merged["popperClass"];
+
+  if (merged.onChange) {
+    const original = merged.onChange;
+    merged.onChange = (val) => {
+      let realVal = val;
+      if (Array.isArray(val)) {
+        realVal = val.map((v) => (v === EMPTY_VALUE ? "" : v));
+      } else {
+        if (realVal === EMPTY_VALUE) realVal = "";
+      }
+      original(realVal);
+    };
+  }
+  return merged;
+});
+
 const showOptions = computed(() => {
-  return optionsByApi.value.length ? optionsByApi.value : props.options;
+  const opts = optionsByApi.value.length ? optionsByApi.value : props.options;
+  return opts.map((item) => {
+    if (item.value === "") {
+      return { ...item, value: EMPTY_VALUE };
+    }
+    return item;
+  });
 });
 const valueModel = computed({
   get() {
-    return props.modelValue || (props.multiple ? [] : props.modelValue);
+    const val = props.modelValue;
+    const hasEmptyOption = showOptions.value.some(
+      (item) => item.value === EMPTY_VALUE
+    );
+    if (props.multiple) {
+      if (Array.isArray(val)) {
+        return val.map((v) => {
+          if (v === "") {
+            return hasEmptyOption ? EMPTY_VALUE : "";
+          }
+          return v;
+        });
+      }
+      return [];
+    }
+    if (val === "") {
+      return hasEmptyOption ? EMPTY_VALUE : "";
+    }
+    return val ?? "";
   },
   set(newValue) {
-    emit("update:modelValue", newValue);
+    let emitVal = newValue;
+    if (Array.isArray(emitVal)) {
+      emitVal = emitVal.map((v) => (v === EMPTY_VALUE ? "" : v));
+    } else {
+      if (emitVal === EMPTY_VALUE) emitVal = "";
+    }
+    emit("update:modelValue", emitVal);
   },
 });
 const keyword = ref("");
@@ -155,9 +217,9 @@ const selectText = computed(() => {
       result = selectObj.value.map((item) => item.label).join(cnt);
     }
   }
-  nextTick(() => {
-    selectRef.value.$refs.reference.input.value = result;
-  });
+  // nextTick(() => {
+  //   selectRef.value.$refs.reference.input.value = result;
+  // });
   return result;
 });
 const emptyText = computed(() => {
@@ -165,6 +227,14 @@ const emptyText = computed(() => {
     ? props.noMatchText || "暂无匹配数据"
     : props.noDataText || "暂无数据";
 });
+
+const popperClass = computed(() => {
+  const defaultClass = ns.e("popper");
+  const merged = { ...attrs, ...props.rawAttr };
+  const userClass = merged["popper-class"] || merged["popperClass"] || "";
+  return `${defaultClass} ${userClass}`.trim();
+});
+
 const getUseLabel = (label) => {
   return typeof label === "string" ? label : String(label);
 };
@@ -361,7 +431,21 @@ defineExpose({
 </script>
 <style lang="less">
 .ct-select {
-  width: 214px;
+  &.el-select {
+    position: relative;
+    width: 214px;
+    &__selected-item {
+      &:nth-child(1) {
+        display: none;
+      }
+      &:nth-child(2) {
+        display: none;
+      }
+      &:nth-child(3) {
+        display: flex;
+      }
+    }
+  }
   &__top {
     padding: 0 16px;
     font-size: var(--ct-font-size);
@@ -410,7 +494,7 @@ defineExpose({
     z-index: 3;
     right: var(--ct-component-inner-padding);
     top: 50%;
-    height: calc(var(--ct-component-size) - 2px);
+    height: calc(var(--ct-component-size) - 8px);
     transform: translateY(-50%);
     background-color: #fff;
   }
@@ -422,18 +506,25 @@ defineExpose({
     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;
-    // }
+    &::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/year-select/src/index.js

@@ -1,13 +1,13 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
 
 export const yearSelectEmits = [
   "update:modelValue",
   buriedParamsKey,
-  'change',
-  'change-select',
-  'visible-change',
-  'blur',
-  'focus'
+  "change",
+  "changeSelect",
+  "visible-change",
+  "blur",
+  "focus",
 ];
 export const yearSelectProps = {
   ...searchComponentProps,
@@ -15,7 +15,7 @@ export const yearSelectProps = {
   disabled: Boolean,
   multiple: {
     type: Boolean,
-    default: true
+    default: true,
   },
   startPlaceholder: String,
   endPlaceholder: String,
@@ -42,4 +42,4 @@ export const yearSelectProps = {
     type: [String, Object],
     default: "至",
   },
-}
+};

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

@@ -135,9 +135,12 @@ const getYearList = () => {
   }
   yearList.value = yearArr;
 };
-watch(() => props.range, () => {
-  getYearList();
-})
+watch(
+  () => props.range,
+  () => {
+    getYearList();
+  }
+);
 const filterHandleE = (str) => {
   //处理结束年
   if (judgeYear(str) && judgeRange(str)) {
@@ -207,7 +210,7 @@ onMounted(() => {
   getYearList();
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-year-select {
   --el-select-input-focus-border-color: transparent;
   --ct-year-select-select-inner-box-shadow: none;
@@ -273,5 +276,15 @@ onMounted(() => {
       }
     }
   }
+  .el-select__wrapper {
+    padding: 1px 12px;
+    min-height: 30px;
+    box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    &.is-focused,
+    &.is-hovering:not(.is-focused),
+    &.is-disabled {
+      box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    }
+  }
 }
-</style>
+</style>

package/packages/style/element.less

@@ -93,7 +93,6 @@
       padding: 1px var(--ct-component-inner-padding);
 
       &:focus-within {
-
         .ct-icon,
         .el-icon {
           color: var(--ct-color-primary);
@@ -178,7 +177,6 @@
     .el-input {
       &.is-focus {
         .el-input__suffix {
-
           .el-icon,
           .ct-icon {
             color: var(--ct-select-focus-icon-color);
@@ -192,7 +190,6 @@
     .el-input {
       &.is-focus {
         .el-input__wrapper {
-
           .el-icon,
           .ct-icon {
             color: var(--ct-color-primary);
@@ -201,7 +198,8 @@
       }
     }
 
-    &__dropdown {}
+    &__dropdown {
+    }
 
     &-menu {
       &__list {
@@ -210,7 +208,7 @@
     }
 
     &-panel {
-      --el-cascader-menu-border: 1px solid #F0F3F9;
+      --el-cascader-menu-border: 1px solid #f0f3f9;
     }
 
     &-node {
@@ -245,8 +243,8 @@
         }
       }
 
-      >.el-radio,
-      >.el-checkbox {
+      > .el-radio,
+      > .el-checkbox {
         margin-left: 10px;
         margin-right: -2px;
       }
@@ -276,7 +274,6 @@
   &-date-editor {
     &.el-range-editor {
       &:not(.is-active):focus-within {
-
         .ct-icon,
         .el-icon {
           color: var(--el-input-icon-color);
@@ -285,7 +282,6 @@
     }
 
     &.is-active {
-
       .ct-icon,
       .el-icon {
         color: var(--ct-color-primary);
@@ -325,7 +321,7 @@
 
   &-date-picker {
     --el-datepicker-header-text-color: var(--ct-color-grey-transition);
-    --ct-datepicker-border-color: #F0F3F9;
+    --ct-datepicker-border-color: #f0f3f9;
     width: 304px;
     @R: .el-picker-panel;
 
@@ -367,7 +363,7 @@
     td {
       padding: 9px;
 
-      >div {
+      > div {
         height: 26px;
         padding: 0;
       }
@@ -397,8 +393,8 @@
   }
 
   &-date-range-picker {
-    --ct-datepicker-border-color: #F0F3F9;
-    --el-datepicker-inrange-bg-color: #F5F7FC;
+    --ct-datepicker-border-color: #f0f3f9;
+    --el-datepicker-inrange-bg-color: #f5f7fc;
     --el-datepicker-inner-border-color: var(--ct-datepicker-border-color);
     --el-datepicker-header-text-color: var(--ct-color-grey-transition);
     width: 608px;
@@ -444,7 +440,6 @@
         &:first-of-type {
           .el-date-table-cell {
             border-radius: 4px 0 0 4px;
-
           }
         }
 
@@ -568,7 +563,6 @@
           box-shadow: none;
         }
       }
-
     }
 
     &__jump {
@@ -588,11 +582,12 @@
     @R: .el-table;
     font-size: 15px;
     --el-table-header-text-color: var(--ct-font-color);
-    --el-table-header-bg-color: #F0F3F9;
+    --el-table-header-bg-color: #f0f3f9;
     // --el-table-row-hover-bg-color: #F7F9FD;
-    --el-table-row-hover-bg-color: #FAFAFC;
+    --el-table-row-hover-bg-color: #fafafc;
 
-    .cell {}
+    .cell {
+    }
 
     & @{R}__cell {
       padding: 16px 0;
@@ -702,6 +697,12 @@
       right: 16px;
       color: var(--ct-border-color);
     }
+    // 消息关闭按钮位置展示
+    .el-icon.el-message__closeBtn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
   &-message.ct-message--success {
@@ -723,4 +724,4 @@
     background-color: var(--ct-color-danger-bg);
     border: var(--ct-color-danger-border) 1px solid;
   }
-}
+}