@lingxiteam/ebe-utils 0.5.1 → 0.5.3

package/lib/public/src/components/pcfactory/src/styles/components/Tree.less

@@ -0,0 +1,329 @@
+@import (reference) '../theme/variables/antdVariables.less';
+/* --- 扩展组件: Tree组件 start --- */
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@tree-icon-prefix-cls: ~'@{ant-prefix}icon';
+
+.ued-tree-wrap {
+  display: flex;
+  flex-direction: column;
+
+  .ued-tree-search {
+    margin-bottom: @padding-xs;
+  }
+}
+.ued-tree {
+  &.@{tree-prefix-cls} {
+    .@{tree-prefix-cls}-treenode {
+      margin-left: @padding-sm / 2;
+      align-items: center;
+
+      span {
+        &.@{tree-prefix-cls}-switcher {
+          align-self: stretch;
+          height: auto;
+          line-height: @padding-xxs * 7;
+          color: @primary-color
+        }
+
+        &.@{tree-prefix-cls}-checkbox {
+          margin: (@padding-xxs / 2) @padding-xxs;
+        }
+      }
+
+      &.drag-over {
+        span[draggable] {
+          background-color: white;
+          border-top: 2px solid @primary-color;
+        }
+      }
+
+      .@{tree-prefix-cls}-node-content-wrapper {
+        // height: @padding-xxs * 7;
+        color: @text-color;
+        line-height: @padding-xxs * 7;
+
+        .@{tree-prefix-cls}-iconEle {
+          font-size: @font-size-lg;
+          svg,img {
+            font-size: @font-size-base;
+            width: @font-size-lg;
+            height: @font-size-lg;
+            vertical-align: middle;
+          }
+
+          .ued-icon {
+            svg {
+              font-size: @font-size-base;
+            width: @font-size-base;
+            height: @font-size-base;
+            vertical-align: baseline;
+            }
+            &.fill-primary {
+              color: @primary-color;
+              fill: @primary-color;
+            }
+          }
+        }
+
+        &:hover {
+          background-color: @item-hover-bg;
+        }
+
+        &.@{tree-prefix-cls}-node-selected {
+          background-color: @item-active-bg;
+
+          .ued-tree-icons {
+            display: flex;
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &.@{tree-prefix-cls}-show-line li {
+      &::before {
+        height: 100%;
+      }
+
+      &.ued-tree-node-leaf {
+        &::before {
+          content: normal;
+        }
+      }
+    }
+  }
+
+  &.ued-tree-no-line-icon {
+    &.@{tree-prefix-cls}-show-line li {
+      ul.@{tree-prefix-cls}-child-tree {
+        overflow: hidden;
+      }
+
+      &.ued-tree-node-leaf {
+        .@{tree-prefix-cls}-switcher-noop {
+          position: relative;
+          background-color: transparent;
+
+          .@{tree-prefix-cls}-switcher-line-icon {
+            display: none;
+          }
+
+          &::after {
+            position: absolute;
+            top: -50%;
+            left: 12px;
+            width: 50%;
+            height: 100%;
+            border-bottom: 1px solid #d9d9d9;
+            content: '';
+          }
+        }
+
+        &:not(:last-child) {
+          &::before {
+            position: absolute;
+            top: 4px;
+            left: 12px;
+            width: 1px;
+            height: 100%;
+            margin: 0;
+            border-left: 1px solid #d9d9d9;
+            content: '';
+          }
+        }
+
+        &:last-child {
+          .@{tree-prefix-cls}-switcher-noop {
+            background-color: white;
+
+            &::after {
+              position: absolute;
+              top: -50%;
+              left: 12px;
+              width: 50%;
+              height: 100%;
+              border-bottom: 1px solid #d9d9d9;
+              border-left: 1px solid #d9d9d9;
+              content: '';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ued-tree-tit {
+    // padding-right: @padding-xs;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    .ued-tree-icons {
+      top: 0;
+      right: 0;
+      display: none;
+      align-items: center;
+      margin-left: @padding-md;
+      opacity: 0;
+      transition: opacity 0.3s;
+
+      .ued-tree-icon {
+        display: inline-flex;
+        margin-left: @padding-xs;
+        color: fade(@text-color, 75%);
+        font-size: @font-size-sm;
+
+        > svg {
+          fill: fade(@text-color, 75%);
+        }
+
+        &:first-child {
+          margin: 0;
+        }
+
+        &:hover {
+          color: fade(@text-color, 85%);
+
+          > svg {
+            fill: fade(@text-color, 85%);
+          }
+        }
+      }
+
+      .@{ant-prefix}-dropdown-menu {
+        padding: @padding-xs 0;
+
+        .@{ant-prefix}-dropdown-menu-item {
+          height: @padding-xxs * 7;
+          margin: 0;
+          padding: 0 @padding-sm;
+          line-height: @padding-xxs * 7;
+
+          &::before {
+            content: none;
+          }
+        }
+      }
+
+      .@{ant-prefix}-popover {
+        width: 200px;
+
+        &-open:not(.ued-tree-icon):not(.@{tree-icon-prefix-cls}) {
+          display: inline-block;
+        }
+      }
+    }
+
+    .ued-tree-icons-normal {
+      top: 0;
+      right: 0;
+      display: none;
+      align-items: center;
+      margin-left: 12px;
+
+      i {
+        margin-left: 6px;
+        font-size: 12px;
+      }
+    }
+
+    &:hover {
+      .ued-tree-icons {
+        display: flex;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.ued-tree-menu {
+
+  .nodeHoverCodeTip {
+    font-size: 10px;
+    
+    .editor-tooltip-inner {
+      min-height: 20px;
+      padding: 2 10px;
+      line-height: 20px;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.6500);
+      border-radius: 2px;
+    }
+  }
+
+  .@{ant-prefix}-popover-arrow {
+    display: none;
+  }
+  .@{ant-prefix}-popover-inner {
+    border-radius: 2px;
+  }
+  .@{ant-prefix}-popover-inner-content {
+    padding: 0;
+
+    .tree-menu-box {
+      display: flex;
+      align-items: stretch;
+    }
+
+    .tree-menu-list {
+      max-height: 256px;
+      overflow-y: auto;
+      padding: 6px 0;
+      min-width: 108px;
+
+      &:not(:first-child) {
+        border-left: 1px solid rgba(229, 229, 229, 1);
+      }
+
+      &:first-child {
+        min-width: 132px;
+      }
+
+      &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        width: 3px;
+        background: rgba(216, 216, 216, 1);
+        border-radius: 1.5px;
+      }
+
+      &::-webkit-scrollbar-track,
+      &::-webkit-scrollbar,
+      &::-webkit-scrollbar-corner {
+        background: transparent;
+        border-radius: 1.5px;
+      }
+
+      &::-webkit-scrollbar-track {
+        border-color: white;
+        padding-right: 3px;
+      }
+
+      .tree-menu-item {
+        padding: @padding-xxxs @padding-xs;
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 24px;
+
+        &:not(:last-child) {
+          margin-bottom: @padding-xs;
+        }
+
+        .anticon-right {
+          font-size: 10px;
+          margin-left: @padding-md;
+        }
+
+        &:hover,
+        &.hover {
+          background-color: rgba(28, 36, 46, 0.04);
+        }
+      }
+    }
+  }
+}

package/lib/public/src/components/pcfactory/src/styles/components/TreeSelect.less

@@ -0,0 +1,65 @@
+@import (reference) '../theme/variables/antdVariables.less';
+@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+
+.ued-treeSelect-icon {
+  position: absolute;
+  top: 50%;
+  right: @padding-xs;
+  transform: translateY(-50%);
+  fill: @icon-btn-light-color;
+}
+
+.@{ant-prefix}-select-selection__choice {
+  margin-right: @padding-sm / 2;
+  color: @custom-black-8;
+  background-color: @select-tree-tag-background-color;
+  border-color: @border-color-base;
+
+  .@{ant-prefix}-select-selection__choice__remove {
+    color: @icon-btn-default-color;
+
+    .@{ant-prefix}-select-remove-icon {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      color: @icon-btn-hover-color;
+    }
+  }
+}
+
+.ued-treeSelect-dropdown {
+  .@{select-tree-prefix-cls} {
+    padding: @padding-xxs @padding-xs;
+
+    li {
+      .@{select-tree-prefix-cls}-switcher {
+        width: @padding-md;
+        height: @padding-md;
+        margin-right: @padding-xxs;
+        line-height: @padding-md - 2px;
+      }
+
+      .@{select-tree-prefix-cls}-node-content-wrapper {
+        // height: @padding-xxs * 7;
+        vertical-align: middle;
+
+        &:hover {
+          background-color: @item-hover-bg;
+        }
+
+        &.@{select-tree-prefix-cls}-node-selected {
+          background-color: @item-active-bg;
+        }
+      }
+
+      .@{select-tree-prefix-cls}-checkbox {
+        top: 0;
+      }
+
+      ul {
+        padding-left: @padding-lg;
+      }
+    }
+  }
+}

package/lib/public/src/components/pcfactory/src/styles/components/Upload.less

@@ -0,0 +1,26 @@
+@import (reference) '../theme/variables/antdVariables.less';
+@upload-prefix-cls: ~'@{ant-prefix}-upload';
+
+.ued-upload-wrap {
+  &-hidden {
+    .@{upload-prefix-cls}.@{upload-prefix-cls}-select,
+    .anticon-delete {
+      display: none;
+    }
+  }
+
+  // 控制下载进度图标一直展示
+  .@{upload-prefix-cls}-list-item-card-actions-btn {
+    visibility: hidden;
+    opacity: 1 !important;
+  }
+  .@{upload-prefix-cls}-list-item:hover {
+    .@{upload-prefix-cls}-list-item-card-actions-btn {
+      a,
+      span,
+      div {
+        visibility: visible !important;
+      }
+    }
+  }
+}

package/lib/public/src/components/pcfactory/src/styles/components/VerificationCode.less

@@ -0,0 +1,162 @@
+@import (reference) '../theme/variables/index.less';
+
+@prefixClsEG: verificationCodePC;
+
+.@{prefixClsEG} {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  color: #1c242e;
+
+  &-titleTop {
+    display: flex;
+    flex-direction: column;
+
+    .topText {
+      height: 32px;
+      line-height: 32px;
+    }
+  }
+
+  &-titleLeft {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .titleText {
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+  }
+
+  &-inputContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 32px;
+
+    .normalArea {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      height: 48px;
+      padding: 0 5px;
+
+      .titleText {
+        flex-shrink: 0;
+        margin-right: 16px;
+      }
+
+      input {
+        flex: 1;
+        min-width: 80px;
+        background: none;
+        border: 0;
+      }
+      ::-webkit-input-placeholder {
+        color: rgba(28, 36, 46, 0.25);
+      }
+      :focus-visible {
+        outline-width: 0px;
+      }
+
+      .sendButtonActive {
+        flex-shrink: 0;
+        color: @primary-color;
+      }
+
+      .sendButtonDisable {
+        flex-shrink: 0;
+        color: rgba(28, 36, 46, 0.45);
+        font-size: 86%;
+      }
+
+      .imageActive {
+        width: 80px;
+        height: 30px;
+        background-color: #f5f5f5;
+      }
+    }
+    :focus-visible {
+      border-color: @primary-color;
+    }
+  }
+
+  &-errorNotice {
+    padding: 0 5px 5px 5px;
+    color: @error-color;
+  }
+}
+
+
+@prefixClsED: verificationCodeEDPC;
+
+.@{prefixClsED} {
+  min-width: 160px;
+  color: #1c242e;
+
+  &-titleTop {
+    display: flex;
+    flex-direction: column;
+
+    .topText {
+      height: 32px;
+      line-height: 32px;
+    }
+  }
+
+  &-titleLeft {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .titleText {
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+  }
+
+  &-inputContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 32px;
+
+    input {
+      flex: 1;
+      min-width: 80px;
+      padding-left: 5px;
+      background: none;
+      border: 0;
+    }
+    
+    ::-webkit-input-placeholder {
+      color: rgba(28, 36, 46, 0.25);
+    }
+
+    .sendButtonActive {
+      flex-shrink: 0;
+      margin-right: 8px;
+      color: @primary-color;
+    }
+
+    .sendButtonDisable {
+      flex-shrink: 0;
+      margin-right: 8px;
+      color: rgba(28, 36, 46, 0.45);
+      font-size: 86%;
+    }
+
+    .imageActive {
+      height: 32px;
+      margin-right: 0px;
+      padding: 0 5px;
+      color: #8e9baa;
+      line-height: 32px;
+      background-color: #f5f5f5;
+    }
+  }
+}
+

package/lib/public/src/components/pcfactory/src/styles/components/Webview.less

@@ -0,0 +1,31 @@
+@import (reference) '../theme/variables/index.less';
+
+@webviewEDCls: ~'ued-webview-ed';
+
+.@{webviewEDCls}-container {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.@{webviewEDCls}-placeholder {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.@{webviewEDCls}-flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.@{webviewEDCls}-Empty {
+  padding: 10px;
+}
+
+.@{webviewEDCls}-description {
+  color:rgba(28, 36, 46, 0.55);
+  font-size: 16px;
+  line-height: 22px;
+}

package/lib/public/src/components/pcfactory/src/styles/index.less

@@ -0,0 +1,10 @@
+/**
+ * 组件样式统一入口
+ */
+@root-entry-name: default; // 由于入口变更，所以需要单独声明此变量，否则样式文件路径会异常
+@import '~antd/lib/style/core/motion.less'; // 解决零代码无法关闭
+@import '~antd/lib/style/components.less'; // 只引入antd原生控件样式（里面包含了 主题变量themes/共用方法mixins）
+// @import '~@ant-design/compatible/assets/index.less'; // 兼容 antd 3.x Form 组件样式
+// @import './compatible.less';
+
+@import './index.ued.less';

package/lib/public/src/components/pcfactory/src/styles/index.ued.less

@@ -0,0 +1,65 @@
+/**
+ * 控件（组件）样式文件
+ * 各组件基本遵循最外层被以 “ued-xxx-wrap" 为样式名的容器包裹，模拟局部css作用域
+ *
+ * 为什么不直接在组件内部以 css module 的方式引入样式？
+ * 答：1. 因为在打包构建时，各模块包裹容器的样式名会加上hash编码
+ * 2. 今后如果想实现动态主题变更，就需要在线编译less样式，而编译时需要有一份基准数据
+ * 3. 如果是以组件内部的样式文件内容作为基准数据，里面的样式名是没有进行hash编码过的，会与构建后的文件匹配不上，就算生成新的css，也不会生效
+ * 4. 所以基准数据大概率会包含此文件内容（入口文件还会含有 antd 库中原生样式内容），通过less，替换里面的less变量，生成新的css，插入到html中，做到样式变更
+ * 优点：每个组件模块的样式名都是约定的，不会在构建过程中加上hash编码
+ */
+
+// 以下为自定义变量和组件样式
+@import './common.less';
+@import './theme/variables/index.less';
+@import './components/Card.less';
+@import './components/Collapse.less';
+@import './components/Table.less';
+@import './components/Drawer.less';
+@import './components/Description.less';
+@import './components/Dropdown.less';
+@import './components/Tree.less';
+@import './components/Tabs.less';
+@import './components//Button.less';
+@import './components/Input.less';
+@import './components/InputNumber.less';
+@import './components/InputPassword.less';
+@import './components/LoopList.less';
+@import './components/ModalSelect.less';
+@import './components/Select.less';
+@import './components/DatePicker.less';
+@import './components/TextArea.less';
+@import './components/Form.less';
+@import './components/Gantt.less';
+@import './components/GridView.less';
+@import './components/TreeSelect.less';
+@import './components/Cascader.less';
+@import './components/SuperSelect.less';
+@import './components/Result.less';
+@import './components/Progress.less';
+@import './components/Checkbox.less';
+@import './components/Radio.less';
+@import './components/Switch.less';
+@import './components/Transfer.less';
+@import './components/Tag.less';
+@import './components/Swiper.less';
+@import './components/StdUpload.less';
+@import './components/Upload.less';
+@import './components/Popconfirm.less';
+@import './components/Menu.less';
+@import './components/Slider.less';
+@import './components/Link.less';
+@import './components/Rate.less';
+@import './components/Alert.less';
+@import './components/TooltipView.less';
+@import './components/Audio.less';
+@import './components/Divider.less';
+@import './components/Icon.less';
+@import './components/QuillEditor.less';
+@import './components/VerificationCode.less';
+@import './components/Webview.less';
+@import './components/Step.less';
+@import './components/DynamicTabs.less';
+@import './components/FormGroup.less';
+@import './components/DynamicDataContainer.less';