@cldemo/ui-kit 1.0.17 → 1.1.1

package/buildLibs/styles/Web/ClSelect.css

@@ -265,14 +265,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 {
@@ -294,7 +293,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;
@@ -828,7 +829,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;
@@ -878,7 +879,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 {
@@ -921,42 +922,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%;

package/buildLibs/styles/Web/ClSelectCascade.css

@@ -420,14 +420,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 {
@@ -449,7 +448,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;
@@ -829,7 +830,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;
@@ -879,7 +880,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 {
@@ -922,42 +923,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%;

package/buildLibs/styles/Web/ClSelectTree.css

@@ -265,14 +265,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 {
@@ -294,7 +293,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/ClSelectmove.css

@@ -265,14 +265,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 {
@@ -294,7 +293,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/ClTable.css

@@ -870,14 +870,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 {
@@ -899,7 +898,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;
@@ -1126,7 +1127,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;
@@ -1176,7 +1177,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 {
@@ -1219,43 +1220,138 @@
   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%;
 }