@flexem/fc-gui 3.0.0-alpha.182 → 3.0.0-alpha.184

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

@@ -32535,7 +32535,7 @@ const DefaultLocalization = {
     canNotBeNegative: 'Can not be negative',
     valueOutOfRange: 'Numerical value is out of range',
     timeout: 'timeout',
-    confirmOperationPrompt: 'Are you sure you want to perform this operation?',
+    confirmOperationPrompt: 'Confirm action?',
     confirm: 'Yes',
     cancel: 'Cancel',
     characterInputRequired: 'Character input can\'t be empty',
@@ -32657,7 +32657,7 @@ VerifyPasswordModalComponent = __decorate([
     Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
         selector: 'verify-password',
         template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; }"]
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; } "]
     }),
     __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization__WEBPACK_IMPORTED_MODULE_3__[/* LOCALIZATION */ "b"]))
 ], VerifyPasswordModalComponent);
@@ -32705,8 +32705,8 @@ let ConfirmOperationModalComponent = class ConfirmOperationModalComponent {
 ConfirmOperationModalComponent = __decorate([
     Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
         selector: 'confirmOperationModal',
-        template: "<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag> <div class=\"modal-body\"> <div style=\"text-align:center;margin-top:20px;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ",
-        styles: [".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; } .confirm-btn-group { padding: 0; margin-bottom: 28px; margin-right: 50px; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: pointer } "]
+        template: "<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag class=\"confirm-modal\"> <div class=\"modal-body\"> <div style=\"text-align:center;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ",
+        styles: [".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .confirm-modal .confirm-btn-group { padding: 0 !important; margin-bottom: 28px; justify-content: center; margin-right: 0; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer } "]
     }),
     __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization_localization_service__WEBPACK_IMPORTED_MODULE_2__[/* LOCALIZATION */ "b"]))
 ], ConfirmOperationModalComponent);
@@ -32753,7 +32753,7 @@ AlertModalComponent = __decorate([
     Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
         selector: 'alertModal',
         template: "<div class=\"modal-body\"> <div style=\"text-align:center\"> <div class=\"alertIcon\"></div> <h3 class=\"alert-h3\">{{alermMessage}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.confirm}} </button> </div> ",
-        styles: [".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: point; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } "]
+        styles: [".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .form-group { padding: 0 !important; justify-content: center; margin-bottom: 28px; } "]
     }),
     __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization_localization_service__WEBPACK_IMPORTED_MODULE_1__[/* LOCALIZATION */ "b"]))
 ], AlertModalComponent);
@@ -35839,9 +35839,6 @@ class text_element_TextElementModal {
         this.width = width;
         this.height = height;
         this.isVariableText = isVariableText;
-        if (/iPhone|iPod/i.test(navigator.userAgent)) {
-            width += 10;
-        }
         this._element = this.getforeignObjectElement(width, height);
         this._element.innerHTML = '';
         const text = this.createNewForeignObjectText(content, font, width, height, isVariableText);
@@ -35865,10 +35862,7 @@ class text_element_TextElementModal {
         // 清空现有内容
         this._element.innerHTML = '';
         // 创建新的文本元素
-        let width = this.width;
-        if (/iPhone|iPod/i.test(navigator.userAgent)) {
-            width += 10;
-        }
+        const width = this.width;
         const text = this.createNewForeignObjectText(content, this.font, width, this.height, this.isVariableText);
         this._element.appendChild(text);
     }
@@ -42549,14 +42543,102 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         this.totalCount = 0;
         this.pageSize = 5;
         this.maxVisibleRows = 15;
+        this.scrollWindowStart = 0;
         this.rowHeight = 0;
+        this.touchStartY = 0;
+        this.touchScrollAccumulator = 0;
+        this.thumbDragStartY = 0;
+        this.thumbDragStartWindow = 0;
+        this.thumbDragging = false;
         this.isDisposed = false;
+        this.handleScrollWheel = (event) => {
+            if (!this.rowHeight)
+                return;
+            event.preventDefault();
+            this.touchScrollAccumulator += event.deltaY;
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            if (rowDelta !== 0) {
+                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.moveScrollWindowBy(rowDelta);
+            }
+        };
+        this.handleScrollTouchStart = (event) => {
+            this.touchStartY = event.touches[0].clientY;
+            this.touchScrollAccumulator = 0;
+        };
+        this.handleScrollTouchMove = (event) => {
+            if (!this.rowHeight)
+                return;
+            event.preventDefault();
+            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);
+            if (rowDelta !== 0) {
+                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.moveScrollWindowBy(rowDelta);
+            }
+        };
         this.handleScrollMouseEnter = () => {
             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.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.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
         this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
@@ -42787,10 +42869,8 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         }, 500);
     }
     refreshCurrentPageData() {
-        var _a;
         if (this.isDisposed)
             return;
-        const currentScrollTop = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
         if (this.model.filterSetting.alarmType) {
             this.updateQueryTimeRange();
             const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
@@ -42806,9 +42886,6 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                         item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
                     ]);
                     this.updateTableContent();
-                    if (this.scrollContainer) {
-                        this.scrollContainer.scrollTop = currentScrollTop;
-                    }
                 }
             });
         }
@@ -42832,9 +42909,6 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                         item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
                     ]);
                     this.updateTableContent();
-                    if (this.scrollContainer) {
-                        this.scrollContainer.scrollTop = currentScrollTop;
-                    }
                 }
             });
         }
@@ -42843,37 +42917,63 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         if (!this.element)
             return;
         const useScroll = this.pageSize > this.maxVisibleRows;
-        const dataRowHeight = this.model.heights[1] || this.model.heights[0];
-        // 查找表格主体
-        let tbody;
         if (useScroll) {
-            const bodyContainer = this.element.querySelector('div > div:nth-child(2)');
-            if (!bodyContainer)
-                return;
-            const bodyTable = bodyContainer.querySelector('table');
-            if (!bodyTable)
+            if (!this.scrollContent)
                 return;
-            tbody = bodyTable;
-        }
-        else {
-            const table = this.element.querySelector('table');
-            if (!table)
-                return;
-            tbody = table;
+            this.scrollWindowStart = Math.min(this.scrollWindowStart, Math.max(0, this.pageSize - this.maxVisibleRows));
+            this.renderScrollWindow(this.scrollWindowStart);
+            return;
         }
+        const table = this.element.querySelector('table');
+        if (!table)
+            return;
         // 清除现有数据行（保留表头）
-        const rows = Array.from(tbody.querySelectorAll('tr'));
+        const rows = Array.from(table.querySelectorAll('tr'));
         rows.forEach((row, index) => {
-            if (index > 0 || useScroll) { // 对于 scrollable 模式，表头在另一个 table，所以这里全部清除
+            if (index > 0) {
                 row.remove();
             }
         });
         // 重新生成数据行
         for (let row = 0; row < this.pageSize; row++) {
-            const rowHeight = useScroll ? dataRowHeight : this.model.heights[row + 1];
-            tbody.appendChild(this.buildDataRow(row, rowHeight));
+            table.appendChild(this.buildDataRow(row, this.model.heights[row + 1]));
         }
     }
+    renderScrollWindow(startRow) {
+        const table = this.scrollContent;
+        if (!table)
+            return;
+        // 清除现有数据行（保留表头，即第一个 <tr>）
+        const rows = Array.from(table.querySelectorAll('tr'));
+        rows.forEach((row, index) => {
+            if (index > 0) {
+                row.remove();
+            }
+        });
+        for (let i = 0; i < this.maxVisibleRows; i++) {
+            table.appendChild(this.buildDataRow(startRow + i, this.rowHeight));
+        }
+        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`;
+    }
     getIconScale() {
         const initSize = this.model.initSize;
         if (!initSize || !initSize.width || !initSize.height) {
@@ -42996,7 +43096,8 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         return tr;
     }
     renderPlainTable(elementHeight, operationAreaReservedHeight) {
-        this.scrollContainer = null;
+        this.scrollContent = null;
+        this.scrollWindowStart = 0;
         const table = document.createElement('table');
         table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
             height: ${elementHeight - operationAreaReservedHeight}px;`;
@@ -43012,42 +43113,41 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
     renderScrollableTable(elementHeight, operationAreaReservedHeight) {
         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 = `display: flex;
-            flex-direction: column;
-            box-sizing: border-box;
-            border: 2px solid ${this.model.generalSetting.stroke};
+        wrapper.style.cssText = `position: relative; width: ${this.model.size.width}px;
+            height: ${elementHeight - operationAreaReservedHeight}px;`;
+        const table = document.createElement('table');
+        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
             height: ${elementHeight - operationAreaReservedHeight}px;
-            overflow: hidden;`;
-        const headerWrapper = document.createElement('div');
-        headerWrapper.style.cssText = 'flex: none; box-sizing: border-box; overflow: hidden;';
-        const headerTable = document.createElement('table');
-        headerTable.style.cssText = 'width: 100%; table-layout: fixed;';
-        headerTable.appendChild(this.buildHeaderRow());
-        headerWrapper.appendChild(headerTable);
-        const bodyContainer = document.createElement('div');
-        bodyContainer.style.cssText = `flex: none;
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: ${dataRowHeight * this.maxVisibleRows}px;`;
-        const bodyTable = document.createElement('table');
-        bodyTable.style.cssText = 'width: 100%; table-layout: fixed;';
-        for (let row = 0; row < this.pageSize; row++) {
-            bodyTable.appendChild(this.buildDataRow(row, dataRowHeight));
-        }
-        bodyContainer.appendChild(bodyTable);
-        wrapper.appendChild(headerWrapper);
-        wrapper.appendChild(bodyContainer);
+            width: calc(100% - ${scrollbarWidth}px);`;
+        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.scrollContainer = bodyContainer;
-        requestAnimationFrame(() => {
-            const scrollbarWidth = bodyContainer.offsetWidth - bodyContainer.clientWidth;
-            if (scrollbarWidth > 0) {
-                headerWrapper.style.paddingRight = scrollbarWidth + 'px';
-            }
-        });
-        this.hoverTarget = bodyContainer;
+        this.scrollContent = table;
+        this.scrollTrack = track;
+        this.scrollThumb = thumb;
+        this.renderScrollWindow(0);
+        this.updateScrollThumb();
+        this.hoverTarget = table;
         this.bindScrollHoverEvents();
+        this.bindScrollbarEvents();
         this.startAutoScroll();
     }
     bindScrollHoverEvents() {
@@ -43055,41 +43155,93 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             return;
         this.hoverTarget.addEventListener('mouseenter', this.handleScrollMouseEnter);
         this.hoverTarget.addEventListener('mouseleave', this.handleScrollMouseLeave);
+        if (this.scrollContent) {
+            this.hoverTarget.addEventListener('wheel', this.handleScrollWheel, { passive: false });
+            this.hoverTarget.addEventListener('touchstart', this.handleScrollTouchStart, { passive: true });
+            this.hoverTarget.addEventListener('touchmove', this.handleScrollTouchMove, { passive: false });
+        }
     }
     unbindScrollHoverEvents() {
+        this.unbindScrollbarEvents();
         if (!this.hoverTarget)
             return;
         this.hoverTarget.removeEventListener('mouseenter', this.handleScrollMouseEnter);
         this.hoverTarget.removeEventListener('mouseleave', this.handleScrollMouseLeave);
+        this.hoverTarget.removeEventListener('wheel', this.handleScrollWheel);
+        this.hoverTarget.removeEventListener('touchstart', this.handleScrollTouchStart);
+        this.hoverTarget.removeEventListener('touchmove', this.handleScrollTouchMove);
         this.hoverTarget = null;
     }
+    // 手动滚动只在当前可见窗口范围内移动（不触发翻页），到顶/到底停住，
+    // 和自动滚动定时器（会在到底后自动翻页）职责区分开
+    moveScrollWindowBy(rowDelta) {
+        if (!this.scrollContent)
+            return;
+        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+        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;
+    }
+    getClientY(event) {
+        return 'touches' in event ? event.touches[0].clientY : event.clientY;
+    }
     startAutoScroll() {
         clearInterval(this.scrollIntervalId);
         if (!this.model.generalSetting.autoScroll)
             return;
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
-        if (totalPages <= 1 && !this.scrollContainer)
+        if (totalPages <= 1 && !this.scrollContent)
             return;
         const duration = (this.model.generalSetting.scrollDuration || 10) * 1000;
         this.scrollIntervalId = setInterval(() => this.scrollOneRow(), duration);
     }
     scrollOneRow() {
-        const el = this.scrollContainer;
-        if (!el) {
+        if (!this.scrollContent) {
             this.autoNextPage();
             return;
         }
-        const maxScrollTop = el.scrollHeight - el.clientHeight;
-        if (maxScrollTop <= 1 || el.scrollTop >= maxScrollTop - 1) {
+        const maxWindowStart = this.pageSize - this.maxVisibleRows;
+        if (maxWindowStart <= 0 || this.scrollWindowStart >= maxWindowStart) {
             this.autoNextPage();
             return;
         }
-        el.scrollTop = Math.min(el.scrollTop + this.rowHeight, maxScrollTop);
+        this.scrollWindowStart += 1;
+        this.renderScrollWindow(this.scrollWindowStart);
     }
     autoNextPage() {
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
-        if (totalPages <= 1)
+        if (totalPages <= 1) {
+            // 只有一页数据：没有下一页可翻，循环回本页顶部继续滚动
+            if (this.scrollContent) {
+                this.scrollWindowStart = 0;
+                this.renderScrollWindow(0);
+            }
             return;
+        }
         const lastPage = totalPages - 1;
         this.page = this.page < lastPage ? this.page + 1 : 0;
         this.getAlarmData();