ff-ui-plus 2.0.7

package/packages/theme-chalk/dist/src/form.scss

@@ -0,0 +1,104 @@
+.t-form {
+  display: flex;
+  flex-wrap: wrap;
+
+  .el-form-item {
+    align-items: center;
+
+    .el-form-item__content {
+      .el-input,
+      .el-select,
+      .el-date-editor,
+      .el-textarea {
+        width: 100%;
+      }
+
+      .el-input-number {
+        .el-input {
+          width: inherit;
+        }
+      }
+    }
+  }
+
+  // 左对齐
+  .asterisk-left {
+    .el-form-item__label {
+      margin-left: 5px;
+    }
+  }
+
+  .t-margin-top-5 {
+    margin-top: calc(5px);
+  }
+
+  .el-input-number {
+    .el-input {
+      .el-input__inner {
+        text-align: left;
+      }
+    }
+  }
+
+  .render_label {
+    .el-form-item__label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &::before {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  // 左对齐
+  .render_laber_position_left {
+    .el-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+
+  // 顶部对齐
+  &.el-form--label-top {
+    .render_label {
+      .el-form-item__label {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .label_render {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .text_show {
+    color: var(--el-text-color-primary);
+  }
+
+  .slot_label {
+    .el-form-item__content {
+      label {
+        color: var(--el-text-color-primary);
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .flex-box {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .flex-ver {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .footer_btn {
+    width: 100%;
+  }
+}

package/packages/theme-chalk/dist/src/index.scss

@@ -0,0 +1,19 @@
+@use "./adaptive-page.scss";
+@use "./button.scss";
+@use "./chart.scss";
+@use "./checkbox.scss";
+@use "./date-picker.scss";
+@use "./detail.scss";
+@use "./form.scss";
+@use "./input.scss";
+@use "./layout-page.scss";
+@use "./layout-page-item.scss";
+@use "./module-form.scss";
+@use "./query-condition.scss";
+@use "./radio.scss";
+@use "./select.scss";
+@use "./select-icon.scss";
+@use "./select-table.scss";
+@use "./step-wizard.scss";
+@use "./table.scss";
+@use "./tabs.scss";

package/packages/theme-chalk/dist/src/layout-page-item.scss

@@ -0,0 +1,10 @@
+.t_layout_page_item {
+  // margin: 8px;
+  padding: 16px;
+  background: var(--el-bg-color);
+  border-radius: 4px;
+}
+.page_item_no_margin {
+  margin: 0;
+  padding: 0;
+}

package/packages/theme-chalk/dist/src/layout-page.scss

@@ -0,0 +1,37 @@
+.t_layout_page {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .back_to_top {
+    position: absolute;
+    right: 10px;
+    bottom: 100px;
+    z-index: 100;
+    box-shadow: 0 5px 6px 2px rgba(0, 0, 0, 0.5);
+    background: #fff;
+    border-radius: 5px;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > div {
+      cursor: pointer;
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-icon {
+        color: #9b59b6;
+      }
+    }
+  }
+}
+.layout_page_no_margin {
+  padding: 0;
+}

package/packages/theme-chalk/dist/src/module-form.scss

@@ -0,0 +1,335 @@
+.t_module_form {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  height: 100%;
+  text-align: left;
+  background-color: var(--el-bg-color-page);
+  overflow: auto;
+
+  .scroll_wrap {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .el-page-header {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: var(--el-text-color-primary);
+      font-size: 14px;
+      font-variant: tabular-nums;
+      line-height: 1.5;
+      list-style: none;
+      -webkit-font-feature-settings: "tnum";
+      font-feature-settings: "tnum";
+      position: relative;
+      padding: 16px 24px;
+      background-color: var(--el-bg-color);
+
+      .el-page-header__breadcrumb {
+        margin: 0;
+      }
+
+      .el-page-header__left {
+        color: var(--el-text-color-primary);
+        align-items: center;
+        margin: 0;
+        width: 100%;
+
+        .el-icon-back {
+          font-weight: bold;
+        }
+
+        .el-page-header__title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+
+      .el-page-header__content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: 60%;
+
+        .sub_title {
+          flex: 30%;
+        }
+
+        .extra {
+          flex: 70%;
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+
+    .noContent {
+      .el-page-header__left {
+        .el-divider {
+          display: none;
+        }
+      }
+    }
+
+    // 是否显示返回箭头
+    .isShowBack {
+      .el-page-header__left {
+        .el-page-header__icon {
+          display: none;
+        }
+      }
+    }
+
+    .t_detail {
+      .el-collapse {
+        border: none;
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          .el-collapse-item__header {
+            border-bottom: 1px solid var(--el-border-color);
+            position: relative;
+            padding-left: 35px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .t_btn {
+              margin-right: 15px;
+            }
+
+            .el-collapse-item__arrow {
+              color: inherit;
+              font-style: normal;
+              line-height: 0;
+              text-align: center;
+              text-transform: none;
+              vertical-align: -0.125em;
+              text-rendering: optimizeLegibility;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              position: absolute;
+              top: 17px;
+              left: 14px;
+              display: inline-block;
+              font-size: 14px;
+            }
+          }
+
+          .el-collapse-item__wrap {
+            padding: 16px;
+            border: none;
+
+            .el-collapse-item__content {
+              padding-bottom: 0;
+            }
+          }
+        }
+
+        // Title文字加粗
+        .title_bold {
+          .collapse-item_title {
+            font-weight: bold;
+          }
+        }
+
+        // 隐藏手风琴title
+        .noTitle {
+          margin-top: 0;
+
+          > div {
+            &:first-child {
+              display: none;
+            }
+          }
+        }
+
+        // 禁用时取消收缩功能及隐藏icon
+        .disabledStyle {
+          .el-collapse-item__header {
+            color: var(--el-collapse-header-text-color);
+            cursor: default;
+            padding-left: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .el-collapse-item__arrow {
+              display: none;
+            }
+
+            .t_btn {
+              margin-right: 15px;
+            }
+          }
+        }
+      }
+    }
+
+    .t_form {
+      .el-collapse {
+        border: none;
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          .el-collapse-item__header {
+            border-bottom: 1px solid var(--el-border-color);
+            position: relative;
+            padding-left: 35px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .t_btn {
+              margin-right: 15px;
+            }
+
+            .el-collapse-item__arrow {
+              color: inherit;
+              font-style: normal;
+              line-height: 0;
+              text-align: center;
+              text-transform: none;
+              vertical-align: -0.125em;
+              text-rendering: optimizeLegibility;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              position: absolute;
+              top: 17px;
+              left: 14px;
+              display: inline-block;
+              font-size: 14px;
+            }
+          }
+
+          .el-collapse-item__wrap {
+            padding: 16px;
+            border: none;
+
+            .el-collapse-item__content {
+              padding-bottom: 0;
+            }
+          }
+        }
+
+        // Title文字加粗
+        .title_bold {
+          .collapse-item_title {
+            font-weight: bold;
+          }
+        }
+
+        // 隐藏手风琴title
+        .noTitle {
+          > div {
+            &:first-child {
+              display: none;
+            }
+          }
+        }
+
+        // 禁用时取消收缩功能及隐藏icon
+        .disabledStyle {
+          .el-collapse-item__header {
+            color: var(--el-collapse-header-text-color);
+            cursor: default;
+            padding-left: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .el-collapse-item__arrow {
+              display: none;
+            }
+
+            .t_btn {
+              margin-right: 15px;
+            }
+          }
+        }
+      }
+    }
+
+    .t_form {
+      .el-collapse-borderless {
+        background-color: var(--el-bg-color);
+
+        .noTitle {
+          .el-collapse-header {
+            display: none;
+          }
+        }
+
+        .el-collapse-item {
+          background-color: var(--el-bg-color);
+          margin-top: 10px;
+          border: none;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .el-collapse-header {
+            border-bottom: 1px solid var(--el-border-color);
+          }
+
+          .el-collapse-content-box {
+            padding: 16px;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      padding: 0;
+      margin: 0;
+
+      .el-tabs {
+        .el-tabs__header {
+          margin: 0;
+          padding: 0 10px;
+          background-color: var(--el-bg-color);
+        }
+
+        .el-tabs__nav-wrap {
+          &::after {
+            height: 1px;
+          }
+        }
+      }
+    }
+  }
+
+  .handle_wrap {
+    position: fixed;
+    z-index: 4;
+    right: 0;
+    bottom: 0px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color);
+    text-align: right;
+    width: 100%;
+
+    .el-button:last-child {
+      margin-right: 15px;
+    }
+  }
+}

package/packages/theme-chalk/dist/src/query-condition.scss

@@ -0,0 +1,132 @@
+.t-query-condition.el-form {
+  position: relative;
+  display: grid;
+  gap: 2px 8px;
+  margin-bottom: -7px;
+  text-align: left;
+
+  .el-select,
+  .el-date-editor,
+  .ant-calendar-picker {
+    width: 100%;
+  }
+
+  .flex_end {
+    grid-area: submit_btn;
+    margin-top: 2px;
+
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+      align-items: center;
+      overflow: visible !important;
+    }
+  }
+
+  .btn {
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+    }
+
+    .more_dropdown_icon {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  .btn_flex_end {
+
+
+    .el-form-item__content {
+      justify-content: flex-end;
+    }
+  }
+
+  .btn_label_position_top {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .el-form-item {
+    // display: flex;
+    margin-bottom: 10px;
+
+    .el-form-item__label {
+      flex-shrink: 0;
+      min-width: 60px;
+      padding-left: 8px;
+    }
+
+    .el-form-item__content {
+      flex-grow: 1;
+      // overflow: hidden;
+      margin-left: 0 !important;
+    }
+  }
+
+  .render_label {
+    .el-form-item__label {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &::before {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  .render_label_position_top,
+  .render_label_position_left {
+    .el-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+
+  .btn_check {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn_reset {
+    position: relative;
+    top: -1px;
+    margin-left: 8px;
+  }
+}
+
+.t_query_condition_more.el-popover {
+  padding: 15px;
+
+  .inside_box {
+    display: flex;
+    flex-direction: column;
+
+    .inside_box_title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .inside_box_main {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(100px, 50%));
+
+      .el-checkbox {
+        display: flex;
+        align-items: center;
+
+        .el-checkbox__label {
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          min-width: 90px;
+        }
+      }
+    }
+  }
+}

package/packages/theme-chalk/dist/src/select-icon.scss

@@ -0,0 +1,61 @@
+.t_select_icon {
+  width: 100%;
+
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+
+    .el-icon {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .t_select_icon_dialog {
+    .el-dialog__body {
+      padding: 25px 20px 20px;
+
+      .el-input {
+        margin-bottom: 10px;
+      }
+
+      .icon-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 115px);
+        justify-content: space-evenly;
+        max-height: 60vh;
+
+        .icon-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 42px;
+          padding: 20px 30px;
+          cursor: pointer;
+          transition: all 0.2s;
+
+          svg {
+            width: 30px;
+            height: 30px;
+          }
+
+          &:hover {
+            transform: scale(1.3);
+          }
+
+          &.icon-active {
+            color: var(--el-color-primary);
+          }
+
+          span {
+            margin-top: 5px;
+            line-height: 20px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}