ct-component-plus 0.0.1

package/packages/style/element.less

@@ -0,0 +1,600 @@
+
+:root {
+  --el-color-primary: var(--ct-color-primary);
+  --el-color-danger:var(--ct-color-danger);
+  --el-color-warning:var(--ct-color-warning);
+  --el-border-color: var(--ct-border-color);
+  --el-component-size: var(--ct-component-size);
+  --el-border-color-hover: var(--ct-color-grey-sub);
+  --el-text-color-placeholder: var(--ct-color-placeholder);
+  --el-text-color-regular: var(--ct-color-black);
+  --el-disabled-bg-color: var(--ct-component-disabled-bg-color);
+  --el-disabled-border-color: var(--ct-border-color);
+  --el-font-size-base: var(--ct-font-size);
+  --el-box-shadow-light: 0px 4px 14px 0px rgba(102,114,144,0.1);
+  --el-fill-color-light: var(--ct-component-hover-color);
+
+  --ct-cascader-node-height: 30px;
+}
+.el {
+  @R: .el;
+  &-popper {
+    &.is-light {
+      border: var(--ct-popper-light-border);
+      box-shadow: 0px 4px 14px 0px rgba(102,114,144,0.1);
+      .el-popper__arrow {
+        &::before {
+          border: var(--ct-popper-light-border);
+        }
+      }
+    }
+  }
+  &-radio {
+    margin-right: 34px;
+    @R: .el-radio;
+    &:not(.is-disabled):hover {
+      color: var(--ct-color-primary);
+      @{R}__inner {
+        border-color: var(--ct-color-primary);
+      }
+    }
+    &__label {
+      padding-left: 6px;
+      font-weight: 400;
+    }
+    &__inner {
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+    &__input {
+      &.is-checked {
+        @{R}__inner {
+          background: #fff;
+          &::after {
+            background-color: var(--ct-color-primary);
+          }
+        }
+      }
+    }
+  }
+  &-checkbox {
+    margin-right: 34px;
+    @R: .el-checkbox;
+    &:not(.is-disabled):hover {
+      color: var(--ct-color-primary);
+      @{R}__inner {
+        border-color: var(--ct-color-primary);
+      }
+    }
+    &__label {
+      padding-left: 6px;
+      font-weight: 400;
+    }
+  }
+  &-input {
+    &__wrapper {
+      padding: 1px var(--ct-component-inner-padding);
+      &:focus-within {
+        .ct-icon,
+        .el-icon {
+          color: var(--ct-color-primary);
+        }
+      }
+    }
+    &__suffix {
+      &-inner {
+        line-height: calc(var(--el-input-height) - 2px);
+      }
+    }
+  }
+  &-select {
+    --ct-select-poper-border: none;
+    --ct-select-focus-icon-color: var(--ct-color-primary);
+    &__popper {
+      font-size: var(--ct-font-size);
+      &.el-popper{
+        &.is-light {
+          border: var(--ct-select-poper-border);
+          .el-popper__arrow {
+            &::before {
+              border: var(--ct-select-poper-border);
+            }
+          }
+        }
+      }
+    }
+    &-dropdown {
+      --ct-select-item-height: calc(var(--ct-component-size, 30px) - 2px);
+      @R: .el-select-dropdown;
+      .el-scrollbar.is-empty{
+        @{R}__wrap {
+            display: none;
+        }
+      }
+      &__wrap {
+        padding: 10px 0 4px;
+      }
+      &__item {
+        height: var(--ct-select-item-height);
+        line-height: var(--ct-select-item-height);
+        margin: 0 6px 6px;
+        padding: 0 10px;
+        border-radius: var(--ct-border-radius);
+        &:hover,
+        &.hover
+         {
+          background-color: var(--ct-component-hover-color);
+        }
+        &.selected {
+          font-weight: 400;
+        }
+      }
+      &.is-multiple {
+        @{R}__item {
+          &.selected {
+            &::after {
+              right: var(--ct-component-inner-padding);
+            }
+          }
+        }
+      }
+    }
+    .el-input {
+      &.is-focus {
+        .el-input__suffix {
+          .el-icon,
+          .ct-icon {
+            color: var(--ct-select-focus-icon-color);
+          }
+        }
+      }
+    }
+  }
+  &-cascader {
+    .el-input {
+      &.is-focus {
+        .el-input__wrapper {
+          .el-icon,
+          .ct-icon {
+            color: var(--ct-color-primary);
+          }
+        }
+      }
+    }
+    &__dropdown {
+
+    }
+    &-menu {
+      &__list {
+        padding: 10px 6px;
+      }
+    }
+    &-panel {
+      --el-cascader-menu-border: 1px solid #F0F3F9;
+    }
+    &-node {
+      height: var(--ct-cascader-node-height);
+      padding: 0;
+      line-height: var(--ct-cascader-node-height);
+      border-radius: var(--ct-border-radius);
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+      &__label {
+        padding: 0 10px;
+      }
+      &__prefix {
+        display: none;
+      }
+      .arrow-right {
+        color: var(--ct-color-grey-tip);
+      }
+      &.in-active-path,
+      &.is-active,
+      &.is-selectable.in-checked-path {
+        font-weight: 400;
+        .arrow-right {
+          color: var(--ct-color-primary);
+        }
+      }
+      >.el-radio, 
+      >.el-checkbox {
+        margin-left: 10px;
+        margin-right: -2px;
+      }
+    }
+    &__suggestion {
+      &-list {
+        padding: 10px 6px;
+      }
+      &-item {
+        height: 30px;
+        padding: 0 10px;
+        border-radius: var(--ct-border-radius);
+        &:not(:first-child) {
+          margin-top: 6px;
+        }
+        &.is-checked {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  &-date-editor {
+    &.el-range-editor {
+      &:not(.is-active):focus-within {
+        .ct-icon,
+        .el-icon {
+          color: var(--el-input-icon-color);
+        }
+      }
+    }
+    &.is-active {
+      .ct-icon,
+      .el-icon {
+        color: var(--ct-color-primary);
+      }
+    }
+    .el-range-separator {
+      color: var(--ct-color-grey-sub);
+    }
+    &.el-input__wrapper {
+      padding: 1px var(--ct-component-inner-padding);
+    }
+    .el-input__prefix,
+    .el-range__icon {
+      position: absolute;
+      right: var(--ct-component-inner-padding);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      .el-input__icon {
+        margin-right: 0;
+        background-color: #fff;
+      }
+    }
+    .el-range__close-icon i,
+    .clear-icon {
+      position: relative;
+      width: 16px;
+      z-index: 2;
+      background-color: #fff;
+    }
+  }
+  &-date-picker {
+    --el-datepicker-header-text-color: var(--ct-color-grey-transition);
+    --ct-datepicker-border-color: #F0F3F9;
+    width: 304px;
+    @R: .el-picker-panel;
+    @{R}__content {
+      margin: 0 auto;
+    }
+    &__header {
+      height: 44px;
+      margin: 0;
+      padding: 0 22px;
+      line-height: 44px;
+      border-bottom: 1px solid var(--ct-datepicker-border-color);
+      .el-picker-panel__icon-btn {
+        color: var(--ct-color-grey-transition);
+        &:hover {
+          color: var(--ct-color-primary);
+        }
+      }
+      &-label {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+    .el-picker-panel__content {
+      width: 304px;
+    }
+  }
+  &-month-table,
+  &-year-table {
+    padding: 9px 12px;
+    font-size: 14px;
+    td {
+      padding: 9px;
+      > div {
+        height: 26px;
+        padding: 0;
+      }
+      .cell {
+        width: 50px;
+        height: 26px;
+        line-height: 26px;
+        border-radius: 4px;
+      }
+      &.today {
+        .cell {
+          font-weight: 400;
+          border: 1px solid var(--ct-color-primary);
+        }
+      }
+      &.current {
+        .cell {
+          background-color: var(--ct-color-primary);
+          color: #fff !important;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  &-date-range-picker {
+    --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;
+    &__content {
+      padding: 0;
+    }
+    &__header {
+      height: 44px;
+      padding: 0 24px;
+      line-height: 44px;
+      border-bottom: 1px solid var(--ct-datepicker-border-color);
+      div {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+    .el-picker-panel__icon-btn {
+      color: var(--ct-color-grey-transition);
+      margin-top: 14px;
+      &:hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &-date-table {
+    padding: 0 14px;
+    margin: 0;
+    margin-bottom: 14px;
+    font-size: 14px;
+    th {
+      padding: 9px 12.5px;
+    }
+    tr {
+      .in-range {
+        &:first-of-type{
+          .el-date-table-cell {
+            border-radius: 4px 0 0 4px;
+  
+          }
+        }
+        &:last-of-type {
+          .el-date-table-cell {
+            border-radius: 0 4px 4px 0;
+          }
+        }
+      }
+    }
+    td {
+      &.today {
+        .el-date-table-cell {
+          &__text {
+            border: 1px solid var(--ct-color-primary);
+            font-weight: 400;
+          }
+        }
+      }
+      .el-date-table-cell {
+        height: 26px;
+        padding: 0;
+        .el-date-table-cell__text {
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+  &-picker {
+    &__popper {
+      &.is-light {
+        border: none;
+        box-shadow: 0px 4px 14px 0px rgba(102,114,144,0.1);
+        .el-popper__arrow {
+          &::before {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+  &-pagination {
+    @R: .el-pagination;
+    --el-pagination-border-radius: 4px;
+    --el-pagination-button-width: 28px;
+    --el-pagination-button-height: 28px;
+    --el-pagination-button-color: var(--ct-color-black);
+    --pagination-item-margin: 3px;
+    --el-component-size: 28px;
+    --el-border-color: var(--ct-border-color-light);
+    --el-text-color-regular: var(--ct-color-black);
+    .el-pager {
+      li {
+        margin: 0 var(--pagination-item-margin);
+      }
+    }
+    .btn-prev {
+      margin-right: var(--pagination-item-margin);
+    }
+    .btn-next {
+      margin-left: var(--pagination-item-margin);
+    }
+    &.have-border {
+      .pagination-border-item-style {
+        border: 1px solid var(--ct-border-color-light);
+        &:not([disabled]):hover {
+          border-color: var(--ct-color-primary);
+        }
+      }
+      .el-pager {
+        li {
+          .pagination-border-item-style;
+          &.is-active {
+            background-color: var(--ct-color-primary);
+            border-color: var(--ct-color-primary);
+            color: #fff;
+          }
+        }
+      }
+      .btn-prev,
+      .btn-next {
+        .pagination-border-item-style;
+      }
+    }
+    &.is-background {
+      --el-pagination-bg-color: var(--ct-color-bg);
+      .el-pager {
+        li {
+          margin: 0 var(--pagination-item-margin);
+        }
+      }
+      .btn-prev {
+        margin-right: var(--pagination-item-margin);
+      }
+      .btn-next {
+        margin-left: var(--pagination-item-margin);
+        margin-right: 0;
+      }
+      @{R}__jump {
+        .el-input__wrapper {
+          background-color: var(--ct-color-bg);
+          box-shadow: none;
+        }
+      }
+
+    }
+    &__jump {
+      margin-left: 34px;
+      .el-input {
+        width: 36px;
+        &__wrapper {
+          padding: 1px 5px;
+        }
+      }
+    }
+  }
+  &-table {
+    @R: .el-table;
+    font-size: 15px;
+    --el-table-header-text-color: var(--ct-font-color);
+    --el-table-header-bg-color: #F0F3F9;
+    --el-table-row-hover-bg-color: #F7F9FD;
+    .cell {
+      
+    }
+    & @{R}__cell {
+      padding: 16px 0;
+    }
+    thead {
+      @{R}__cell {
+        padding: 15px 0;
+      }
+    }
+    th {
+      &@{R}__cell {
+        background-color: var(--el-table-header-bg-color);
+        &.is-leaf {
+          border-bottom-color: transparent;
+        }
+        &.is-sortable{
+          .caret-wrapper{
+            display: none;
+          }
+        }
+      }
+      &:first-of-type {
+        border-radius: 4px 0 0 4px;
+      }
+      &:last-of-type {
+        border-radius: 0 4px 4px 0;
+      }
+    }
+    @{R}-column{
+      &--selection{
+        .cell{
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  &-notification{
+    border-radius: var(--ct-border-radius-l);
+    box-shadow: 0px 4px 40px 0px rgba(52, 63, 77, 0.1);
+    padding: 16px 24px 30px;
+    border: none;
+    @R:.el-notification;
+    @{R}__group{
+      margin-right: 0;
+      margin-left: 0;
+    }
+    @{R}__title{
+      border-bottom: none;
+      padding-bottom: 0;
+      font-weight: 600;
+      color: var(--ct-color-black);
+      line-height: 24px;
+      font-size: var(--ct-font-title-s);
+    }
+    @{R}__content{
+      margin-top:16px;
+      line-height: 26px;
+    }
+    @{R}__closeBtn{
+      top: 16px;
+      right: 16px;
+      color:#d9dee7;
+    }
+  }
+  &-button{
+    border-radius: 3px;
+    min-width: 80px;
+  }
+
+  &-message{
+    height: 40px;
+    padding: 11px 16px;
+    min-width:540px;
+    .el-icon.el-message__icon{
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      svg{
+        width: unset;
+        height: unset;
+      }
+    }
+    &__content{
+      line-height: 18px;
+    }
+    .el-icon.el-message__closeBtn{
+      width: 14px;
+      height: 14px;
+      right: 16px;
+      color: var(--ct-border-color);
+    }
+  }
+  &-message.ct-message--success{
+    background-color: var(--ct-color-success-bg);
+    border:var(--ct-color-success-border) 1px solid;
+  }
+  &-message.ct-message--info {
+    background-color: var(--ct-color-primary-bg);
+    border: var(--ct-color-primary-border) 1px solid;
+  }
+  &-message.ct-message--warning {
+    background-color: var(--ct-color-warning-bg);
+    border: var(--ct-color-warning-border) 1px solid;
+  }
+  &-message.ct-message--error {
+    background-color: var(--ct-color-danger-bg);
+    border: var(--ct-color-danger-border) 1px solid;
+  }
+}

package/packages/style/init.less

@@ -0,0 +1,114 @@
+
+:root {
+  // --命名空间-主题-具体内容-修饰,同一块内容的多个单词用_链接
+  // 字体
+  --ct-font-label: 12px; //标签字号
+  --ct-font-special: 13px;  //特殊应用
+  --ct-font-size: 14px;  //常用字号-小
+  --ct-font-large: 15px;  //常用字号-大
+  --ct-font-title-s: 16px;  //标题-小(small)
+  --ct-font-title-m: 17px;  //标题-中(medium)
+  --ct-font-title-l: 18px;  //标题-大(large)
+  --ct-font-system-s: 19px;  //系统标题-小
+  --ct-font-system-l: 20px;  //系统标题-大
+  --ct-font-color: #141617;  //字体默认颜色
+
+  // 主色
+  --ct-color-primary: var(--ct-color-blue); //系统默认主色，这里取的的蓝色
+  --ct-color-blue: #4D64FF; //主色-蓝
+  --ct-color-yellow: #FFAD2C; //主色-黄
+  --ct-color-green: #5ABBBA; //主色-绿
+  --ct-color-purple: #664FFF; //主色-紫
+  --ct-color-orange: #FF9218; //主色-橙
+  --ct-color-sky: #42A6FF; //主色-天蓝
+  --ct-color-red: #FF643E; //主色-橘红
+  --ct-color-sub-blue: #3A45FF; //辅色-蓝色
+  --ct-color-sub-purple: #7B4CF4; //辅色-紫色
+  // 中性色
+  --ct-color-black: #141617; //标准黑
+  --ct-color-grey-sub: #535C66; //辅助灰(sub)
+  --ct-color-grey-transition: #8F99A3; //过渡灰(transition)
+  --ct-color-grey-tip: #A4AFBB; //提示灰
+  --ct-color-separator: #D8DEE8; //分隔线
+  --ct-color-bg: #F0F3F9; //背景色
+  // 状态色
+  --ct-color-primary-border: #B1BBFF; //主色边框色
+  --ct-color-primary-bg: #ECF1FF; //主色背景色
+  --ct-color-success: #07C47E; //成功色
+  --ct-color-success-border: #9BE0CA; //成功边框色
+  --ct-color-success-bg: #F1FDF9; //成功背景色
+  --ct-color-danger: #FF4D4D; //危险色
+  --ct-color-danger-border: #FFA39E; //危险边框色
+  --ct-color-danger-bg: #FFF1F0; //危险背景色
+  --ct-color-warning: #FFAD2C; //警告色
+  --ct-color-warning-border: #FFD28B; //警告边框色
+  --ct-color-warning-bg: #FFFBE6; //警告背景色
+  --ct-color-disabled: var(--ct-color-grey-tip); //禁用颜色（文字）
+  --ct-color-placeholder: var(--ct-color-grey-tip);  //placeholder颜色
+  // 边框
+  --ct-border-color: #A4AFBB;  //边框色（默认、深色）
+  --ct-border-color-light: #D8DEE8;  //边框色（浅色）
+  --ct-border-radius: 4px;  //默认圆角
+  --ct-border-radius-s: 2px;  //小圆角
+  --ct-border-radius-l: 6px;  //大圆角
+  // 基础布局
+  --ct-layout-menu-width: 224px;  //左侧菜单宽
+  --ct-layout-menu-width_collapse: 68px;  //收起左侧菜单宽
+  --ct-layout-header-height: 68px;  //顶部导航高
+  --ct-layout-margin: 16px;  //页面边距
+
+  --ct-hover-opacity: 0.8;  //hover改变透明度
+
+  --ct-component-size: 32px;  //数据录入类组件的size
+  --ct-component-width: 248px;
+  --ct-component-inner-height: calc(var(--ct-component-size) - 2px);
+  --ct-component-inner-padding: 12px;
+  --ct-component-border-color: var(--ct-border-color);
+  --ct-component-border: 0 0 0 1px var(--ct-component-border-color) inset;
+  --ct-component-border-radius: var(--ct-border-radius);
+  --ct-component-fill-color: #ffffff;
+  --ct-component-color: var(--ct-color-black);
+  --ct-component-disabled-bg-color: #F6F7F9;
+  --ct-component-hover-color: #F5F7FC;
+
+  --ct-popper-light-border: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--ct-font-color);
+  font-size: var(--ct-font-size);
+  font-family: 'Helvetica Neue','PingFang SC',Arial,'Microsoft YaHei',WenQuanYiMicroHei;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  
+}
+input::placeholder,
+input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+  color: var(--ct-color-placeholder);
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: var(--ct-color-placeholder);
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: var(--ct-color-placeholder);
+}
+input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color:var(--ct-color-placeholder);
+}
+input::-ms-input-placeholder { /* Microsoft Edge */
+ color: var(--ct-color-placeholder);
+}
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.45);
+}
+
+

package/packages/utils/index.js

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './operate'