From c4fde0717b596d1ff512185c1073006f3939c758 Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Fri, 5 Dec 2025 00:06:26 +0800
Subject: [PATCH 1/3] feat(status-page): add search functionality to filter
 monitors

- Add search box in overall-status block with visual divider
- Filter monitors by name and tags (case-insensitive)
- Hide groups with no matching monitors
- Support dark theme for divider styling
---
 src/components/PublicGroupList.vue | 48 +++++++++++++++++--
 src/pages/StatusPage.vue           | 76 +++++++++++++++++++++++++++++-
 2 files changed, 120 insertions(+), 4 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 975bbef6e..3e7fa96d5 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -7,7 +7,7 @@
         :animation="100"
     >
         <template #item="group">
-            <div class="mb-5" data-testid="group">
+            <div v-if="shouldShowGroup(group.element)" class="mb-5" data-testid="group">
                 <!-- Group Title -->
                 <h2 class="group-title">
                     <div class="title-section">
@@ -40,7 +40,7 @@
                         item-key="id"
                     >
                         <template #item="monitor">
-                            <div class="item" data-testid="monitor">
+                            <div v-if="shouldShowMonitor(monitor.element)" class="item" data-testid="monitor">
                                 <div class="row">
                                     <div class="col-6 small-padding">
                                         <div class="info">
@@ -129,6 +129,11 @@ export default {
         showOnlyLastHeartbeat: {
             type: Boolean,
         },
+        /** Search text for filtering monitors */
+        searchText: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {
@@ -137,7 +142,7 @@ export default {
     computed: {
         showGroupDrag() {
             return (this.$root.publicGroupList.length >= 2);
-        }
+        },
     },
     watch: {
         // No watchers needed - sorting is handled by GroupSortDropdown component
@@ -155,6 +160,43 @@ export default {
             this.$root.publicGroupList.splice(index, 1);
         },
 
+        /**
+         * Check if a monitor should be shown based on search text
+         * @param {object} monitor Monitor to check
+         * @returns {boolean} Whether the monitor should be shown
+         */
+        shouldShowMonitor(monitor) {
+            if (!this.searchText || this.searchText.trim() === "") {
+                return true;
+            }
+            const loweredSearchText = this.searchText.toLowerCase().trim();
+            // Match by monitor name
+            if (monitor.name && monitor.name.toLowerCase().includes(loweredSearchText)) {
+                return true;
+            }
+            // Match by tags (name or value)
+            if (monitor.tags && monitor.tags.length > 0) {
+                return monitor.tags.some(tag =>
+                    (tag.name && tag.name.toLowerCase().includes(loweredSearchText)) ||
+                    (tag.value && tag.value.toLowerCase().includes(loweredSearchText))
+                );
+            }
+            return false;
+        },
+
+        /**
+         * Check if a group should be shown (has at least one matching monitor)
+         * @param {object} group Group to check
+         * @returns {boolean} Whether the group should be shown
+         */
+        shouldShowGroup(group) {
+            if (!this.searchText || this.searchText.trim() === "") {
+                return true;
+            }
+            // Show group if at least one monitor matches
+            return group.monitorList && group.monitorList.some(monitor => this.shouldShowMonitor(monitor));
+        },
+
         /**
          * Remove a monitor from a group
          * @param {number} groupIndex Index of group to remove monitor from
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 74a5c3f66..20da06ad6 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -334,7 +334,7 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :show-only-last-heartbeat="config.showOnlyLastHeartbeat" />
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :show-only-last-heartbeat="config.showOnlyLastHeartbeat" :search-text="searchText" />
             </div>
 
             <footer class="mt-5 mb-4">
@@ -457,6 +457,7 @@ export default {
             updateCountdown: null,
             updateCountdownText: null,
             loading: true,
+            searchText: "",
         };
     },
     computed: {
@@ -1066,6 +1067,14 @@ export default {
             }
         },
 
+        /**
+         * Clear the search text
+         * @returns {void}
+         */
+        clearSearchText() {
+            this.searchText = "";
+        },
+
     }
 };
 </script>
@@ -1088,6 +1097,71 @@ export default {
     .danger {
         color: $danger;
     }
+
+    .overall-status-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .status-text {
+        flex-shrink: 0;
+    }
+
+    .search-section {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    .search-divider {
+        width: 1px;
+        height: 30px;
+        background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            #d0d0d0 20%,
+            #d0d0d0 80%,
+            transparent 100%
+        );
+
+        .dark & {
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                #3a4450 20%,
+                #3a4450 80%,
+                transparent 100%
+            );
+        }
+    }
+
+    .search-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .search-icon {
+        padding: 10px;
+        color: #c0c0c0;
+
+        svg[data-icon="times"] {
+            cursor: pointer;
+            transition: all ease-in-out 0.1s;
+
+            &:hover {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .search-input {
+        max-width: 15em;
+        font-size: 16px;
+        font-weight: normal;
+    }
 }
 
 h1 {

From d9c73e78bbdc2921369d90c87a3ad8a623353317 Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Fri, 5 Dec 2025 00:18:11 +0800
Subject: [PATCH 2/3] fix(status-page): fix stylelint
 declaration-colon-newline-after errors

---
 src/pages/StatusPage.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 20da06ad6..79bba8b94 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -1119,22 +1119,24 @@ export default {
     .search-divider {
         width: 1px;
         height: 30px;
-        background: linear-gradient(
-            to bottom,
-            transparent 0%,
-            #d0d0d0 20%,
-            #d0d0d0 80%,
-            transparent 100%
-        );
-
-        .dark & {
-            background: linear-gradient(
+        background:
+            linear-gradient(
                 to bottom,
                 transparent 0%,
-                #3a4450 20%,
-                #3a4450 80%,
+                #d0d0d0 20%,
+                #d0d0d0 80%,
                 transparent 100%
             );
+
+        .dark & {
+            background:
+                linear-gradient(
+                    to bottom,
+                    transparent 0%,
+                    #3a4450 20%,
+                    #3a4450 80%,
+                    transparent 100%
+                );
         }
     }
 

From be6e4264e400269efd8676156590bb5724428a4b Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 9 Jan 2026 04:31:21 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes

---
 src/components/PublicGroupList.vue |  9 +++++----
 src/pages/StatusPage.vue           | 29 ++++++++++-------------------
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 27cd1886d..eea01dd9c 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -213,9 +213,10 @@ export default {
             }
             // Match by tags (name or value)
             if (monitor.tags && monitor.tags.length > 0) {
-                return monitor.tags.some(tag =>
-                    (tag.name && tag.name.toLowerCase().includes(loweredSearchText)) ||
-                    (tag.value && tag.value.toLowerCase().includes(loweredSearchText))
+                return monitor.tags.some(
+                    (tag) =>
+                        (tag.name && tag.name.toLowerCase().includes(loweredSearchText)) ||
+                        (tag.value && tag.value.toLowerCase().includes(loweredSearchText))
                 );
             }
             return false;
@@ -231,7 +232,7 @@ export default {
                 return true;
             }
             // Show group if at least one monitor matches
-            return group.monitorList && group.monitorList.some(monitor => this.shouldShowMonitor(monitor));
+            return group.monitorList && group.monitorList.some((monitor) => this.shouldShowMonitor(monitor));
         },
 
         /**
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 0f93eb3ee..25b1a1a4d 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -534,7 +534,13 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :show-only-last-heartbeat="config.showOnlyLastHeartbeat" :search-text="searchText" />
+                <PublicGroupList
+                    :edit-mode="enableEditMode"
+                    :show-tags="config.showTags"
+                    :show-certificate-expiry="config.showCertificateExpiry"
+                    :show-only-last-heartbeat="config.showOnlyLastHeartbeat"
+                    :search-text="searchText"
+                />
             </div>
 
             <footer class="mt-5 mb-4">
@@ -1315,8 +1321,7 @@ export default {
         clearSearchText() {
             this.searchText = "";
         },
-
-    }
+    },
 };
 </script>
 
@@ -1360,24 +1365,10 @@ export default {
     .search-divider {
         width: 1px;
         height: 30px;
-        background:
-            linear-gradient(
-                to bottom,
-                transparent 0%,
-                #d0d0d0 20%,
-                #d0d0d0 80%,
-                transparent 100%
-            );
+        background: linear-gradient(to bottom, transparent 0%, #d0d0d0 20%, #d0d0d0 80%, transparent 100%);
 
         .dark & {
-            background:
-                linear-gradient(
-                    to bottom,
-                    transparent 0%,
-                    #3a4450 20%,
-                    #3a4450 80%,
-                    transparent 100%
-                );
+            background: linear-gradient(to bottom, transparent 0%, #3a4450 20%, #3a4450 80%, transparent 100%);
         }
     }