@jetlinks-web/components 2.0.4 → 2.0.5

package/lib/style/index.css

@@ -0,0 +1,707 @@
+.j-ellipsis {
+  overflow: hidden;
+  vertical-align: bottom;
+}
+.j-ellipsis-cursor {
+  cursor: pointer;
+}
+.j-ellipsis-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+.j-ellipsis-deep {
+  max-height: 380px;
+  -webkit-line-clamp: 17;
+  text-overflow: ellipsis;
+}
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.j-check-button {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+}
+.j-check-button .j-check-button-item {
+  flex: 1;
+  min-width: 0;
+  padding: 8px;
+  border-radius: 2px;
+  background-color: #f2f3f5;
+  transition: all 0.3s;
+  color: #333;
+  text-align: center;
+  cursor: pointer;
+}
+.j-check-button .j-check-button-item:hover {
+  background-color: #1890ff;
+  opacity: 0.85;
+  color: #fff;
+}
+.j-check-button .j-check-button-item.selected {
+  background-color: #1890ff;
+  color: #fff;
+}
+.j-check-button .j-check-button-item.disabled {
+  cursor: not-allowed;
+  color: #00000060;
+}
+.j-check-button .j-check-button-item.disabled:hover {
+  background-color: #f2f3f5;
+  color: #00000060;
+}
+.ant-pro-basicLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+}
+.ant-pro-basicLayout .ant-layout-header.ant-pro-fixed-header {
+  position: fixed;
+  top: 0;
+}
+.ant-pro-basicLayout-content {
+  position: relative;
+  margin: 24px;
+}
+.ant-pro-basicLayout-content .ant-pro-page-container {
+  margin: -24px -24px 0;
+}
+.ant-pro-basicLayout-content-disable-margin {
+  margin: 0;
+}
+.ant-pro-basicLayout-content-disable-margin .ant-pro-page-container {
+  margin: 0;
+}
+.ant-pro-basicLayout-content > .ant-layout {
+  max-height: 100%;
+}
+.ant-pro-basicLayout .ant-pro-basicLayout-is-children.ant-pro-basicLayout-fix-siderbar {
+  height: 100vh;
+  overflow: hidden;
+  transform: rotate(0);
+}
+.ant-pro-basicLayout .ant-pro-basicLayout-has-header .tech-page-container {
+  height: calc(100vh - 48px);
+}
+.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .tech-page-container {
+  height: calc(100vh - 48px - 48px);
+}
+.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children {
+  min-height: calc(100vh - 48px);
+}
+.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-fix-siderbar {
+  height: calc(100vh - 48px);
+}
+.ant-pro-fixed-header {
+  z-index: 9;
+  width: 100%;
+}
+.ant-pro-page-container-children-content {
+  margin: 24px 24px 0;
+}
+.ant-pro-page-container-warp {
+  background-color: #fff;
+}
+.ant-pro-page-container-warp .ant-tabs-bar {
+  margin: 0;
+}
+.ant-pro-page-container-ghost .ant-pro-page-container-warp {
+  background-color: #fff;
+}
+.ant-pro-page-container-main .ant-pro-page-container-detail {
+  display: flex;
+}
+.ant-pro-page-container-main .ant-pro-page-container-row {
+  display: flex;
+  width: 100%;
+}
+.ant-pro-page-container-main .ant-pro-page-container-title-content {
+  margin-bottom: 16px;
+}
+.ant-pro-page-container-main .ant-pro-page-container-title,
+.ant-pro-page-container-main .ant-pro-page-container-content {
+  flex: auto;
+}
+.ant-pro-page-container-main .ant-pro-page-container-extraContent,
+.ant-pro-page-container-main .ant-pro-page-container-main {
+  flex: 0 1 auto;
+}
+.ant-pro-page-container-main .ant-pro-page-container-main {
+  width: 100%;
+}
+.ant-pro-page-container-main .ant-pro-page-container-title {
+  margin-bottom: 16px;
+}
+.ant-pro-page-container-main .ant-pro-page-container-logo {
+  margin-bottom: 16px;
+}
+.ant-pro-page-container-main .ant-pro-page-container-extraContent {
+  min-width: 242px;
+  margin-left: 88px;
+  text-align: right;
+}
+@media screen and (max-width: 1200px) {
+  .ant-pro-page-container-main .ant-pro-page-container-extraContent {
+    margin-left: 44px;
+  }
+}
+@media screen and (max-width: 992px) {
+  .ant-pro-page-container-main .ant-pro-page-container-extraContent {
+    margin-left: 20px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .ant-pro-page-container-main .ant-pro-page-container-row {
+    display: block;
+  }
+  .ant-pro-page-container-main .ant-pro-page-container-action,
+  .ant-pro-page-container-main .ant-pro-page-container-extraContent {
+    margin-left: 0;
+    text-align: left;
+  }
+}
+@media screen and (max-width: 576px) {
+  .ant-pro-page-container-detail {
+    display: block;
+  }
+  .ant-pro-page-container-extraContent {
+    margin-left: 0;
+  }
+}
+.ant-pro-sider {
+  position: relative;
+  background-color: #001529;
+  border-right: 0;
+  z-index: 20;
+}
+.ant-pro-sider .ant-menu {
+  background: transparent;
+}
+.ant-pro-sider.ant-layout-sider-light .ant-menu-item a {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-pro-sider.ant-layout-sider-light .ant-menu-item-selected a,
+.ant-pro-sider.ant-layout-sider-light .ant-menu-item a:hover {
+  color: #1890ff;
+}
+.ant-pro-sider-logo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 16px 16px;
+  cursor: pointer;
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-pro-sider-logo > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+}
+.ant-pro-sider-logo img {
+  display: inline-block;
+  height: 32px;
+  vertical-align: middle;
+}
+.ant-pro-sider-logo h1 {
+  display: inline-block;
+  height: 32px;
+  margin: 0 0 0 12px;
+  color: white;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 32px;
+  vertical-align: middle;
+  animation: pro-layout-title-hide 0.3s;
+}
+.ant-pro-sider-extra {
+  margin-bottom: 16px;
+  padding: 0 16px;
+}
+.ant-pro-sider-extra-no-logo {
+  margin-top: 16px;
+}
+.ant-pro-sider-menu {
+  position: relative;
+  z-index: 10;
+  min-height: 100%;
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+}
+.ant-pro-sider .ant-layout-sider-children {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* 滚动条滑块 */
+}
+.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+  box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
+}
+.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
+}
+.ant-pro-sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed {
+  width: 48px;
+}
+.ant-pro-sider.ant-layout-sider-collapsed .ant-pro-sider-logo {
+  padding: 16px 8px;
+}
+.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+}
+.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed > .ant-menu-root :not(.ant-pro-sider-link-menu) {
+  height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+.ant-pro-sider-light {
+  background-color: #fff;
+  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+}
+.ant-pro-sider-light .ant-layout-sider-children {
+  /* 滚动条滑块 */
+}
+.ant-pro-sider-light .ant-layout-sider-children ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 3px;
+  box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+}
+.ant-pro-sider-light .ant-layout-sider-children ::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+}
+.ant-pro-sider-light .ant-pro-sider-logo h1 {
+  color: #1890ff;
+}
+.ant-pro-sider-light .ant-menu-light {
+  border-right-color: transparent;
+}
+.ant-pro-sider-light .ant-pro-sider-collapsed-button {
+  border-top: 1px solid #f0f0f0;
+}
+.ant-pro-sider-icon {
+  width: 14px;
+  vertical-align: baseline;
+}
+.ant-pro-sider-links {
+  width: 100%;
+}
+.ant-pro-sider-links ul.ant-menu-root {
+  height: auto;
+}
+.ant-pro-sider-collapsed-button {
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+}
+.ant-pro-sider-collapsed-button .anticon {
+  font-size: 16px;
+}
+.ant-pro-sider .top-nav-menu li.ant-menu-item {
+  height: 100%;
+  line-height: 1;
+}
+.ant-pro-sider .drawer .drawer-content {
+  background: #001529;
+}
+.ant-pro-menu-item .anticon + .ant-pro-menu-item-title {
+  margin-left: 10px;
+}
+@keyframes pro-layout-title-hide {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  80% {
+    display: none;
+    opacity: 0;
+  }
+  100% {
+    display: unset;
+    opacity: 1;
+  }
+}
+.ant-pro-global-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+.ant-pro-global-header > * {
+  height: 100%;
+}
+.ant-pro-global-header-collapsed-button {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  font-size: 20px;
+}
+.ant-pro-global-header-layout-mix {
+  background-color: #001529;
+}
+.ant-pro-global-header-layout-mix .ant-pro-global-header-logo h1 {
+  color: #fff;
+}
+.ant-pro-global-header-layout-mix .anticon {
+  color: #fff;
+}
+.ant-pro-global-header-logo {
+  position: relative;
+  overflow: hidden;
+}
+.ant-pro-global-header-logo a {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.ant-pro-global-header-logo a img {
+  height: 28px;
+}
+.ant-pro-global-header-logo a h1 {
+  height: 32px;
+  margin: 0 0 0 8px;
+  margin: 0 0 0 12px;
+  color: #1890ff;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 32px;
+}
+.ant-pro-global-header-menu .anticon {
+  margin-right: 8px;
+}
+.ant-pro-global-header-menu .ant-dropdown-menu-item {
+  min-width: 160px;
+}
+.ant-pro-global-header .dark {
+  height: 48px;
+}
+.ant-pro-global-header .dark .action {
+  color: rgba(255, 255, 255, 0.85);
+}
+.ant-pro-global-header .dark .action > i {
+  color: rgba(255, 255, 255, 0.85);
+}
+.ant-pro-global-header .dark .action:hover,
+.ant-pro-global-header .dark .action.opened {
+  background: #1890ff;
+}
+.ant-pro-global-header .dark .action .ant-badge {
+  color: rgba(255, 255, 255, 0.85);
+}
+.ant-pro-top-nav-header {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
+  transition: background 0.3s, width 0.2s;
+}
+.ant-pro-top-nav-header .ant-menu {
+  background: transparent;
+}
+.ant-pro-top-nav-header.light {
+  background-color: #fff;
+}
+.ant-pro-top-nav-header.light .ant-pro-top-nav-header-logo h1 {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-pro-top-nav-header.light .anticon {
+  color: inherit;
+}
+.ant-pro-top-nav-header-main {
+  display: flex;
+  height: 100%;
+  padding-left: 16px;
+}
+.ant-pro-top-nav-header-main-left {
+  display: flex;
+  min-width: 192px;
+}
+.ant-pro-top-nav-header .anticon {
+  color: #fff;
+}
+.ant-pro-top-nav-header-logo {
+  position: relative;
+  min-width: 165px;
+  height: 100%;
+  overflow: hidden;
+}
+.ant-pro-top-nav-header-logo img {
+  display: inline-block;
+  height: 32px;
+  vertical-align: middle;
+}
+.ant-pro-top-nav-header-logo h1 {
+  display: inline-block;
+  margin: 0 0 0 12px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  vertical-align: top;
+}
+.ant-pro-top-nav-header-menu {
+  min-width: 0;
+}
+.ant-pro-top-nav-header-menu .ant-menu.ant-menu-horizontal {
+  height: 100%;
+  border: none;
+}
+.ant-pro-top-nav-header-menu .ant-menu.ant-menu-horizontal .ant-menu-item {
+  height: 100%;
+}
+.ant-pro-top-nav-header-menu .ant-menu.ant-menu-horizontal .ant-menu-item .ant-badge {
+  color: unset;
+}
+.ant-pro-menu-popup .ant-badge {
+  color: unset;
+}
+.jtable-body-spin {
+  min-height: 100%;
+  width: 100%;
+  padding: 16px 24px 24px;
+  background-color: #fff;
+}
+.jtable-body-spin .ant-spin-nested-loading {
+  height: 100%;
+}
+.jtable-body-spin .ant-spin-nested-loading .ant-spin-container {
+  height: 100%;
+}
+.jtable-body-spin .jtable-body {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.jtable-body-spin .jtable-body .jtable-body-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .right-button-icon {
+  font-size: 16px;
+  color: #d9d9d9;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper {
+  padding: 0 8px;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper-checked .right-button-icon {
+  color: #1890ff;
+}
+.jtable-body-spin .jtable-body .jtable-content {
+  flex: 1;
+  padding: 16px 0;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-alert {
+  margin-bottom: 16px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items {
+  display: grid;
+  grid-gap: 26px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items .jtable-card-item {
+  display: flex;
+  min-width: 0;
+}
+.jtable-body-spin .jtable-body .jtable-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.jtable-body-spin .jtable-body .j-table-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10% 0;
+}
+.JSearch-warp {
+  padding: 24px;
+  background-color: #fff;
+  margin-bottom: 24px;
+}
+.JSearch-warp .pack-up .JSearch-items {
+  flex: 1 1 auto;
+}
+.JSearch-warp .pack-up .JSearch-items .left {
+  min-width: 380px;
+  max-width: 580px;
+}
+.JSearch-warp.senior > .JSearch-content {
+  display: flex;
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer {
+  display: flex;
+  gap: 64px;
+  position: relative;
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer .more-btn .more-text {
+  padding-right: 24px;
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer .more-btn .more-icon {
+  transition: transform 0.3s;
+  transform: rotateZ(90deg);
+  font-size: 14px;
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer .more-btn .more-icon.more-up {
+  transform: rotateZ(-90deg);
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer.expand {
+  margin-top: 16px;
+  width: 100%;
+  justify-content: space-between;
+}
+.JSearch-warp.senior > .JSearch-content .JSearch-footer .JSearch-footer--btns {
+  display: flex;
+  gap: 12px;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand {
+  display: flex;
+  gap: 16px;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand .left,
+.JSearch-warp.senior > .JSearch-content .items-expand .right {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand .left-items,
+.JSearch-warp.senior > .JSearch-content .items-expand .right-items {
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand .center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand.vertical {
+  flex-direction: column;
+}
+.JSearch-warp.senior > .JSearch-content .items-expand.vertical .center {
+  flex-direction: row;
+  justify-content: center;
+}
+.JSearch-warp.senior > .JSearch-content.senior-expand {
+  flex-direction: column;
+}
+.JSearch-warp.senior > .JSearch-content.small {
+  gap: 12px;
+}
+.JSearch-warp.senior > .JSearch-content.small .JSearch-footer {
+  gap: 4px;
+}
+.JSearch-warp .JSearch-content.simple .JSearch-footer--btns {
+  display: flex;
+  gap: 12px;
+}
+.JSearch-warp .JSearch-content.simple .JSearch-item {
+  gap: 8px;
+}
+.JSearch-warp .JSearch-content.simple .JSearch-item .JSearch-item--label {
+  text-align: right;
+}
+.JSearch-warp .no-radius {
+  border-radius: 0;
+  border-color: #f1f1f1;
+}
+.JSearch-warp .search-history-warp {
+  position: relative;
+}
+.JSearch-warp .search-history-warp .search-history-button {
+  padding-right: 32px;
+}
+.JSearch-warp .search-history-warp .search-history-button-icon {
+  position: absolute;
+  width: 24px;
+  height: 18px;
+  right: 6px;
+  top: 8px;
+  color: #fff;
+  line-height: 18px;
+  text-align: center;
+  font-weight: bold;
+}
+.JSearch-warp .search-history-warp .search-history-button-icon > span {
+  font-size: 14px;
+}
+.search-history-empty {
+  padding: 12px 12px 6px 12px;
+  background-color: #fff;
+}
+.search-history-items {
+  width: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.search-history-items .search-history-item {
+  display: flex;
+  padding: 4px 0px 4px 4px;
+  align-items: center;
+  gap: 4px;
+}
+.search-history-items .search-history-item:hover {
+  background-color: #f1f1f1;
+}
+.search-history-items .search-history-item .history-item--title {
+  width: calc(100% - 30px);
+  cursor: pointer;
+}
+.search-history-items .search-history-item .delete {
+  padding: 0 6px;
+  flex: 0 0 28px;
+}
+.search-history-list-pop .ant-popover-inner-content {
+  padding: 0;
+}
+.JSearch-item {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.JSearch-item .JSearch-item--type {
+  width: 90px;
+  min-width: 0;
+}
+.JSearch-item .JSearch-item--type > span {
+  line-height: 34px;
+  font-weight: bold;
+}
+.JSearch-item .JSearch-item--column {
+  width: 130px;
+  min-width: 0;
+}
+.JSearch-item .JSearch-item--termType {
+  width: 110px;
+  min-width: 0;
+}
+.JSearch-item .JSearch-item--label {
+  min-width: 40px;
+}
+.JSearch-item .JSearch-item--value {
+  display: flex;
+  width: 0;
+  flex-grow: 1;
+}

package/lib/style/index.less

@@ -0,0 +1,6 @@
+@import '../Ellipsis/style/index.less';
+@import '../CheckButton/style/index.less';
+@import '../ProLayout/style/style.less';
+@import '../ProTable/style/index.less';
+@import '../Search/style/Search.less';
+@import '../Search/style/Item.less';

package/lib/style.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("./Ellipsis/style");
+require("./CheckButton/style");
 require("./ProLayout/style");
 require("./ProTable/style");
 require("./Search/style");