@flexem/fc-gui 3.0.0-alpha.185 → 3.0.0-alpha.188

package/bundles/@flexem/fc-gui.umd.js

@@ -37367,19 +37367,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
                     item.textContent = updatedTimePeriods[i].name;
                 }
             });
-            // 文字更新后重新测量宽度，修正首次加载时文字为空导致宽度过小的问题
-            const prevDisplay = this.dropdownListEl.style.display;
-            const prevVisibility = this.dropdownListEl.style.visibility;
-            this.dropdownListEl.style.display = 'block';
-            this.dropdownListEl.style.visibility = 'hidden';
-            this.dropdownListEl.style.width = '';
-            const newWidth = this.dropdownListEl.offsetWidth;
-            this.dropdownListEl.style.display = prevDisplay;
-            this.dropdownListEl.style.visibility = prevVisibility;
-            this.dropdownListEl.style.width = newWidth + 'px';
-            if (this.dropdownTriggerEl) {
-                this.dropdownTriggerEl.style.width = newWidth + 'px';
-            }
         }
         // 更新触发按钮文字（显示当前选中项的最新语言文案）
         if (this.dropdownTriggerEl) {
@@ -37874,9 +37861,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
                 .style('padding', '4px 8px')
                 .style('cursor', 'pointer')
                 .style('white-space', 'nowrap')
-                .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px')
-                .style('line-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
-                .style('min-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
+                // 字号/行高在打开时动态根据 trigger 的视口实际尺寸设置，见 dropdownTrigger.on('click') 处理
                 .style('background', tp.key === Number(this.currentTimePeriod) ? '#1890ff' : 'transparent')
                 .style('color', tp.key === Number(this.currentTimePeriod) ? '#fff' : '#333')
                 .text(tp.name)
@@ -37918,15 +37903,6 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
                 this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
             });
         });
-        // 测量下拉列表最大宽度，让 trigger 和列表宽度一致
-        dropdownListEl.style.display = 'block';
-        dropdownListEl.style.visibility = 'hidden';
-        const listContentWidth = dropdownListEl.offsetWidth;
-        dropdownListEl.style.display = 'none';
-        dropdownListEl.style.visibility = '';
-        dropdownListEl.style.width = listContentWidth + 'px';
-        dropdownTrigger.node().style.width = listContentWidth + 'px';
-        dropdownTrigger.node().style.boxSizing = 'border-box';
         const hideDropdown = () => { dropdownListEl.style.display = 'none'; };
         dropdownTrigger.on('click', () => {
             const isVisible = dropdownListEl.style.display !== 'none';
@@ -37936,10 +37912,19 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             else {
                 const triggerNode = dropdownTrigger.node();
                 const triggerRect = triggerNode.getBoundingClientRect();
-                // 设置宽度至少和 trigger 一样宽
+                // trigger 在视口中的实际高度（已经过画布 transform 缩放），用于对齐下拉项尺寸。
+                // 不能在渲染时写死设计像素，因为下拉挂在 body 上不受画布 transform 影响。
+                const itemHeight = triggerRect.height;
+                // 字号取行高的 60%，保证文字在行内垂直居中且不溢出
+                const itemFontSize = Math.round(itemHeight * 0.6);
+                dropdownList.selectAll('.hc-dropdown-item')
+                    .style('font-size', itemFontSize + 'px')
+                    .style('line-height', itemHeight + 'px')
+                    .style('min-height', itemHeight + 'px');
+                // 设置宽度至少和 trigger 一样宽，先展示再测宽度
+                dropdownListEl.style.display = 'block';
                 dropdownListEl.style.minWidth = triggerRect.width + 'px';
                 dropdownListEl.style.left = triggerRect.left + 'px';
-                dropdownListEl.style.display = 'block';
                 const listHeight = dropdownListEl.offsetHeight;
                 const spaceBelow = window.innerHeight - triggerRect.bottom;
                 if (spaceBelow < listHeight) {
@@ -42502,6 +42487,181 @@ C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,3
     }
 }
 
+// CONCATENATED MODULE: ./.tmp/elements/alarm/alarm-table-scrollbar.ts
+/** SVG scrollbar kept outside foreignObject so WKWebView applies the canvas scale. */
+class AlarmTableScrollbar {
+    constructor(parent, x, y, width, height, visibleRows, onChange, onPause, onResume) {
+        this.y = y;
+        this.height = height;
+        this.visibleRows = visibleRows;
+        this.onChange = onChange;
+        this.onPause = onPause;
+        this.onResume = onResume;
+        this.maxStart = 0;
+        this.start = 0;
+        this.thumbHeight = 0;
+        this.thumbTop = 0;
+        this.dragging = false;
+        this.hovered = false;
+        this.focused = false;
+        this.dragStartY = 0;
+        this.dragStartRow = 0;
+        this.handleStart = (event) => {
+            if (!this.maxStart || ('button' in event && event.button !== 0) || ('touches' in event && event.touches.length !== 1))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.onPause();
+            const localY = this.getLocalY(event);
+            // The full gutter is clickable, including the transparent sides of the thumb.
+            if (localY < this.y + this.thumbTop || localY > this.y + this.thumbTop + this.thumbHeight) {
+                this.onChange(this.start + (localY < this.y + this.thumbTop ? -this.visibleRows : this.visibleRows));
+                this.onResume();
+                return;
+            }
+            this.dragging = true;
+            this.dragStartY = localY;
+            this.dragStartRow = this.start;
+            this.thumb.setAttribute('fill', '#8f99aa');
+            this.thumb.style.cursor = 'grabbing';
+            this.ownerDocument.addEventListener('mousemove', this.handleMove);
+            this.ownerDocument.addEventListener('mouseup', this.handleEnd);
+            this.ownerDocument.addEventListener('touchmove', this.handleMove, { passive: false });
+            this.ownerDocument.addEventListener('touchend', this.handleEnd);
+            this.ownerDocument.addEventListener('touchcancel', this.handleEnd);
+            this.ownerDocument.defaultView.addEventListener('blur', this.handleEnd);
+        };
+        this.handleMove = (event) => {
+            if (!this.dragging || ('touches' in event && event.touches.length !== 1))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const travel = this.height - this.thumbHeight;
+            if (travel <= 0)
+                return;
+            const rowDelta = Math.round((this.getLocalY(event) - this.dragStartY) / travel * this.maxStart);
+            this.onChange(this.dragStartRow + rowDelta);
+        };
+        this.handleEnd = () => {
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            this.unbindDrag();
+            this.thumb.setAttribute('fill', '#b6bdc9');
+            this.thumb.style.cursor = 'grab';
+            this.onResume();
+        };
+        this.handleLeave = () => {
+            this.hovered = false;
+            this.onResume();
+        };
+        this.handleEnter = () => {
+            this.hovered = true;
+            this.onPause();
+        };
+        this.handleFocus = () => {
+            this.focused = true;
+            this.onPause();
+        };
+        this.handleBlur = () => {
+            this.focused = false;
+            this.onResume();
+        };
+        this.handleKeyDown = (event) => {
+            const targets = {
+                ArrowUp: this.start - 1,
+                ArrowDown: this.start + 1,
+                PageUp: this.start - this.visibleRows,
+                PageDown: this.start + this.visibleRows,
+                Home: 0,
+                End: this.maxStart
+            };
+            if (!(event.key in targets))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.onChange(targets[event.key]);
+        };
+        this.ownerDocument = parent.ownerDocument;
+        this.group = this.createElement('g');
+        this.group.setAttribute('role', 'scrollbar');
+        this.group.setAttribute('aria-orientation', 'vertical');
+        this.group.setAttribute('aria-valuemin', '0');
+        this.group.setAttribute('tabindex', '0');
+        this.group.style.cursor = 'default';
+        this.track = this.createElement('rect');
+        this.setRect(this.track, x, y, width, height);
+        this.track.setAttribute('fill', '#eef0f4');
+        this.track.setAttribute('rx', String(width / 2));
+        this.thumb = this.createElement('rect');
+        this.setRect(this.thumb, x + width / 4, y, width / 2, height);
+        this.thumb.setAttribute('fill', '#b6bdc9');
+        this.thumb.setAttribute('rx', String(width / 4));
+        this.thumb.style.cursor = 'grab';
+        this.group.appendChild(this.track);
+        this.group.appendChild(this.thumb);
+        parent.appendChild(this.group);
+        this.group.addEventListener('mousedown', this.handleStart);
+        this.group.addEventListener('touchstart', this.handleStart, { passive: false });
+        this.group.addEventListener('keydown', this.handleKeyDown);
+        this.group.addEventListener('mouseenter', this.handleEnter);
+        this.group.addEventListener('mouseleave', this.handleLeave);
+        this.group.addEventListener('focus', this.handleFocus);
+        this.group.addEventListener('blur', this.handleBlur);
+    }
+    get isInteracting() {
+        return this.dragging || this.hovered || this.focused;
+    }
+    update(start, totalRows) {
+        this.maxStart = Math.max(0, totalRows - this.visibleRows);
+        this.start = Math.min(this.maxStart, Math.max(0, start));
+        this.group.setAttribute('display', this.maxStart ? 'inline' : 'none');
+        this.group.setAttribute('aria-valuemax', String(this.maxStart));
+        this.group.setAttribute('aria-valuenow', String(this.start));
+        this.thumbHeight = Math.min(this.height, Math.max(20, this.height * this.visibleRows / Math.max(1, totalRows)));
+        this.thumbTop = this.maxStart ? (this.height - this.thumbHeight) * this.start / this.maxStart : 0;
+        this.thumb.setAttribute('height', String(this.thumbHeight));
+        this.thumb.setAttribute('y', String(this.y + this.thumbTop));
+    }
+    dispose() {
+        this.dragging = false;
+        this.unbindDrag();
+        this.group.removeEventListener('mousedown', this.handleStart);
+        this.group.removeEventListener('touchstart', this.handleStart);
+        this.group.removeEventListener('keydown', this.handleKeyDown);
+        this.group.removeEventListener('mouseenter', this.handleEnter);
+        this.group.removeEventListener('mouseleave', this.handleLeave);
+        this.group.removeEventListener('focus', this.handleFocus);
+        this.group.removeEventListener('blur', this.handleBlur);
+        this.group.remove();
+    }
+    createElement(name) {
+        return this.ownerDocument.createElementNS('http://www.w3.org/2000/svg', name);
+    }
+    setRect(rect, x, y, width, height) {
+        rect.setAttribute('x', String(x));
+        rect.setAttribute('y', String(y));
+        rect.setAttribute('width', String(width));
+        rect.setAttribute('height', String(height));
+    }
+    getLocalY(event) {
+        const pointer = 'touches' in event ? event.touches[0] : event;
+        const point = this.group.ownerSVGElement.createSVGPoint();
+        point.x = pointer.clientX;
+        point.y = pointer.clientY;
+        const matrix = this.group.getScreenCTM();
+        return matrix ? point.matrixTransform(matrix.inverse()).y : point.y;
+    }
+    unbindDrag() {
+        this.ownerDocument.removeEventListener('mousemove', this.handleMove);
+        this.ownerDocument.removeEventListener('mouseup', this.handleEnd);
+        this.ownerDocument.removeEventListener('touchmove', this.handleMove);
+        this.ownerDocument.removeEventListener('touchend', this.handleEnd);
+        this.ownerDocument.removeEventListener('touchcancel', this.handleEnd);
+        this.ownerDocument.defaultView.removeEventListener('blur', this.handleEnd);
+    }
+}
+
 // CONCATENATED MODULE: ./.tmp/elements/alarm/alarm-element.ts
 
 
@@ -42509,6 +42669,7 @@ C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,3
 
 
 
+
 var AlaertElementStatus;
 (function (AlaertElementStatus) {
     AlaertElementStatus[AlaertElementStatus["Normal"] = 0] = "Normal";
@@ -42547,97 +42708,60 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         this.rowHeight = 0;
         this.touchStartY = 0;
         this.touchScrollAccumulator = 0;
-        this.thumbDragStartY = 0;
-        this.thumbDragStartWindow = 0;
-        this.thumbDragging = false;
+        this.scrollHovered = false;
+        this.touchScrolling = false;
         this.isDisposed = false;
         this.handleScrollWheel = (event) => {
-            if (!this.rowHeight)
+            if (!this.rowHeight || !this.getMaxWindowStart())
                 return;
             event.preventDefault();
-            this.touchScrollAccumulator += event.deltaY;
-            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            event.stopPropagation();
+            const screenRowHeight = this.getScreenRowHeight();
+            const delta = event.deltaMode === 1 ? event.deltaY * screenRowHeight
+                : event.deltaMode === 2 ? event.deltaY * screenRowHeight * this.maxVisibleRows : event.deltaY;
+            this.touchScrollAccumulator += delta;
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / screenRowHeight);
             if (rowDelta !== 0) {
-                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.touchScrollAccumulator -= rowDelta * screenRowHeight;
                 this.moveScrollWindowBy(rowDelta);
             }
         };
         this.handleScrollTouchStart = (event) => {
+            if (event.touches.length !== 1 || !this.getMaxWindowStart())
+                return;
+            this.touchScrolling = true;
+            clearInterval(this.scrollIntervalId);
+            event.stopPropagation();
             this.touchStartY = event.touches[0].clientY;
             this.touchScrollAccumulator = 0;
         };
         this.handleScrollTouchMove = (event) => {
-            if (!this.rowHeight)
+            if (!this.touchScrolling || event.touches.length !== 1)
                 return;
             event.preventDefault();
+            event.stopPropagation();
             const currentY = event.touches[0].clientY;
             const deltaY = this.touchStartY - currentY;
             this.touchStartY = currentY;
             this.touchScrollAccumulator += deltaY;
-            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            const screenRowHeight = this.getScreenRowHeight();
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / screenRowHeight);
             if (rowDelta !== 0) {
-                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.touchScrollAccumulator -= rowDelta * screenRowHeight;
                 this.moveScrollWindowBy(rowDelta);
             }
         };
         this.handleScrollMouseEnter = () => {
+            this.scrollHovered = true;
             clearInterval(this.scrollIntervalId);
         };
         this.handleScrollMouseLeave = () => {
-            if (!this.thumbDragging)
-                this.startAutoScroll();
-        };
-        // 拖拽滑块时挂全局 mousemove/mouseup，允许拖出滚动条区域也能继续跟手，松开时才解绑
-        this.handleThumbDragStart = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.thumbDragging = true;
-            clearInterval(this.scrollIntervalId);
-            this.thumbDragStartY = this.getClientY(event);
-            this.thumbDragStartWindow = this.scrollWindowStart;
-            document.addEventListener('mousemove', this.handleThumbDragMove);
-            document.addEventListener('mouseup', this.handleThumbDragEnd);
-            document.addEventListener('touchmove', this.handleThumbDragMove, { passive: false });
-            document.addEventListener('touchend', this.handleThumbDragEnd);
-        };
-        this.handleThumbDragMove = (event) => {
-            if (!this.thumbDragging || !this.scrollTrack)
-                return;
-            event.preventDefault();
-            const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
-            if (maxWindowStart <= 0)
-                return;
-            const trackHeight = this.scrollTrack.clientHeight;
-            const thumbHeightRatio = Math.min(1, this.maxVisibleRows / this.pageSize);
-            const thumbHeight = Math.max(20, trackHeight * thumbHeightRatio);
-            const maxThumbTop = trackHeight - thumbHeight;
-            if (maxThumbTop <= 0)
-                return;
-            const deltaY = this.getClientY(event) - this.thumbDragStartY;
-            const deltaWindow = Math.round((deltaY / maxThumbTop) * maxWindowStart);
-            const nextStart = Math.min(maxWindowStart, Math.max(0, this.thumbDragStartWindow + deltaWindow));
-            if (nextStart === this.scrollWindowStart)
-                return;
-            this.scrollWindowStart = nextStart;
-            this.renderScrollWindow(this.scrollWindowStart);
-        };
-        this.handleThumbDragEnd = () => {
-            this.thumbDragging = false;
-            document.removeEventListener('mousemove', this.handleThumbDragMove);
-            document.removeEventListener('mouseup', this.handleThumbDragEnd);
-            document.removeEventListener('touchmove', this.handleThumbDragMove);
-            document.removeEventListener('touchend', this.handleThumbDragEnd);
+            this.scrollHovered = false;
             this.startAutoScroll();
         };
-        // 点击轨道空白处（非滑块）时整页跳转，方向取决于点击位置在滑块上方还是下方
-        this.handleTrackClick = (event) => {
-            if (event.target !== this.scrollTrack || !this.scrollTrack)
-                return;
-            const trackRect = this.scrollTrack.getBoundingClientRect();
-            const clickTop = event.clientY - trackRect.top;
-            const thumbTop = parseFloat(this.scrollThumb.style.top) || 0;
-            const rowDelta = clickTop < thumbTop ? -this.maxVisibleRows : this.maxVisibleRows;
-            this.moveScrollWindowBy(rowDelta);
+        this.handleScrollTouchEnd = () => {
+            this.touchScrolling = false;
+            this.startAutoScroll();
         };
         this.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
@@ -42920,7 +43044,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         if (useScroll) {
             if (!this.scrollContent)
                 return;
-            this.scrollWindowStart = Math.min(this.scrollWindowStart, Math.max(0, this.pageSize - this.maxVisibleRows));
+            this.scrollWindowStart = Math.min(this.scrollWindowStart, this.getMaxWindowStart());
             this.renderScrollWindow(this.scrollWindowStart);
             return;
         }
@@ -42955,24 +43079,12 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         }
         this.updateScrollThumb();
     }
-    // 滑块高度按"可见行数/总行数"的比例算，位置按当前窗口起始行占可滚动范围的比例算，
-    // 只用 top/height 两个数值属性更新，不涉及 transform，不会触发合成层
     updateScrollThumb() {
-        if (!this.scrollTrack || !this.scrollThumb)
-            return;
-        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
-        if (maxWindowStart <= 0) {
-            this.scrollThumb.style.display = 'none';
-            return;
-        }
-        this.scrollThumb.style.display = 'block';
-        const trackHeight = this.scrollTrack.clientHeight;
-        const thumbHeightRatio = Math.min(1, this.maxVisibleRows / this.pageSize);
-        const thumbHeight = Math.max(20, trackHeight * thumbHeightRatio);
-        const maxThumbTop = trackHeight - thumbHeight;
-        const thumbTop = maxThumbTop * (this.scrollWindowStart / maxWindowStart);
-        this.scrollThumb.style.height = `${thumbHeight}px`;
-        this.scrollThumb.style.top = `${thumbTop}px`;
+        if (this.scrollbar)
+            this.scrollbar.update(this.scrollWindowStart, this.alarmList.length);
+    }
+    getMaxWindowStart() {
+        return Math.max(0, this.alarmList.length - this.maxVisibleRows);
     }
     getIconScale() {
         const initSize = this.model.initSize;
@@ -43021,7 +43133,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             vertical-align: middle;`;
         for (let col = 0; col < 4; col++) {
             const th = document.createElement('th');
-            th.innerHTML = this.getHeaderTextByColumn(col);
+            th.textContent = this.getHeaderTextByColumn(col);
             th.style.cssText = `width: ${this.model.widths[col] / this.model.size.width * 100}%;
                 border-style: solid;
                 border-color: ${this.model.generalSetting.splitLine};
@@ -43048,7 +43160,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
             if (this.alarmList[row]) {
                 if (col !== 2) {
-                    td.innerHTML = this.alarmList[row][col];
+                    td.textContent = this.alarmList[row][col];
                     td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
                 }
                 else {
@@ -43067,14 +43179,14 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                         border-radius: 5px;
                         background: ${levelColors[this.alarmList[row][col]]};
                         color: #ffffff;
-                        width: ${this.model.widths[col] - 30}px;
+                        width: calc(100% - 30px);
                         height: ${alarmHeight}px;
                         max-height: ${rowHeight}px;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
-                    alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
+                    alarmLevel.textContent = this.model.levelText[this.alarmList[row][col]];
                     td.appendChild(alarmLevel);
                 }
             }
@@ -43114,40 +43226,25 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         const dataRowHeight = this.model.heights[1] || this.model.heights[0];
         this.rowHeight = dataRowHeight;
         this.scrollWindowStart = 0;
-        // 之前用"表头/表体分两个 table + flex 包裹容器 + overflow/transform 滚动"的结构，
-        // 在 iOS WKWebView 上表体会明显放大错位，换了两种滚动实现方式（原生 overflow:auto、
-        // JS transform 平移）都复现同样的问题，怀疑是这套多层 div + 双 table 结构本身的问题。
-        // 这里改成和 renderPlainTable() 完全同构的单 table 结构（已验证在所有平台上都正常），
-        // DOM 里始终只保留 maxVisibleRows 行数据，滚动时只增删 <tr> 内容，不做任何位移/滚动。
-        // 自定义滚动条（轨道+滑块）只用 position + top/height 定位，不用 overflow/transform/
-        // will-change，这些属性都不会触发 WebKit 合成层提升，不会重新引入 iOS 缩放错位问题。
-        const scrollbarWidth = 6;
-        const wrapper = document.createElement('div');
-        wrapper.style.cssText = `position: relative; width: ${this.model.size.width}px;
-            height: ${elementHeight - operationAreaReservedHeight}px;`;
+        // WKWebView can paint positioned HTML descendants outside the SVG scale.
+        // Keep a single unpositioned table directly in foreignObject; the scrollbar
+        // is a sibling SVG group, never an HTML overlay or native scrolling layer.
+        const scrollbarWidth = Math.min(12, this.model.size.width * 0.04);
+        const tableHeight = elementHeight - operationAreaReservedHeight;
         const table = document.createElement('table');
         table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
-            height: ${elementHeight - operationAreaReservedHeight}px;
-            width: calc(100% - ${scrollbarWidth}px);`;
+            height: ${tableHeight}px; width: 100%; table-layout: fixed;
+            overflow-wrap: break-word; -webkit-text-size-adjust: none; text-size-adjust: none;`;
         table.appendChild(this.buildHeaderRow());
-        wrapper.appendChild(table);
-        const track = document.createElement('div');
-        track.style.cssText = `position: absolute; top: 0; right: 0; width: ${scrollbarWidth}px;
-            height: 100%; background: rgba(0,0,0,0.06); border-radius: ${scrollbarWidth / 2}px;`;
-        const thumb = document.createElement('div');
-        thumb.style.cssText = `position: absolute; left: 0; width: 100%;
-            background: rgba(0,0,0,0.35); border-radius: ${scrollbarWidth / 2}px; cursor: pointer;`;
-        track.appendChild(thumb);
-        wrapper.appendChild(track);
-        this.element.appendChild(wrapper);
+        this.element.setAttribute('width', String(this.model.size.width - scrollbarWidth));
+        this.element.appendChild(table);
         this.scrollContent = table;
-        this.scrollTrack = track;
-        this.scrollThumb = thumb;
         this.renderScrollWindow(0);
+        const headerHeight = Math.min(tableHeight, table.rows[0].getBoundingClientRect().height / this.getCanvasScaleY());
+        this.scrollbar = new AlarmTableScrollbar(this.element.parentNode, this.model.size.width - scrollbarWidth, headerHeight, scrollbarWidth, Math.max(0, tableHeight - headerHeight), this.maxVisibleRows, start => this.moveScrollWindowBy(start - this.scrollWindowStart), () => clearInterval(this.scrollIntervalId), () => this.startAutoScroll());
         this.updateScrollThumb();
         this.hoverTarget = table;
         this.bindScrollHoverEvents();
-        this.bindScrollbarEvents();
         this.startAutoScroll();
     }
     bindScrollHoverEvents() {
@@ -43159,10 +43256,16 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             this.hoverTarget.addEventListener('wheel', this.handleScrollWheel, { passive: false });
             this.hoverTarget.addEventListener('touchstart', this.handleScrollTouchStart, { passive: true });
             this.hoverTarget.addEventListener('touchmove', this.handleScrollTouchMove, { passive: false });
+            this.hoverTarget.addEventListener('touchend', this.handleScrollTouchEnd);
+            this.hoverTarget.addEventListener('touchcancel', this.handleScrollTouchEnd);
         }
     }
     unbindScrollHoverEvents() {
-        this.unbindScrollbarEvents();
+        if (this.scrollbar)
+            this.scrollbar.dispose();
+        this.scrollbar = null;
+        this.scrollHovered = false;
+        this.touchScrolling = false;
         if (!this.hoverTarget)
             return;
         this.hoverTarget.removeEventListener('mouseenter', this.handleScrollMouseEnter);
@@ -43170,6 +43273,8 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         this.hoverTarget.removeEventListener('wheel', this.handleScrollWheel);
         this.hoverTarget.removeEventListener('touchstart', this.handleScrollTouchStart);
         this.hoverTarget.removeEventListener('touchmove', this.handleScrollTouchMove);
+        this.hoverTarget.removeEventListener('touchend', this.handleScrollTouchEnd);
+        this.hoverTarget.removeEventListener('touchcancel', this.handleScrollTouchEnd);
         this.hoverTarget = null;
     }
     // 手动滚动只在当前可见窗口范围内移动（不触发翻页），到顶/到底停住，
@@ -43177,41 +43282,26 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
     moveScrollWindowBy(rowDelta) {
         if (!this.scrollContent)
             return;
-        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+        const maxWindowStart = this.getMaxWindowStart();
         const nextStart = Math.min(maxWindowStart, Math.max(0, this.scrollWindowStart + rowDelta));
         if (nextStart === this.scrollWindowStart)
             return;
         this.scrollWindowStart = nextStart;
         this.renderScrollWindow(this.scrollWindowStart);
     }
-    bindScrollbarEvents() {
-        if (!this.scrollTrack || !this.scrollThumb)
-            return;
-        this.scrollThumb.addEventListener('mousedown', this.handleThumbDragStart);
-        this.scrollThumb.addEventListener('touchstart', this.handleThumbDragStart, { passive: true });
-        this.scrollTrack.addEventListener('mousedown', this.handleTrackClick);
-    }
-    unbindScrollbarEvents() {
-        if (this.scrollThumb) {
-            this.scrollThumb.removeEventListener('mousedown', this.handleThumbDragStart);
-            this.scrollThumb.removeEventListener('touchstart', this.handleThumbDragStart);
-        }
-        if (this.scrollTrack) {
-            this.scrollTrack.removeEventListener('mousedown', this.handleTrackClick);
-        }
-        document.removeEventListener('mousemove', this.handleThumbDragMove);
-        document.removeEventListener('mouseup', this.handleThumbDragEnd);
-        document.removeEventListener('touchmove', this.handleThumbDragMove);
-        document.removeEventListener('touchend', this.handleThumbDragEnd);
-        this.scrollTrack = null;
-        this.scrollThumb = null;
+    getCanvasScaleY() {
+        const matrix = this.element.getScreenCTM();
+        return matrix ? Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d) || 1 : 1;
     }
-    getClientY(event) {
-        return 'touches' in event ? event.touches[0].clientY : event.clientY;
+    getScreenRowHeight() {
+        var _a;
+        const row = (_a = this.scrollContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('tr')[1];
+        return (row === null || row === void 0 ? void 0 : row.getBoundingClientRect().height) || this.rowHeight * this.getCanvasScaleY();
     }
     startAutoScroll() {
+        var _a;
         clearInterval(this.scrollIntervalId);
-        if (!this.model.generalSetting.autoScroll)
+        if (this.isDisposed || this.scrollHovered || this.touchScrolling || ((_a = this.scrollbar) === null || _a === void 0 ? void 0 : _a.isInteracting) || !this.model.generalSetting.autoScroll)
             return;
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
         if (totalPages <= 1 && !this.scrollContent)
@@ -43224,7 +43314,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             this.autoNextPage();
             return;
         }
-        const maxWindowStart = this.pageSize - this.maxVisibleRows;
+        const maxWindowStart = this.getMaxWindowStart();
         if (maxWindowStart <= 0 || this.scrollWindowStart >= maxWindowStart) {
             this.autoNextPage();
             return;
@@ -45135,7 +45225,7 @@ var shared = __webpack_require__(6);
 // EXTERNAL MODULE: ./.tmp/view/view.service.ts
 var view_service = __webpack_require__(27);
 
-// EXTERNAL MODULE: ./.tmp/gui/gui-view.ts + 126 modules
+// EXTERNAL MODULE: ./.tmp/gui/gui-view.ts + 127 modules
 var gui_view = __webpack_require__(32);
 
 // EXTERNAL MODULE: external "rxjs/operators"