@touchvue/ui 1.0.0-beta.53 → 1.0.0-beta.55

package/theme/components/index.css

@@ -784,6 +784,7 @@ html body .height-full {
 .to-grid.va-baseline {
   align-items: baseline;
 }
+.to-grid:has(.to-box.height-full),
 .to-grid.va-full {
   align-items: stretch;
 }
@@ -889,6 +890,7 @@ html body .height-full {
   src: url('../img/font-fill/iconfont.woff2?t=1756347622462') format('woff2'), url('../img/font-fill/iconfont.woff?t=1756347622462') format('woff'), url('../img/font-fill/iconfont.ttf?t=1756347622462') format('truetype');
 }
 .to-icon {
+  --weight: normal;
   --cursor: pointer;
   --color: inherit;
   --width: var(--height-fe);
@@ -921,7 +923,6 @@ html body .height-full {
   flex-shrink: 0;
   display: inline-flex;
   font-family: var(--family), 'PingFang SC', 'microsoft yahei';
-  vertical-align: top;
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -943,11 +944,11 @@ html body .height-full {
 .to-icon:before {
   font-weight: normal;
   font-size: var(--size);
-  vertical-align: top;
   content: var(--value);
 }
 .to-icon-text {
   font-size: var(--size);
+  font-weight: var(--weight);
 }
 .to-icon.value-loading span:after {
   content: '';
@@ -976,7 +977,6 @@ html body .height-full {
 }
 .to-icon.value-loading .to-icon-text {
   position: absolute;
-  vertical-align: top;
   font-size: 1em;
   width: var(--width);
   height: var(--height);
@@ -1942,7 +1942,9 @@ html body .height-full {
   --active-border: var(--border);
 }
 .to-tag {
-  display: inline-block;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
   overflow: hidden;
   vertical-align: top;
 }
@@ -2095,6 +2097,7 @@ html body .height-full {
   left: 0;
   bottom: 0;
   top: unset;
+  right: unset;
 }
 .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
   border-radius: 0 var(--radius) 0 0;
@@ -2590,6 +2593,9 @@ html body .height-full {
   --day-item-on-border: var(--day-item-border);
   --day-item-on-bg: var(--color-primary);
   --day-item-on-color: var(--color-bg);
+  --day-item-checked-border: var(--day-item-border);
+  --day-item-checked-bg: var(--color-primary);
+  --day-item-checked-color: var(--color-bg);
   --day-item-sun-border: var(--day-item-border);
   --day-item-sun-bg: var(--day-item-bg);
   --day-item-sun-color: var(--color-danger);
@@ -2759,10 +2765,12 @@ html body .height-full {
   background-size: var(--year-bg-size);
   gap: var(--year-gap);
   border-right: var(--year-divider);
+}
+.to-calendar-year .to-scroll-content {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-year::-webkit-scrollbar {
+.to-calendar-year .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-year-item {
@@ -2807,6 +2815,7 @@ html body .height-full {
   font-size: var(--year-item-size);
 }
 .to-calendar-month {
+  flex: 1;
   display: flex;
   align-items: center;
   align-self: flex-start;
@@ -2903,10 +2912,6 @@ html body .height-full {
   position: relative;
   padding: var(--day-item-padding);
 }
-.to-calendar-day-item.is-checked .to-calendar-day-item-content {
-  background: #0e0;
-  color: #fff;
-}
 .to-calendar-day-item-content {
   width: var(--day-item-width);
   height: var(--day-item-height);
@@ -3037,11 +3042,13 @@ html body .height-full {
 }
 .to-calendar-time-list {
   flex: 1;
-  height: 100%;
+}
+.to-calendar-time-list .to-scroll-content {
+  flex: 1;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.to-calendar-time-list::-webkit-scrollbar {
+.to-calendar-time-list .to-scroll-content::-webkit-scrollbar {
   display: none;
 }
 .to-calendar-time-item {
@@ -3218,9 +3225,13 @@ html body .height-full {
   --content-padding: 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
+  --overflow-color: var(--color-fg-fade);
   --arrow-size: 1em;
   --arrow-font-size: 0.75em;
   --arrow-color: var(--color-fg-fade);
+  --clear-size: 1em;
+  --clear-color: var(--color-fg-fade);
+  --clear-hover-color: var(--color-danger);
   --arrow-hover-color: var(--arrow-color);
   --arrow-active-color: var(--arrow-color);
   --hover-bg: rgba(0, 0, 0, 0.1);
@@ -3353,6 +3364,23 @@ html body .height-full {
   font-weight: var(--weight);
   color: var(--color);
 }
+.to-select-clear {
+  flex-shrink: 0;
+  --color: var(--clear-color);
+  --width: var(--clear-size);
+  --height: var(--clear-size);
+  --size: var(--clear-size);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.to-select-clear:hover {
+  --color: var(--clear-hover-color);
+}
+.to-select:hover .to-select-clear,
+.to-select:focus-within .to-select-clear {
+  opacity: 1;
+}
 .to-select-arrow {
   flex-shrink: 0;
   width: var(--arrow-size);
@@ -3376,6 +3404,22 @@ html body .height-full {
   margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
   --height: var(--tag-height);
 }
+.to-select-tag.is-collapse {
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+}
+.to-select-tag.is-collapse .to-tag {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+.to-select-overflow {
+  --height: var(--tag-height);
+  margin-top: calc((var(--el-height) - var(--tag-height)) / 2);
+  margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
+  flex-shrink: 0;
+  color: var(--overflow-color);
+}
 .to-select-option {
   --bg-size: 100% 100%;
 }
@@ -3512,6 +3556,9 @@ html body .height-full {
 .to-select.is-multiple .to-select-tag:has(.to-tag) {
   padding-bottom: calc((var(--height) - var(--tag-height)) / 2);
 }
+.to-select.is-multiple .to-select-tag.is-collapse:has(.to-tag) {
+  padding-bottom: 0;
+}
 .to-select.is-filterable .to-select-content {
   padding-left: 0;
   padding-top: 0;
@@ -3726,7 +3773,7 @@ html body .height-full {
   --size: 1.17em;
   --weight: bold;
   --gap: 0.5em;
-  --lh: 1em;
+  --lh: 1.25em;
   --radius: 0;
   --border: 0 none;
   --hover-border: var(--border);
@@ -3738,8 +3785,8 @@ html body .height-full {
   --fn-gap: 0.5em;
   --tip-color: var(--color-fg);
   --tip-size: 1em;
-  --icon-width: 0;
-  --icon-height: 0;
+  --icon-width: auto;
+  --icon-height: auto;
   --icon-bg: none;
   --icon-radius: 0;
   --icon-bg-size: 100% 100%;
@@ -3793,6 +3840,7 @@ html body .height-full {
 .to-header-tip {
   color: var(--tip-color);
   font-size: var(--tip-size);
+  line-height: normal;
 }
 .to-header-title {
   line-height: var(--lh);
@@ -3993,13 +4041,15 @@ html body .height-full {
   --radius: var(--radius-fe);
   --weight: normal;
   --gap: 0;
+  --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
+  --clear-width: var(--clear-height);
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
   --suffix-padding: 0;
-  --suffix-gap: 1em;
+  --suffix-gap: 0;
   --prefix-text-padding: 0 0 0 1em;
   --prefix-text-bg: none;
   --prefix-text-bg-size: 100% 100%;
@@ -4016,10 +4066,12 @@ html body .height-full {
   --suffix-text-size: 1em;
   --suffix-text-weight: normal;
   --suffix-text-lh: var(--height);
+  --suffix-icon-height: var(--height);
   --count-color: var(--color-fg-fade);
   --count-size: 1em;
   --count-padding: 0;
   --count-lh: var(--height);
+  --count-align: center;
   --lh: 1.5em;
   --fn-padding: 0 1em 1em;
   --fn-gap: 1em;
@@ -4028,7 +4080,7 @@ html body .height-full {
   --focus-border: var(--border);
   --focus-bg: var(--bg);
   --focus-color: var(--color);
-  --focus-shadow: none;
+  --focus-shadow: var(--shadow);
   --hover-border: var(--border);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-color: var(--color);
@@ -4046,13 +4098,14 @@ html body .height-full {
   padding: var(--padding);
   width: var(--width);
   height: var(--height);
+  box-shadow: var(--shadow);
 }
 .to-input-wrapper {
   width: 100%;
   height: 100%;
   color: var(--color);
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
@@ -4087,7 +4140,7 @@ html body .height-full {
   margin: var(--clear-margin);
   --color: var(--color-fg-fade);
   --height: var(--clear-height);
-  --width: var(--clear-height);
+  --width: var(--clear-width);
 }
 .to-input-box {
   width: 100%;
@@ -4130,8 +4183,13 @@ html body .height-full {
   padding: var(--prefix-padding);
 }
 .to-input-suffix {
+  gap: var(--suffix-gap);
   padding: var(--suffix-padding);
 }
+.to-input-suffix > .to-icon {
+  --width: var(--suffix-icon-height);
+  --height: var(--suffix-icon-height);
+}
 .to-input-prefix-text {
   display: flex;
   padding: var(--prefix-text-padding);
@@ -4139,12 +4197,14 @@ html body .height-full {
   background-size: var(--prefix-text-bg-size);
   border-right: var(--prefix-text-border);
   font-weight: var(--prefix-text-weight);
-  font-size: var(--prefix-text-size);
   line-height: var(--prefix-text-lh);
 }
-.to-input-suffix-text span {
+.to-input-prefix-text span {
   font-size: var(--prefix-text-size);
 }
+.to-input-suffix-text span {
+  font-size: var(--suffix-text-size);
+}
 .to-input-suffix-text {
   padding: var(--suffix-text-padding);
   background: var(--suffix-text-bg);
@@ -4170,6 +4230,7 @@ html body .height-full {
   height: auto;
   min-height: 0;
   display: flex;
+  align-items: flex-start;
 }
 .to-input.type-textarea .to-input-box {
   resize: none;
@@ -4188,7 +4249,7 @@ html body .height-full {
   flex: 1;
   gap: var(--suggestion-gap);
 }
-.to-input-suggestion .to-button {
+.to-input-suggestion-item {
   --border: 0 none;
 }
 .to-input::before {
@@ -4240,6 +4301,7 @@ html body .height-full {
   font-weight: var(--count-weight);
   padding: var(--count-padding);
   line-height: var(--count-lh);
+  align-self: var(--count-align);
 }
 .to-input-count:only-child {
   flex: 1;
@@ -4247,10 +4309,16 @@ html body .height-full {
 .to-input-count-text {
   font-size: var(--count-size);
 }
+.to-input.type-textarea {
+  --count-align: flex-end;
+}
 .to-input.type-textarea .to-input-count {
   display: block;
   text-align: right;
 }
+.to-input.type-textarea:has(.to-input-fn) {
+  min-height: 8em;
+}
 .to-input.is-link {
   cursor: pointer;
 }
@@ -5644,7 +5712,11 @@ html body .height-full {
   --radius: 0;
   --title-color: var(--color-fg);
   --title-weight: bold;
-  --title-size: 1em;
+  --title-size: 1.25em;
+  --title-lh: var(--item-height);
+  --title-divider: 0 none;
+  --title-divider-height: 1em;
+  --title-divider-margin: 0;
   --divider: 0 none;
   --fn-radius: 0;
   --fn-bg: none;
@@ -5652,7 +5724,6 @@ html body .height-full {
   --fn-padding: 0;
   --fn-gap: 0.5em;
   --list-gap: 0;
-  --item-gap: 0;
   --item-width: auto;
   --item-height: 3em;
   --item-padding: 0 1em;
@@ -5669,16 +5740,19 @@ html body .height-full {
   --item-size: 1em;
   --item-weight: normal;
   --item-align: left;
+  --item-valign: center;
+  --item-icon-margin: 0.5em;
   --item-left-bg: none;
-  --item-left-width: none;
+  --item-left-width: auto;
+  --item-left-height: 100%;
   --item-right-bg: none;
-  --item-right-width: none;
+  --item-right-width: auto;
+  --item-right-height: 100%;
   --item-content-bg: none;
-  --item-content-gap: 0.5em;
   --item-content-bg-size: 100% 100%;
-  --item-divider-width: 0;
-  --item-divider-color: var(--color-border);
+  --item-divider: 0 none;
   --item-divider-height: 1em;
+  --item-divider-width: 0;
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
   --item-hover-border: var(--item-border);
@@ -5686,8 +5760,9 @@ html body .height-full {
   --item-hover-border-bottom: var(--item-hover-border);
   --item-hover-border-left: var(--item-hover-border);
   --item-hover-border-right: var(--item-hover-border);
-  --item-hover-left-bg: none;
-  --item-hover-right-bg: none;
+  --item-hover-content-bg: var(--item-content-bg);
+  --item-hover-left-bg: var(--item-left-bg);
+  --item-hover-right-bg: var(--item-right-bg);
   --item-active-color: var(--item-color);
   --item-active-bg: rgba(0, 0, 0, 0.2);
   --item-active-border: var(--item-border);
@@ -5711,19 +5786,24 @@ html body .height-full {
   --item-on-weight: var(--item-weight);
   --item-on-left-bg: var(--item-left-bg);
   --item-on-left-width: var(--item-left-width);
+  --item-on-left-height: var(--item-left-height);
   --item-on-right-bg: var(--item-right-bg);
   --item-on-right-width: var(--item-right-width);
+  --item-on-right-height: var(--item-right-height);
   --item-on-content-bg: var(--item-content-bg);
-  --item-on-divider-width: var(--item-divider-width);
-  --item-on-divider-color: var(--item-divider-color);
+  --item-on-divider: var(--item-divider);
   --item-on-divider-height: var(--item-divider-height);
+  --item-on-divider-width: var(--item-divider-width);
   --item-disabled-color: #d6d6d6;
+  --item-remove-margin: 0.5em;
+  --item-count-margin: 0.5em;
   --indicator-height: 0;
   --indicator-width: 100%;
   --indicator-radius: 0;
   --indicator-bg: none;
   --indicator-bg-size: 100% 100%;
   --indicator-order: 2;
+  --indicator-margin: 0;
   --list-scroll-area-height: 0.5em;
   --list-scroll-height: 0.2em;
   --list-scroll-border: 0 none;
@@ -5783,10 +5863,23 @@ html body .height-full {
   z-index: 0;
   position: relative;
 }
+.to-tab-title {
+  line-height: var(--title-lh);
+}
 .to-tab-title-text {
   color: var(--title-color);
   font-weight: var(--title-weight);
   font-size: var(--title-size);
+  display: flex;
+  align-items: center;
+}
+.to-tab-title-text:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: var(--title-divider-height);
+  border-right: var(--title-divider);
+  margin: var(--title-divider-margin);
 }
 .to-tab-tab {
   display: flex;
@@ -5848,6 +5941,7 @@ html body .height-full {
   vertical-align: top;
   position: relative;
   gap: var(--list-gap);
+  align-items: var(--item-valign);
 }
 .to-tab.over-wrap .to-tab-wrapper {
   flex-wrap: wrap;
@@ -5862,7 +5956,6 @@ html body .height-full {
 }
 .to-tab-item {
   width: var(--item-width);
-  gap: var(--item-gap);
   height: var(--item-height);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -5882,6 +5975,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --color: inherit;
+  margin-right: var(--item-icon-margin);
 }
 .to-tab-item-pic {
   --width: 2em;
@@ -5897,20 +5991,20 @@ html body .height-full {
 .to-tab-item-main:after {
   content: '';
   width: var(--item-divider-width);
-  background: var(--item-divider-color);
+  border-right: var(--item-divider);
   height: var(--item-divider-height);
   align-self: center;
 }
 .to-tab-item-left {
   background: var(--item-left-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-left-height);
   width: var(--item-left-width);
 }
 .to-tab-item-right {
   background: var(--item-right-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-right-height);
   width: var(--item-right-width);
 }
 .to-tab-item-content {
@@ -5940,10 +6034,18 @@ html body .height-full {
   --radius: 50%;
   --cursor: default;
   visibility: hidden;
+  margin-left: var(--item-remove-margin);
 }
 .to-tab-item:hover .to-tab-item-remove {
   visibility: visible;
 }
+.to-tab-item-count {
+  margin-left: var(--item-count-margin);
+  --radius: 50%;
+  --size: 0.8em;
+  --width: 0.8em;
+  --height: 0.8em;
+}
 .to-tab-indicator {
   order: var(--indicator-order);
   margin: 0 auto;
@@ -5952,6 +6054,7 @@ html body .height-full {
   background: var(--indicator-bg);
   background-size: var(--indicator-bg-size);
   border-radius: var(--indicator-radius);
+  margin-top: var(--indicator-margin);
   position: relative;
   visibility: hidden;
 }
@@ -5971,8 +6074,7 @@ html body .height-full {
   z-index: 1;
 }
 .to-tab-item.is-on .to-tab-item-main:after {
-  width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-on .to-tab-indicator {
@@ -5980,11 +6082,15 @@ html body .height-full {
 }
 .to-tab-item.is-on .to-tab-item-left {
   background: var(--item-on-left-bg);
+  background-size: 100% 100%;
   width: var(--item-on-left-width);
+  height: var(--item-on-left-height);
 }
 .to-tab-item.is-on .to-tab-item-right {
   background: var(--item-on-right-bg);
+  background-size: 100% 100%;
   width: var(--item-on-right-width);
+  height: var(--item-on-right-height);
 }
 .to-tab-item.is-on .to-tab-item-content {
   padding: var(--item-on-padding);
@@ -5997,7 +6103,7 @@ html body .height-full {
 }
 .to-tab-item:has(+.is-on) .to-tab-item-main:after {
   width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-disabled .to-tab-item-label {
@@ -6013,6 +6119,10 @@ html body .height-full {
   border-left: var(--item-hover-border-left);
   border-right: var(--item-hover-border-right);
 }
+.to-tab-item:not(.is-on):hover .to-tab-item-content {
+  background: var(--item-hover-content-bg);
+  background-size: 100% 100%;
+}
 .to-tab-item:not(.is-on):hover .to-tab-item-label {
   color: var(--item-hover-color);
 }
@@ -6180,53 +6290,83 @@ html body .height-full {
   flex-direction: row;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-tab {
+.to-tab.dir-v > .to-tab-tab {
   flex-direction: column;
 }
-.to-tab.dir-v .to-tab-wrapper {
+.to-tab.dir-v > .to-tab-tab .to-tab-wrapper {
   flex-direction: column;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-divider {
+.to-tab.dir-v > .to-tab-tab .to-tab-divider {
   height: auto;
 }
-.to-tab.dir-v .to-tab-page {
-  flex: 1;
-}
-.to-tab.dir-v .to-tab-page .to-tab-page-item {
-  height: 100%;
-}
-.to-tab.dir-v .to-tab-item {
+.to-tab.dir-v > .to-tab-tab .to-tab-item {
   flex-direction: row;
 }
-.to-tab.dir-v .to-tab-indicator {
+.to-tab.dir-v > .to-tab-tab .to-tab-indicator {
   top: 50%;
   transform: translateY(-50%);
 }
-.to-tab.item-dir-v .to-tab-item-content {
+.to-tab.dir-v > .to-tab-page {
+  flex: 1;
+}
+.to-tab.dir-v > .to-tab-page .to-tab-page-item {
+  height: 100%;
+}
+.to-tab.item-dir-v > .to-tab-tab .to-tab-item-content {
   flex-direction: column;
 }
-.to-tab.position-left .to-tab-divider {
+.to-tab.position-left {
+  --item-left-width: auto;
+  --item-left-height: 0;
+  --item-right-width: auto;
+  --item-right-height: 0;
+  --item-divider-height: 0;
+  --item-divider-width: 100%;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-divider {
   inset: 0 0 0 auto;
   border-bottom: 0 none;
   border-right: var(--divider);
+  width: 0;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-main {
+  min-height: 0;
+  flex-direction: column;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-main:after {
+  border-right: 0 none;
+  border-bottom: var(--item-divider);
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-content {
+  min-height: 0;
+  justify-content: center;
+  align-items: center;
 }
-.to-tab.position-right .to-tab-divider {
+.to-tab.position-right {
+  --item-left-width: auto;
+  --item-left-height: 0;
+}
+.to-tab.position-right > .to-tab-tab .to-tab-divider {
   inset: 0 auto 0 0;
   border-bottom: 0 none;
   border-left: var(--divider);
+  width: 0;
 }
-.to-tab.position-bottom .to-tab-divider {
+.to-tab.position-bottom > .to-tab-tab .to-tab-divider {
   inset: 0 0 auto 0;
   border-bottom: 0 none;
   border-top: var(--divider);
 }
-.to-tab.position-bottom .to-tab-tab,
-.to-tab.position-right .to-tab-tab {
+.to-tab.position-bottom > .to-tab-tab .to-tab-item-main {
+  flex-direction: column;
+}
+.to-tab.position-bottom > .to-tab-tab,
+.to-tab.position-right > .to-tab-tab {
   order: 2;
 }
-.to-tab.position-bottom .to-tab-page,
-.to-tab.position-right .to-tab-page {
+.to-tab.position-bottom > .to-tab-page,
+.to-tab.position-right > .to-tab-page {
   order: 1;
 }
 .to-tab.item-width-avg .to-tab-wrapper {
@@ -6274,6 +6414,7 @@ html body .height-full {
   --body-even-color: var(--body-color);
   --body-even-bg: var(--body-bg);
   --action-gap: 1em;
+  --action-padding: 0;
   --radio-size: 1em;
   --radio-border: 1px solid var(--color-border);
   --on-radio-border: 0.35em solid var(--color-primary);
@@ -6478,7 +6619,7 @@ html body .height-full {
   content: '\e081';
 }
 .to-table-td.type-action {
-  padding: 0;
+  padding: var(--action-padding);
 }
 .to-table-action {
   display: flex;
@@ -7097,6 +7238,7 @@ html body .height-full {
   --item-radius: var(--radius-fe);
   --item-shadow: none;
   --item-gap: 0.5em;
+  --item-size: 1em;
   --item-hover-border: var(--item-border);
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
@@ -7234,6 +7376,7 @@ html body .height-full {
   text-overflow: ellipsis;
   white-space: nowrap;
   gap: var(--item-gap);
+  font-size: var(--item-size);
 }
 .to-segment-icon {
   --width: 1em;
@@ -7859,11 +8002,11 @@ html body .height-full {
   text-align: center;
   color: #4d5b65;
 }
-.to-icon.mode-tree-loading {
-  --size: 1.2em;
-  --width: 1.2em;
-  --height: 1.2em;
-  --loading: url(/pic-pro/img/loading-out.png);
+.to-tree-loading {
+  --size: 1em;
+  --width: 1em;
+  --height: 1em;
+  --loading: url(../img/loading.png);
   --loading-speed: 1s;
 }
 .to-param {
@@ -8144,7 +8287,9 @@ html body .height-full {
   background: var(--bg);
   background-size: var(--bg-size);
   cursor: pointer;
-  color: var(--color);
+}
+.to-cascader:empty {
+  height: 0;
 }
 .to-cascader::after {
   border: var(--border);
@@ -8168,6 +8313,7 @@ html body .height-full {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  color: var(--color);
 }
 .to-cascader-arrow {
   flex-shrink: 0;
@@ -8203,11 +8349,29 @@ html body .height-full {
 .to-cascader:active .to-cascader-arrow:before {
   color: var(--active-arrow-color);
 }
-.to-cascader.is-placeholder {
+.to-cascader.is-placeholder .to-cascader-content {
   color: var(--placeholder-color);
 }
 .to-cascader-group {
   display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.to-cascader-layer {
+  width: auto !important;
+}
+.to-cascader-options {
+  display: flex;
+}
+.to-cascader-group-content {
+  flex: 1;
+  width: 14em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.to-cascader-group-child {
+  flex: 1;
 }
 .to-cascader-item {
   cursor: pointer;
@@ -8762,14 +8926,14 @@ html body .height-full {
   vertical-align: middle;
 }
 @media screen {
-  .s_pad .to-print,
-  .s_pc .to-print {
+  .media-pad .to-print,
+  .media-pc .to-print {
     height: 100%;
     position: relative;
     background: #f7f7f7;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8777,8 +8941,8 @@ html body .height-full {
     bottom: 4.29em;
     overflow: auto;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     width: 50em;
     position: relative;
     margin: 2em auto;
@@ -8788,8 +8952,8 @@ html body .height-full {
     border: 1px solid #d9d9d9;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_pad .to-print > .fn,
-  .s_pc .to-print > .fn {
+  .media-pad .to-print > .fn,
+  .media-pc .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8800,21 +8964,21 @@ html body .height-full {
     border-top: 1px solid #cccccc;
     text-align: center;
   }
-  .s_pad .to-print > .fn button,
-  .s_pc .to-print > .fn button {
+  .media-pad .to-print > .fn button,
+  .media-pc .to-print > .fn button {
     min-width: 8.57em;
     margin: 0 0.36em;
   }
-  .s_pad .to-print-h > .content .paper,
-  .s_pc .to-print-h > .content .paper {
+  .media-pad .to-print-h > .content .paper,
+  .media-pc .to-print-h > .content .paper {
     width: 70em;
     min-height: 50em;
   }
-  .s_phone .to-print {
+  .media-phone .to-print {
     height: 100%;
     position: relative;
   }
-  .s_phone .to-print > .content {
+  .media-phone .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8822,13 +8986,13 @@ html body .height-full {
     bottom: 3.57em;
     overflow: auto;
   }
-  .s_phone .to-print > .content .paper {
+  .media-phone .to-print > .content .paper {
     padding: 1.43em;
     background: #fff;
     margin-bottom: 1.43em;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_phone .to-print > .fn {
+  .media-phone .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8836,7 +9000,7 @@ html body .height-full {
     width: 100%;
     text-align: center;
   }
-  .s_phone .to-print > .fn button {
+  .media-phone .to-print > .fn button {
     border-radius: 0;
     flex: 1;
     height: 3.13em;
@@ -8844,8 +9008,8 @@ html body .height-full {
   }
 }
 @media print {
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     font-size: 14px;
   }
   .to-print > .fn {
@@ -8857,7 +9021,7 @@ html body .height-full {
     background: transparent;
     font-size: 12px;
   }
-  .to-scroll {
+  .to-scroll-content {
     overflow: visible !important;
     position: relative !important;
     top: auto;
@@ -8865,11 +9029,12 @@ html body .height-full {
     bottom: auto;
     right: auto;
   }
-  .to-table .body {
+  .to-table-wrapper {
     overflow: visible !important;
+    height: auto;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: relative;
     top: auto;
     left: auto;
@@ -8877,26 +9042,21 @@ html body .height-full {
     right: auto;
     overflow: visible;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     page-break-after: always;
   }
 }
 @page {
   margin: 1.5cm;
 }
+.to-print .to-table-wrapper {
+  overflow: visible !important;
+  height: auto;
+}
 .to-print .to-hide-print {
   display: none;
 }
-.to-print .to-title {
-  font-weight: bold;
-}
-.to-print .to-title .text {
-  color: #191919;
-}
-.to-print .to-box {
-  border-color: #000;
-}
 .to-print .to-table {
   background: none !important;
   border: 1px solid #d9d9d9;
@@ -8940,18 +9100,13 @@ html body .height-full {
 .to-print .to-table td.action {
   display: none;
 }
-.to-print .to-table .leftTop,
-.to-print .to-table .rightTop,
-.to-print .to-table .right,
-.to-print .to-table .top {
+.to-print .to-table .to-table-top,
+.to-print .to-table .to-table-left,
+.to-print .to-table .to-table-right,
+.to-print .to-table .to-table-left-top,
+.to-print .to-table .to-table-right-top {
   display: none;
 }
-.to-print .to-table .body {
-  height: auto;
-}
-.to-print .to-table .body .wrapper {
-  display: block;
-}
 .to-print .to-table-print-s {
   font-size: 86.57%;
 }
@@ -8961,25 +9116,6 @@ html body .height-full {
 .to-print .to-table-print-xxs {
   font-size: 66.67%;
 }
-.to-print .to-list-line > ul > li:before {
-  border-color: #000 !important;
-}
-.to-print .to-list-border {
-  border-color: #000 !important;
-}
-.to-print .to-param .label {
-  color: #191919;
-}
-.to-print .to-param-border {
-  border: 1px solid #d9d9d9;
-}
-.to-print .to-article {
-  padding: 0;
-}
-html:not(.s_phone) .to-print .to-table tbody tr.on td,
-html:not(.s_phone) .to-print .to-table tbody tr.on td * {
-  color: #000 !important;
-}
 .to-export-layer {
   --padding: 1em;
 }
@@ -9071,80 +9207,75 @@ html:not(.s_phone) .to-print .to-table tbody tr.on td * {
   --radius: 50%;
 }
 .to-rate {
-  --size: 2em;
-  --gap: 0.25em;
-  --color: var(--primary);
-  --off-color: #ddd;
-  --hover-color: var(--primary-light-1);
-  --hover-off-color: var(--primary-light-5);
+  --item-gap: 0.25em;
+  --item-family: 'icon';
+  --item-on-family: 'icon-fill';
+  --item-size: 1em;
+  --item-color: #ddd;
+  --item-on-color: var(--primary);
   --score-color: var(--color-fg);
   --score-size: 1em;
+  --score-margin: 0.5em;
   --score-weight: normal;
-  --score-gap: 0.5em;
 }
 .to-rate {
   display: inline-flex;
   align-items: center;
   vertical-align: top;
-  gap: var(--gap);
 }
-.to-rate.is-readonly {
+.to-rate-group {
+  display: flex;
+  gap: var(--item-gap);
+}
+.to-rate.is-disabled {
   cursor: default;
 }
-.to-rate:not(.is-readonly) {
+.to-rate:not(.is-disabled) .to-rate-item {
   cursor: pointer;
 }
 .to-rate-item {
-  font-size: var(--size);
   line-height: 1;
-  color: var(--off-color);
   position: relative;
   display: inline-block;
-  transition: color 0.2s ease;
+  width: var(--item-size);
+  height: var(--item-size);
 }
-.to-rate-item-star:after {
-  content: '\2605';
-}
-.to-rate-item.is-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on .to-rate-item-star {
-  position: relative;
-  display: inline-block;
-  color: var(--off-color);
-}
-.to-rate-item.is-half-on .to-rate-item-star:before {
-  content: '\2605';
+.to-rate-icon {
   position: absolute;
   left: 0;
   top: 0;
-  width: 50%;
-  overflow: hidden;
-  color: var(--color);
+  --size: var(--item-size);
+  --width: var(--item-size);
+  --height: var(--item-size);
 }
-.to-rate:hover .to-rate-item {
-  color: var(--hover-off-color);
+.to-rate-icon.is-off {
+  --family: var(--item-family);
+  color: var(--item-color);
 }
-.to-rate:hover .to-rate-item.is-hover {
-  color: var(--color);
+.to-rate-icon.is-on {
+  --family: var(--item-on-family);
+  overflow: hidden;
+  color: var(--item-on-color);
+  clip-path: inset(0 100% 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item {
-  color: var(--off-color);
+.to-rate-item.is-on .to-rate-icon.is-on {
+  clip-path: inset(0 0 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item.is-on,
-.to-rate.is-readonly:hover .to-rate-item.is-half-on {
-  color: var(--color);
+.to-rate-item.is-half-on .to-rate-icon.is-on {
+  clip-path: inset(0 50% 0 0);
+}
+.to-rate:not(.is-disabled):hover .to-rate-item.is-hover .to-rate-icon.is-on {
+  color: var(--item-on-color);
 }
 .to-rate-score {
-  font-size: var(--score-size);
-  color: var(--score-color);
   font-weight: var(--score-weight);
-  margin-left: var(--score-gap);
+  color: var(--score-color);
+  margin-left: var(--score-margin);
   line-height: 1;
 }
+.to-rate-score-text {
+  font-size: var(--score-size);
+}
 .to-dis.type-opacity {
   opacity: 0.5;
   pointer-events: inherit;