kd-lane-chart-v3 0.1.21 → 0.1.23

package/dist/kd-lane-chart-v3.css

@@ -135,7 +135,7 @@
   color: var(--kd-lane-container-header-item-color, #e8e8e8);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
 }
-.kd-lane-chart-container-header-item[data-v-bea65042] {
+.kd-lane-chart-container-header-item[data-v-9b99d168] {
   flex-shrink: 0;
   background: var(--kd-lane-container-header-bg);
   border-radius: 0px 0px 0px 0px;
@@ -147,10 +147,10 @@
   -webkit-user-select: none;
   -webkit-user-drag: none;
 }
-.kd-lane-chart-container-header-item_warning[data-v-bea65042] {
+.kd-lane-chart-container-header-item_warning[data-v-9b99d168] {
   background: var(--kd-lane-container-header-item-warning-color, rgba(248, 108, 89, 0.6));
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container[data-v-9b99d168] {
   height: 100%;
   width: 100%;
   position: relative;
@@ -159,12 +159,12 @@
   font-weight: 400;
   font-size: 10px;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .left[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .left[data-v-9b99d168] {
   position: absolute;
   left: 2px;
   bottom: 2px;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center[data-v-9b99d168] {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -175,7 +175,7 @@
   align-items: center;
   justify-content: center;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center .paramsTitle[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center .paramsTitle[data-v-9b99d168] {
   /* 文字不换行，超出显示省略号 */
   white-space: nowrap;
   overflow: hidden;
@@ -189,7 +189,7 @@
   text-transform: none;
   margin-bottom: 2px;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center .paramsData[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center .paramsData[data-v-9b99d168] {
   /* 文字不换行，超出显示省略号 */
   white-space: nowrap;
   overflow: hidden;
@@ -201,18 +201,18 @@
   font-style: normal;
   text-transform: none;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .right[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .right[data-v-9b99d168] {
   position: absolute;
   right: 2px;
   bottom: 2px;
 }
-.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .gradient-display[data-v-bea65042] {
+.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .gradient-display[data-v-9b99d168] {
   position: absolute;
   height: 2px;
   left: 0;
   bottom: 0;
   right: 0;
-}.kd-lane-chart-container-legend-item[data-v-bd30757b] {
+}.kd-lane-chart-container-legend-item[data-v-a7582d60] {
   flex-shrink: 0;
   overflow: hidden;
   background: var(--kd-lane-container-header-bg);
@@ -228,20 +228,20 @@
   -webkit-user-select: none;
   -webkit-user-drag: none;
 }
-.kd-lane-chart-container-legend-item .legend-label[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-label[data-v-a7582d60] {
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: 400;
   font-size: 10px;
   text-align: center;
   color: var(--kd-lane-container-header-item-color, #333);
 }
-.kd-lane-chart-container-legend-item .legend-content[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content[data-v-a7582d60] {
   display: flex;
   align-items: flex-end;
   gap: 8px;
 }
-.kd-lane-chart-container-legend-item .legend-content .scale-left[data-v-bd30757b],
-.kd-lane-chart-container-legend-item .legend-content .scale-right[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .scale-left[data-v-a7582d60],
+.kd-lane-chart-container-legend-item .legend-content .scale-right[data-v-a7582d60] {
   align-self: flex-end;
   flex-shrink: 0;
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
@@ -249,7 +249,7 @@
   font-size: 10px;
   color: var(--kd-lane-container-header-item-color, #333);
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines[data-v-a7582d60] {
   flex: 1;
   display: flex;
   justify-content: center;
@@ -257,7 +257,7 @@
   flex-wrap: wrap;
   gap: 8px;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item[data-v-a7582d60] {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -265,31 +265,31 @@
   gap: 8px;
   cursor: pointer;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color[data-v-a7582d60] {
   width: 10px;
   height: 2px;
   display: inline-block;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color.solid[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color.solid[data-v-a7582d60] {
   background: currentColor;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color.dashed[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-color.dashed[data-v-a7582d60] {
   background: transparent;
   border-bottom: 2px dashed currentColor;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-line-item-top[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-line-item-top[data-v-a7582d60] {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-text[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-text[data-v-a7582d60] {
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: 400;
   font-size: 9px;
   white-space: nowrap;
   color: var(--kd-lane-container-header-item-color, #333);
 }
-.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-data[data-v-bd30757b] {
+.kd-lane-chart-container-legend-item .legend-content .legend-lines .legend-line-item .legend-data[data-v-a7582d60] {
   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
   font-weight: bold;
   font-size: 9px;
@@ -670,19 +670,19 @@ to {
   user-select: none;
   -webkit-user-select: none;
   -webkit-user-drag: none;
-}.kd-lane-chart-lane-container-echart[data-v-fcf148a1] {
+}.kd-lane-chart-lane-container-echart[data-v-af25fe67] {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-.kd-lane-chart-container[data-v-fcf148a1] {
+.kd-lane-chart-container[data-v-af25fe67] {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-.kd-lane-chart-lane-container-echart-content[data-v-fcf148a1] {
+.kd-lane-chart-lane-container-echart-content[data-v-af25fe67] {
   width: 100%;
   height: 100%;
   flex-shrink: 0;
@@ -692,14 +692,14 @@ to {
   -webkit-user-select: none;
   -webkit-user-drag: none;
 }
-.kd-depth-axis-labels[data-v-fcf148a1] {
+.kd-depth-axis-labels[data-v-af25fe67] {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 2;
   overflow: hidden;
 }
-.kd-depth-axis-label[data-v-fcf148a1] {
+.kd-depth-axis-label[data-v-af25fe67] {
   position: absolute;
   left: 0;
   right: 0;
@@ -710,18 +710,18 @@ to {
   transform: translateY(-50%);
   white-space: nowrap;
 }
-.kd-depth-axis-label.is-top[data-v-fcf148a1] {
+.kd-depth-axis-label.is-top[data-v-af25fe67] {
   transform: translateY(0);
 }
-.kd-depth-axis-label.is-bottom[data-v-fcf148a1] {
+.kd-depth-axis-label.is-bottom[data-v-af25fe67] {
   transform: translateY(-100%);
 }
-.kd-depth-axis-label.is-conflict[data-v-fcf148a1] {
+.kd-depth-axis-label.is-conflict[data-v-af25fe67] {
   background: red;
   color: #fff;
   font-size: 11px;
 }
-.kd-lane-crosshair-line[data-v-fcf148a1] {
+.kd-lane-crosshair-line[data-v-af25fe67] {
   position: absolute;
   left: 0;
   right: 0;
@@ -731,7 +731,31 @@ to {
   pointer-events: none;
   z-index: 100;
   will-change: transform;
-}.context-menu-wrapper {
+}.kd-lane-crosshair-seg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 0;
+  border-top: 1px dashed var(--default-text-color, rgba(255, 255, 255, 0.9));
+  pointer-events: none;
+  z-index: 400;
+}
+.kd-lane-crosshair-seg__depth {
+  position: absolute;
+  left: 2px;
+  top: 0;
+  transform: translateY(-50%);
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+  pointer-events: none;
+  color: var(--default-text-color, #333);
+  background: color-mix(in srgb, var(--kd-lane-container-border-color, #c8c8c8) 70%, transparent);
+}
+.context-menu-wrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -748,6 +772,7 @@ to {
   min-width: 160px;
   z-index: 10000;
   backdrop-filter: blur(8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
 }
 .context-menu-item {
   display: flex;
@@ -763,6 +788,9 @@ to {
 .context-menu-item:hover {
   background: var(--kd-lane-container-border-color);
 }
+.context-menu-item.has-children {
+  position: relative;
+}
 .context-menu-item.has-children .arrow {
   color: var(--default-text-color);
   font-size: 16px;
@@ -774,6 +802,21 @@ to {
 .context-menu.sub-menu {
   position: absolute;
   top: 0;
+  z-index: 10001;
+  visibility: hidden;
+}
+.context-menu.sub-menu::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+}
+.context-menu.sub-menu.is-right::before {
+  right: 100%;
+}
+.context-menu.sub-menu.is-left::before {
+  left: 100%;
 }
 .panel-list[data-v-1e5790fd] {
   width: 100%; /* 可调 */
@@ -1599,7 +1642,7 @@ to {
 .kd-lane-chart-v3-custom-dialog .kd-lane-chart-v3-custom-dialog__footer {
   padding: 0 16px 16px 16px !important;
 }
-.kd-curve-2d-resize-container[data-v-a17d7f29] {
+.kd-curve-2d-resize-container[data-v-1326393c] {
   width: 100%;
   height: 100%;
   display: flex;
@@ -1609,16 +1652,16 @@ to {
   overflow: hidden;
   /* 主容器 */
 }
-.kd-curve-2d-resize-container .container[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .container[data-v-1326393c] {
   display: flex;
   flex: 1;
   width: 100%;
   overflow: hidden;
 }
-.kd-curve-2d-resize-container[data-v-a17d7f29] {
+.kd-curve-2d-resize-container[data-v-1326393c] {
   /* 面板通用样式 */
 }
-.kd-curve-2d-resize-container .panel[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .panel[data-v-1326393c] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
@@ -1630,28 +1673,28 @@ to {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.kd-curve-2d-resize-container .panel[data-v-a17d7f29]::-webkit-scrollbar {
+.kd-curve-2d-resize-container .panel[data-v-1326393c]::-webkit-scrollbar {
   display: none;
 }
-.kd-curve-2d-resize-container .panel-3[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .panel-3[data-v-1326393c] {
   flex: 1;
   min-width: 100px;
 }
-.kd-curve-2d-resize-container[data-v-a17d7f29] {
+.kd-curve-2d-resize-container[data-v-1326393c] {
   /* 拖拽条样式 */
 }
-.kd-curve-2d-resize-container .resizer[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .resizer[data-v-1326393c] {
   width: 6px;
   cursor: col-resize;
 }
-.kd-curve-2d-resize-container .resizer[data-v-a17d7f29]:hover {
+.kd-curve-2d-resize-container .resizer[data-v-1326393c]:hover {
   background-color: var(--resizer-bg-color);
   transition: background-color 0.2s ease;
 }
-.kd-curve-2d-resize-container[data-v-a17d7f29] {
+.kd-curve-2d-resize-container[data-v-1326393c] {
   /* 加载动画遮罩 */
 }
-.kd-curve-2d-resize-container .kd-curve-loading-overlay[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .kd-curve-loading-overlay[data-v-1326393c] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1664,31 +1707,31 @@ to {
   justify-content: center;
   z-index: 1000;
 }
-.kd-curve-2d-resize-container .kd-curve-loading-spinner[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .kd-curve-loading-spinner[data-v-1326393c] {
   position: relative;
   width: 48px;
   height: 48px;
 }
-.kd-curve-2d-resize-container .kd-curve-loading-ring[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .kd-curve-loading-ring[data-v-1326393c] {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 3px solid transparent;
   border-top-color: var(--loading-color, #EC4521);
   border-radius: 50%;
-  animation: spin-a17d7f29 1s linear infinite;
+  animation: spin-1326393c 1s linear infinite;
 }
-.kd-curve-2d-resize-container .kd-curve-loading-ring-delay[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .kd-curve-loading-ring-delay[data-v-1326393c] {
   animation-delay: 0.5s;
   border-top-color: var(--loading-color, #EC4521);
   opacity: 0.5;
 }
-@keyframes spin-a17d7f29 {
+@keyframes spin-1326393c {
 to {
     transform: rotate(360deg);
 }
 }
-.kd-curve-2d-resize-container .kd-curve-loading-text[data-v-a17d7f29] {
+.kd-curve-2d-resize-container .kd-curve-loading-text[data-v-1326393c] {
   margin-top: 16px;
   color: var(--loading-color, #EC4521);
   font-size: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kd-lane-chart-v3",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "kd 泳道图 + 实时曲线组件 (Vue 3 版本)",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",