@cldemo/ui-kit 1.0.17 → 1.1.0

package/buildLibs/styles/Mobile/ClPickerArea.css

@@ -0,0 +1,286 @@
+.panel-picker {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--cl-bg, #ffffff);
+  font-size: 16px;
+  color: var(--cl-text-primary, #323233);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* 顶部栏 */
+.picker-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  flex-shrink: 0;
+}
+
+.picker-toolbar--bottom {
+  border-top: 1px solid var(--cl-border, #cfcfcf);
+}
+
+.picker-toolbar-btn {
+  height: 100%;
+  padding: 0 16px;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: var(--cl-text-secondary, #666666);
+  cursor: pointer;
+  line-height: 44px;
+}
+
+.picker-toolbar-btn--cancel:active {
+  opacity: 0.6;
+}
+
+.picker-toolbar-btn--confirm {
+  color: var(--cl-primary, #1088f0);
+  font-weight: 500;
+}
+
+.picker-toolbar-btn--confirm:active {
+  opacity: 0.6;
+}
+
+.picker-toolbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--cl-text-primary, #323233);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 列容器 */
+.picker-columns {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+/* 选中行框线 */
+.picker-frame {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  border-top: 1px solid var(--cl-border, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 上下渐变遮罩 */
+.picker-columns::before,
+.picker-columns::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 22%;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.picker-columns::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--cl-bg, #ffffff), var(--cl-white-alpha-60, rgba(255, 255, 255, 0.6)));
+}
+
+.picker-columns::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--cl-bg, #ffffff), var(--cl-white-alpha-60, rgba(255, 255, 255, 0.6)));
+}
+
+/* 单列 */
+.picker-column {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 列间分隔线 */
+.picker-column + .picker-column::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  height: 40%;
+  width: 1px;
+  background: var(--cl-border, #cfcfcf);
+  z-index: 3;
+}
+
+.picker-column-list {
+  width: 100%;
+  will-change: transform;
+}
+
+.picker-column-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  font-size: 16px;
+  color: var(--cl-text-primary, #323233);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transform-origin: center center;
+  backface-visibility: hidden;
+}
+
+.picker-column-item--active {
+  font-weight: 600;
+  color: var(--cl-text-primary, #323233);
+}
+
+.picker-column-item--disabled {
+  color: var(--cl-text-disabled, #c8c9cc);
+}
+
+/* 加载遮罩 */
+.picker-loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cl-white-alpha-80, rgba(255, 255, 255, 0.7));
+  z-index: 4;
+}
+
+/* 只读态禁止手势，视觉降透明提示 */
+.picker-readonly {
+  cursor: default;
+}
+/* PickerArea 省市区选择样式 */
+.panel-picker-area-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cl-overlay, rgba(0, 0, 0, 0.7));
+  transition: opacity var(--pickerarea-duration, 300ms) ease;
+}
+
+.panel-picker-area {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cl-bg, #ffffff);
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+
+/* 顶部栏 */
+.pickerarea-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+}
+
+.pickerarea-header-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--cl-text-primary, #323233);
+}
+
+.pickerarea-header-btn {
+  font-size: 14px;
+  color: var(--cl-text-secondary, #666666);
+  cursor: pointer;
+}
+
+.pickerarea-header-btn--confirm {
+  color: var(--cl-primary, #1088f0);
+}
+
+/* 三列滚轮区（复用 Picker 的 cl-picker-column：惯性滑动 + 吸附 + 3D 效果） */
+.pickerarea-columns {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  /* 列高 = itemHeight(44) × showNum(6) */
+  height: 264px;
+}
+
+/* 上下渐变遮罩（与 Picker .picker-columns 一致的滚轮视觉） */
+.pickerarea-columns::before,
+.pickerarea-columns::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 22%;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.pickerarea-columns::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--cl-bg, #ffffff), var(--cl-white-alpha-60, rgba(255, 255, 255, 0.6)));
+}
+
+.pickerarea-columns::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--cl-bg, #ffffff), var(--cl-white-alpha-60, rgba(255, 255, 255, 0.6)));
+}
+
+/* 选中项品牌色（覆盖 Picker 默认高亮） */
+.pickerarea-column .picker-column-item--active {
+  color: var(--cl-primary, #1088f0);
+}
+
+/* 内置数据加载中 */
+.pickerarea-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.pickerarea-loading-text {
+  font-size: 13px;
+  color: var(--cl-text-secondary, #666666);
+}
+
+/* 遮罩淡入淡出 */
+.pickerarea-fade-enter-active,
+.pickerarea-fade-leave-active {
+  transition: opacity var(--pickerarea-duration, 300ms) ease;
+}
+
+.pickerarea-fade-enter-from,
+.pickerarea-fade-leave-to {
+  opacity: 0;
+}
+
+/* 面板从底部滑入 */
+.pickerarea-slide-enter-active,
+.pickerarea-slide-leave-active {
+  transition: transform var(--pickerarea-duration, 300ms) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.pickerarea-slide-enter-from,
+.pickerarea-slide-leave-to {
+  transform: translateY(100%);
+}
+

package/buildLibs/styles/Mobile/ClPickerCascader.css

@@ -112,19 +112,22 @@
 .popup-slide-right-leave-to {
   transform: translate3d(100%, -50%, 0);
 }
-/* 级联面板 */
+/* 级联面板：列布局，头部与 tab 行固定，仅选项区滚动 */
 .panel-picker-cascader {
   width: 100%;
   box-sizing: border-box;
   background: var(--cl-bg, #ffffff);
   border-radius: 16px;
   max-height: 80vh;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 /* 头部 */
 .panel-pickercascader__header {
   height: 44px;
+  flex-shrink: 0;
   position: relative;
   display: flex;
   align-items: center;
@@ -164,6 +167,7 @@
 /* tab 行 */
 .panel-pickercascader__tabs {
   height: 44px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 0 8px;
@@ -192,9 +196,15 @@
   color: var(--cl-text-disabled, #c8c9cc);
 }
 
-/* 选项列表 */
+/* 选项列表：固定高度 + 区内滚动，各级选项数量不同时面板高度保持稳定
+   高度可用 --cl-pickercascader-options-height 覆盖（默认 5 行 × 48px + 上下内边距 8px） */
 .panel-pickercascader__options {
   padding: 4px 0;
+  height: var(--cl-pickercascader-options-height, 248px);
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .panel-pickercascader__option {
@@ -235,9 +245,11 @@
   color: var(--cl-text-disabled, #c8c9cc);
 }
 
-/* 空提示 */
+/* 空提示：与选项区同高，避免异步加载填充前后面板高度跳变 */
 .panel-pickercascader__empty {
-  height: 120px;
+  height: var(--cl-pickercascader-options-height, 248px);
+  box-sizing: border-box;
+  flex: 0 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;

package/buildLibs/styles/Mobile/ClPullToRefresh.css

@@ -199,7 +199,7 @@
   justify-content: center;
   padding: 12px 0 16px;
   font-size: 13px;
-  color: #bbb;
+  color: var(--cl-text-tertiary, #aaaaaa);
   flex-shrink: 0;
 }
 

package/buildLibs/styles/Mobile/ClScrollCard.css

@@ -136,6 +136,9 @@
 /* 每条卡片容器 */
 .panel-scroll-card .scrollcard-item {
   width: 100%;
+  /* 列表为 flex 列且高度受限（button/不分页模式 overflow:auto）时，
+     默认 flex-shrink:1 会把各条目等比压缩成几像素，必须禁止收缩 */
+  flex-shrink: 0;
   background: var(--cl-bg, #ffffff);
   border-radius: 12px;
   box-shadow: 0 2px 8px var(--cl-shadow-sm, rgba(0, 0, 0, 0.04));
@@ -144,20 +147,14 @@
 }
 
 /* 卡片正文区（默认插槽容器） */
-.panel-scroll-card .scrollcard-item > :not(.scrollcard-elastic-head):not(.scrollcard-elastic-body) {
+.panel-scroll-card .scrollcard-item > :not(.scrollcard-elastic-body) {
   width: 100%;
   box-sizing: border-box;
 }
 
-/* 展开图标行 */
-.panel-scroll-card .scrollcard-elastic-head {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  color: var(--cl-text-secondary, #666666);
+/* 展开触发区：默认插槽内带此类名的元素可点击展开（类名由 elasticClickKey 指定） */
+.panel-scroll-card .scrollcard-click-elastic {
   cursor: pointer;
-  border-top: 1px solid var(--cl-bg-muted, #f5f5f5);
 }
 
 /* 展开区 */
@@ -193,6 +190,30 @@
   font-size: 14px;
 }
 
+/* 底部状态区：常驻占位，滚到底必定可见提示 */
+.panel-scroll-card .scrollcard-statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 38px;
+  padding: 4px 0;
+  font-size: 13px;
+  color: var(--cl-text-tertiary, #aaaaaa);
+  flex-shrink: 0;
+}
+
+/* 已加载全部：用分割线包裹文案，宽度撑满以让两侧线延伸至卡片内边界。
+   margin 上下需覆盖为 0（Divider 的 margin prop 只控制左右，上下由自身 CSS 固定 16px） */
+.panel-scroll-card .scrollcard-statusbar-divider {
+  flex: 1;
+  align-self: stretch;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 13px;
+  color: var(--cl-text-tertiary, #aaaaaa);
+}
+
 /* 分页条 */
 .panel-scroll-card .scrollcard-pager {
   display: flex;
@@ -217,7 +238,7 @@
 }
 
 .panel-scroll-card .scrollcard-pager-btn:disabled {
-  color: #bbb;
+  color: var(--cl-text-tertiary, #aaaaaa);
   background: var(--cl-bg-subtle, #fafafa);
   cursor: not-allowed;
 }
@@ -330,7 +351,7 @@
   justify-content: center;
   padding: 12px 0 16px;
   font-size: 13px;
-  color: #bbb;
+  color: var(--cl-text-tertiary, #aaaaaa);
   flex-shrink: 0;
 }
 
@@ -359,6 +380,133 @@
   user-select: none;
   -webkit-user-select: none;
 }
+/* Divider 分割线样式 */
+.panel-divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  color: var(--divider-text-color, var(--cl-text-secondary, #666666));
+  font-size: 14px;
+}
+
+/* 左右两条线（无文本时 flex:1 拼成整线，有文本时夹住文本） */
+.panel-divider::before,
+.panel-divider::after {
+  flex: 1;
+  content: '';
+  border-style: solid;
+  border-width: 1px 0 0;
+  border-color: var(--divider-line-color, var(--cl-border, #cfcfcf));
+}
+
+.panel-divider--text::before {
+  margin-right: 16px;
+}
+
+.panel-divider--text::after {
+  margin-left: 16px;
+}
+
+/* 文本 */
+.divider-text {
+  display: inline-block;
+  padding: 0;
+  white-space: nowrap;
+}
+
+/* 虚线 */
+.panel-divider--dashed::before,
+.panel-divider--dashed::after {
+  border-style: dashed;
+}
+
+/* 文本位置 */
+.panel-divider--left::before {
+  max-width: 10%;
+}
+
+.panel-divider--right::after {
+  max-width: 10%;
+}
+
+/* 细线 */
+.panel-divider--hairline::before,
+.panel-divider--hairline::after {
+  border-width: 0.5px 0 0;
+}
+
+/* ===== gold 金色渐变线（theme="gold"） =====
+   无文本：居中 64px 短装饰线，两端透明渐隐
+   有文本：左右两段各占一半，由外向内渐隐，文字夹在中间 */
+
+/* --- 无文本：居中短线 --- */
+.panel-divider--gold {
+  justify-content: center;
+  /* --divider-glow：外圈本色；--divider-core：由本色向白推导的亮芯色 */
+  --divider-glow: var(--divider-line-color, #e6a23c);
+  --divider-core: color-mix(in srgb, var(--divider-glow), #ffffff 65%);
+}
+
+.panel-divider--gold::before {
+  flex: none;
+  width: 64px;
+  height: 2px;
+  border: none;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 50%,
+    var(--divider-core) 65%,
+    transparent 100%
+  );
+}
+
+.panel-divider--gold::after {
+  display: none;
+}
+
+/* --- 有文本：左右各一半，两段均由外向内渐隐，中间留出文字 --- */
+.panel-divider--gold.panel-divider--text {
+  justify-content: center;
+}
+
+.panel-divider--gold.panel-divider--text::before,
+.panel-divider--gold.panel-divider--text::after {
+  display: block;
+  flex: 1;
+  width: auto;
+  max-width: 100px;
+  height: 2px;
+  border: none;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.panel-divider--gold.panel-divider--text::before {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 100%
+  );
+}
+
+.panel-divider--gold.panel-divider--text::after {
+  background: linear-gradient(
+    to left,
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 100%
+  );
+}
+
+.panel-divider--gold.panel-divider--text .divider-text {
+  display: inline-block;
+  flex: none;
+  padding: 0 6px;
+  color: var(--divider-text-color, var(--divider-core, #e6a23c));
+}
 .newtons-cradle[data-v-05c04027] {
   --uib-size: 30px;
   --uib-speed: 1.2s;