@363045841yyt/klinechart 0.4.5 → 0.4.7

package/dist/klinechart.css

@@ -1,2 +1,2 @@
-.kline-tooltip[data-v-d0fe85e6]{z-index:10;color:#000000c7;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #0000001f;border-radius:8px;min-width:200px;max-width:260px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;box-shadow:0 6px 18px #0000001f}.kline-tooltip__title[data-v-d0fe85e6]{justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:600;display:flex}.kline-tooltip__grid[data-v-d0fe85e6]{grid-template-columns:1fr;gap:2px;display:grid}.kline-tooltip__grid .row[data-v-d0fe85e6]{justify-content:space-between;gap:10px;display:flex}.kline-tooltip__grid .row span[data-v-d0fe85e6]:first-child{color:#0000008f}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.kline-tooltip.use-anchor[data-v-d0fe85e6]{position-anchor:--kline-tooltip-anchor;left:anchor(left);top:anchor(top);position:absolute}.kline-tooltip.use-anchor.anchor-right-bottom[data-v-d0fe85e6]{transform:translate(14px,14px)}.kline-tooltip.use-anchor.anchor-left-bottom[data-v-d0fe85e6]{transform:translate(calc(-100% - 14px),14px)}}.marker-tooltip[data-v-5574cc25]{z-index:10;color:#000000c7;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #0000001f;border-radius:8px;min-width:180px;max-width:260px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;box-shadow:0 6px 18px #0000001f}.marker-tooltip__title[data-v-5574cc25]{justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:600;display:flex}.marker-tooltip__content[data-v-5574cc25]{grid-template-columns:1fr;gap:2px;display:grid}.marker-tooltip__content .row[data-v-5574cc25]{justify-content:space-between;gap:10px;display:flex}.marker-tooltip__content .row span[data-v-5574cc25]:first-child{color:#0000008f}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.marker-tooltip.use-anchor[data-v-5574cc25]{position-anchor:--marker-tooltip-anchor;left:anchor(left);top:anchor(top);position:absolute}.marker-tooltip.use-anchor.anchor-right-bottom[data-v-5574cc25]{transform:translate(12px,12px)}.marker-tooltip.use-anchor.anchor-left-bottom[data-v-5574cc25]{transform:translate(calc(-100% - 12px),12px)}}.params-overlay[data-v-c14eedcc]{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0000004d;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.indicator-params[data-v-c14eedcc]{background:#fff;border:1px solid #e0e0e0;border-radius:12px;width:90vw;min-width:340px;max-width:420px;overflow:hidden;box-shadow:0 8px 40px #00000026}.params-header[data-v-c14eedcc]{background:#f8f8f8;border-bottom:1px solid #e8e8e8;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.header-left[data-v-c14eedcc]{align-items:baseline;gap:8px;display:flex}.header-right[data-v-c14eedcc]{align-items:center;gap:8px;display:flex}.params-title[data-v-c14eedcc]{color:#1a1a1a;letter-spacing:.2px;font-size:14px;font-weight:600}.params-subtitle[data-v-c14eedcc]{color:#999;font-size:11px}.toggle-desc-btn[data-v-c14eedcc]{cursor:pointer;color:#888;background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:all .2s;display:flex}.toggle-desc-btn[data-v-c14eedcc]:hover{color:#555;background:#f0f0f0;border-color:#ccc}.toggle-desc-btn.active[data-v-c14eedcc]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.toggle-desc-btn svg[data-v-c14eedcc]{width:14px;height:14px}.params-close[data-v-c14eedcc]{cursor:pointer;color:#888;background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.params-close[data-v-c14eedcc]:hover{color:#333;background:#f0f0f0;border-color:#ccc}.params-close svg[data-v-c14eedcc]{width:14px;height:14px}.indicator-description[data-v-c14eedcc]{background:#f0f7ff;border-bottom:1px solid #d6e8f5;padding:12px 20px}.indicator-description p[data-v-c14eedcc]{color:#2c5282;margin:0;font-size:12px;line-height:1.6}.params-body[data-v-c14eedcc]{flex-direction:column;gap:10px;padding:16px 20px;display:flex}.param-item[data-v-c14eedcc]{background:#f8f8f8;border:1px solid #e8e8e8;border-radius:8px;padding:10px 14px;transition:border-color .2s}.param-item[data-v-c14eedcc]:has(.param-input:focus){border-color:#bbb}.param-item.has-desc[data-v-c14eedcc]{padding:10px 14px 8px}.param-header[data-v-c14eedcc]{justify-content:space-between;align-items:center;gap:16px;display:flex}.param-label[data-v-c14eedcc]{flex-direction:column;gap:3px;display:flex}.param-label-text[data-v-c14eedcc]{color:#333;font-size:13px;font-weight:500}.param-range[data-v-c14eedcc]{color:#999;font-size:11px}.param-description[data-v-c14eedcc]{color:#666;border-top:1px dashed #e0e0e0;margin-top:8px;padding-top:8px;font-size:11px;line-height:1.5}.input-wrapper[data-v-c14eedcc]{background:#fff;border:1px solid #d0d0d0;border-radius:7px;align-items:stretch;height:32px;transition:border-color .2s;display:flex;overflow:hidden}.input-wrapper[data-v-c14eedcc]:focus-within{border-color:#999}.stepper-btn[data-v-c14eedcc]{cursor:pointer;color:#666;background:#f0f0f0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:28px;font-size:15px;font-weight:400;line-height:1;transition:background .15s,color .15s;display:flex}.stepper-btn[data-v-c14eedcc]:hover:not(:disabled){color:#333;background:#e0e0e0}.stepper-btn[data-v-c14eedcc]:disabled{color:#ccc;cursor:not-allowed}.param-input[data-v-c14eedcc]{text-align:center;color:#1a1a1a;appearance:textfield;background:0 0;border:none;border-left:1px solid #e8e8e8;border-right:1px solid #e8e8e8;width:60px;font-size:13px;font-weight:600}.param-input[data-v-c14eedcc]::-webkit-inner-spin-button{-webkit-appearance:none}.param-input[data-v-c14eedcc]::-webkit-outer-spin-button{-webkit-appearance:none}.param-input[data-v-c14eedcc]:focus{outline:none}.params-footer[data-v-c14eedcc]{background:#f8f8f8;border-top:1px solid #e8e8e8;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.footer-right[data-v-c14eedcc]{gap:8px;display:flex}.params-btn[data-v-c14eedcc]{cursor:pointer;border:1px solid #0000;border-radius:7px;align-items:center;gap:5px;padding:6px 14px;font-size:13px;font-weight:500;line-height:1.4;transition:all .15s;display:flex}.params-btn svg[data-v-c14eedcc]{flex-shrink:0;width:12px;height:12px}.params-btn.reset[data-v-c14eedcc]{color:#666;background:0 0;border-color:#d0d0d0}.params-btn.reset[data-v-c14eedcc]:hover{color:#e74c3c;background:#e74c3c14;border-color:#c0392b}.params-btn.cancel[data-v-c14eedcc]{color:#666;background:0 0;border-color:#d0d0d0}.params-btn.cancel[data-v-c14eedcc]:hover{color:#333;background:#f0f0f0;border-color:#bbb}.params-btn.confirm[data-v-c14eedcc]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.params-btn.confirm[data-v-c14eedcc]:hover{background:#333;border-color:#333;transform:translateY(-1px);box-shadow:0 2px 10px #00000026}.params-btn.confirm[data-v-c14eedcc]:active{box-shadow:none;transform:translateY(0)}.overlay-enter-active[data-v-c14eedcc],.overlay-leave-active[data-v-c14eedcc]{transition:opacity .2s}.overlay-enter-from[data-v-c14eedcc],.overlay-leave-to[data-v-c14eedcc]{opacity:0}.modal-enter-active[data-v-c14eedcc]{transition:all .22s cubic-bezier(.34,1.56,.64,1)}.modal-leave-active[data-v-c14eedcc]{transition:all .16s ease-in}.modal-enter-from[data-v-c14eedcc]{opacity:0;transform:scale(.88)translateY(-16px)}.modal-leave-to[data-v-c14eedcc]{opacity:0;transform:scale(.94)translateY(8px)}.slide-enter-active[data-v-c14eedcc],.slide-leave-active[data-v-c14eedcc]{transition:all .2s;overflow:hidden}.slide-enter-from[data-v-c14eedcc],.slide-leave-to[data-v-c14eedcc]{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0}.indicator-selector[data-v-0ddb3f15]{width:80%;margin:20px;position:relative}.indicator-scroll-container[data-v-0ddb3f15]{scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:center;width:100%;overflow:auto hidden}.indicator-scroll-container[data-v-0ddb3f15]::-webkit-scrollbar{display:none}.indicator-list[data-v-0ddb3f15]{gap:8px;margin:0 auto;padding:2px;display:inline-flex}.indicator-divider[data-v-0ddb3f15]{background:#d9d9d9;align-self:center;width:1px;height:20px}.indicator-item[data-v-0ddb3f15]{align-items:center;gap:4px;display:flex}.indicator-item.draggable[data-v-0ddb3f15],.indicator-item.draggable .indicator-btn[data-v-0ddb3f15],.indicator-item.draggable[data-v-0ddb3f15]:hover,.indicator-item.draggable:hover .indicator-btn[data-v-0ddb3f15]{cursor:move}.indicator-item.is-dragging[data-v-0ddb3f15]{opacity:.6}.indicator-item.drag-over .indicator-btn[data-v-0ddb3f15]{border-color:#1a1a1a;box-shadow:0 0 0 2px #1a1a1a1f}.indicator-btn-wrapper[data-v-0ddb3f15]{position:relative}.indicator-btn[data-v-0ddb3f15]{color:#666;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #e0e0e0;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:6px 16px;font-size:13px;font-weight:500;transition:all .3s;display:flex;position:relative;overflow:hidden}.indicator-btn[data-v-0ddb3f15]:hover:not(.hovering){color:#333;background:#f8f8f8;border-color:#ccc}.indicator-btn.active[data-v-0ddb3f15]{color:#1a1a1a;background:#f8f8f8;border-color:#1a1a1a}.indicator-btn.active[data-v-0ddb3f15]:hover:not(.hovering){background:#f0f0f0;border-color:#333}.btn-content[data-v-0ddb3f15]{z-index:1;position:relative}.param-hint[data-v-0ddb3f15]{opacity:.85;font-size:11px}.hover-overlay[data-v-0ddb3f15]{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;background:#ffffffd9;border-radius:16px;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.action-btn[data-v-0ddb3f15]{color:#666;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:all .2s;display:flex}.action-btn[data-v-0ddb3f15]:hover{color:#333;background:#0000000f}.settings-btn[data-v-0ddb3f15]:hover{color:#1a1a1a}.remove-btn[data-v-0ddb3f15]:hover{color:#ff4d4f}.divider[data-v-0ddb3f15]{background:#e0e0e0;width:1px;height:14px}.add-btn[data-v-0ddb3f15]{anchor-name:--indicator-add-btn;color:#999;cursor:pointer;background:0 0;border:1px dashed #d9d9d9;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;transition:all .3s;display:flex}.add-btn[data-v-0ddb3f15]:hover{color:#1a1a1a;background:#1a1a1a0a;border-color:#1a1a1a}.add-menu[data-v-0ddb3f15]{white-space:nowrap;z-index:9999;background:#fff;border-radius:8px;padding:8px 0;position:fixed;transform:translate(-50%);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.add-menu.use-anchor[data-v-0ddb3f15]{position-anchor:--indicator-add-btn;left:anchor(center);top:anchor(top);max-width:calc(100vw - 16px);position:fixed;transform:translate(-50%,calc(-100% - 8px))}}.menu-section[data-v-0ddb3f15]{padding:4px 0}.menu-section[data-v-0ddb3f15]:not(:last-child){border-bottom:1px solid #f0f0f0}.menu-title[data-v-0ddb3f15]{color:#999;padding:4px 16px;font-size:12px;font-weight:500}.menu-items[data-v-0ddb3f15]{flex-direction:column;gap:2px;display:flex}.menu-item[data-v-0ddb3f15]{text-align:left;color:#333;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:8px 16px;font-size:13px;transition:background .2s;display:flex}.menu-item[data-v-0ddb3f15]:hover:not(.disabled){background:#f5f5f5}.menu-item.disabled[data-v-0ddb3f15]{color:#999;cursor:not-allowed}.menu-item .param-hint[data-v-0ddb3f15]{color:#999;font-size:11px}.active-tag[data-v-0ddb3f15]{color:#1a1a1a;align-items:center;margin-left:auto;display:flex}.fade-enter-active[data-v-0ddb3f15],.fade-leave-active[data-v-0ddb3f15]{transition:opacity .2s}.fade-enter-from[data-v-0ddb3f15],.fade-leave-to[data-v-0ddb3f15]{opacity:0}.slide-enter-active[data-v-0ddb3f15],.slide-leave-active[data-v-0ddb3f15]{transition:all .2s}.slide-enter-from[data-v-0ddb3f15],.slide-leave-to[data-v-0ddb3f15]{opacity:0;transform:translate(-50%)translateY(8px)}.chart-wrapper[data-v-288af50a]{--kmap-height:var(--kmap-chart-height,100%);--kmap-width:var(--kmap-chart-width,100%);width:var(--kmap-width);height:var(--kmap-height);flex-direction:column;justify-content:center;align-items:center;min-height:300px;display:flex}.chart-container[data-v-288af50a]{scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid #e0e0e0;width:95%;height:85%;min-height:255px;position:relative;overflow:auto hidden}.chart-container[data-v-288af50a]::-webkit-scrollbar{display:none}.chart-container[data-v-288af50a]:hover{cursor:grab}.chart-container.is-resizing-pane[data-v-288af50a],.chart-container.is-hovering-pane-separator[data-v-288af50a]{cursor:row-resize}.scroll-content[data-v-288af50a]{height:100%;min-height:inherit;position:relative}.canvas-layer[data-v-288af50a]{pointer-events:none;position:sticky;top:0;left:0}.tooltip-anchor[data-v-288af50a]{pointer-events:none;width:1px;height:1px;position:absolute}.tooltip-anchor.kline-tooltip-anchor.use-anchor[data-v-288af50a]{anchor-name:--kline-tooltip-anchor}.tooltip-anchor.marker-tooltip-anchor.use-anchor[data-v-288af50a]{anchor-name:--marker-tooltip-anchor}.plot-canvas{display:block;position:absolute;top:0;left:0}.right-axis{display:block;position:absolute}.x-axis-canvas{z-index:10;display:block;position:absolute;bottom:0;left:0}.main,.sub{border-bottom:1px solid #e0e0e0;border-right:1px solid #e0e0e0}.x-axis-canvas{border-right:1px solid #e0e0e0}.right-axis{border-bottom:1px solid #e0e0e0;border-right:1px solid #e0e0e0}
+.kline-tooltip[data-v-d0fe85e6]{z-index:10;color:#000000c7;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #0000001f;border-radius:8px;min-width:200px;max-width:260px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;box-shadow:0 6px 18px #0000001f}.kline-tooltip__title[data-v-d0fe85e6]{justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:600;display:flex}.kline-tooltip__grid[data-v-d0fe85e6]{grid-template-columns:1fr;gap:2px;display:grid}.kline-tooltip__grid .row[data-v-d0fe85e6]{justify-content:space-between;gap:10px;display:flex}.kline-tooltip__grid .row span[data-v-d0fe85e6]:first-child{color:#0000008f}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.kline-tooltip.use-anchor[data-v-d0fe85e6]{position-anchor:--kline-tooltip-anchor;left:anchor(left);top:anchor(top);position:absolute}.kline-tooltip.use-anchor.anchor-right-bottom[data-v-d0fe85e6]{transform:translate(14px,14px)}.kline-tooltip.use-anchor.anchor-left-bottom[data-v-d0fe85e6]{transform:translate(calc(-100% - 14px),14px)}}.marker-tooltip[data-v-5574cc25]{z-index:10;color:#000000c7;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #0000001f;border-radius:8px;min-width:180px;max-width:260px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;box-shadow:0 6px 18px #0000001f}.marker-tooltip__title[data-v-5574cc25]{justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:600;display:flex}.marker-tooltip__content[data-v-5574cc25]{grid-template-columns:1fr;gap:2px;display:grid}.marker-tooltip__content .row[data-v-5574cc25]{justify-content:space-between;gap:10px;display:flex}.marker-tooltip__content .row span[data-v-5574cc25]:first-child{color:#0000008f}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.marker-tooltip.use-anchor[data-v-5574cc25]{position-anchor:--marker-tooltip-anchor;left:anchor(left);top:anchor(top);position:absolute}.marker-tooltip.use-anchor.anchor-right-bottom[data-v-5574cc25]{transform:translate(12px,12px)}.marker-tooltip.use-anchor.anchor-left-bottom[data-v-5574cc25]{transform:translate(calc(-100% - 12px),12px)}}.params-overlay[data-v-c14eedcc]{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0000004d;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.indicator-params[data-v-c14eedcc]{background:#fff;border:1px solid #e0e0e0;border-radius:12px;width:90vw;min-width:340px;max-width:420px;overflow:hidden;box-shadow:0 8px 40px #00000026}.params-header[data-v-c14eedcc]{background:#f8f8f8;border-bottom:1px solid #e8e8e8;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.header-left[data-v-c14eedcc]{align-items:baseline;gap:8px;display:flex}.header-right[data-v-c14eedcc]{align-items:center;gap:8px;display:flex}.params-title[data-v-c14eedcc]{color:#1a1a1a;letter-spacing:.2px;font-size:14px;font-weight:600}.params-subtitle[data-v-c14eedcc]{color:#999;font-size:11px}.toggle-desc-btn[data-v-c14eedcc]{cursor:pointer;color:#888;background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:all .2s;display:flex}.toggle-desc-btn[data-v-c14eedcc]:hover{color:#555;background:#f0f0f0;border-color:#ccc}.toggle-desc-btn.active[data-v-c14eedcc]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.toggle-desc-btn svg[data-v-c14eedcc]{width:14px;height:14px}.params-close[data-v-c14eedcc]{cursor:pointer;color:#888;background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.params-close[data-v-c14eedcc]:hover{color:#333;background:#f0f0f0;border-color:#ccc}.params-close svg[data-v-c14eedcc]{width:14px;height:14px}.indicator-description[data-v-c14eedcc]{background:#f0f7ff;border-bottom:1px solid #d6e8f5;padding:12px 20px}.indicator-description p[data-v-c14eedcc]{color:#2c5282;margin:0;font-size:12px;line-height:1.6}.params-body[data-v-c14eedcc]{flex-direction:column;gap:10px;padding:16px 20px;display:flex}.param-item[data-v-c14eedcc]{background:#f8f8f8;border:1px solid #e8e8e8;border-radius:8px;padding:10px 14px;transition:border-color .2s}.param-item[data-v-c14eedcc]:has(.param-input:focus){border-color:#bbb}.param-item.has-desc[data-v-c14eedcc]{padding:10px 14px 8px}.param-header[data-v-c14eedcc]{justify-content:space-between;align-items:center;gap:16px;display:flex}.param-label[data-v-c14eedcc]{flex-direction:column;gap:3px;display:flex}.param-label-text[data-v-c14eedcc]{color:#333;font-size:13px;font-weight:500}.param-range[data-v-c14eedcc]{color:#999;font-size:11px}.param-description[data-v-c14eedcc]{color:#666;border-top:1px dashed #e0e0e0;margin-top:8px;padding-top:8px;font-size:11px;line-height:1.5}.input-wrapper[data-v-c14eedcc]{background:#fff;border:1px solid #d0d0d0;border-radius:7px;align-items:stretch;height:32px;transition:border-color .2s;display:flex;overflow:hidden}.input-wrapper[data-v-c14eedcc]:focus-within{border-color:#999}.stepper-btn[data-v-c14eedcc]{cursor:pointer;color:#666;background:#f0f0f0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:28px;font-size:15px;font-weight:400;line-height:1;transition:background .15s,color .15s;display:flex}.stepper-btn[data-v-c14eedcc]:hover:not(:disabled){color:#333;background:#e0e0e0}.stepper-btn[data-v-c14eedcc]:disabled{color:#ccc;cursor:not-allowed}.param-input[data-v-c14eedcc]{text-align:center;color:#1a1a1a;appearance:textfield;background:0 0;border:none;border-left:1px solid #e8e8e8;border-right:1px solid #e8e8e8;width:60px;font-size:13px;font-weight:600}.param-input[data-v-c14eedcc]::-webkit-inner-spin-button{-webkit-appearance:none}.param-input[data-v-c14eedcc]::-webkit-outer-spin-button{-webkit-appearance:none}.param-input[data-v-c14eedcc]:focus{outline:none}.params-footer[data-v-c14eedcc]{background:#f8f8f8;border-top:1px solid #e8e8e8;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.footer-right[data-v-c14eedcc]{gap:8px;display:flex}.params-btn[data-v-c14eedcc]{cursor:pointer;border:1px solid #0000;border-radius:7px;align-items:center;gap:5px;padding:6px 14px;font-size:13px;font-weight:500;line-height:1.4;transition:all .15s;display:flex}.params-btn svg[data-v-c14eedcc]{flex-shrink:0;width:12px;height:12px}.params-btn.reset[data-v-c14eedcc]{color:#666;background:0 0;border-color:#d0d0d0}.params-btn.reset[data-v-c14eedcc]:hover{color:#e74c3c;background:#e74c3c14;border-color:#c0392b}.params-btn.cancel[data-v-c14eedcc]{color:#666;background:0 0;border-color:#d0d0d0}.params-btn.cancel[data-v-c14eedcc]:hover{color:#333;background:#f0f0f0;border-color:#bbb}.params-btn.confirm[data-v-c14eedcc]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.params-btn.confirm[data-v-c14eedcc]:hover{background:#333;border-color:#333;transform:translateY(-1px);box-shadow:0 2px 10px #00000026}.params-btn.confirm[data-v-c14eedcc]:active{box-shadow:none;transform:translateY(0)}.overlay-enter-active[data-v-c14eedcc],.overlay-leave-active[data-v-c14eedcc]{transition:opacity .2s}.overlay-enter-from[data-v-c14eedcc],.overlay-leave-to[data-v-c14eedcc]{opacity:0}.modal-enter-active[data-v-c14eedcc]{transition:all .22s cubic-bezier(.34,1.56,.64,1)}.modal-leave-active[data-v-c14eedcc]{transition:all .16s ease-in}.modal-enter-from[data-v-c14eedcc]{opacity:0;transform:scale(.88)translateY(-16px)}.modal-leave-to[data-v-c14eedcc]{opacity:0;transform:scale(.94)translateY(8px)}.slide-enter-active[data-v-c14eedcc],.slide-leave-active[data-v-c14eedcc]{transition:all .2s;overflow:hidden}.slide-enter-from[data-v-c14eedcc],.slide-leave-to[data-v-c14eedcc]{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0}.indicator-selector[data-v-4b90c954]{width:80%;margin:20px;position:relative}.indicator-scroll-container[data-v-4b90c954]{scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:center;width:100%;overflow:auto hidden}.indicator-scroll-container[data-v-4b90c954]::-webkit-scrollbar{display:none}.indicator-list[data-v-4b90c954]{gap:8px;margin:0 auto;padding:2px;display:inline-flex}.indicator-divider[data-v-4b90c954]{background:#d9d9d9;align-self:center;width:1px;height:20px}.indicator-item[data-v-4b90c954]{align-items:center;gap:4px;display:flex}.indicator-item.draggable[data-v-4b90c954],.indicator-item.draggable .indicator-btn[data-v-4b90c954],.indicator-item.draggable[data-v-4b90c954]:hover,.indicator-item.draggable:hover .indicator-btn[data-v-4b90c954]{cursor:move}.indicator-item.is-dragging[data-v-4b90c954]{opacity:.6}.indicator-item.drag-over .indicator-btn[data-v-4b90c954]{border-color:#1a1a1a;box-shadow:0 0 0 2px #1a1a1a1f}.indicator-btn-wrapper[data-v-4b90c954]{position:relative}.indicator-btn[data-v-4b90c954]{color:#666;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #e0e0e0;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:6px 16px;font-size:13px;font-weight:500;transition:all .3s;display:flex;position:relative;overflow:hidden}.indicator-btn[data-v-4b90c954]:hover:not(.hovering){color:#333;background:#f8f8f8;border-color:#ccc}.indicator-btn.active[data-v-4b90c954]{color:#1a1a1a;background:#f8f8f8;border-color:#1a1a1a}.indicator-btn.active[data-v-4b90c954]:hover:not(.hovering){background:#f0f0f0;border-color:#333}.btn-content[data-v-4b90c954]{z-index:1;position:relative}.param-hint[data-v-4b90c954]{opacity:.85;font-size:11px}.hover-overlay[data-v-4b90c954]{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;background:#ffffffd9;border-radius:16px;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.action-btn[data-v-4b90c954]{color:#666;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:all .2s;display:flex}.action-btn[data-v-4b90c954]:hover{color:#333;background:#0000000f}.settings-btn[data-v-4b90c954]:hover{color:#1a1a1a}.remove-btn[data-v-4b90c954]:hover{color:#ff4d4f}.divider[data-v-4b90c954]{background:#e0e0e0;width:1px;height:14px}.add-btn[data-v-4b90c954]{anchor-name:--indicator-add-btn;color:#999;cursor:pointer;background:0 0;border:1px dashed #d9d9d9;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;transition:all .3s;display:flex}.add-btn[data-v-4b90c954]:hover{color:#1a1a1a;background:#1a1a1a0a;border-color:#1a1a1a}.add-menu[data-v-4b90c954]{white-space:nowrap;z-index:9999;background:#fff;border-radius:8px;padding:8px 0;position:fixed;transform:translate(-50%);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}@supports (anchor-name:--kmap-anchor) and (position-anchor:--kmap-anchor){.add-menu.use-anchor[data-v-4b90c954]{position-anchor:--indicator-add-btn;left:anchor(center);top:anchor(top);max-width:calc(100vw - 16px);position:fixed;transform:translate(-50%,calc(-100% - 8px))}}.menu-section[data-v-4b90c954]{padding:4px 0}.menu-section[data-v-4b90c954]:not(:last-child){border-bottom:1px solid #f0f0f0}.menu-title[data-v-4b90c954]{color:#999;padding:4px 16px;font-size:12px;font-weight:500}.menu-items[data-v-4b90c954]{flex-direction:column;gap:2px;display:flex}.menu-item[data-v-4b90c954]{text-align:left;color:#333;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:8px 16px;font-size:13px;transition:background .2s;display:flex}.menu-item[data-v-4b90c954]:hover:not(.disabled){background:#f5f5f5}.menu-item.disabled[data-v-4b90c954]{color:#999;cursor:not-allowed}.menu-item .param-hint[data-v-4b90c954]{color:#999;font-size:11px}.active-tag[data-v-4b90c954]{color:#1a1a1a;align-items:center;margin-left:auto;display:flex}.fade-enter-active[data-v-4b90c954],.fade-leave-active[data-v-4b90c954]{transition:opacity .2s}.fade-enter-from[data-v-4b90c954],.fade-leave-to[data-v-4b90c954]{opacity:0}.slide-enter-active[data-v-4b90c954],.slide-leave-active[data-v-4b90c954]{transition:all .2s}.slide-enter-from[data-v-4b90c954],.slide-leave-to[data-v-4b90c954]{opacity:0;transform:translate(-50%)translateY(8px)}.chart-wrapper[data-v-289d47a8]{--kmap-height:var(--kmap-chart-height,100%);--kmap-width:var(--kmap-chart-width,100%);width:var(--kmap-width);height:var(--kmap-height);flex-direction:column;justify-content:center;align-items:center;min-height:300px;display:flex}.chart-container[data-v-289d47a8]{scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid #e0e0e0;width:95%;height:85%;min-height:255px;position:relative;overflow:auto hidden}.chart-container[data-v-289d47a8]::-webkit-scrollbar{display:none}.chart-container[data-v-289d47a8]:hover{cursor:crosshair}.chart-container.is-resizing-pane[data-v-289d47a8],.chart-container.is-hovering-pane-separator[data-v-289d47a8]{cursor:row-resize}.chart-container.is-hovering-kline[data-v-289d47a8]{cursor:pointer}.chart-container:hover.is-hovering-right-axis[data-v-289d47a8]{cursor:ns-resize}.chart-container.is-dragging[data-v-289d47a8]{cursor:grabbing}.scroll-content[data-v-289d47a8]{height:100%;min-height:inherit;position:relative}.canvas-layer[data-v-289d47a8]{pointer-events:none;position:sticky;top:0;left:0}.tooltip-anchor[data-v-289d47a8]{pointer-events:none;width:1px;height:1px;position:absolute}.tooltip-anchor.kline-tooltip-anchor.use-anchor[data-v-289d47a8]{anchor-name:--kline-tooltip-anchor}.tooltip-anchor.marker-tooltip-anchor.use-anchor[data-v-289d47a8]{anchor-name:--marker-tooltip-anchor}.plot-canvas{display:block;position:absolute;top:0;left:0}.right-axis{display:block;position:absolute}.x-axis-canvas{z-index:10;display:block;position:absolute;bottom:0;left:0}.main,.sub{border-bottom:1px solid #e0e0e0;border-right:1px solid #e0e0e0}.x-axis-canvas{border-right:1px solid #e0e0e0}.right-axis{border-bottom:1px solid #e0e0e0;border-right:1px solid #e0e0e0}
 /*$vite$:1*/

package/dist/src/components/KLineChart.vue.d.ts

@@ -3,8 +3,6 @@ import { SubIndicatorType } from '../core/renderers/Indicator';
 type __VLS_Props = {
     /** 语义化配置（必需，唯一控制源） */
     semanticConfig: SemanticChartConfig;
-    kWidth?: number;
-    kGap?: number;
     yPaddingPx?: number;
     minKWidth?: number;
     maxKWidth?: number;
@@ -43,8 +41,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onZoomLevelChange?: ((level: number, kWidth: number) => any) | undefined;
 }>, {
-    kWidth: number;
-    kGap: number;
     yPaddingPx: number;
     rightAxisWidth: number;
     bottomAxisHeight: number;

package/dist/src/core/chart.d.ts

@@ -37,8 +37,10 @@ export type PaneRendererDom = {
     yAxisCanvas: HTMLCanvasElement;
 };
 export type ChartOptions = {
-    kWidth: number;
-    kGap: number;
+    /** K 线宽度（可选，由 zoomLevel 派生） */
+    kWidth?: number;
+    /** K 线间隙（可选，由 DPR 计算） */
+    kGap?: number;
     yPaddingPx: number;
     rightAxisWidth: number;
     bottomAxisHeight: number;
@@ -58,8 +60,8 @@ export type ChartOptions = {
      */
     zoomLevels?: number;
     /**
-     * 初始缩放级别（1 ~ zoomLevels，默认居中）
-     * 未指定时自动计算为中间级别
+     * 初始缩放级别（1 ~ zoomLevels，默认 1）
+     * 未指定时默认为最小级别
      */
     initialZoomLevel?: number;
 };
@@ -73,6 +75,10 @@ export type Viewport = {
     scrollLeft: number;
     dpr: number;
 };
+type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'> & {
+    kWidth: number;
+    kGap: number;
+};
 export declare class Chart {
     private dom;
     private opt;
@@ -139,31 +145,19 @@ export declare class Chart {
      */
     zoomAt(mouseX: number, scrollLeft: number, deltaY: number): void;
     /**
-     * 由外部（Vue 组件）在 scrollLeft 落地后调用，原子性地应用缩放参数
-     * 确保 draw() 看到的 (kWidth, kGap, scrollLeft) 是一致的
-     * @param kWidth 新的 K 线宽度
-     * @param kGap 新的 K 线间隙
+     * 应用缩放级别（在 scrollLeft 落地后调用）
+     * @param level 缩放级别
      */
-    applyZoom(kWidth: number, kGap: number): void;
-    /** 缩放回调函数，用于通知外部同步 kWidth、kGap 与 scrollLeft */
+    applyZoom(level: number): void;
+    /** 缩放回调 */
     private onZoomChange?;
-    /**
-     * 注册缩放回调函数
-     * @param cb 缩放回调函数
-     */
-    setOnZoomChange(cb: (kWidth: number, kGap: number, targetScrollLeft: number) => void): void;
+    setOnZoomChange(cb: (level: number, kWidth: number, kGap: number, targetScrollLeft: number) => void): void;
     /**
      * 将缩放级别转换为 K 线宽度
      * @param level 缩放级别（1 ~ zoomLevels）
      * @returns K 线宽度（逻辑像素）
      */
     private zoomLevelToKWidth;
-    /**
-     * 将 K 线宽度转换为缩放级别
-     * @param kWidth K 线宽度
-     * @returns 缩放级别（1 ~ zoomLevels）
-     */
-    private kWidthToZoomLevel;
     /**
      * 缩放到指定级别
      * @param level 目标级别（1 ~ zoomLevels）
@@ -210,7 +204,7 @@ export declare class Chart {
     /** 获取 ChartDom（供 InteractionController 使用） */
     getDom(): ChartDom;
     /** 获取当前 ChartOptions（返回内部当前快照） */
-    getOption(): ChartOptions;
+    getOption(): ResolvedChartOptions;
     /**
      * 计算 K 线起始 x 坐标数组，与 candle.ts 的像素对齐方式保持一致
      * @param range 可见 K 线索引范围

package/dist/src/core/controller/interaction.d.ts

@@ -1,9 +1,26 @@
 import { Chart } from '../chart';
 import { MarkerEntity, CustomMarkerEntity } from '../marker/registry';
 /** 标记 hover 事件数据 */
-export interface MarkerHoverEvent {
-    type: 'volume-price' | 'custom';
-    marker: MarkerEntity | CustomMarkerEntity;
+export interface InteractionSnapshot {
+    crosshairPos: {
+        x: number;
+        y: number;
+    } | null;
+    crosshairIndex: number | null;
+    crosshairPrice: number | null;
+    hoveredIndex: number | null;
+    activePaneId: string | null;
+    tooltipPos: {
+        x: number;
+        y: number;
+    };
+    tooltipAnchorPlacement: 'right-bottom' | 'left-bottom';
+    hoveredMarkerData: MarkerEntity | null;
+    hoveredCustomMarker: CustomMarkerEntity | null;
+    isDragging: boolean;
+    isResizingPaneBoundary: boolean;
+    isHoveringPaneBoundary: boolean;
+    isHoveringRightAxis: boolean;
 }
 /**
  * 交互控制器，处理拖拽滚动、缩放、十字线 hover 等交互逻辑
@@ -20,6 +37,8 @@ export declare class InteractionController {
     /** 分隔线拖拽相关 */
     private activeSeparatorUpperPaneId;
     private hoveredSeparatorUpperPaneId;
+    /** 右轴悬浮相关 */
+    private hoveredRightAxisPaneId;
     /** [触屏]:触摸会话标记，避免触摸触发的模拟 mouse 事件干扰 */
     private isTouchSession;
     /** 十字线位置 */
@@ -49,6 +68,8 @@ export declare class InteractionController {
     tooltipAnchorPlacement: 'right-bottom' | 'left-bottom';
     /** 是否使用 CSS 锚定位 */
     private useTooltipAnchorPositioning;
+    /** 统一交互状态变更回调 */
+    private onInteractionChangeCallback?;
     /** 当前 hover 的 marker ID */
     hoveredMarkerId: string | null;
     /** 当前点击的 marker ID */
@@ -74,6 +95,9 @@ export declare class InteractionController {
     /** K 线宽度（物理像素），用于计算 K 线中心偏移 */
     private kWidthPx;
     constructor(chart: Chart);
+    getInteractionSnapshot(): InteractionSnapshot;
+    setOnInteractionChange(callback: (snapshot: InteractionSnapshot) => void): void;
+    private notifyInteractionChange;
     /**
      * 处理滚轮缩放事件
      * @param e WheelEvent
@@ -140,6 +164,8 @@ export declare class InteractionController {
     isResizingPaneBoundaryState(): boolean;
     /** 是否悬停在可拖拽分隔线上 */
     isHoveringPaneBoundaryState(): boolean;
+    /** 是否悬停在右轴区域 */
+    isHoveringRightAxisState(): boolean;
     /** 设置 marker hover 回调 */
     setOnMarkerHover(callback: (marker: MarkerEntity | null) => void): void;
     /** 设置 marker click 回调 */

package/dist/src/core/renderers/Indicator/scale/indicator_scale.d.ts

@@ -11,6 +11,8 @@ export interface IndicatorScaleRendererOptions {
         price: number;
         activePaneId: string | null;
     } | null;
+    formatTickLabel?: (value: number) => string;
+    formatCrosshairLabel?: (value: number) => string;
 }
 export interface DrawScaleTicksOptions {
     ctx: CanvasRenderingContext2D;
@@ -24,6 +26,7 @@ export interface DrawScaleTicksOptions {
     isMain: boolean;
     decimals?: number;
     hideEdgeTicks?: boolean;
+    formatLabel?: (value: number) => string;
 }
 export declare function drawScaleTicks(options: DrawScaleTicksOptions): void;
 export declare function createIndicatorScaleRendererPlugin(options: IndicatorScaleRendererOptions): RendererPluginWithHost;

package/dist/src/core/renderers/Indicator/scale/volume_scale.d.ts

@@ -0,0 +1,14 @@
+import { RendererPluginWithHost } from '../../../../plugin';
+/**
+ * 创建成交量刻度渲染器插件
+ */
+export declare function createVolumeScaleRendererPlugin(options: {
+    axisWidth: number;
+    paneId: string;
+    yPaddingPx?: number;
+    getCrosshair?: () => {
+        y: number;
+        price: number;
+        activePaneId: string | null;
+    } | null;
+}): RendererPluginWithHost;

package/dist/src/core/renderers/subVolume.d.ts

@@ -1,9 +1,13 @@
-import { RendererPlugin } from '../../plugin';
+import { RendererPluginWithHost, BaseIndicatorState } from '../../plugin';
 export interface VolumeRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string;
 }
+export interface VolumeRenderState extends BaseIndicatorState {
+    valueMin: number;
+    valueMax: number;
+}
 /**
  * 创建副图成交量渲染器插件
  */
-export declare function createVolumeRendererPlugin(options?: VolumeRendererOptions): RendererPlugin;
+export declare function createVolumeRendererPlugin(options?: VolumeRendererOptions): RendererPluginWithHost;

package/dist/src/core/theme/colors.d.ts

@@ -45,7 +45,7 @@ export declare const PRICE_COLORS: {
     /** 中性颜色 */
     readonly NEUTRAL: "rgba(0, 0, 0, 0.78)";
     /** 最新价颜色 */
-    readonly LAST_PRICE: "rgb(183, 22, 22)";
+    readonly LAST_PRICE: "rgba(196, 74, 86, 0.95)";
 };
 /**
  * 十字线标签背景颜色
@@ -129,6 +129,17 @@ export declare const MACD_COLORS: {
     /** MACD 柱淡绿色（负值上升） */
     readonly BAR_DOWN_LIGHT: "#ace5dc";
 };
+/**
+ * 成交量颜色（与 MACD 柱子配色一致）
+ */
+export declare const VOLUME_COLORS: {
+    /** 上涨柱子（与 MACD BAR_UP 一致） */
+    readonly UP: "#ff5252";
+    /** 下跌柱子（与 MACD BAR_DOWN 一致） */
+    readonly DOWN: "#22ab94";
+    /** 中性/平盘柱子 */
+    readonly NEUTRAL: "rgba(0, 0, 0, 0.78)";
+};
 /**
  * RSI 颜色
  */

package/dist/src/utils/kLineDraw/axis.d.ts

@@ -87,6 +87,7 @@ export interface CrosshairPriceLabelOptions {
     yPaddingPx?: number;
     dpr: number;
     bgColor?: string;
+    borderColor?: string;
     textColor?: string;
     fontSize?: number;
     paddingX?: number;
@@ -94,6 +95,7 @@ export interface CrosshairPriceLabelOptions {
     priceOffset?: number;
     /** 优先显示的价格（如十字线已按 active pane 算好） */
     price?: number;
+    formatPrice?: (price: number) => string;
 }
 export interface CrosshairTimeLabelOptions {
     x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "type": "module",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"