@cldemo/ui-kit 1.0.17 → 1.1.1

package/buildLibs/styles/Element/ClLoadScreen.css

@@ -117,37 +117,6 @@
   transform: scale(0.75);
   transform-origin: center center;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 /* LoadScreen 加载遮罩样式（遮罩层由 Overlay 组件提供） */
 .loadScreen-container {
   position: absolute;

package/buildLibs/styles/Element/ClModal.css

@@ -204,15 +204,6 @@
   color: inherit;
 }
 
-/* -- .fade -- */
-/* 已抽至 ../../CommonCss/fade.css（Modal 与 Tooltip 指令共用），
-   由 Index.vue / BaseTransition.vue 显式 import，此处不再重复定义 */
-
-/* -- .modal-open -- */
-.modal-open {
-  overflow: hidden;
-}
-
 /* -- .close -- */
 .close {
   float: right;
@@ -370,37 +361,6 @@ button.close {
 .overlay-fade-leave-from {
   opacity: 0.3;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 /* Load 组件主容器样式 */
 .panel-load {
   position: relative;

package/buildLibs/styles/Element/ClTags.css

@@ -11,7 +11,7 @@
   margin-right: 5px;
   padding: 4px 8px;
   background-color: transparent;
-  color: #797979;
+  color: var(--cl-text-secondary, #666666);
   font-size: 13px;
   font-weight: 400;
   cursor: default;
@@ -61,7 +61,7 @@
 .panel-tags .tag.tag-disabled:hover {
   background-color: var(--cl-bg-muted, #f5f5f5) !important;
   border-color: var(--cl-border, #cfcfcf);
-  color: #797979;
+  color: var(--cl-text-secondary, #666666);
 }
 
 .panel-tags .tag.tag-disabled .tag-close:hover {
@@ -104,40 +104,135 @@
   color: var(--cl-danger, #ee0a24);
 }
 
-/* code theme */
-.tags-code {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
+/* 语义色：实心（默认）= 彩色底 + 白字；空心 = 白底 + 彩边 + 彩字。均取 token，自动跟随明暗主题 */
+.panel-tags .tag.tag-solid {
+  border-style: solid;
+  border-width: 1px;
+  color: var(--cl-white, #ffffff);
 }
 
-.tags-code .tag-code {
-  display: inline-flex;
-  align-items: center;
-  color: #5e6d82;
-  background-color: var(--cl-bg-muted, #f5f5f5);
-  margin: 0 4px 2px 0;
-  padding: 3px 6px;
-  border-radius: 4px;
-  font-size: 12px;
-  word-break: break-word;
-  cursor: default;
+.panel-tags .tag.tag-plain {
+  background-color: var(--cl-bg, #ffffff);
 }
 
-.tags-code .tag-code:first-child {
-  margin-left: 0;
+.panel-tags .tag.tag-round {
+  border-radius: 999px;
 }
 
-.tags-code .tag-code .tag-close {
-  margin-left: 4px;
-  flex-shrink: 0;
-  color: #8c8c8c;
-  cursor: pointer;
+/* 尺寸：m 为默认外观（不加类），仅覆盖 s / l 两档 */
+.panel-tags.tags-size-s .tag {
+  padding: 0 2px;
   font-size: 12px;
-  transition: all 0.3s linear;
 }
 
-.tags-code .tag-code .tag-close:hover {
+.panel-tags.tags-size-s .tag .tag-close {
+  margin-left: 2px;
+  font-size: 10px;
+}
+
+.panel-tags.tags-size-l .tag {
+  padding: 6px 12px;
+  font-size: 14px;
+}
+
+.panel-tags .tag.tag-solid.tag-color-primary {
+  background-color: var(--cl-primary, #1088f0);
+  border-color: var(--cl-primary, #1088f0);
+}
+
+.panel-tags .tag.tag-solid.tag-color-success {
+  background-color: var(--cl-success, #12b76a);
+  border-color: var(--cl-success, #12b76a);
+}
+
+.panel-tags .tag.tag-solid.tag-color-warning {
+  background-color: var(--cl-warning, #f79009);
+  border-color: var(--cl-warning, #f79009);
+}
+
+.panel-tags .tag.tag-solid.tag-color-danger {
+  background-color: var(--cl-danger, #ee0a24);
+  border-color: var(--cl-danger, #ee0a24);
+}
+
+.panel-tags .tag.tag-solid.tag-color-secondary {
+  background-color: var(--cl-text-secondary, #666666);
+  border-color: var(--cl-text-secondary, #666666);
+}
+
+.panel-tags .tag.tag-plain.tag-color-primary {
+  color: var(--cl-primary, #1088f0);
+  border-color: var(--cl-primary, #1088f0);
+}
+
+.panel-tags .tag.tag-plain.tag-color-success {
+  color: var(--cl-success, #12b76a);
+  border-color: var(--cl-success, #12b76a);
+}
+
+.panel-tags .tag.tag-plain.tag-color-warning {
+  color: var(--cl-warning, #f79009);
+  border-color: var(--cl-warning, #f79009);
+}
+
+.panel-tags .tag.tag-plain.tag-color-danger {
   color: var(--cl-danger, #ee0a24);
+  border-color: var(--cl-danger, #ee0a24);
+}
+
+.panel-tags .tag.tag-plain.tag-color-secondary {
+  color: var(--cl-text-secondary, #666666);
+  border-color: var(--cl-text-secondary, #666666);
+}
+
+/* 实心标签的关闭图标取半透明白，保证彩色底上可见 */
+.panel-tags .tag.tag-solid .tag-close {
+  color: var(--cl-white-alpha-80, rgba(255, 255, 255, 0.8));
+}
+
+.panel-tags .tag.tag-solid .tag-close:hover {
+  color: var(--cl-white, #ffffff);
+}
+
+/* 语义色需盖过 .tag:hover 的文字色与底色（hover 规则在前，同权重下后者胜出） */
+.panel-tags .tag.tag-solid:hover {
+  opacity: 0.85;
+  color: var(--cl-white, #ffffff);
+}
+
+.panel-tags .tag.tag-plain.tag-color-primary:hover {
+  color: var(--cl-primary, #1088f0);
+}
+
+.panel-tags .tag.tag-plain.tag-color-success:hover {
+  color: var(--cl-success, #12b76a);
+}
+
+.panel-tags .tag.tag-plain.tag-color-warning:hover {
+  color: var(--cl-warning, #f79009);
+}
+
+.panel-tags .tag.tag-plain.tag-color-danger:hover {
+  color: var(--cl-danger, #ee0a24);
+}
+
+.panel-tags .tag.tag-plain.tag-color-secondary:hover {
+  color: var(--cl-text-secondary, #666666);
+}
+
+/* 空心标签 hover 加浅色底反馈 */
+.panel-tags .tag.tag-plain.tag-color-primary:hover {
+  background-color: var(--cl-primary-light, #eff8ff);
+}
+
+.panel-tags .tag.tag-plain.tag-color-success:hover {
+  background-color: var(--cl-success-bg, #e8f8f0);
+}
+
+.panel-tags .tag.tag-plain.tag-color-warning:hover {
+  background-color: var(--cl-warning-bg, #fef6e8);
+}
+
+.panel-tags .tag.tag-plain.tag-color-danger:hover {
+  background-color: var(--cl-danger-bg, #fdecee);
 }

package/buildLibs/styles/Mobile/ClCodeLegendM.css

@@ -32,6 +32,8 @@
 /* CodeLegendM 移动端代码演示卡样式 */
 
 /* 演示卡容器：白卡浮于浅灰托盘，轻投影替代边框 */
+/* 注意：根元素不加 :active —— :active 会沿祖先链命中，卡内任意区域（含演示组件）
+   的按下都会触发整卡反馈，造成投影闪动；可点反馈一律落在 .code-legend-m__foot 自身 */
 .code-legend-m {
   background: var(--cl-bg, #ffffff);
   border-radius: 8px;
@@ -39,15 +41,11 @@
   overflow: hidden;
 }
 
-.code-legend-m:active {
-  box-shadow: 0 1px 2px 0 var(--cl-shadow-sm, rgba(0, 0, 0, 0.04));
-}
-
 /* 卡头 */
 .code-legend-m__head {
   padding: 14px 16px 10px;
   border-bottom: 1px solid var(--cl-bg-muted, #f5f5f5);
-  background: #fafbfc;
+  background: var(--cl-bg-subtle, #fafafa);
 }
 
 .code-legend-m__title {
@@ -176,6 +174,7 @@
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  /* 代码块深色底：语法高亮主题色（VSCode Dark），独立于产品 UI token，不随主题切换 */
   background: #1e1e1e;
 }
 
@@ -184,6 +183,7 @@
   padding: 14px 16px;
   font-size: 12px;
   line-height: 1.6;
+  /* 代码正文色：同上，语法高亮主题色 */
   color: #d4d4d4;
   /* 自动换行（保留缩进/原有换行，超宽软换行），不做横向滚动 */
   white-space: pre-wrap;

package/buildLibs/styles/Mobile/ClCropperM.css

@@ -246,6 +246,7 @@
 .imgCropperM-main {
   position: relative;
   width: 100%;
+  /* 裁剪区纯黑底：图像处理语义，与产品主题无关 */
   background-color: #000;
   border-radius: 8px;
   overflow: hidden;
@@ -313,6 +314,7 @@
 }
 
 .imgCropperM-btns-save .imgCropperM-btn-save:active {
+  /* 保存键按下态：与裁剪器自身配色体系一致，不纳入全局语义层 */
   background-color: #0570db;
 }
 

package/buildLibs/styles/Mobile/ClFloatBubble.css

@@ -0,0 +1,18 @@
+/* FloatBubble 浮动气泡样式 */
+.panel-float-bubble {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--cl-bg, #ffffff);
+  box-shadow: 0 2px 12px var(--cl-shadow-color, rgba(0, 0, 0, 0.12));
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+

package/buildLibs/styles/Mobile/ClFloatPanel.css

@@ -0,0 +1,86 @@
+/* FloatPanel 浮动面板样式 */
+.panel-float-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cl-overlay, rgba(0, 0, 0, 0.5));
+  transition: opacity var(--floatpanel-duration, 300ms) ease;
+}
+
+.panel-float-panel {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--cl-bg, #ffffff);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 16px var(--cl-shadow-color, rgba(0, 0, 0, 0.08));
+  overflow: hidden;
+  transition: height var(--floatpanel-duration, 300ms) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* 底部安全区适配 */
+.panel-float-panel--safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 头部拖拽区 */
+.floatpanel-header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 8px 12px 4px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.floatpanel-header:active {
+  cursor: grabbing;
+}
+
+/* 拖拽把手 */
+.floatpanel-header-bar {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--cl-handle, #e5e5e5);
+  margin-bottom: 4px;
+}
+
+/* 内容区 */
+.floatpanel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 16px 16px;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 遮罩淡入淡出 */
+.floatpanel-fade-enter-active,
+.floatpanel-fade-leave-active {
+  transition: opacity var(--floatpanel-duration, 300ms) ease;
+}
+
+.floatpanel-fade-enter-from,
+.floatpanel-fade-leave-to {
+  opacity: 0;
+}
+
+/* 面板从底部滑入 */
+.floatpanel-slide-enter-active,
+.floatpanel-slide-leave-active {
+  transition: transform var(--floatpanel-duration, 300ms) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.floatpanel-slide-enter-from,
+.floatpanel-slide-leave-to {
+  transform: translateY(100%);
+}
+

package/buildLibs/styles/Mobile/ClInputPin.css

@@ -0,0 +1,104 @@
+/* InputPin 验证码输入框样式 */
+.panel-input-pin {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* 隐藏的真实输入框（透明、占位但不显示） */
+.inputpin-hidden-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 16px;
+}
+
+.panel-input-pin--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.inputpin-cells {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inputpin-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 48px;
+  border: 1px solid var(--cl-border, #cfcfcf);
+  border-radius: 6px;
+  background: var(--cl-bg, #ffffff);
+  font-size: 18px;
+  color: var(--cl-text-primary, #323233);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  box-sizing: border-box;
+}
+
+.inputpin-cell--filled {
+  border-color: var(--cl-text-disabled, #c8c9cc);
+}
+
+.inputpin-cell--active {
+  border-color: var(--cl-primary, #1088f0);
+  box-shadow: 0 0 0 1px var(--cl-primary, #1088f0);
+}
+
+.inputpin-cell-value {
+  line-height: 1;
+}
+
+/* 光标 */
+.inputpin-cursor {
+  width: 2px;
+  height: 22px;
+  background: var(--cl-primary, #1088f0);
+  animation: inputpin-blink 1s step-end infinite;
+}
+
+@keyframes inputpin-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* 分隔符 */
+.inputpin-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  font-size: 16px;
+  color: var(--cl-text-disabled, #c8c9cc);
+}
+
+/* theme="line"：仅保留底部一条线 */
+.panel-input-pin--line .inputpin-cell {
+  border: none;
+  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-radius: 0;
+}
+
+.panel-input-pin--line .inputpin-cell--filled {
+  border-bottom-color: var(--cl-border, #cfcfcf);
+}
+
+.panel-input-pin--line .inputpin-cell--active {
+  border-bottom-color: var(--cl-primary, #1088f0);
+  border-bottom-width: 2px;
+  box-shadow: none;
+}
+

package/buildLibs/styles/Mobile/ClNoticeBar.css

@@ -4,8 +4,8 @@
   display: flex;
   align-items: center;
   padding: 10px 16px;
-  color: #ed6a0c;
-  background: #fffbe8;
+  color: var(--cl-notice-text, #ed6a0c);
+  background: var(--cl-notice-bg, #fffbe8);
   font-size: 13px;
   line-height: 1.5;
   cursor: pointer;
@@ -40,17 +40,17 @@
 }
 
 /* 换行模式 */
-.panel-notice-bar--wrapable .noticebar-wrap {
+.panel-notice-bar-wrappable .noticebar-wrap {
   height: auto;
   overflow: visible;
 }
 
-.panel-notice-bar--wrapable .noticebar-content {
+.panel-notice-bar-wrappable .noticebar-content {
   position: static;
   white-space: normal;
 }
 
-.panel-notice-bar--wrapable .noticebar-text {
+.panel-notice-bar-wrappable .noticebar-text {
   white-space: normal;
 }
 

package/buildLibs/styles/Mobile/ClNotifyM.css

@@ -1,3 +1,4 @@
+
 /* NotifyM 消息通知样式 */
 .panel-notify-m {
   position: fixed;
@@ -14,6 +15,53 @@
   text-align: center;
   box-sizing: border-box;
   cursor: pointer;
+  /* 顶部贴边保持直角，底部两角收弧（12px：在单行 44px 高度上呈现明显弧线） */
+  border-radius: 0 0 12px 12px;
+  /* 上滑手势跟手位移与透明度：由内联 CSS 变量驱动，非拖拽期间取默认值；
+     本规则须排在 .notifym-fade-* 之前，离场动画的 transform/opacity 才能正常接管 */
+  transform: translateY(var(--notifym-drag-y, 0px));
+  opacity: var(--notifym-drag-opacity, 1);
+}
+
+/* 顶部安全区适配：刘海屏/状态栏区域留白，背景色仍铺满（通知从屏幕顶端垂下）；
+   桌面浏览器与手机壳演示环境 env 取 0，行为与未开启一致 */
+.panel-notify-m--safe-top {
+  padding-top: calc(10px + env(safe-area-inset-top, 0px));
+}
+
+/* 通知文本：左右对称留白，为右侧关闭图标让位的同时保持文本视觉居中 */
+.notifym-text {
+  padding: 0 44px;
+}
+
+/* 右侧关闭图标：绝对定位，不参与文本居中计算（与 Banner 关闭图标同款处理） */
+.panel-notify-m .notifym-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  font-size: 16px;
+  color: inherit;
+  cursor: pointer;
+}
+
+/* 安全区下关闭图标跟随内容区中点：含安全区的整条中点为 50%，内容区中点即 50% + 安全区 / 2 */
+.panel-notify-m--safe-top .notifym-close {
+  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
+}
+
+/* 拖拽中：禁用过渡，保证跟手无迟滞 */
+.notifym-is-dragging {
+  transition: none;
+}
+
+/* 松手过渡：回弹或滑出，恢复过渡动画 */
+.notifym-is-rebounding {
+  transition: transform 200ms ease, opacity 200ms ease;
 }
 
 /* 类型配色 */
@@ -33,6 +81,7 @@
 }
 
 .panel-notify-m--warning {
+  /* 警示橙：Notify 局部色，与 --cl-warning 区分（更亮以适配深色通知条） */
   background: #ff976a;
   color: var(--cl-bg, #ffffff);
 }
@@ -51,5 +100,4 @@
 .notifym-fade-leave-to {
   transform: translateY(-100%);
   opacity: 0;
-}
-
+}

package/buildLibs/styles/Mobile/ClNumberKeyboard.css

@@ -231,37 +231,6 @@
   transform: scale(0.75);
   transform-origin: center center;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;
@@ -609,6 +578,7 @@
 .numberkeyboard-title-close .btn {
   padding: 0;
   font-size: 14px;
+  /* 关闭按钮蓝：键盘局部色（更沉稳，避免与确认键主色抢眼） */
   color: #576b95;
   line-height: 1;
   cursor: pointer;
@@ -654,6 +624,7 @@
 
 .numberkeyboard-key--extra,
 .numberkeyboard-key--delete {
+  /* 键盘功能键灰阶：组件局部设计值（对齐原生数字键盘观感），不纳入全局语义层 */
   background: #d1d5da;
   font-size: 16px;
 }
@@ -674,6 +645,7 @@
 }
 
 .numberkeyboard-key--done:active {
+  /* 键盘确认键按下态：主色加深一档，与键盘灰阶同属组件局部设计值 */
   background: #0570db;
 }
 .newtons-cradle[data-v-05c04027] {