@cldemo/ui-kit 1.0.17 → 1.1.1

package/buildLibs/styles/Web/ClDropdownPopup.css

@@ -208,14 +208,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -237,7 +236,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;

package/buildLibs/styles/Web/ClEchartsLineAxisTag.css

@@ -149,37 +149,6 @@
 .chart-loading {
   position: relative;
 }
-/* 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%;

package/buildLibs/styles/Web/ClFileUpload.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;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;

package/buildLibs/styles/Web/ClInputTag.css

@@ -306,14 +306,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -335,7 +334,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;
@@ -629,7 +630,7 @@ textarea.text-area {
   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;
@@ -679,7 +680,7 @@ textarea.text-area {
 .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 {
@@ -722,43 +723,138 @@ textarea.text-area {
   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);
+}
 /* Clipboard 组件样式 */
 
 .panel-clipboard {

package/buildLibs/styles/Web/ClPaginate.css

@@ -266,14 +266,13 @@
 
 .zoomInTop {
   animation-name: zoomInTop;
-  /* desc: 进入时长。与 zoomOutTop 同为 0.5s 时，因关键帧不对称
-     （zoomInTop 在 50% 即 opacity:1，zoomOutTop 在 80% 才 opacity:0），
-     实测展开 opacity 到 1 约 349ms、收起 opacity 到 0 约 400ms，视觉上接近。
-     如需展开更慢，调大本值（如 0.8s → 展开视觉约 0.5s）。 */
-  animation-duration: 0.5s;
+  /* desc: 进入时长。展开刻意快于收起（收起见 zoomOutTop），
+     不追求两者视觉等长：展开是操作后的即时反馈，慢会被感知为卡顿。
+     关键帧在 50% 即 opacity:1，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-enter-duration, 400ms);
   animation-fill-mode: both;
   transform-origin: center top;
-  animation-timing-function: ease-in;
+  animation-timing-function: ease-out;
 }
 
 .dropdownLayer-dropdown-up.zoomInTop {
@@ -295,7 +294,9 @@
 
 .zoomOutTop {
   animation-name: zoomOutTop;
-  animation-duration: 0.5s;
+  /* desc: 离开时长。略慢于展开，收尾更从容；
+     关键帧在 80% 即 opacity:0，故实际感知时长小于本值。 */
+  animation-duration: var(--cl-dropdown-leave-duration, 500ms);
   animation-fill-mode: both;
   transform-origin: center top;
   animation-timing-function: ease-in;
@@ -830,7 +831,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;
@@ -880,7 +881,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 {
@@ -923,42 +924,137 @@
   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);
 }
 .panel-select {
   width: 100%;