@cldemo/ui-kit 1.0.11 → 1.0.12

package/buildLibs/styles/Mobile/ClShareSheet.css

@@ -0,0 +1,203 @@
+/* 遮罩层 */
+.panel-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  transition: opacity var(--popup-duration, 300ms) ease;
+}
+
+/* 弹出层面板 */
+.panel-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background: #fff;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（老 Edge/IE），保留滚动能力 */
+  transition:
+    opacity var(--popup-duration, 300ms) ease,
+    transform var(--popup-duration, 300ms) ease;
+}
+
+/* 隐藏滚动条（Chrome / Safari / Edge），保留滚动能力 */
+.panel-popup::-webkit-scrollbar {
+  display: none;
+}
+
+/* 弹出位置 */
+.panel-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.panel-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.panel-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.panel-popup--left {
+  top: 50%;
+  left: 0;
+  transform: translate3d(0, -50%, 0);
+}
+
+.panel-popup--right {
+  top: 50%;
+  right: 0;
+  transform: translate3d(0, -50%, 0);
+}
+
+/* 圆角 */
+.panel-popup--round.panel-popup--center {
+  border-radius: 16px;
+}
+
+.panel-popup--round.panel-popup--top {
+  border-radius: 0 0 16px 16px;
+}
+
+.panel-popup--round.panel-popup--bottom {
+  border-radius: 16px 16px 0 0;
+}
+
+.panel-popup--round.panel-popup--left {
+  border-radius: 0 16px 16px 0;
+}
+
+.panel-popup--round.panel-popup--right {
+  border-radius: 16px 0 0 16px;
+}
+
+/* 底部安全区适配（iOS 刘海屏） */
+.panel-popup--safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 淡入淡出动画（center 面板与遮罩共用） */
+.popup-fade-enter-from,
+.popup-fade-leave-to {
+  opacity: 0;
+}
+
+/* 滑入动画（保留定位 transform 分量，如 left/right 的 translateY(-50%)） */
+.popup-slide-top-enter-from,
+.popup-slide-top-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.popup-slide-bottom-enter-from,
+.popup-slide-bottom-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.popup-slide-left-enter-from,
+.popup-slide-left-leave-to {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-slide-right-enter-from,
+.popup-slide-right-leave-to {
+  transform: translate3d(100%, -50%, 0);
+}
+/* ShareSheet 分享面板样式（面板定位/遮罩/过渡动画由 cl-popup 提供） */
+.panel-sharesheet {
+  background: #fff;
+}
+
+.sharesheet-title {
+  padding: 16px 16px 4px;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  font-weight: 500;
+}
+
+.sharesheet-description {
+  padding: 4px 16px 12px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+}
+
+/* 选项网格 */
+.sharesheet-options {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 8px 12px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.sharesheet-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 33.33%;
+  padding: 12px 4px;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.sharesheet-option:active {
+  opacity: 0.7;
+}
+
+.sharesheet-option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #f7f8fa;
+  font-size: 20px;
+  margin-bottom: 6px;
+}
+
+.sharesheet-option-name {
+  font-size: 12px;
+  color: #333;
+}
+
+.sharesheet-option-desc {
+  font-size: 10px;
+  color: #999;
+  margin-top: 2px;
+}
+
+/* 取消按钮 */
+.sharesheet-cancel {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  border: none;
+  border-top: 1px solid #f5f6f7;
+  background: transparent;
+  font-family: inherit;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.sharesheet-cancel:active {
+  opacity: 0.7;
+}
+

package/buildLibs/styles/Mobile/ClSidebar.css

@@ -0,0 +1,60 @@
+/* Sidebar 侧边导航样式 */
+.panel-sidebar {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  width: 80px;
+}
+
+.sidebar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 8px;
+  font-size: 13px;
+  color: #646566;
+  background: #f7f8fa;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.sidebar-item:active {
+  background: #ebedf0;
+}
+
+.sidebar-item--active {
+  color: #323233;
+  background: #fff;
+  font-weight: 600;
+}
+
+/* 激活左侧指示条 */
+.sidebar-item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  border-radius: 0 2px 2px 0;
+  background: #1989fa;
+}
+
+.sidebar-item-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: #ee0a24;
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  box-sizing: border-box;
+}
+

package/buildLibs/styles/Mobile/ClSidebarSelect.css

@@ -0,0 +1,61 @@
+/* SidebarSelect 侧栏选择样式 */
+.panel-sidebarselect {
+  display: flex;
+  height: 100%;
+  background: #fff;
+}
+
+/* 左侧分类栏 */
+.sidebarselect-left {
+  width: 90px;
+  background: #f7f8fa;
+  overflow-y: auto;
+}
+
+.sidebarselect-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 8px;
+  font-size: 13px;
+  color: #646566;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.sidebarselect-group--active {
+  background: #fff;
+  color: #323233;
+  font-weight: 600;
+}
+
+/* 右侧选项区 */
+.sidebarselect-right {
+  flex: 1;
+  padding: 8px 0;
+  overflow-y: auto;
+}
+
+.sidebarselect-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #323233;
+  cursor: pointer;
+}
+
+.sidebarselect-option:active {
+  background: #f7f8fa;
+}
+
+.sidebarselect-option--active {
+  color: #1989fa;
+}
+
+.sidebarselect-option-check {
+  color: #1989fa;
+  font-size: 16px;
+}
+

package/buildLibs/styles/Mobile/ClSignature.css

@@ -0,0 +1,51 @@
+.panel-signature {
+  --signature-height: 200px;
+  --signature-bg: #f8f8f8;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.panel-signature__content {
+  width: 100%;
+  height: var(--signature-height);
+  background: var(--signature-bg);
+  border: 1px dashed #c8c9cc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.panel-signature__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  cursor: crosshair;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.panel-signature__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.panel-signature__btn {
+  padding: 6px 16px;
+  font-size: 14px;
+  color: #666;
+  background: transparent;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+}
+
+.panel-signature__btn--confirm {
+  color: #fff;
+  background: #ee0a24;
+  border-color: #ee0a24;
+}
+

package/buildLibs/styles/Mobile/ClSteps.css

@@ -0,0 +1,117 @@
+/* Steps 步骤条样式 */
+.panel-steps {
+  display: flex;
+}
+
+.panel-steps--horizontal {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.panel-steps--vertical {
+  flex-direction: column;
+}
+
+.steps-item {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 8px;
+}
+
+/* 连接线 */
+.steps-item:not(.steps-item--last)::after {
+  content: '';
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--steps-inactive-color);
+}
+
+.steps-item.steps-item--active:not(.steps-item--last)::after {
+  background: var(--steps-active-color);
+}
+
+.panel-steps--vertical .steps-item {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.panel-steps--vertical .steps-item:not(.steps-item--last)::after {
+  top: 32px;
+  left: 15px;
+  width: 2px;
+  height: calc(100% - 24px);
+  background: var(--steps-inactive-color);
+}
+
+.panel-steps--vertical .steps-item.steps-item--active:not(.steps-item--last)::after {
+  background: var(--steps-active-color);
+}
+
+.steps-circle-wrap {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 6px;
+  background: var(--steps-inactive-color);
+  border-radius: 50%;
+  color: #969799;
+  font-size: 14px;
+}
+
+.steps-item--active .steps-circle-wrap {
+  background: var(--steps-active-color);
+  color: #fff;
+}
+
+.panel-steps--vertical .steps-circle-wrap {
+  margin-bottom: 0;
+  margin-right: 8px;
+}
+
+.steps-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.steps-circle {
+  font-weight: 500;
+}
+
+.steps-content {
+  min-width: 0;
+}
+
+.steps-title {
+  font-size: 14px;
+  color: #969799;
+  line-height: 1.5;
+}
+
+.steps-item--active .steps-title {
+  color: #333;
+  font-weight: 500;
+}
+
+.steps-desc {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #c8c9cc;
+  line-height: 1.5;
+}
+
+.steps-item--active .steps-desc {
+  color: #969799;
+}
+

package/buildLibs/styles/Mobile/ClSwipe.css

@@ -0,0 +1,42 @@
+/* Swipe 轮播样式 */
+.panel-swipe {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  touch-action: pan-y;
+}
+
+.swipe-track {
+  display: flex;
+  height: 100%;
+}
+
+.swipe-track > * {
+  flex: 0 0 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* 指示器 */
+.swipe-indicators {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+}
+
+.swipe-indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  transition: width 0.2s ease, background 0.2s ease;
+}
+
+.swipe-indicator--active {
+  width: 18px;
+  background: #1989fa;
+}
+

package/buildLibs/styles/Mobile/ClTabM.css

@@ -0,0 +1,54 @@
+/* TabM 标签页样式 */
+.panel-tabm {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.tabm-nav {
+  position: relative;
+  display: flex;
+  border-bottom: 1px solid #ebedf0;
+}
+
+.tabm-nav-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 8px;
+  font-size: 14px;
+  color: var(--tabm-inactive-color);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.tabm-nav-item--active {
+  color: var(--tabm-active-color);
+  font-weight: 500;
+}
+
+.tabm-nav-item--disabled {
+  color: #c8c9cc;
+  cursor: not-allowed;
+}
+
+/* 底部指示线 */
+.tabm-nav-line {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  background: var(--tabm-active-color);
+  transition: left 0.3s ease, width 0.3s ease;
+}
+
+.tabm-nav-line--no-animated {
+  transition: none;
+}
+
+.tabm-content {
+  flex: 1;
+  padding: 16px;
+}
+