linkmore-design 1.1.15 → 1.1.17

package/lib/styles/variables.css

@@ -1407,6 +1407,7 @@ p {
 }
 .lm_cascader.ant-select.ant-select {
   font-size: 12px;
+  width: 100%;
 }
 .lm_cascader_dropdown.ant-select-dropdown {
   font-size: 12px;
@@ -8951,58 +8952,48 @@ p {
 .lm_form.ant-form.ant-form-inline .ant-form-item-label {
   text-align: left;
 }
-.lm_container_wrapper {
-  overflow: auto;
-}
-.lm_container_wrapper .lm_container.responsive {
-  min-width: 990px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.lm_form_responsive_box .lm_form {
+  background: #f0f0f0;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form > .lm_container_wrapper {
+  background: #f0f0f0;
+  margin-bottom: 0;
+  border-radius: 0;
+  padding: 16px;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
-  width: 100%;
+.lm_container_wrapper {
+  overflow: auto;
+  background: #fff;
+  margin-bottom: 16px;
+  border-radius: 2px;
+  padding: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
+.lm_container_wrapper .ant-cascader {
   width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive {
-  width: calc(33.3333% - 16px);
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive.nth-three {
-  margin-right: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive {
-  width: calc(25% - 18px);
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive.nth-four {
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.form_responsive_group_title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 16px;
+  color: var(--color-85);
+  flex-basis: 100%;
+  align-items: center;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive {
-  width: calc(20% - 96px / 5);
-  margin-right: 24px;
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive.nth-five {
-  margin-right: 0;
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
 }
-.lm_container_wrapper .lm_container.responsive .ant-cascader {
-  width: 100%;
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
 }
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;
@@ -9510,8 +9501,12 @@ p {
 .ant-input-search-with-button .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
   z-index: 2 !important;
 }
+.lm_input-number {
+  width: 100%;
+}
 .lm_input-number.ant-input-number {
   border: 1px solid var(--color-15);
+  width: 100%;
 }
 .lm_input-number .ant-input-number-handler-wrap {
   width: 28px;
@@ -9826,8 +9821,8 @@ p {
 .lm_filter_wrapper .lm_filter_container .lm_filter {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   font-size: 12px;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom {
@@ -9838,14 +9833,14 @@ p {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  height: 32px;
-  line-height: 1;
   min-width: 100px;
   max-width: 180px;
+  height: 32px;
+  padding: 0 8px;
+  color: var(--font2-color);
+  line-height: 1;
   border: 1px solid var(--color-15);
   border-radius: 2px;
-  color: var(--font2-color);
-  padding: 0 8px;
   cursor: pointer;
   transition: 0.3s;
 }
@@ -9853,13 +9848,13 @@ p {
   height: 24px;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select .lm_filter_custom_select_label span {
-  text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select .lm_filter_custom_select_icon {
-  font-size: 14px;
   color: var(--text-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select:hover {
@@ -9888,16 +9883,17 @@ p {
   height: 24px;
 }
 .lm_filter_basic_item {
-  font-size: 12px;
   display: inline-flex;
+  gap: 4px;
   align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 12px;
   line-height: 1;
+  vertical-align: middle;
   border-radius: 2px;
-  padding: 0 8px;
-  transition: 0.3s;
   cursor: pointer;
-  height: 32px;
-  gap: 4px;
+  transition: 0.3s;
 }
 .lm_filter_basic_item.small {
   height: 24px;
@@ -9907,16 +9903,26 @@ p {
 .lm_filter_basic_item.active {
   background-color: var(--color-4);
 }
+.lm_filter_basic_item .filter_item_label {
+  flex: 0 0 auto;
+}
 .lm_filter_basic_item .filter_item_value {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
+  max-width: 552px;
+  overflow: hidden;
   color: var(--text-color);
   transition: 0.3s;
 }
+.lm_filter_basic_item .filter_item_value span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .lm_filter_basic_item .filter_item_icon {
-  font-size: 14px;
   color: var(--text-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_filter_basic_item .filter_item_icon.addon_before {
@@ -9939,19 +9945,19 @@ p {
   transform: translateY(-4px);
 }
 .ant-dropdown.filter_dropdown_container_date .ant-picker {
-  visibility: hidden;
   transform: translateY(-36px);
+  visibility: hidden;
 }
 .filter_dropdown {
   display: flex;
   flex-flow: column;
-  box-shadow: 0 2px 6px var(--box-shadow-color);
   background-color: #fff;
+  box-shadow: 0 2px 6px var(--box-shadow-color);
 }
 .filter_dropdown .filter_header {
   min-height: 40px;
-  border-bottom: 1px solid #eee;
   padding: 8px;
+  border-bottom: 1px solid #eee;
 }
 .filter_dropdown .filter_header .filter_header_operate {
   display: flex;
@@ -9963,13 +9969,13 @@ p {
   align-items: center;
 }
 .filter_dropdown .filter_header .filter_header_operate .filter_reset {
-  font-size: 12px;
   color: var(--primary-color);
+  font-size: 12px;
   cursor: pointer;
 }
 .filter_dropdown .filter_header .filter_header_operate .filter_tip {
-  font-size: 12px;
   color: var(--text-color);
+  font-size: 12px;
 }
 .filter_dropdown .filter_header .ant-input-group {
   line-height: 1;
@@ -9990,32 +9996,40 @@ p {
 }
 .filter_dropdown .filter_body .filter_item {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
-  height: 32px;
   min-width: 120px;
+  height: 32px;
   padding: 0 8px;
-  transition: 0.3s;
+  font-size: 12px;
   white-space: nowrap;
   cursor: pointer;
-  gap: 8px;
+  transition: 0.3s;
 }
 .filter_dropdown .filter_body .filter_item.last_item {
   border-top: 1px solid var(--line-color);
 }
 .filter_dropdown .filter_body .filter_item .filter_item_content {
   flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.filter_dropdown .filter_body .filter_item .filter_item_content.lm-checkbox > span:last-child {
+  max-width: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover {
   font-size: 16px;
-  transition: 0.3s;
   opacity: 0;
+  transition: 0.3s;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover:hover {
   color: var(--primary-color);
@@ -10037,15 +10051,15 @@ p {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
   min-height: 32px;
   padding: 6px 8px;
-  border-top: 1px solid #eee;
+  font-size: 12px;
   letter-spacing: 1px;
+  border-top: 1px solid #eee;
 }
 .filter_dropdown .filter_footer button {
-  font-size: 12px;
   padding: 0 8px;
+  font-size: 12px;
 }
 .filter_dropdown .filter_footer .footer_save {
   color: var(--primary-color);
@@ -10063,14 +10077,14 @@ p {
 .filter_dropdown .filter_empty {
   display: flex;
   flex-flow: column;
+  gap: 4px;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
   min-height: 40px;
-  color: #666;
-  padding: 16px 8px;
   margin: auto;
-  gap: 4px;
+  padding: 16px 8px;
+  color: #666;
+  font-size: 12px;
 }
 .filter_dropdown .filter_empty .filter_empty_text {
   display: inline-flex;
@@ -10081,8 +10095,8 @@ p {
 }
 .filter_dropdown .ant-checkbox-wrapper {
   flex: 1;
-  font-size: 12px;
   align-items: center;
+  font-size: 12px;
 }
 .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
@@ -10118,18 +10132,18 @@ p {
   padding: 0 0 8px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_add .ant-btn {
-  font-size: 12px;
   max-width: initial;
+  font-size: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item {
   margin-bottom: var(--gap);
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box {
+  padding: calc(var(--gap) * 2);
   line-height: 1;
+  background: var(--background-color);
   border: 1px solid transparent;
   border-radius: 2px;
-  background: var(--background-color);
-  padding: calc(var(--gap) * 2);
   cursor: pointer;
   transition: 0.3s;
 }
@@ -10139,12 +10153,12 @@ p {
   justify-content: space-between;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_title {
-  font-size: 12px;
   font-weight: 500;
+  font-size: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_icon {
+  color: #8c8c8c;
   font-size: 16px;
-  color: #8C8C8C;
   transition: 0.3s;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_icon.icon_plus {
@@ -10160,9 +10174,9 @@ p {
   padding-top: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_tags .ant-tag {
+  margin: 0;
   color: var(--font-color);
   background-color: var(--background-color);
-  margin: 0;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_tags .ant-tag.add_tags {
   background: transparent;
@@ -10182,8 +10196,8 @@ p {
   margin-bottom: 24px;
 }
 .ant-drawer.lm_filter_drawer .complex_filter_body .list_group .list_group_title {
-  font-size: 14px;
   font-weight: 500;
+  font-size: 14px;
   line-height: 1.25;
 }
 .ant-drawer.lm_filter_drawer .complex_filter_body .list_group .list_group_search {
@@ -10193,14 +10207,14 @@ p {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
   height: 24px;
-  border-radius: 2px;
+  padding: 0 8px;
   color: var(--font-color);
+  font-size: 12px;
   background-color: var(--stripe-color);
-  padding: 0 8px;
-  transition: 0.3s;
+  border-radius: 2px;
   cursor: pointer;
+  transition: 0.3s;
 }
 .ant-drawer.lm_det_drawer .checkbox_tag:hover,
 .ant-drawer.lm_det_drawer .checkbox_tag.active {
@@ -10226,25 +10240,25 @@ p {
   top: 0;
 }
 .ant-drawer.lm_det_drawer .ant-select {
-  font-size: 12px;
   width: 100%;
+  font-size: 12px;
 }
 .ant-drawer.lm_det_drawer .custom_form {
   display: flex;
   flex-flow: column;
-  height: 100%;
   gap: 24px;
+  height: 100%;
 }
 .ant-drawer.lm_det_drawer .custom_form .custom_label {
-  font-size: 14px;
-  font-weight: 500;
   margin-bottom: 16px;
   color: var(--font-color);
+  font-weight: 500;
+  font-size: 14px;
 }
 .ant-drawer.lm_det_drawer .custom_form .custom_full {
   display: flex;
-  flex-flow: column;
   flex: 1;
+  flex-flow: column;
 }
 .lm_filter_dropdown_picker {
   padding: 0 !important;
@@ -10253,17 +10267,17 @@ p {
   display: flex;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside {
+  padding: 6px 0;
   font-size: 12px;
   border-right: 1px solid var(--background-color-hover);
-  padding: 6px 0;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 0 8px;
-  transition: 0.3s;
   cursor: pointer;
+  transition: 0.3s;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item:hover,
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item.active {
@@ -10274,13 +10288,13 @@ p {
   align-items: center;
   justify-content: space-between;
   min-height: 40px;
-  line-height: 1;
   padding: 0 16px;
+  line-height: 1;
   border-bottom: 1px solid var(--background-color-hover);
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper {
-  font-size: 12px;
   color: var(--font2-color);
+  font-size: 12px;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper:hover,
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
@@ -10368,6 +10382,7 @@ p {
 }
 .lm_select.ant-select {
   font-size: 12px;
+  width: 100%;
 }
 .lm_select .ant-select-selection-overflow-item-rest .ant-select-selection-item {
   color: var(--primary-color);
@@ -11285,6 +11300,45 @@ p {
 #lm_protable_warp .lm_protable .ant-table-empty table .ant-table-cell {
   border-bottom: 0;
 }
+#lm_protable_warp .lm_protable .ant-table-summary {
+  height: 48px;
+}
+#lm_protable_warp .lm_protable .ant-table-summary > table {
+  height: 100%;
+}
+#lm_protable_warp .lm_protable .ant-table-summary td {
+  padding: 0 8px;
+  text-align: right;
+  background-color: var(--table-background-color);
+}
+#lm_protable_warp .lm_protable .ant-table-summary td:first-of-type {
+  padding: 0 0 0 8px;
+  text-align: left;
+}
+#lm_protable_warp .lm_protable .ant-table-summary td.number {
+  border-right: 1px solid #eee;
+  border-left: 1px solid #eee;
+}
+#lm_protable_warp .lm_protable .ant-table-summary td.money {
+  color: var(--error-color);
+  border-right: 1px solid #eee;
+  border-left: 1px solid #eee;
+}
+#lm_protable_warp .lm_protable .ant-table-summary td.money-color {
+  color: var(--error-color);
+}
+#lm_protable_warp .lm_protable .ant-table-summary td > div {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+#lm_protable_warp .lm_protable .ant-table-summary td > div:last-of-type {
+  font-weight: bold;
+}
+#lm_protable_warp .lm_protable .ant-table-summary .total_title {
+  position: relative;
+  white-space: nowrap;
+}
 #lm_protable_warp .ant-table-expand-icon-col {
   width: 32px;
 }
@@ -12330,6 +12384,7 @@ button.ant-table-row-expand-icon::after {
 }
 .lm_select.ant-select {
   font-size: 12px;
+  width: 100%;
 }
 .lm_select.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
   box-shadow: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"
@@ -64,6 +64,7 @@
     "@dnd-kit/core": "^5.0.3",
     "@dnd-kit/modifiers": "^5.0.0",
     "@dnd-kit/sortable": "^6.0.1",
+    "@react-hook/resize-observer": "^1.2.6",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "ahooks": "^3.6.2",
@@ -92,7 +93,8 @@
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "readline-sync": "^1.4.10",
-    "scrollama": "^3.2.0"
+    "scrollama": "^3.2.0",
+    "use-resize-observer": "^9.0.2"
   },
   "peerDependencies": {
     "react": "17.0.1",