From 4fdeba8cb0ed80ea1b04272b507fc9ea943f7fd0 Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Wed, 9 Apr 2025 19:20:25 +0800
Subject: [PATCH 1/9] feat: implement sorting and search with UI and logic
 enhancements

- Add global/group sorting with status bar
- Implement global search functionality
- Adjust sort/search layout and positioning
- Add certificate expiration label support
- Apply language adaptation and background styling
- Add canonical annotations
---
 src/components/PublicGroupList.vue | 1193 +++++++++++++++++++++++++++-
 src/icon.js                        |    8 +-
 src/lang/en.json                   |    1 +
 src/lang/zh-CN.json                |    5 +-
 src/pages/StatusPage.vue           |   22 +-
 5 files changed, 1185 insertions(+), 44 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index bacddbf13..119c52133 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -1,28 +1,205 @@
 <template>
     <!-- Group List -->
+    <div v-if="hasPublicGroups && !editMode" class="global-controls-container">
+        <!-- Global Controls Title -->
+        <h5 class="global-controls-title">{{ $t("Global Sorting Options") }}</h5>
+        
+        <!-- Global Sorting Bar and Search Box -->
+        <div class="global-controls-content">
+            <!-- Global Sort Buttons Group -->
+            <div class="global-sort-controls">
+                <span class="sort-label me-2">{{ $t("Sort By") }}:</span>
+                <div class="sort-buttons">
+                    <button
+                        class="btn btn-sm sort-button"
+                        :class="{'active': globalSortKey === 'status' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
+                        @click="setGlobalSort('status')"
+                    >
+                        {{ $t("Status") }}
+                        <font-awesome-icon v-if="globalSortKey === 'status' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
+                    </button>
+                    <button
+                        class="btn btn-sm sort-button"
+                        :class="{'active': globalSortKey === 'name' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
+                        @click="setGlobalSort('name')"
+                    >
+                        {{ $t("Name") }}
+                        <font-awesome-icon v-if="globalSortKey === 'name' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
+                    </button>
+                    <button
+                        class="btn btn-sm sort-button"
+                        :class="{'active': globalSortKey === 'uptime' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
+                        @click="setGlobalSort('uptime')"
+                    >
+                        {{ $t("Uptime") }}
+                        <font-awesome-icon v-if="globalSortKey === 'uptime' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
+                    </button>
+                    <button
+                        v-if="showCertificateExpiry"
+                        class="btn btn-sm sort-button"
+                        :class="{'active': globalSortKey === 'cert' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
+                        @click="setGlobalSort('cert')"
+                    >
+                        {{ $t("Cert Exp.") }}
+                        <font-awesome-icon v-if="globalSortKey === 'cert' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Global Search Box -->
+            <div class="global-search-container">
+                <div class="input-group">
+                    <input 
+                        type="text" 
+                        class="form-control form-control-sm" 
+                        v-model="globalSearchKeyword" 
+                        :placeholder="$t('Search monitors across all groups')" 
+                        aria-label="Global search"
+                    >
+                    <button 
+                        v-if="globalSearchKeyword" 
+                        class="btn btn-outline-secondary btn-sm" 
+                        type="button" 
+                        @click="clearGlobalSearch"
+                        title="Clear search"
+                    >
+                        <font-awesome-icon icon="times" />
+                    </button>
+                </div>
+                <small v-if="globalSearchResultCount !== null" class="text-muted">
+                    {{ $t("Found {0} monitors", [globalSearchResultCount]) }}
+                </small>
+            </div>
+        </div>
+    </div>
+
     <Draggable
+        v-if="$root && $root.publicGroupList"
         v-model="$root.publicGroupList"
         :disabled="!editMode"
         item-key="id"
         :animation="100"
     >
         <template #item="group">
-            <div class="mb-5" data-testid="group">
-                <!-- Group Title -->
+            <div v-if="group && group.element" class="mb-5 group-container" data-testid="group" v-show="shouldShowGroup(group.element)">
+                <!-- Group Container -->
+                <div class="shadow-box">
+                    <!-- Group Title and Search Bar -->
+                    <div class="group-header">
                 <h2 class="group-title">
                     <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
                     <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
                     <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
                 </h2>
 
-                <div class="shadow-box monitor-list mt-4 position-relative">
-                    <div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
-                        {{ $t("No Monitors") }}
+                        <!-- Group Search Box -->
+                        <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0" 
+                            class="search-container">
+                            <div class="search-input-wrapper">
+                                <input 
+                                    type="text" 
+                                    v-model="group.element.searchKeyword" 
+                                    :placeholder="$t('Search...')" 
+                                    class="search-input form-control form-control-sm"
+                                    @keyup.esc="clearSearch(group.element)"
+                                >
+                                <button 
+                                    class="search-button btn btn-sm"
+                                    @click="clearSearch(group.element)"
+                                    v-if="group.element && group.element.searchKeyword"
+                                    title="Clear search"
+                                >
+                                    <font-awesome-icon icon="times" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Group Sort Button Bar -->
+                    <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0" 
+                        class="sort-bar">
+                        <div class="sort-controls">
+                            <span class="sort-label me-2">
+                                {{ $t("Sort By") }}:
+                            </span>
+                            <div class="sort-buttons">
+                                <button
+                                    class="sort-button"
+                                    :class="{
+                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'status') || 
+                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')
+                                    }"
+                                    @click="setSort(group.element, 'status')"
+                                >
+                                    {{ $t("Status") }}
+                                    <font-awesome-icon 
+                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'status') || 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')" 
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                    />
+                                </button>
+                                <button
+                                    class="sort-button"
+                                    :class="{
+                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'name') || 
+                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')
+                                    }"
+                                    @click="setSort(group.element, 'name')"
+                                >
+                                    {{ $t("Name") }}
+                                    <font-awesome-icon 
+                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'name') || 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')" 
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                    />
+                                </button>
+                                <button
+                                    class="sort-button"
+                                    :class="{
+                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'uptime') || 
+                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')
+                                    }"
+                                    @click="setSort(group.element, 'uptime')"
+                                >
+                                    {{ $t("Uptime") }}
+                                    <font-awesome-icon 
+                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'uptime') || 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')" 
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                    />
+                                </button>
+                                <button
+                                    v-if="showCertificateExpiry"
+                                    class="sort-button"
+                                    :class="{
+                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'cert') || 
+                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')
+                                    }"
+                                    @click="setSort(group.element, 'cert')"
+                                >
+                                    {{ $t("Cert Exp.") }}
+                                    <font-awesome-icon 
+                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'cert') || 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')" 
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                    />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Monitor List -->
+                    <div class="monitor-list-container">
+                        <div v-if="!group.element || !group.element.monitorList || group.element.monitorList.length === 0" class="text-center no-monitor-msg">
+                        {{ $t("No Monitors") }}
+                        </div>
+                        <div v-else-if="getFilteredMonitorList(group.element).length === 0" class="text-center no-monitor-msg">
+                            {{ $t("No services found") }}
                     </div>
 
                     <!-- Monitor List -->
-                    <!-- animation is not working, no idea why -->
                     <Draggable
+                            v-if="group.element && group.element.monitorList && group.element.monitorList.length > 0"
                         v-model="group.element.monitorList"
                         class="monitor-list"
                         group="same-group"
@@ -30,26 +207,26 @@
                         :animation="100"
                         item-key="id"
                     >
-                        <template #item="monitor">
-                            <div class="item" data-testid="monitor">
+                            <template #item="{ element: monitor, index: monitorIndex }">
+                                <div v-if="shouldShowMonitor(monitor, group.element)" class="item" data-testid="monitor">
                                 <div class="row">
                                     <div class="col-9 col-md-8 small-padding">
                                         <div class="info">
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
-                                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
+                                                <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitorIndex)" />
 
-                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                                <Uptime :monitor="monitor" type="24" :pill="true" />
                                             <a
                                                 v-if="showLink(monitor)"
-                                                :href="monitor.element.url"
+                                                    :href="monitor.url"
                                                 class="item-name"
                                                 target="_blank"
                                                 rel="noopener noreferrer"
                                                 data-testid="monitor-name"
                                             >
-                                                {{ monitor.element.name }}
+                                                    {{ monitor.name }}
                                             </a>
-                                            <p v-else class="item-name" data-testid="monitor-name"> {{ monitor.element.name }} </p>
+                                                <p v-else class="item-name" data-testid="monitor-name"> {{ monitor.name }} </p>
 
                                             <span
                                                 title="Setting"
@@ -58,26 +235,27 @@
                                                     v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
                                                     icon="cog" class="action me-3"
-                                                    @click="$refs.monitorSettingDialog.show(group, monitor)"
+                                                        @click="$refs.monitorSettingDialog.show(group.element, monitor)"
                                                 />
                                             </span>
                                         </div>
                                         <div class="extra-info">
-                                            <div v-if="showCertificateExpiry && monitor.element.certExpiryDaysRemaining">
+                                                <div v-if="showCertificateExpiry && monitor.certExpiryDaysRemaining">
                                                 <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
                                             </div>
                                             <div v-if="showTags">
-                                                <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
-                                            </div>
+                                                    <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
+                                                </div>
                                         </div>
                                     </div>
                                     <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
+                                            <HeartbeatBar size="mid" :monitor-id="monitor.id" />
                                     </div>
                                 </div>
                             </div>
                         </template>
                     </Draggable>
+                    </div>
                 </div>
             </div>
         </template>
@@ -113,22 +291,495 @@ export default {
         /** Should expiry be shown? */
         showCertificateExpiry: {
             type: Boolean,
-        }
+        },
+        /** Status page slug */
+        slug: {
+            type: String,
+            default: 'default'
+        },
+        monitorList: {
+            type: Array,
+            default: () => [],
+        },
+        groups: {
+            type: Array,
+            default: () => [],
+        },
     },
     data() {
         return {
-
+            globalSearchKeyword: '',
+            searchText: "",
+            globalSortKey: 'status',
+            globalSortDirection: 'desc',
+            isGlobalSortActive: false,
         };
     },
     computed: {
         showGroupDrag() {
-            return (this.$root.publicGroupList.length >= 2);
+            return (this.$root && this.$root.publicGroupList && this.$root.publicGroupList.length >= 2);
+        },
+        hasMonitors() {
+            return this.groups && Array.isArray(this.groups) && this.groups.some(group => 
+                group && group.element && group.element.monitorList && group.element.monitorList.length > 0
+            );
+        },
+        hasPublicGroups() {
+            return this.$root && 
+                   this.$root.publicGroupList && 
+                   Array.isArray(this.$root.publicGroupList) && 
+                   this.$root.publicGroupList.length > 0 &&
+                   this.$root.publicGroupList.some(group => 
+                       group && group.monitorList && group.monitorList.length > 0
+                   );
+        },
+        filteredMonitorList() {
+            if (!this.searchText || !this.monitorList) {
+                return this.monitorList || [];
+            }
+            
+            const searchLower = this.searchText.toLowerCase();
+            return this.monitorList.filter(monitor => 
+                monitor && monitor.name && monitor.name.toLowerCase().includes(searchLower)
+            );
+        },
+        shouldShowSearch() {
+            return !this.editMode && this.monitorList && this.monitorList.length > 0;
+        },
+        globalSearchResultCount() {
+            if (!this.globalSearchKeyword) {
+                return null;
+            }
+            
+            let count = 0;
+            if (!this.groups) return count;
+            
+            for (const group of this.groups) {
+                if (!group || !group.element || !group.element.monitorList) continue;
+                
+                for (const monitor of group.element.monitorList) {
+                    if (monitor && this.matchesGlobalSearch(monitor)) {
+                        count++;
+                    }
+                }
+            }
+            return count;
+        },
+        hasAnyGroupWithIndependentSort() {
+            if (!this.$root || !this.$root.publicGroupList) {
+                return false;
+            }
+            
+            return this.$root.publicGroupList.some(group => 
+                group && group.useOwnSort === true
+            );
+        },
+    },
+    watch: {
+        // Watch for changes in heartbeatList to re-apply sort
+        '$root.heartbeatList': {
+            handler() {
+                if (this.$root && this.$root.publicGroupList) {
+                    this.$root.publicGroupList.forEach(group => {
+                        if (group) {
+                            this.applySort(group);
+                        }
+                    });
+                }
+            },
+            deep: true,
+        },
+        // Watch for changes in uptimeList to re-apply sort
+        '$root.uptimeList': {
+             handler() {
+                if (this.$root && this.$root.publicGroupList) {
+                    this.$root.publicGroupList.forEach(group => {
+                        if (group) {
+                            this.applySort(group);
+                        }
+                    });
+                }
+            },
+            deep: true,
+        },
+        // Watch for changes in global sort
+        globalSortKey: {
+            handler() {
+                this.applyGlobalSort();
+            }
+        },
+        globalSortDirection: {
+            handler() {
+                this.applyGlobalSort();
+            }
         }
     },
     created() {
+        // Method to get saved sort settings from localStorage
+        const getSavedSortSettings = (group) => {
+            try {
+                const groupId = group.id || group.name || 'Default Group';
+                const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
+                
+                const savedSettings = localStorage.getItem(storageKey);
+                if (savedSettings) {
+                    const settings = JSON.parse(savedSettings);
+                    return {
+                        key: settings.key,
+                        direction: settings.direction
+                    };
+                }
+            } catch (error) {
+                console.error('Cannot read sort settings', error);
+            }
+            return null;
+        };
 
+        // Try to read saved global sort settings from localStorage
+        try {
+            const storageKey = `uptime-kuma-global-sort-${this.slug}`;
+            const savedGlobalSettings = localStorage.getItem(storageKey);
+            if (savedGlobalSettings) {
+                const settings = JSON.parse(savedGlobalSettings);
+                this.globalSortKey = settings.key;
+                this.globalSortDirection = settings.direction;
+                // Also restore global sort active state
+                this.isGlobalSortActive = settings.active === undefined ? false : settings.active;
+            }
+        } catch (error) {
+            console.error('Cannot read global sort settings', error);
+        }
+
+        // Initialize sort state and apply initial sort for existing groups
+        if (this.$root.publicGroupList) {
+            this.$root.publicGroupList.forEach(group => {
+                if (group) {
+                    // Initialize search keywords
+                    if (group.searchKeyword === undefined) {
+                        group.searchKeyword = '';
+                    }
+                    
+                    // Try to read saved sort settings from localStorage
+                    const savedSettings = getSavedSortSettings(group);
+                    
+                    if (savedSettings) {
+                        // Apply saved settings if found
+                        group.sortKey = savedSettings.key;
+                        group.sortDirection = savedSettings.direction;
+                    } else {
+                        // Use default settings otherwise
+                        if (group.sortKey === undefined) {
+                            group.sortKey = 'status';
+                        }
+                        if (group.sortDirection === undefined) {
+                            group.sortDirection = 'desc';
+                        }
+                    }
+                    
+                    // Apply initial sort when the component is created
+                    this.applySort(group);
+                }
+            });
+        }
+
+        // Apply global sorting after initialization
+        this.applyGlobalSort();
+
+        // Watch for new groups being added and initialize their sort state
+        if (this.$root) {
+            this.$root.$watch('publicGroupList', (newGroups) => {
+                if (newGroups) {
+                    newGroups.forEach(group => {
+                        if (group) {
+                            // Ensure each group has search keyword property
+                            if (group.searchKeyword === undefined) {
+                                group.searchKeyword = '';
+                            }
+                            
+                            if (group.sortKey === undefined) {
+                                // Try to read sort settings from localStorage
+                                const savedSettings = getSavedSortSettings(group);
+                                
+                                if (savedSettings) {
+                                    // Apply saved settings if found
+                                    group.sortKey = savedSettings.key;
+                                    group.sortDirection = savedSettings.direction;
+                                } else {
+                                    // Use default settings otherwise
+                                    group.sortKey = 'status';
+                                    group.sortDirection = 'desc';
+                                }
+                                
+                                // Apply sort to newly added group
+                                this.applySort(group);
+                            }
+                        }
+                    });
+                }
+            }, { deep: true });
+        }
+    },
+    unmounted() {
+        // Clean up references when component is unmounted to avoid memory leaks
+        // In Vue 3, watchers are automatically cleaned up when component is unmounted
     },
     methods: {
+        /**
+         * Check if monitor matches search keyword
+         * @param {object} monitor Monitor object
+         * @param {string} keyword Search keyword
+         * @returns {boolean} Whether it matches
+         */
+        monitorMatchesSearch(monitor, keyword) {
+            if (!keyword) return true;
+            if (!monitor) return false;
+            
+            keyword = keyword.toLowerCase().trim();
+            
+            // Search name, URL and description fields
+            return (monitor.name && monitor.name.toLowerCase().includes(keyword)) || 
+                   (monitor.url && monitor.url.toLowerCase().includes(keyword)) || 
+                   (monitor.description && monitor.description.toLowerCase().includes(keyword));
+        },
+        
+        /**
+         * Check if monitor matches global search criteria
+         * @param {object} monitor Monitor object
+         * @returns {boolean} Whether it matches
+         */
+        matchesGlobalSearch(monitor) {
+            if (!this.globalSearchKeyword) return true;
+            if (!monitor) return false;
+            
+            return this.monitorMatchesSearch(monitor, this.globalSearchKeyword);
+        },
+        
+        /**
+         * Determine if monitor should be displayed
+         * @param {object} monitor Monitor object
+         * @param {object} group Group object
+         * @returns {boolean} Whether to display
+         */
+        shouldShowMonitor(monitor, group) {
+            if (!monitor) return false;
+            
+            // Check global search first
+            if (this.globalSearchKeyword && !this.matchesGlobalSearch(monitor)) {
+                return false;
+            }
+            
+            // Then check group search
+            if (group && group.searchKeyword) {
+                return this.monitorMatchesSearch(monitor, group.searchKeyword);
+            }
+            
+            return true;
+        },
+        
+        /**
+         * Get filtered monitor list
+         * @param {object} group Group object
+         * @returns {array} Filtered monitor list
+         */
+        getFilteredMonitorList(group) {
+            if (!group || !group.monitorList || !Array.isArray(group.monitorList)) return [];
+            
+            let result = [...group.monitorList]; // Create a copy to avoid modifying original array
+            
+            // Apply global search first
+            if (this.globalSearchKeyword) {
+                result = result.filter(monitor => 
+                    monitor && this.matchesGlobalSearch(monitor)
+                );
+            }
+            
+            // Then apply group search
+            if (group.searchKeyword) {
+                result = result.filter(monitor => 
+                    monitor && this.monitorMatchesSearch(monitor, group.searchKeyword)
+                );
+            }
+            
+            return result;
+        },
+        
+        /**
+         * Determine if group should be displayed
+         * @param {object} group Group object
+         * @returns {boolean} Whether to display
+         */
+        shouldShowGroup(group) {
+            if (!group) return false;
+            
+            // Always show in edit mode
+            if (this.editMode) return true;
+            
+            // If there's global search, only show groups containing matching monitors
+            if (this.globalSearchKeyword) {
+                return group.monitorList && group.monitorList.some(monitor => 
+                    this.matchesGlobalSearch(monitor)
+                );
+            }
+            
+            return true;
+        },
+        
+        /**
+         * Clear group search keyword
+         * @param {object} group Group object
+         */
+        clearSearch(group) {
+            if (group) {
+                group.searchKeyword = '';
+            }
+        },
+        
+        /**
+         * Clear global search keyword
+         */
+        clearGlobalSearch() {
+            this.globalSearchKeyword = '';
+        },
+        
+        /**
+         * Set sort key and direction for a group, then apply the sort
+         * @param {object} group The group object
+         * @param {string} key The sort key ('status', 'name', 'uptime', 'cert')
+         */
+        setSort(group, key) {
+            // Change only the current group's sort settings even when global sort is active
+            if (group.sortKey === key) {
+                group.sortDirection = group.sortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                group.sortKey = key;
+                group.sortDirection = (key === 'status') ? 'desc' : 'asc';
+            }
+            
+            // Save sort settings to localStorage
+            try {
+                // Get a unique identifier for the group, use name if id is not available
+                const groupId = group.id || group.name || 'Default Group';
+                const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
+                
+                // Save sort settings
+                const sortSettings = {
+                    key: group.sortKey,
+                    direction: group.sortDirection
+                };
+                localStorage.setItem(storageKey, JSON.stringify(sortSettings));
+            } catch (error) {
+                console.error('Cannot save sort settings', error);
+            }
+            
+            // If global sort is active, we need to temporarily disable it to apply group's sort
+            const wasGlobalSortActive = this.isGlobalSortActive;
+            
+            // Temporarily disable global sort
+            if (wasGlobalSortActive) {
+                // Set independent sort flag for current group
+                group.useOwnSort = true;
+            }
+            
+            // Apply sort to this group
+            this.applySortToGroup(group);
+        },
+
+        /**
+         * Apply sort to specific group, considering independent sort settings
+         * @param {object} group Group object
+         */
+        applySortToGroup(group) {
+            if (!group || !group.monitorList || !Array.isArray(group.monitorList)) {
+                return;
+            }
+            
+            // Check if group has independent sort settings
+            if (group.useOwnSort || !this.isGlobalSortActive) {
+                // Use group's own sort settings
+                const sortKey = group.sortKey || 'status';
+                const sortDirection = group.sortDirection || 'desc';
+                this.sortMonitorList(group.monitorList, sortKey, sortDirection);
+            } else {
+                // Use global sort settings
+                this.sortMonitorList(group.monitorList, this.globalSortKey, this.globalSortDirection);
+            }
+        },
+
+        /**
+         * Apply sorting logic directly to the group's monitorList (in-place)
+         * @param {object} group The group object containing monitorList
+         */
+        applySort(group) {
+            this.applySortToGroup(group);
+        },
+
+        /**
+         * Sort monitor list without modifying group's sort settings
+         * @param {array} monitorList Monitor list to sort
+         * @param {string} sortKey Sort key
+         * @param {string} sortDirection Sort direction
+         */
+        sortMonitorList(monitorList, sortKey, sortDirection) {
+            if (!Array.isArray(monitorList)) {
+                return;
+            }
+
+            monitorList.sort((a, b) => {
+                if (!a || !b) return 0;
+                
+                let comparison = 0;
+                let valueA, valueB;
+
+                if (sortKey === 'status') {
+                    const getStatusPriority = (monitor) => {
+                        if (!monitor || !monitor.id) return 4;
+                        
+                        // Ensure heartbeatList is available
+                        const hbList = this.$root.heartbeatList || {};
+                        const hbArr = hbList[monitor.id];
+                        if (hbArr && hbArr.length > 0) {
+                            const lastStatus = hbArr.at(-1).status;
+                            if (lastStatus === 0) return 0; // Down
+                            if (lastStatus === 1) return 1; // Up
+                            if (lastStatus === 2) return 2; // Pending
+                            if (lastStatus === 3) return 3; // Maintenance
+                        }
+                        return 4; // Unknown/No data - sort last
+                    };
+                    valueA = getStatusPriority(a);
+                    valueB = getStatusPriority(b);
+                } else if (sortKey === 'name') {
+                    valueA = a.name ? a.name.toLowerCase() : '';
+                    valueB = b.name ? b.name.toLowerCase() : '';
+                } else if (sortKey === 'uptime') {
+                    const uptimeList = this.$root.uptimeList || {};
+                    const uptimeA = a.id ? parseFloat(uptimeList[`${a.id}_24`]) || 0 : 0;
+                    const uptimeB = b.id ? parseFloat(uptimeList[`${b.id}_24`]) || 0 : 0;
+                    valueA = uptimeA;
+                    valueB = uptimeB;
+                } else if (sortKey === 'cert') {
+                    // Sort by certificate expiry time
+                    // Valid certificates have remaining days, invalid or no certificates have -1
+                    valueA = a.validCert && a.certExpiryDaysRemaining ? a.certExpiryDaysRemaining : -1;
+                    valueB = b.validCert && b.certExpiryDaysRemaining ? b.certExpiryDaysRemaining : -1;
+                }
+
+                if (valueA < valueB) {
+                    comparison = -1;
+                } else if (valueA > valueB) {
+                    comparison = 1;
+                }
+
+                // Special handling for status sorting only
+                if (sortKey === 'status') {
+                    return sortDirection === 'desc' ? (comparison * -1) : comparison;
+                } else {
+                    // Use pure sort result, without special handling for down servers
+                    return sortDirection === 'asc' ? comparison : (comparison * -1);
+                }
+            });
+        },
+
         /**
          * Remove the specified group
          * @param {number} index Index of group to remove
@@ -162,9 +813,9 @@ export default {
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
+                return this.$root.monitorList[monitor.id].type === "http" || this.$root.monitorList[monitor.id].type === "keyword" || this.$root.monitorList[monitor.id].type === "json-query";
             }
-            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
+            return monitor.sendUrl && monitor.url && monitor.url !== "https://";
         },
 
         /**
@@ -173,9 +824,9 @@ export default {
          * @returns {string} Certificate expiry message
          */
         formattedCertExpiryMessage(monitor) {
-            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
-                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
-            } else if (monitor?.element?.validCert === false) {
+            if (monitor?.validCert && monitor?.certExpiryDaysRemaining) {
+                return monitor.certExpiryDaysRemaining + " " + this.$tc("day", monitor.certExpiryDaysRemaining);
+            } else if (monitor?.validCert === false) {
                 return this.$t("noOrBadCertificate");
             } else {
                 return this.$t("Unknown") + " " + this.$tc("day", 2);
@@ -188,11 +839,153 @@ export default {
          * @returns {string} Color for certificate expiry
          */
         certExpiryColor(monitor) {
-            if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
+            if (monitor?.validCert && monitor.certExpiryDaysRemaining > 7) {
                 return "#059669";
             }
             return "#DC2626";
         },
+
+        /**
+         * Toggle global sort state
+         */
+        toggleGlobalSort() {
+            this.isGlobalSortActive = !this.isGlobalSortActive;
+            
+            // Reset all groups' independent sort flags when toggling global sort state
+            if (this.$root && this.$root.publicGroupList) {
+                this.$root.publicGroupList.forEach(group => {
+                    if (group) {
+                        group.useOwnSort = false;
+                    }
+                });
+            }
+            
+            // Save settings
+            try {
+                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
+                const globalSortSettings = {
+                    key: this.globalSortKey,
+                    direction: this.globalSortDirection,
+                    active: this.isGlobalSortActive
+                };
+                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
+            } catch (error) {
+                console.error('Cannot save global sort settings', error);
+            }
+            
+            // Apply appropriate sorting based on global sort state
+            if (this.isGlobalSortActive) {
+                this.applyGlobalSort();
+            } else {
+                // Restore independent sorting for each group
+                if (this.$root && this.$root.publicGroupList) {
+                    this.$root.publicGroupList.forEach(group => {
+                        if (group) {
+                            this.applySort(group);
+                        }
+                    });
+                }
+            }
+        },
+
+        /**
+         * Set global sort key and direction
+         * @param {string} key The sort key ('status', 'name', 'uptime', 'cert')
+         */
+        setGlobalSort(key) {
+            // Update global sort settings
+            if (this.globalSortKey === key) {
+                this.globalSortDirection = this.globalSortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                this.globalSortKey = key;
+                this.globalSortDirection = (key === 'status') ? 'desc' : 'asc';
+            }
+            
+            // Activate global sort
+            this.isGlobalSortActive = true;
+            
+            // Clear all groups' independent sort flags
+            if (this.$root && this.$root.publicGroupList) {
+                this.$root.publicGroupList.forEach(group => {
+                    if (group) {
+                        group.useOwnSort = false;
+                    }
+                });
+            }
+            
+            // Save global sort settings to localStorage
+            try {
+                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
+                
+                // Save global sort settings
+                const globalSortSettings = {
+                    key: this.globalSortKey,
+                    direction: this.globalSortDirection,
+                    active: this.isGlobalSortActive
+                };
+                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
+            } catch (error) {
+                console.error('Cannot save global sort settings', error);
+            }
+            
+            // Apply global sort
+            this.applyGlobalSort();
+        },
+
+        /**
+         * Disable global sort and restore independent sorting for each group
+         */
+        disableGlobalSort() {
+            this.isGlobalSortActive = false;
+            
+            // Clear all groups' independent sort flags
+            if (this.$root && this.$root.publicGroupList) {
+                this.$root.publicGroupList.forEach(group => {
+                    if (group) {
+                        group.useOwnSort = false;
+                    }
+                });
+            }
+            
+            // Save settings
+            try {
+                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
+                const globalSortSettings = {
+                    key: this.globalSortKey,
+                    direction: this.globalSortDirection,
+                    active: false
+                };
+                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
+            } catch (error) {
+                console.error('Cannot save global sort settings', error);
+            }
+            
+            // Restore original sorting for each group
+            if (this.$root && this.$root.publicGroupList) {
+                this.$root.publicGroupList.forEach(group => {
+                    if (group) {
+                        this.applySort(group);
+                    }
+                });
+            }
+        },
+
+        /**
+         * Apply global sorting logic to all groups
+         */
+        applyGlobalSort() {
+            if (!this.isGlobalSortActive || !this.$root || !this.$root.publicGroupList) {
+                return;
+            }
+            
+            // Apply global sort settings to all groups not using independent sorting
+            this.$root.publicGroupList.forEach(group => {
+                if (group && group.monitorList && !group.useOwnSort) {
+                    // Use global sort settings for sorting
+                    this.sortMonitorList(group.monitorList, this.globalSortKey, this.globalSortDirection);
+                }
+            });
+        },
     }
 };
 </script>
@@ -200,6 +993,144 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars";
 
+.group-container {
+    margin-bottom: 2rem;
+}
+
+.group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.group-title {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+
+.search-container {
+    margin-left: auto;
+}
+
+.search-input-wrapper {
+    position: relative;
+    display: flex;
+}
+
+.search-input {
+    padding-right: 35px;
+    width: 200px;
+    font-size: 0.85rem;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    background-color: #fff;
+}
+
+.search-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 10px;
+    background: transparent;
+    border: none;
+    color: #6c757d;
+    cursor: pointer;
+}
+
+.search-button:hover {
+    color: #495057;
+}
+
+.sort-bar {
+    padding: 0.5rem 0;
+    margin-left: -1px;
+    margin-right: -1px;
+    width: calc(100% + 2px);
+}
+
+.sort-controls {
+    display: flex;
+    align-items: center;
+    padding: 0 1.25rem;
+}
+
+.sort-label {
+    white-space: nowrap;
+    margin-bottom: 0;
+    font-weight: 500;
+    color: #6c757d;
+}
+
+.sort-buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.sort-button {
+    padding: 0.25rem 0.75rem;
+    margin-left: 0.25rem;
+    margin-bottom: 0;
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    font-size: 0.8rem;
+    border-radius: 4px;
+
+    &:hover {
+        background-color: #e9ecef;
+        border-color: #ced4da;
+    }
+
+    &.active {
+        background-color: #28a745;
+        border-color: #28a745;
+        color: white;
+    }
+
+    .fa-arrow-up,
+    .fa-arrow-down {
+        margin-left: 0.3em;
+        font-size: 0.75rem;
+    }
+}
+
+.monitor-list-container {
+    position: relative;
+}
+
+.monitor-list {
+    min-height: 46px;
+    
+    .item {
+        padding: 0.75rem 1.25rem;
+        border-bottom: 1px solid #f0f0f0;
+        
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+}
+
+.shadow-box {
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid #e9ecef;
+    
+    .dark & {
+        background-color: #2d3748;
+        border-color: #4a5568;
+    }
+}
+
 .extra-info {
     display: flex;
     margin-bottom: 0.5rem;
@@ -216,10 +1147,6 @@ export default {
     left: 0;
 }
 
-.monitor-list {
-    min-height: 46px;
-}
-
 .item-name {
     padding-left: 5px;
     padding-right: 5px;
@@ -253,13 +1180,6 @@ export default {
     color: $danger;
 }
 
-.group-title {
-    span {
-        display: inline-block;
-        min-width: 15px;
-    }
-}
-
 .mobile {
     .item {
         padding: 13px 0 10px;
@@ -270,4 +1190,201 @@ export default {
     background-color: $maintenance;
 }
 
+.global-controls-container {
+    padding: 1rem;
+    background-color: #fff;
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.global-controls-title {
+    text-align: center;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e9ecef;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #495057;
+}
+
+.global-controls-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.5rem; /* Slightly reduce padding for content */
+}
+
+.global-sort-controls {
+    display: flex;
+    align-items: center;
+
+    .sort-label {
+        white-space: nowrap;
+        font-weight: 500;
+        color: #6c757d;
+        margin-right: 0.5rem;
+        padding: 0.25rem 0.5rem; /* Add padding to label */
+        border: 1px solid transparent; /* Match button border for alignment */
+        border-radius: 4px; /* Match button radius */
+    }
+
+    .sort-buttons {
+        display: flex;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .sort-button {
+            padding: 0.25rem 0.75rem;
+            border-radius: 0;
+            border: none;
+            border-right: 1px solid #dee2e6;
+            background-color: #fff;
+            color: #495057;
+            font-size: 0.8rem;
+            transition: background-color 0.15s ease-in-out;
+
+            &:last-child {
+                border-right: none;
+            }
+
+            &:hover {
+                background-color: #e9ecef;
+            }
+
+            &.active {
+                background-color: #28a745;
+                color: white;
+            }
+
+            .fa-arrow-up,
+            .fa-arrow-down {
+                margin-left: 0.3em;
+                font-size: 0.75rem;
+            }
+        }
+    }
+}
+
+.global-search-container {
+    margin-left: 1rem; /* Space between sort and search */
+    flex-grow: 1; /* Allow search to take remaining space */
+    max-width: 400px; /* Limit max width */
+
+    .input-group {
+        position: relative;
+        
+        .form-control {
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            background-color: #fff;
+        }
+        
+        .btn {
+            position: absolute;
+            right: 1px; /* Position inside the input border */
+            top: 1px;
+            bottom: 1px;
+            border-radius: 0 4px 4px 0;
+            z-index: 3;
+            background-color: transparent;
+            border: none;
+            padding: 0 0.75rem;
+        }
+    }
+    
+    small {
+        display: none; /* Hide the 'Found X monitors' text */
+    }
+}
+
+.dark {
+    .global-controls-container {
+        background-color: #2d3748;
+        border-color: #4a5568;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+    .global-controls-title {
+        border-bottom-color: #4a5568;
+        color: #e2e8f0;
+    }
+
+    .global-sort-controls {
+        .sort-label {
+            color: $dark-font-color;
+            border-color: transparent;
+        }
+        
+        .sort-buttons {
+            border-color: #4a5568;
+            
+            .sort-button {
+                background-color: #1a202c;
+                border-right-color: #4a5568;
+                color: #e2e8f0;
+                
+                &:hover {
+                    background-color: #4a5568;
+                }
+                
+                &.active {
+                    background-color: #28a745;
+                    color: white;
+                }
+            }
+        }
+    }
+
+    .global-search-container {
+        .form-control {
+            background-color: #1a202c;
+            border-color: #4a5568;
+            color: $dark-font-color;
+        }
+        
+        .btn {
+            color: $dark-font-color;
+            
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .group-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .search-container {
+        margin-left: 0;
+        margin-top: 0.5rem;
+        width: 100%;
+    }
+    
+    .search-input {
+        width: 100%;
+    }
+    
+    .sort-controls {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .sort-buttons {
+        margin-top: 0.5rem;
+    }
+    
+    .sort-button {
+        margin-bottom: 0.5rem;
+    }
+}
+
 </style>
+
diff --git a/src/icon.js b/src/icon.js
index 7bdfe1ca0..3f8c11441 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -20,8 +20,8 @@ import {
     faTachometerAlt,
     faTimes,
     faTimesCircle,
-    faTrash,
     faCheckCircle,
+    faTrash,
     faStream,
     faSave,
     faExclamationCircle,
@@ -50,6 +50,8 @@ import {
     faInfoCircle,
     faClone,
     faCertificate,
+    faArrowUp,
+    faArrowDown,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -66,8 +68,8 @@ library.add(
     faTachometerAlt,
     faTimes,
     faTimesCircle,
-    faTrash,
     faCheckCircle,
+    faTrash,
     faStream,
     faSave,
     faExclamationCircle,
@@ -97,6 +99,8 @@ library.add(
     faInfoCircle,
     faClone,
     faCertificate,
+    faArrowUp,
+    faArrowDown,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/lang/en.json b/src/lang/en.json
index cb704b0fe..bc3dd9ab8 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -48,6 +48,7 @@
     "Current": "Current",
     "Uptime": "Uptime",
     "Cert Exp.": "Cert Exp.",
+    "Sort By": "Sort By",
     "Monitor": "Monitor | Monitors",
     "now": "now",
     "time ago": "{0} ago",
diff --git a/src/lang/zh-CN.json b/src/lang/zh-CN.json
index 5b473b071..af9ccaefc 100644
--- a/src/lang/zh-CN.json
+++ b/src/lang/zh-CN.json
@@ -27,6 +27,7 @@
     "notificationDescription": "通知必须被分配给监控项才能正常工作。",
     "keywordDescription": "在纯 HTML 或 JSON 响应中搜索关键字，区分大小写。",
     "pauseDashboardHome": "暂停",
+    "Sort By": "排序方式",
     "deleteMonitorMsg": "确定要删除此监控项吗？",
     "deleteMaintenanceMsg": "确定要删除此维护吗？",
     "deleteNotificationMsg": "确定要为所有监控项删除此通知吗？",
@@ -1117,5 +1118,7 @@
     "wayToGetWahaApiKey": "API 密钥是你用于运行 WAHA 的 WHATSAPP_API_KEY 环境变量值。",
     "telegramTemplateFormatDescription": "Telegram 允许在消息中使用不同的标记语言，具体细节请参见 Telegram {0}。",
     "YZJ Webhook URL": "YZJ Webhook 地址",
-    "YZJ Robot Token": "YZJ 机器人令牌"
+    "YZJ Robot Token": "YZJ 机器人令牌",
+    "Search...": "搜索...",
+    "No services found": "未找到服务"
 }
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 116968282..08edf77fe 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -328,7 +328,7 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" />
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :slug="slug" />
             </div>
 
             <footer class="mt-5 mb-4">
@@ -773,10 +773,26 @@ export default {
             if (! this.editMode) {
                 axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
                     const { heartbeatList, uptimeList } = res.data;
-
                     this.$root.heartbeatList = heartbeatList;
                     this.$root.uptimeList = uptimeList;
-
+                    if (!this.enableEditMode) {
+                        this.$root.publicGroupList.forEach((group) => {
+                            const downs = [];
+                            const others = [];
+                            // Traverse all monitors in the current group
+                            for (const monitor of group.monitorList) {
+                                const hbArr = heartbeatList[monitor.id];
+                                // Check if the last heartbeat status is Down (status === 0)
+                                if (hbArr && hbArr.length > 0 && hbArr.at(-1).status === 0) {
+                                    downs.push(monitor);
+                                } else {
+                                    others.push(monitor);
+                                }
+                            }
+                            // Place Down monitors at the front, keep the original order for others
+                            group.monitorList = downs.concat(others);
+                        });
+                    }
                     const heartbeatIds = Object.keys(heartbeatList);
                     const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
                         const monitorHeartbeats = heartbeatList[currentId];

From fee7666c0f68ceb9fad2e7bd4630f6469d6eb667 Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sun, 13 Apr 2025 18:09:32 +0800
Subject: [PATCH 2/9] Removed the old downtime prioritization logic

---
 src/pages/StatusPage.vue | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 08edf77fe..e3dc2b211 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -775,24 +775,10 @@ export default {
                     const { heartbeatList, uptimeList } = res.data;
                     this.$root.heartbeatList = heartbeatList;
                     this.$root.uptimeList = uptimeList;
-                    if (!this.enableEditMode) {
-                        this.$root.publicGroupList.forEach((group) => {
-                            const downs = [];
-                            const others = [];
-                            // Traverse all monitors in the current group
-                            for (const monitor of group.monitorList) {
-                                const hbArr = heartbeatList[monitor.id];
-                                // Check if the last heartbeat status is Down (status === 0)
-                                if (hbArr && hbArr.length > 0 && hbArr.at(-1).status === 0) {
-                                    downs.push(monitor);
-                                } else {
-                                    others.push(monitor);
-                                }
-                            }
-                            // Place Down monitors at the front, keep the original order for others
-                            group.monitorList = downs.concat(others);
-                        });
-                    }
+                    
+                    // 注：移除了原有的"宕机优先"排序逻辑
+                    // 现在监控器的排序将完全由PublicGroupList组件的排序功能控制
+                    
                     const heartbeatIds = Object.keys(heartbeatList);
                     const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
                         const monitorHeartbeats = heartbeatList[currentId];

From 436ac1b2ca55a311d26bd19e2ec301170185c91b Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sun, 13 Apr 2025 18:43:41 +0800
Subject: [PATCH 3/9] bug fix

---
 src/components/PublicGroupList.vue | 82 +++++++++++++++++++++++-------
 1 file changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 119c52133..870fb4d47 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -426,7 +426,8 @@ export default {
                     const settings = JSON.parse(savedSettings);
                     return {
                         key: settings.key,
-                        direction: settings.direction
+                        direction: settings.direction,
+                        useOwnSort: settings.useOwnSort
                     };
                 }
             } catch (error) {
@@ -466,6 +467,9 @@ export default {
                         // Apply saved settings if found
                         group.sortKey = savedSettings.key;
                         group.sortDirection = savedSettings.direction;
+                        
+                        // Restore independent sort flag from localStorage
+                        group.useOwnSort = savedSettings.useOwnSort === undefined ? false : savedSettings.useOwnSort;
                     } else {
                         // Use default settings otherwise
                         if (group.sortKey === undefined) {
@@ -474,6 +478,7 @@ export default {
                         if (group.sortDirection === undefined) {
                             group.sortDirection = 'desc';
                         }
+                        group.useOwnSort = false;
                     }
                     
                     // Apply initial sort when the component is created
@@ -504,10 +509,13 @@ export default {
                                     // Apply saved settings if found
                                     group.sortKey = savedSettings.key;
                                     group.sortDirection = savedSettings.direction;
+                                    // Restore independent sort flag from localStorage
+                                    group.useOwnSort = savedSettings.useOwnSort === undefined ? false : savedSettings.useOwnSort;
                                 } else {
                                     // Use default settings otherwise
                                     group.sortKey = 'status';
                                     group.sortDirection = 'desc';
+                                    group.useOwnSort = false;
                                 }
                                 
                                 // Apply sort to newly added group
@@ -655,31 +663,26 @@ export default {
                 group.sortDirection = (key === 'status') ? 'desc' : 'asc';
             }
             
+            // Set independent sort flag for current group when clicking on its sort buttons
+            group.useOwnSort = true;
+            
             // Save sort settings to localStorage
             try {
                 // Get a unique identifier for the group, use name if id is not available
                 const groupId = group.id || group.name || 'Default Group';
                 const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
                 
-                // Save sort settings
+                // Save sort settings with the useOwnSort flag
                 const sortSettings = {
                     key: group.sortKey,
-                    direction: group.sortDirection
+                    direction: group.sortDirection,
+                    useOwnSort: group.useOwnSort
                 };
                 localStorage.setItem(storageKey, JSON.stringify(sortSettings));
             } catch (error) {
                 console.error('Cannot save sort settings', error);
             }
             
-            // If global sort is active, we need to temporarily disable it to apply group's sort
-            const wasGlobalSortActive = this.isGlobalSortActive;
-            
-            // Temporarily disable global sort
-            if (wasGlobalSortActive) {
-                // Set independent sort flag for current group
-                group.useOwnSort = true;
-            }
-            
             // Apply sort to this group
             this.applySortToGroup(group);
         },
@@ -851,16 +854,31 @@ export default {
         toggleGlobalSort() {
             this.isGlobalSortActive = !this.isGlobalSortActive;
             
-            // Reset all groups' independent sort flags when toggling global sort state
+            // Reset all groups' independent sort flags and save their status to localStorage
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
+                        // When toggling global sort, reset all group's independent sort flags
                         group.useOwnSort = false;
+                        
+                        // Save the updated status to localStorage for each group
+                        try {
+                            const groupId = group.id || group.name || 'Default Group';
+                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
+                            const groupSortSettings = {
+                                key: group.sortKey,
+                                direction: group.sortDirection,
+                                useOwnSort: false
+                            };
+                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
+                        } catch (error) {
+                            console.error('Cannot save group sort settings', error);
+                        }
                     }
                 });
             }
             
-            // Save settings
+            // Save global sort toggle state
             try {
                 const storageKey = `uptime-kuma-global-sort-${this.slug}`;
                 const globalSortSettings = {
@@ -904,11 +922,26 @@ export default {
             // Activate global sort
             this.isGlobalSortActive = true;
             
-            // Clear all groups' independent sort flags
+            // Clear all groups' independent sort flags and save each group's settings
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
+                        // Set useOwnSort to false for all groups
                         group.useOwnSort = false;
+                        
+                        // Save the group's sort settings with useOwnSort=false to localStorage
+                        try {
+                            const groupId = group.id || group.name || 'Default Group';
+                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
+                            const groupSortSettings = {
+                                key: group.sortKey,
+                                direction: group.sortDirection,
+                                useOwnSort: false
+                            };
+                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
+                        } catch (error) {
+                            console.error('Cannot save group sort settings', error);
+                        }
                     }
                 });
             }
@@ -938,16 +971,31 @@ export default {
         disableGlobalSort() {
             this.isGlobalSortActive = false;
             
-            // Clear all groups' independent sort flags
+            // Save the updated useOwnSort=false status for all groups
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
+                        // Mark all groups as not using independent sort when global sort is disabled
                         group.useOwnSort = false;
+                        
+                        // Save the updated status to localStorage
+                        try {
+                            const groupId = group.id || group.name || 'Default Group';
+                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
+                            const groupSortSettings = {
+                                key: group.sortKey,
+                                direction: group.sortDirection,
+                                useOwnSort: false
+                            };
+                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
+                        } catch (error) {
+                            console.error('Cannot save group sort settings', error);
+                        }
                     }
                 });
             }
             
-            // Save settings
+            // Save global sort settings with active=false
             try {
                 const storageKey = `uptime-kuma-global-sort-${this.slug}`;
                 const globalSortSettings = {

From 853e84178ed174eaa511446b02c68794e7dfe5ab Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sun, 13 Apr 2025 23:41:43 +0800
Subject: [PATCH 4/9] Fixed the issue that clicking the Settings button on the
 edit status page was invalid

---
 src/components/MonitorSettingDialog.vue |  24 +-
 src/components/PublicGroupList.vue      | 328 ++++++++++++------------
 2 files changed, 182 insertions(+), 170 deletions(-)

diff --git a/src/components/MonitorSettingDialog.vue b/src/components/MonitorSettingDialog.vue
index e6b2cd1ef..1d3cf4a3f 100644
--- a/src/components/MonitorSettingDialog.vue
+++ b/src/components/MonitorSettingDialog.vue
@@ -72,11 +72,17 @@ export default {
          * @returns {void}
          */
         show(group, monitor) {
+            // Check if monitor exists and has required properties
+            if (!monitor || !monitor.id) {
+                console.error("Invalid monitor object", monitor);
+                return;
+            }
+
             this.monitor = {
-                id: monitor.element.id,
-                name: monitor.element.name,
-                monitor_index: monitor.index,
-                group_index: group.index,
+                id: monitor.id,
+                name: monitor.name,
+                monitor_index: monitor.index || 0,
+                group_index: group.index || 0,
                 isClickAble: this.showLink(monitor),
             };
 
@@ -103,12 +109,18 @@ export default {
          * @returns {boolean} Should the link be shown?
          */
         showLink(monitor, ignoreSendUrl = false) {
+            if (!monitor || !monitor.id) {
+                return false;
+            }
+
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
+                return this.$root.monitorList[monitor.id].type === "http" ||
+                    this.$root.monitorList[monitor.id].type === "keyword" ||
+                    this.$root.monitorList[monitor.id].type === "json-query";
             }
-            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
+            return monitor.sendUrl && monitor.url && monitor.url !== "https://" && !this.editMode;
         },
     },
 };
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 870fb4d47..252f8df9c 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -3,7 +3,7 @@
     <div v-if="hasPublicGroups && !editMode" class="global-controls-container">
         <!-- Global Controls Title -->
         <h5 class="global-controls-title">{{ $t("Global Sorting Options") }}</h5>
-        
+
         <!-- Global Sorting Bar and Search Box -->
         <div class="global-controls-content">
             <!-- Global Sort Buttons Group -->
@@ -45,21 +45,21 @@
                     </button>
                 </div>
             </div>
-            
+
             <!-- Global Search Box -->
             <div class="global-search-container">
                 <div class="input-group">
-                    <input 
-                        type="text" 
-                        class="form-control form-control-sm" 
-                        v-model="globalSearchKeyword" 
-                        :placeholder="$t('Search monitors across all groups')" 
+                    <input
+                        type="text"
+                        class="form-control form-control-sm"
+                        v-model="globalSearchKeyword"
+                        :placeholder="$t('Search monitors across all groups')"
                         aria-label="Global search"
                     >
-                    <button 
-                        v-if="globalSearchKeyword" 
-                        class="btn btn-outline-secondary btn-sm" 
-                        type="button" 
+                    <button
+                        v-if="globalSearchKeyword"
+                        class="btn btn-outline-secondary btn-sm"
+                        type="button"
                         @click="clearGlobalSearch"
                         title="Clear search"
                     >
@@ -86,24 +86,24 @@
                 <div class="shadow-box">
                     <!-- Group Title and Search Bar -->
                     <div class="group-header">
-                <h2 class="group-title">
-                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
-                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
-                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
-                </h2>
+                        <h2 class="group-title">
+                            <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                            <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
+                        </h2>
 
                         <!-- Group Search Box -->
-                        <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0" 
-                            class="search-container">
+                        <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0"
+                             class="search-container">
                             <div class="search-input-wrapper">
-                                <input 
-                                    type="text" 
-                                    v-model="group.element.searchKeyword" 
-                                    :placeholder="$t('Search...')" 
+                                <input
+                                    type="text"
+                                    v-model="group.element.searchKeyword"
+                                    :placeholder="$t('Search...')"
                                     class="search-input form-control form-control-sm"
                                     @keyup.esc="clearSearch(group.element)"
                                 >
-                                <button 
+                                <button
                                     class="search-button btn btn-sm"
                                     @click="clearSearch(group.element)"
                                     v-if="group.element && group.element.searchKeyword"
@@ -116,8 +116,8 @@
                     </div>
 
                     <!-- Group Sort Button Bar -->
-                    <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0" 
-                        class="sort-bar">
+                    <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0"
+                         class="sort-bar">
                         <div class="sort-controls">
                             <span class="sort-label me-2">
                                 {{ $t("Sort By") }}:
@@ -132,10 +132,10 @@
                                     @click="setSort(group.element, 'status')"
                                 >
                                     {{ $t("Status") }}
-                                    <font-awesome-icon 
+                                    <font-awesome-icon
                                         v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'status') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')" 
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')"
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
                                     />
                                 </button>
                                 <button
@@ -147,10 +147,10 @@
                                     @click="setSort(group.element, 'name')"
                                 >
                                     {{ $t("Name") }}
-                                    <font-awesome-icon 
+                                    <font-awesome-icon
                                         v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'name') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')" 
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')"
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
                                     />
                                 </button>
                                 <button
@@ -162,10 +162,10 @@
                                     @click="setSort(group.element, 'uptime')"
                                 >
                                     {{ $t("Uptime") }}
-                                    <font-awesome-icon 
+                                    <font-awesome-icon
                                         v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'uptime') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')" 
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')"
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
                                     />
                                 </button>
                                 <button
@@ -178,10 +178,10 @@
                                     @click="setSort(group.element, 'cert')"
                                 >
                                     {{ $t("Cert Exp.") }}
-                                    <font-awesome-icon 
+                                    <font-awesome-icon
                                         v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'cert') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')" 
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')"
+                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
                                     />
                                 </button>
                             </div>
@@ -191,70 +191,70 @@
                     <!-- Monitor List -->
                     <div class="monitor-list-container">
                         <div v-if="!group.element || !group.element.monitorList || group.element.monitorList.length === 0" class="text-center no-monitor-msg">
-                        {{ $t("No Monitors") }}
+                            {{ $t("No Monitors") }}
                         </div>
                         <div v-else-if="getFilteredMonitorList(group.element).length === 0" class="text-center no-monitor-msg">
                             {{ $t("No services found") }}
-                    </div>
+                        </div>
 
-                    <!-- Monitor List -->
-                    <Draggable
+                        <!-- Monitor List -->
+                        <Draggable
                             v-if="group.element && group.element.monitorList && group.element.monitorList.length > 0"
-                        v-model="group.element.monitorList"
-                        class="monitor-list"
-                        group="same-group"
-                        :disabled="!editMode"
-                        :animation="100"
-                        item-key="id"
-                    >
+                            v-model="group.element.monitorList"
+                            class="monitor-list"
+                            group="same-group"
+                            :disabled="!editMode"
+                            :animation="100"
+                            item-key="id"
+                        >
                             <template #item="{ element: monitor, index: monitorIndex }">
                                 <div v-if="shouldShowMonitor(monitor, group.element)" class="item" data-testid="monitor">
-                                <div class="row">
-                                    <div class="col-9 col-md-8 small-padding">
-                                        <div class="info">
-                                            <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
+                                    <div class="row">
+                                        <div class="col-9 col-md-8 small-padding">
+                                            <div class="info">
+                                                <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                                 <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitorIndex)" />
 
                                                 <Uptime :monitor="monitor" type="24" :pill="true" />
-                                            <a
-                                                v-if="showLink(monitor)"
+                                                <a
+                                                    v-if="showLink(monitor)"
                                                     :href="monitor.url"
-                                                class="item-name"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                data-testid="monitor-name"
-                                            >
+                                                    class="item-name"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    data-testid="monitor-name"
+                                                >
                                                     {{ monitor.name }}
-                                            </a>
+                                                </a>
                                                 <p v-else class="item-name" data-testid="monitor-name"> {{ monitor.name }} </p>
 
-                                            <span
-                                                title="Setting"
-                                            >
+                                                <span
+                                                    title="Setting"
+                                                >
                                                 <font-awesome-icon
                                                     v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
                                                     icon="cog" class="action me-3"
-                                                        @click="$refs.monitorSettingDialog.show(group.element, monitor)"
+                                                    @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
-                                        </div>
-                                        <div class="extra-info">
-                                                <div v-if="showCertificateExpiry && monitor.certExpiryDaysRemaining">
-                                                <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
                                             </div>
-                                            <div v-if="showTags">
+                                            <div class="extra-info">
+                                                <div v-if="showCertificateExpiry && monitor.certExpiryDaysRemaining">
+                                                    <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
+                                                </div>
+                                                <div v-if="showTags">
                                                     <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
                                                 </div>
+                                            </div>
+                                        </div>
+                                        <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                            <HeartbeatBar size="mid" :monitor-id="monitor.id" />
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                                            <HeartbeatBar size="mid" :monitor-id="monitor.id" />
-                                    </div>
                                 </div>
-                            </div>
-                        </template>
-                    </Draggable>
+                            </template>
+                        </Draggable>
                     </div>
                 </div>
             </div>
@@ -320,26 +320,26 @@ export default {
             return (this.$root && this.$root.publicGroupList && this.$root.publicGroupList.length >= 2);
         },
         hasMonitors() {
-            return this.groups && Array.isArray(this.groups) && this.groups.some(group => 
+            return this.groups && Array.isArray(this.groups) && this.groups.some(group =>
                 group && group.element && group.element.monitorList && group.element.monitorList.length > 0
             );
         },
         hasPublicGroups() {
-            return this.$root && 
-                   this.$root.publicGroupList && 
-                   Array.isArray(this.$root.publicGroupList) && 
-                   this.$root.publicGroupList.length > 0 &&
-                   this.$root.publicGroupList.some(group => 
-                       group && group.monitorList && group.monitorList.length > 0
-                   );
+            return this.$root &&
+                this.$root.publicGroupList &&
+                Array.isArray(this.$root.publicGroupList) &&
+                this.$root.publicGroupList.length > 0 &&
+                this.$root.publicGroupList.some(group =>
+                    group && group.monitorList && group.monitorList.length > 0
+                );
         },
         filteredMonitorList() {
             if (!this.searchText || !this.monitorList) {
                 return this.monitorList || [];
             }
-            
+
             const searchLower = this.searchText.toLowerCase();
-            return this.monitorList.filter(monitor => 
+            return this.monitorList.filter(monitor =>
                 monitor && monitor.name && monitor.name.toLowerCase().includes(searchLower)
             );
         },
@@ -350,13 +350,13 @@ export default {
             if (!this.globalSearchKeyword) {
                 return null;
             }
-            
+
             let count = 0;
             if (!this.groups) return count;
-            
+
             for (const group of this.groups) {
                 if (!group || !group.element || !group.element.monitorList) continue;
-                
+
                 for (const monitor of group.element.monitorList) {
                     if (monitor && this.matchesGlobalSearch(monitor)) {
                         count++;
@@ -369,8 +369,8 @@ export default {
             if (!this.$root || !this.$root.publicGroupList) {
                 return false;
             }
-            
-            return this.$root.publicGroupList.some(group => 
+
+            return this.$root.publicGroupList.some(group =>
                 group && group.useOwnSort === true
             );
         },
@@ -391,7 +391,7 @@ export default {
         },
         // Watch for changes in uptimeList to re-apply sort
         '$root.uptimeList': {
-             handler() {
+            handler() {
                 if (this.$root && this.$root.publicGroupList) {
                     this.$root.publicGroupList.forEach(group => {
                         if (group) {
@@ -420,7 +420,7 @@ export default {
             try {
                 const groupId = group.id || group.name || 'Default Group';
                 const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-                
+
                 const savedSettings = localStorage.getItem(storageKey);
                 if (savedSettings) {
                     const settings = JSON.parse(savedSettings);
@@ -459,15 +459,15 @@ export default {
                     if (group.searchKeyword === undefined) {
                         group.searchKeyword = '';
                     }
-                    
+
                     // Try to read saved sort settings from localStorage
                     const savedSettings = getSavedSortSettings(group);
-                    
+
                     if (savedSettings) {
                         // Apply saved settings if found
                         group.sortKey = savedSettings.key;
                         group.sortDirection = savedSettings.direction;
-                        
+
                         // Restore independent sort flag from localStorage
                         group.useOwnSort = savedSettings.useOwnSort === undefined ? false : savedSettings.useOwnSort;
                     } else {
@@ -480,7 +480,7 @@ export default {
                         }
                         group.useOwnSort = false;
                     }
-                    
+
                     // Apply initial sort when the component is created
                     this.applySort(group);
                 }
@@ -500,11 +500,11 @@ export default {
                             if (group.searchKeyword === undefined) {
                                 group.searchKeyword = '';
                             }
-                            
+
                             if (group.sortKey === undefined) {
                                 // Try to read sort settings from localStorage
                                 const savedSettings = getSavedSortSettings(group);
-                                
+
                                 if (savedSettings) {
                                     // Apply saved settings if found
                                     group.sortKey = savedSettings.key;
@@ -517,7 +517,7 @@ export default {
                                     group.sortDirection = 'desc';
                                     group.useOwnSort = false;
                                 }
-                                
+
                                 // Apply sort to newly added group
                                 this.applySort(group);
                             }
@@ -541,15 +541,15 @@ export default {
         monitorMatchesSearch(monitor, keyword) {
             if (!keyword) return true;
             if (!monitor) return false;
-            
+
             keyword = keyword.toLowerCase().trim();
-            
+
             // Search name, URL and description fields
-            return (monitor.name && monitor.name.toLowerCase().includes(keyword)) || 
-                   (monitor.url && monitor.url.toLowerCase().includes(keyword)) || 
-                   (monitor.description && monitor.description.toLowerCase().includes(keyword));
+            return (monitor.name && monitor.name.toLowerCase().includes(keyword)) ||
+                (monitor.url && monitor.url.toLowerCase().includes(keyword)) ||
+                (monitor.description && monitor.description.toLowerCase().includes(keyword));
         },
-        
+
         /**
          * Check if monitor matches global search criteria
          * @param {object} monitor Monitor object
@@ -558,10 +558,10 @@ export default {
         matchesGlobalSearch(monitor) {
             if (!this.globalSearchKeyword) return true;
             if (!monitor) return false;
-            
+
             return this.monitorMatchesSearch(monitor, this.globalSearchKeyword);
         },
-        
+
         /**
          * Determine if monitor should be displayed
          * @param {object} monitor Monitor object
@@ -570,20 +570,20 @@ export default {
          */
         shouldShowMonitor(monitor, group) {
             if (!monitor) return false;
-            
+
             // Check global search first
             if (this.globalSearchKeyword && !this.matchesGlobalSearch(monitor)) {
                 return false;
             }
-            
+
             // Then check group search
             if (group && group.searchKeyword) {
                 return this.monitorMatchesSearch(monitor, group.searchKeyword);
             }
-            
+
             return true;
         },
-        
+
         /**
          * Get filtered monitor list
          * @param {object} group Group object
@@ -591,26 +591,26 @@ export default {
          */
         getFilteredMonitorList(group) {
             if (!group || !group.monitorList || !Array.isArray(group.monitorList)) return [];
-            
+
             let result = [...group.monitorList]; // Create a copy to avoid modifying original array
-            
+
             // Apply global search first
             if (this.globalSearchKeyword) {
-                result = result.filter(monitor => 
+                result = result.filter(monitor =>
                     monitor && this.matchesGlobalSearch(monitor)
                 );
             }
-            
+
             // Then apply group search
             if (group.searchKeyword) {
-                result = result.filter(monitor => 
+                result = result.filter(monitor =>
                     monitor && this.monitorMatchesSearch(monitor, group.searchKeyword)
                 );
             }
-            
+
             return result;
         },
-        
+
         /**
          * Determine if group should be displayed
          * @param {object} group Group object
@@ -618,20 +618,20 @@ export default {
          */
         shouldShowGroup(group) {
             if (!group) return false;
-            
+
             // Always show in edit mode
             if (this.editMode) return true;
-            
+
             // If there's global search, only show groups containing matching monitors
             if (this.globalSearchKeyword) {
-                return group.monitorList && group.monitorList.some(monitor => 
+                return group.monitorList && group.monitorList.some(monitor =>
                     this.matchesGlobalSearch(monitor)
                 );
             }
-            
+
             return true;
         },
-        
+
         /**
          * Clear group search keyword
          * @param {object} group Group object
@@ -641,14 +641,14 @@ export default {
                 group.searchKeyword = '';
             }
         },
-        
+
         /**
          * Clear global search keyword
          */
         clearGlobalSearch() {
             this.globalSearchKeyword = '';
         },
-        
+
         /**
          * Set sort key and direction for a group, then apply the sort
          * @param {object} group The group object
@@ -662,16 +662,16 @@ export default {
                 group.sortKey = key;
                 group.sortDirection = (key === 'status') ? 'desc' : 'asc';
             }
-            
+
             // Set independent sort flag for current group when clicking on its sort buttons
             group.useOwnSort = true;
-            
+
             // Save sort settings to localStorage
             try {
                 // Get a unique identifier for the group, use name if id is not available
                 const groupId = group.id || group.name || 'Default Group';
                 const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-                
+
                 // Save sort settings with the useOwnSort flag
                 const sortSettings = {
                     key: group.sortKey,
@@ -682,7 +682,7 @@ export default {
             } catch (error) {
                 console.error('Cannot save sort settings', error);
             }
-            
+
             // Apply sort to this group
             this.applySortToGroup(group);
         },
@@ -695,7 +695,7 @@ export default {
             if (!group || !group.monitorList || !Array.isArray(group.monitorList)) {
                 return;
             }
-            
+
             // Check if group has independent sort settings
             if (group.useOwnSort || !this.isGlobalSortActive) {
                 // Use group's own sort settings
@@ -729,14 +729,14 @@ export default {
 
             monitorList.sort((a, b) => {
                 if (!a || !b) return 0;
-                
+
                 let comparison = 0;
                 let valueA, valueB;
 
                 if (sortKey === 'status') {
                     const getStatusPriority = (monitor) => {
                         if (!monitor || !monitor.id) return 4;
-                        
+
                         // Ensure heartbeatList is available
                         const hbList = this.$root.heartbeatList || {};
                         const hbArr = hbList[monitor.id];
@@ -853,14 +853,14 @@ export default {
          */
         toggleGlobalSort() {
             this.isGlobalSortActive = !this.isGlobalSortActive;
-            
+
             // Reset all groups' independent sort flags and save their status to localStorage
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
                         // When toggling global sort, reset all group's independent sort flags
                         group.useOwnSort = false;
-                        
+
                         // Save the updated status to localStorage for each group
                         try {
                             const groupId = group.id || group.name || 'Default Group';
@@ -877,7 +877,7 @@ export default {
                     }
                 });
             }
-            
+
             // Save global sort toggle state
             try {
                 const storageKey = `uptime-kuma-global-sort-${this.slug}`;
@@ -890,7 +890,7 @@ export default {
             } catch (error) {
                 console.error('Cannot save global sort settings', error);
             }
-            
+
             // Apply appropriate sorting based on global sort state
             if (this.isGlobalSortActive) {
                 this.applyGlobalSort();
@@ -918,17 +918,17 @@ export default {
                 this.globalSortKey = key;
                 this.globalSortDirection = (key === 'status') ? 'desc' : 'asc';
             }
-            
+
             // Activate global sort
             this.isGlobalSortActive = true;
-            
+
             // Clear all groups' independent sort flags and save each group's settings
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
                         // Set useOwnSort to false for all groups
                         group.useOwnSort = false;
-                        
+
                         // Save the group's sort settings with useOwnSort=false to localStorage
                         try {
                             const groupId = group.id || group.name || 'Default Group';
@@ -945,11 +945,11 @@ export default {
                     }
                 });
             }
-            
+
             // Save global sort settings to localStorage
             try {
                 const storageKey = `uptime-kuma-global-sort-${this.slug}`;
-                
+
                 // Save global sort settings
                 const globalSortSettings = {
                     key: this.globalSortKey,
@@ -960,7 +960,7 @@ export default {
             } catch (error) {
                 console.error('Cannot save global sort settings', error);
             }
-            
+
             // Apply global sort
             this.applyGlobalSort();
         },
@@ -970,14 +970,14 @@ export default {
          */
         disableGlobalSort() {
             this.isGlobalSortActive = false;
-            
+
             // Save the updated useOwnSort=false status for all groups
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
                     if (group) {
                         // Mark all groups as not using independent sort when global sort is disabled
                         group.useOwnSort = false;
-                        
+
                         // Save the updated status to localStorage
                         try {
                             const groupId = group.id || group.name || 'Default Group';
@@ -994,7 +994,7 @@ export default {
                     }
                 });
             }
-            
+
             // Save global sort settings with active=false
             try {
                 const storageKey = `uptime-kuma-global-sort-${this.slug}`;
@@ -1007,7 +1007,7 @@ export default {
             } catch (error) {
                 console.error('Cannot save global sort settings', error);
             }
-            
+
             // Restore original sorting for each group
             if (this.$root && this.$root.publicGroupList) {
                 this.$root.publicGroupList.forEach(group => {
@@ -1025,7 +1025,7 @@ export default {
             if (!this.isGlobalSortActive || !this.$root || !this.$root.publicGroupList) {
                 return;
             }
-            
+
             // Apply global sort settings to all groups not using independent sorting
             this.$root.publicGroupList.forEach(group => {
                 if (group && group.monitorList && !group.useOwnSort) {
@@ -1156,11 +1156,11 @@ export default {
 
 .monitor-list {
     min-height: 46px;
-    
+
     .item {
         padding: 0.75rem 1.25rem;
         border-bottom: 1px solid #f0f0f0;
-        
+
         &:last-child {
             border-bottom: none;
         }
@@ -1172,7 +1172,7 @@ export default {
     overflow: hidden;
     background-color: #fff;
     border: 1px solid #e9ecef;
-    
+
     .dark & {
         background-color: #2d3748;
         border-color: #4a5568;
@@ -1324,13 +1324,13 @@ export default {
 
     .input-group {
         position: relative;
-        
+
         .form-control {
             border: 1px solid #dee2e6;
             border-radius: 4px;
             background-color: #fff;
         }
-        
+
         .btn {
             position: absolute;
             right: 1px; /* Position inside the input border */
@@ -1343,7 +1343,7 @@ export default {
             padding: 0 0.75rem;
         }
     }
-    
+
     small {
         display: none; /* Hide the 'Found X monitors' text */
     }
@@ -1366,19 +1366,19 @@ export default {
             color: $dark-font-color;
             border-color: transparent;
         }
-        
+
         .sort-buttons {
             border-color: #4a5568;
-            
+
             .sort-button {
                 background-color: #1a202c;
                 border-right-color: #4a5568;
                 color: #e2e8f0;
-                
+
                 &:hover {
                     background-color: #4a5568;
                 }
-                
+
                 &.active {
                     background-color: #28a745;
                     color: white;
@@ -1393,10 +1393,10 @@ export default {
             border-color: #4a5568;
             color: $dark-font-color;
         }
-        
+
         .btn {
             color: $dark-font-color;
-            
+
             &:hover {
                 color: white;
             }
@@ -1409,26 +1409,26 @@ export default {
         flex-direction: column;
         align-items: flex-start;
     }
-    
+
     .search-container {
         margin-left: 0;
         margin-top: 0.5rem;
         width: 100%;
     }
-    
+
     .search-input {
         width: 100%;
     }
-    
+
     .sort-controls {
         flex-direction: column;
         align-items: flex-start;
     }
-    
+
     .sort-buttons {
         margin-top: 0.5rem;
     }
-    
+
     .sort-button {
         margin-bottom: 0.5rem;
     }

From 2d67631cb2c1abf5342f745185373384c9bad87f Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sat, 19 Apr 2025 14:33:21 +0800
Subject: [PATCH 5/9] Remove redundant code

---
 src/components/MonitorSettingDialog.vue |   24 +-
 src/components/PublicGroupList.vue      | 1313 ++---------------------
 src/icon.js                             |    8 +-
 src/lang/en.json                        |    1 -
 src/lang/zh-CN.json                     |    5 +-
 src/pages/StatusPage.vue                |    8 +-
 6 files changed, 86 insertions(+), 1273 deletions(-)

diff --git a/src/components/MonitorSettingDialog.vue b/src/components/MonitorSettingDialog.vue
index 1d3cf4a3f..e6b2cd1ef 100644
--- a/src/components/MonitorSettingDialog.vue
+++ b/src/components/MonitorSettingDialog.vue
@@ -72,17 +72,11 @@ export default {
          * @returns {void}
          */
         show(group, monitor) {
-            // Check if monitor exists and has required properties
-            if (!monitor || !monitor.id) {
-                console.error("Invalid monitor object", monitor);
-                return;
-            }
-
             this.monitor = {
-                id: monitor.id,
-                name: monitor.name,
-                monitor_index: monitor.index || 0,
-                group_index: group.index || 0,
+                id: monitor.element.id,
+                name: monitor.element.name,
+                monitor_index: monitor.index,
+                group_index: group.index,
                 isClickAble: this.showLink(monitor),
             };
 
@@ -109,18 +103,12 @@ export default {
          * @returns {boolean} Should the link be shown?
          */
         showLink(monitor, ignoreSendUrl = false) {
-            if (!monitor || !monitor.id) {
-                return false;
-            }
-
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.id].type === "http" ||
-                    this.$root.monitorList[monitor.id].type === "keyword" ||
-                    this.$root.monitorList[monitor.id].type === "json-query";
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
             }
-            return monitor.sendUrl && monitor.url && monitor.url !== "https://" && !this.editMode;
+            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
         },
     },
 };
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 252f8df9c..bacddbf13 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -1,236 +1,59 @@
 <template>
     <!-- Group List -->
-    <div v-if="hasPublicGroups && !editMode" class="global-controls-container">
-        <!-- Global Controls Title -->
-        <h5 class="global-controls-title">{{ $t("Global Sorting Options") }}</h5>
-
-        <!-- Global Sorting Bar and Search Box -->
-        <div class="global-controls-content">
-            <!-- Global Sort Buttons Group -->
-            <div class="global-sort-controls">
-                <span class="sort-label me-2">{{ $t("Sort By") }}:</span>
-                <div class="sort-buttons">
-                    <button
-                        class="btn btn-sm sort-button"
-                        :class="{'active': globalSortKey === 'status' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
-                        @click="setGlobalSort('status')"
-                    >
-                        {{ $t("Status") }}
-                        <font-awesome-icon v-if="globalSortKey === 'status' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
-                    </button>
-                    <button
-                        class="btn btn-sm sort-button"
-                        :class="{'active': globalSortKey === 'name' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
-                        @click="setGlobalSort('name')"
-                    >
-                        {{ $t("Name") }}
-                        <font-awesome-icon v-if="globalSortKey === 'name' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
-                    </button>
-                    <button
-                        class="btn btn-sm sort-button"
-                        :class="{'active': globalSortKey === 'uptime' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
-                        @click="setGlobalSort('uptime')"
-                    >
-                        {{ $t("Uptime") }}
-                        <font-awesome-icon v-if="globalSortKey === 'uptime' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
-                    </button>
-                    <button
-                        v-if="showCertificateExpiry"
-                        class="btn btn-sm sort-button"
-                        :class="{'active': globalSortKey === 'cert' && isGlobalSortActive && !hasAnyGroupWithIndependentSort}"
-                        @click="setGlobalSort('cert')"
-                    >
-                        {{ $t("Cert Exp.") }}
-                        <font-awesome-icon v-if="globalSortKey === 'cert' && isGlobalSortActive" :icon="globalSortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" />
-                    </button>
-                </div>
-            </div>
-
-            <!-- Global Search Box -->
-            <div class="global-search-container">
-                <div class="input-group">
-                    <input
-                        type="text"
-                        class="form-control form-control-sm"
-                        v-model="globalSearchKeyword"
-                        :placeholder="$t('Search monitors across all groups')"
-                        aria-label="Global search"
-                    >
-                    <button
-                        v-if="globalSearchKeyword"
-                        class="btn btn-outline-secondary btn-sm"
-                        type="button"
-                        @click="clearGlobalSearch"
-                        title="Clear search"
-                    >
-                        <font-awesome-icon icon="times" />
-                    </button>
-                </div>
-                <small v-if="globalSearchResultCount !== null" class="text-muted">
-                    {{ $t("Found {0} monitors", [globalSearchResultCount]) }}
-                </small>
-            </div>
-        </div>
-    </div>
-
     <Draggable
-        v-if="$root && $root.publicGroupList"
         v-model="$root.publicGroupList"
         :disabled="!editMode"
         item-key="id"
         :animation="100"
     >
         <template #item="group">
-            <div v-if="group && group.element" class="mb-5 group-container" data-testid="group" v-show="shouldShowGroup(group.element)">
-                <!-- Group Container -->
-                <div class="shadow-box">
-                    <!-- Group Title and Search Bar -->
-                    <div class="group-header">
-                        <h2 class="group-title">
-                            <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
-                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
-                            <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
-                        </h2>
+            <div class="mb-5" data-testid="group">
+                <!-- Group Title -->
+                <h2 class="group-title">
+                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
+                </h2>
 
-                        <!-- Group Search Box -->
-                        <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0"
-                             class="search-container">
-                            <div class="search-input-wrapper">
-                                <input
-                                    type="text"
-                                    v-model="group.element.searchKeyword"
-                                    :placeholder="$t('Search...')"
-                                    class="search-input form-control form-control-sm"
-                                    @keyup.esc="clearSearch(group.element)"
-                                >
-                                <button
-                                    class="search-button btn btn-sm"
-                                    @click="clearSearch(group.element)"
-                                    v-if="group.element && group.element.searchKeyword"
-                                    title="Clear search"
-                                >
-                                    <font-awesome-icon icon="times" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Group Sort Button Bar -->
-                    <div v-if="!editMode && group.element && group.element.monitorList && group.element.monitorList.length > 0"
-                         class="sort-bar">
-                        <div class="sort-controls">
-                            <span class="sort-label me-2">
-                                {{ $t("Sort By") }}:
-                            </span>
-                            <div class="sort-buttons">
-                                <button
-                                    class="sort-button"
-                                    :class="{
-                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'status') || 
-                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')
-                                    }"
-                                    @click="setSort(group.element, 'status')"
-                                >
-                                    {{ $t("Status") }}
-                                    <font-awesome-icon
-                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'status') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'status')"
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
-                                    />
-                                </button>
-                                <button
-                                    class="sort-button"
-                                    :class="{
-                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'name') || 
-                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')
-                                    }"
-                                    @click="setSort(group.element, 'name')"
-                                >
-                                    {{ $t("Name") }}
-                                    <font-awesome-icon
-                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'name') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'name')"
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
-                                    />
-                                </button>
-                                <button
-                                    class="sort-button"
-                                    :class="{
-                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'uptime') || 
-                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')
-                                    }"
-                                    @click="setSort(group.element, 'uptime')"
-                                >
-                                    {{ $t("Uptime") }}
-                                    <font-awesome-icon
-                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'uptime') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'uptime')"
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
-                                    />
-                                </button>
-                                <button
-                                    v-if="showCertificateExpiry"
-                                    class="sort-button"
-                                    :class="{
-                                        'active': (isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'cert') || 
-                                                ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')
-                                    }"
-                                    @click="setSort(group.element, 'cert')"
-                                >
-                                    {{ $t("Cert Exp.") }}
-                                    <font-awesome-icon
-                                        v-if="(isGlobalSortActive && !group.element.useOwnSort && globalSortKey === 'cert') || 
-                                            ((isGlobalSortActive && group.element.useOwnSort || !isGlobalSortActive) && group.element.sortKey === 'cert')"
-                                        :icon="(isGlobalSortActive && !group.element.useOwnSort ? globalSortDirection : group.element.sortDirection) === 'asc' ? 'arrow-up' : 'arrow-down'"
-                                    />
-                                </button>
-                            </div>
-                        </div>
+                <div class="shadow-box monitor-list mt-4 position-relative">
+                    <div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
+                        {{ $t("No Monitors") }}
                     </div>
 
                     <!-- Monitor List -->
-                    <div class="monitor-list-container">
-                        <div v-if="!group.element || !group.element.monitorList || group.element.monitorList.length === 0" class="text-center no-monitor-msg">
-                            {{ $t("No Monitors") }}
-                        </div>
-                        <div v-else-if="getFilteredMonitorList(group.element).length === 0" class="text-center no-monitor-msg">
-                            {{ $t("No services found") }}
-                        </div>
+                    <!-- animation is not working, no idea why -->
+                    <Draggable
+                        v-model="group.element.monitorList"
+                        class="monitor-list"
+                        group="same-group"
+                        :disabled="!editMode"
+                        :animation="100"
+                        item-key="id"
+                    >
+                        <template #item="monitor">
+                            <div class="item" data-testid="monitor">
+                                <div class="row">
+                                    <div class="col-9 col-md-8 small-padding">
+                                        <div class="info">
+                                            <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
+                                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
-                        <!-- Monitor List -->
-                        <Draggable
-                            v-if="group.element && group.element.monitorList && group.element.monitorList.length > 0"
-                            v-model="group.element.monitorList"
-                            class="monitor-list"
-                            group="same-group"
-                            :disabled="!editMode"
-                            :animation="100"
-                            item-key="id"
-                        >
-                            <template #item="{ element: monitor, index: monitorIndex }">
-                                <div v-if="shouldShowMonitor(monitor, group.element)" class="item" data-testid="monitor">
-                                    <div class="row">
-                                        <div class="col-9 col-md-8 small-padding">
-                                            <div class="info">
-                                                <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
-                                                <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitorIndex)" />
+                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            <a
+                                                v-if="showLink(monitor)"
+                                                :href="monitor.element.url"
+                                                class="item-name"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                data-testid="monitor-name"
+                                            >
+                                                {{ monitor.element.name }}
+                                            </a>
+                                            <p v-else class="item-name" data-testid="monitor-name"> {{ monitor.element.name }} </p>
 
-                                                <Uptime :monitor="monitor" type="24" :pill="true" />
-                                                <a
-                                                    v-if="showLink(monitor)"
-                                                    :href="monitor.url"
-                                                    class="item-name"
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    data-testid="monitor-name"
-                                                >
-                                                    {{ monitor.name }}
-                                                </a>
-                                                <p v-else class="item-name" data-testid="monitor-name"> {{ monitor.name }} </p>
-
-                                                <span
-                                                    title="Setting"
-                                                >
+                                            <span
+                                                title="Setting"
+                                            >
                                                 <font-awesome-icon
                                                     v-if="editMode"
                                                     :class="{'link-active': true, 'btn-link': true}"
@@ -238,24 +61,23 @@
                                                     @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
-                                            </div>
-                                            <div class="extra-info">
-                                                <div v-if="showCertificateExpiry && monitor.certExpiryDaysRemaining">
-                                                    <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
-                                                </div>
-                                                <div v-if="showTags">
-                                                    <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
-                                                </div>
-                                            </div>
                                         </div>
-                                        <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                                            <HeartbeatBar size="mid" :monitor-id="monitor.id" />
+                                        <div class="extra-info">
+                                            <div v-if="showCertificateExpiry && monitor.element.certExpiryDaysRemaining">
+                                                <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
+                                            </div>
+                                            <div v-if="showTags">
+                                                <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
+                                            </div>
                                         </div>
                                     </div>
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
+                                    </div>
                                 </div>
-                            </template>
-                        </Draggable>
-                    </div>
+                            </div>
+                        </template>
+                    </Draggable>
                 </div>
             </div>
         </template>
@@ -291,498 +113,22 @@ export default {
         /** Should expiry be shown? */
         showCertificateExpiry: {
             type: Boolean,
-        },
-        /** Status page slug */
-        slug: {
-            type: String,
-            default: 'default'
-        },
-        monitorList: {
-            type: Array,
-            default: () => [],
-        },
-        groups: {
-            type: Array,
-            default: () => [],
-        },
+        }
     },
     data() {
         return {
-            globalSearchKeyword: '',
-            searchText: "",
-            globalSortKey: 'status',
-            globalSortDirection: 'desc',
-            isGlobalSortActive: false,
+
         };
     },
     computed: {
         showGroupDrag() {
-            return (this.$root && this.$root.publicGroupList && this.$root.publicGroupList.length >= 2);
-        },
-        hasMonitors() {
-            return this.groups && Array.isArray(this.groups) && this.groups.some(group =>
-                group && group.element && group.element.monitorList && group.element.monitorList.length > 0
-            );
-        },
-        hasPublicGroups() {
-            return this.$root &&
-                this.$root.publicGroupList &&
-                Array.isArray(this.$root.publicGroupList) &&
-                this.$root.publicGroupList.length > 0 &&
-                this.$root.publicGroupList.some(group =>
-                    group && group.monitorList && group.monitorList.length > 0
-                );
-        },
-        filteredMonitorList() {
-            if (!this.searchText || !this.monitorList) {
-                return this.monitorList || [];
-            }
-
-            const searchLower = this.searchText.toLowerCase();
-            return this.monitorList.filter(monitor =>
-                monitor && monitor.name && monitor.name.toLowerCase().includes(searchLower)
-            );
-        },
-        shouldShowSearch() {
-            return !this.editMode && this.monitorList && this.monitorList.length > 0;
-        },
-        globalSearchResultCount() {
-            if (!this.globalSearchKeyword) {
-                return null;
-            }
-
-            let count = 0;
-            if (!this.groups) return count;
-
-            for (const group of this.groups) {
-                if (!group || !group.element || !group.element.monitorList) continue;
-
-                for (const monitor of group.element.monitorList) {
-                    if (monitor && this.matchesGlobalSearch(monitor)) {
-                        count++;
-                    }
-                }
-            }
-            return count;
-        },
-        hasAnyGroupWithIndependentSort() {
-            if (!this.$root || !this.$root.publicGroupList) {
-                return false;
-            }
-
-            return this.$root.publicGroupList.some(group =>
-                group && group.useOwnSort === true
-            );
-        },
-    },
-    watch: {
-        // Watch for changes in heartbeatList to re-apply sort
-        '$root.heartbeatList': {
-            handler() {
-                if (this.$root && this.$root.publicGroupList) {
-                    this.$root.publicGroupList.forEach(group => {
-                        if (group) {
-                            this.applySort(group);
-                        }
-                    });
-                }
-            },
-            deep: true,
-        },
-        // Watch for changes in uptimeList to re-apply sort
-        '$root.uptimeList': {
-            handler() {
-                if (this.$root && this.$root.publicGroupList) {
-                    this.$root.publicGroupList.forEach(group => {
-                        if (group) {
-                            this.applySort(group);
-                        }
-                    });
-                }
-            },
-            deep: true,
-        },
-        // Watch for changes in global sort
-        globalSortKey: {
-            handler() {
-                this.applyGlobalSort();
-            }
-        },
-        globalSortDirection: {
-            handler() {
-                this.applyGlobalSort();
-            }
+            return (this.$root.publicGroupList.length >= 2);
         }
     },
     created() {
-        // Method to get saved sort settings from localStorage
-        const getSavedSortSettings = (group) => {
-            try {
-                const groupId = group.id || group.name || 'Default Group';
-                const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
 
-                const savedSettings = localStorage.getItem(storageKey);
-                if (savedSettings) {
-                    const settings = JSON.parse(savedSettings);
-                    return {
-                        key: settings.key,
-                        direction: settings.direction,
-                        useOwnSort: settings.useOwnSort
-                    };
-                }
-            } catch (error) {
-                console.error('Cannot read sort settings', error);
-            }
-            return null;
-        };
-
-        // Try to read saved global sort settings from localStorage
-        try {
-            const storageKey = `uptime-kuma-global-sort-${this.slug}`;
-            const savedGlobalSettings = localStorage.getItem(storageKey);
-            if (savedGlobalSettings) {
-                const settings = JSON.parse(savedGlobalSettings);
-                this.globalSortKey = settings.key;
-                this.globalSortDirection = settings.direction;
-                // Also restore global sort active state
-                this.isGlobalSortActive = settings.active === undefined ? false : settings.active;
-            }
-        } catch (error) {
-            console.error('Cannot read global sort settings', error);
-        }
-
-        // Initialize sort state and apply initial sort for existing groups
-        if (this.$root.publicGroupList) {
-            this.$root.publicGroupList.forEach(group => {
-                if (group) {
-                    // Initialize search keywords
-                    if (group.searchKeyword === undefined) {
-                        group.searchKeyword = '';
-                    }
-
-                    // Try to read saved sort settings from localStorage
-                    const savedSettings = getSavedSortSettings(group);
-
-                    if (savedSettings) {
-                        // Apply saved settings if found
-                        group.sortKey = savedSettings.key;
-                        group.sortDirection = savedSettings.direction;
-
-                        // Restore independent sort flag from localStorage
-                        group.useOwnSort = savedSettings.useOwnSort === undefined ? false : savedSettings.useOwnSort;
-                    } else {
-                        // Use default settings otherwise
-                        if (group.sortKey === undefined) {
-                            group.sortKey = 'status';
-                        }
-                        if (group.sortDirection === undefined) {
-                            group.sortDirection = 'desc';
-                        }
-                        group.useOwnSort = false;
-                    }
-
-                    // Apply initial sort when the component is created
-                    this.applySort(group);
-                }
-            });
-        }
-
-        // Apply global sorting after initialization
-        this.applyGlobalSort();
-
-        // Watch for new groups being added and initialize their sort state
-        if (this.$root) {
-            this.$root.$watch('publicGroupList', (newGroups) => {
-                if (newGroups) {
-                    newGroups.forEach(group => {
-                        if (group) {
-                            // Ensure each group has search keyword property
-                            if (group.searchKeyword === undefined) {
-                                group.searchKeyword = '';
-                            }
-
-                            if (group.sortKey === undefined) {
-                                // Try to read sort settings from localStorage
-                                const savedSettings = getSavedSortSettings(group);
-
-                                if (savedSettings) {
-                                    // Apply saved settings if found
-                                    group.sortKey = savedSettings.key;
-                                    group.sortDirection = savedSettings.direction;
-                                    // Restore independent sort flag from localStorage
-                                    group.useOwnSort = savedSettings.useOwnSort === undefined ? false : savedSettings.useOwnSort;
-                                } else {
-                                    // Use default settings otherwise
-                                    group.sortKey = 'status';
-                                    group.sortDirection = 'desc';
-                                    group.useOwnSort = false;
-                                }
-
-                                // Apply sort to newly added group
-                                this.applySort(group);
-                            }
-                        }
-                    });
-                }
-            }, { deep: true });
-        }
-    },
-    unmounted() {
-        // Clean up references when component is unmounted to avoid memory leaks
-        // In Vue 3, watchers are automatically cleaned up when component is unmounted
     },
     methods: {
-        /**
-         * Check if monitor matches search keyword
-         * @param {object} monitor Monitor object
-         * @param {string} keyword Search keyword
-         * @returns {boolean} Whether it matches
-         */
-        monitorMatchesSearch(monitor, keyword) {
-            if (!keyword) return true;
-            if (!monitor) return false;
-
-            keyword = keyword.toLowerCase().trim();
-
-            // Search name, URL and description fields
-            return (monitor.name && monitor.name.toLowerCase().includes(keyword)) ||
-                (monitor.url && monitor.url.toLowerCase().includes(keyword)) ||
-                (monitor.description && monitor.description.toLowerCase().includes(keyword));
-        },
-
-        /**
-         * Check if monitor matches global search criteria
-         * @param {object} monitor Monitor object
-         * @returns {boolean} Whether it matches
-         */
-        matchesGlobalSearch(monitor) {
-            if (!this.globalSearchKeyword) return true;
-            if (!monitor) return false;
-
-            return this.monitorMatchesSearch(monitor, this.globalSearchKeyword);
-        },
-
-        /**
-         * Determine if monitor should be displayed
-         * @param {object} monitor Monitor object
-         * @param {object} group Group object
-         * @returns {boolean} Whether to display
-         */
-        shouldShowMonitor(monitor, group) {
-            if (!monitor) return false;
-
-            // Check global search first
-            if (this.globalSearchKeyword && !this.matchesGlobalSearch(monitor)) {
-                return false;
-            }
-
-            // Then check group search
-            if (group && group.searchKeyword) {
-                return this.monitorMatchesSearch(monitor, group.searchKeyword);
-            }
-
-            return true;
-        },
-
-        /**
-         * Get filtered monitor list
-         * @param {object} group Group object
-         * @returns {array} Filtered monitor list
-         */
-        getFilteredMonitorList(group) {
-            if (!group || !group.monitorList || !Array.isArray(group.monitorList)) return [];
-
-            let result = [...group.monitorList]; // Create a copy to avoid modifying original array
-
-            // Apply global search first
-            if (this.globalSearchKeyword) {
-                result = result.filter(monitor =>
-                    monitor && this.matchesGlobalSearch(monitor)
-                );
-            }
-
-            // Then apply group search
-            if (group.searchKeyword) {
-                result = result.filter(monitor =>
-                    monitor && this.monitorMatchesSearch(monitor, group.searchKeyword)
-                );
-            }
-
-            return result;
-        },
-
-        /**
-         * Determine if group should be displayed
-         * @param {object} group Group object
-         * @returns {boolean} Whether to display
-         */
-        shouldShowGroup(group) {
-            if (!group) return false;
-
-            // Always show in edit mode
-            if (this.editMode) return true;
-
-            // If there's global search, only show groups containing matching monitors
-            if (this.globalSearchKeyword) {
-                return group.monitorList && group.monitorList.some(monitor =>
-                    this.matchesGlobalSearch(monitor)
-                );
-            }
-
-            return true;
-        },
-
-        /**
-         * Clear group search keyword
-         * @param {object} group Group object
-         */
-        clearSearch(group) {
-            if (group) {
-                group.searchKeyword = '';
-            }
-        },
-
-        /**
-         * Clear global search keyword
-         */
-        clearGlobalSearch() {
-            this.globalSearchKeyword = '';
-        },
-
-        /**
-         * Set sort key and direction for a group, then apply the sort
-         * @param {object} group The group object
-         * @param {string} key The sort key ('status', 'name', 'uptime', 'cert')
-         */
-        setSort(group, key) {
-            // Change only the current group's sort settings even when global sort is active
-            if (group.sortKey === key) {
-                group.sortDirection = group.sortDirection === 'asc' ? 'desc' : 'asc';
-            } else {
-                group.sortKey = key;
-                group.sortDirection = (key === 'status') ? 'desc' : 'asc';
-            }
-
-            // Set independent sort flag for current group when clicking on its sort buttons
-            group.useOwnSort = true;
-
-            // Save sort settings to localStorage
-            try {
-                // Get a unique identifier for the group, use name if id is not available
-                const groupId = group.id || group.name || 'Default Group';
-                const storageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-
-                // Save sort settings with the useOwnSort flag
-                const sortSettings = {
-                    key: group.sortKey,
-                    direction: group.sortDirection,
-                    useOwnSort: group.useOwnSort
-                };
-                localStorage.setItem(storageKey, JSON.stringify(sortSettings));
-            } catch (error) {
-                console.error('Cannot save sort settings', error);
-            }
-
-            // Apply sort to this group
-            this.applySortToGroup(group);
-        },
-
-        /**
-         * Apply sort to specific group, considering independent sort settings
-         * @param {object} group Group object
-         */
-        applySortToGroup(group) {
-            if (!group || !group.monitorList || !Array.isArray(group.monitorList)) {
-                return;
-            }
-
-            // Check if group has independent sort settings
-            if (group.useOwnSort || !this.isGlobalSortActive) {
-                // Use group's own sort settings
-                const sortKey = group.sortKey || 'status';
-                const sortDirection = group.sortDirection || 'desc';
-                this.sortMonitorList(group.monitorList, sortKey, sortDirection);
-            } else {
-                // Use global sort settings
-                this.sortMonitorList(group.monitorList, this.globalSortKey, this.globalSortDirection);
-            }
-        },
-
-        /**
-         * Apply sorting logic directly to the group's monitorList (in-place)
-         * @param {object} group The group object containing monitorList
-         */
-        applySort(group) {
-            this.applySortToGroup(group);
-        },
-
-        /**
-         * Sort monitor list without modifying group's sort settings
-         * @param {array} monitorList Monitor list to sort
-         * @param {string} sortKey Sort key
-         * @param {string} sortDirection Sort direction
-         */
-        sortMonitorList(monitorList, sortKey, sortDirection) {
-            if (!Array.isArray(monitorList)) {
-                return;
-            }
-
-            monitorList.sort((a, b) => {
-                if (!a || !b) return 0;
-
-                let comparison = 0;
-                let valueA, valueB;
-
-                if (sortKey === 'status') {
-                    const getStatusPriority = (monitor) => {
-                        if (!monitor || !monitor.id) return 4;
-
-                        // Ensure heartbeatList is available
-                        const hbList = this.$root.heartbeatList || {};
-                        const hbArr = hbList[monitor.id];
-                        if (hbArr && hbArr.length > 0) {
-                            const lastStatus = hbArr.at(-1).status;
-                            if (lastStatus === 0) return 0; // Down
-                            if (lastStatus === 1) return 1; // Up
-                            if (lastStatus === 2) return 2; // Pending
-                            if (lastStatus === 3) return 3; // Maintenance
-                        }
-                        return 4; // Unknown/No data - sort last
-                    };
-                    valueA = getStatusPriority(a);
-                    valueB = getStatusPriority(b);
-                } else if (sortKey === 'name') {
-                    valueA = a.name ? a.name.toLowerCase() : '';
-                    valueB = b.name ? b.name.toLowerCase() : '';
-                } else if (sortKey === 'uptime') {
-                    const uptimeList = this.$root.uptimeList || {};
-                    const uptimeA = a.id ? parseFloat(uptimeList[`${a.id}_24`]) || 0 : 0;
-                    const uptimeB = b.id ? parseFloat(uptimeList[`${b.id}_24`]) || 0 : 0;
-                    valueA = uptimeA;
-                    valueB = uptimeB;
-                } else if (sortKey === 'cert') {
-                    // Sort by certificate expiry time
-                    // Valid certificates have remaining days, invalid or no certificates have -1
-                    valueA = a.validCert && a.certExpiryDaysRemaining ? a.certExpiryDaysRemaining : -1;
-                    valueB = b.validCert && b.certExpiryDaysRemaining ? b.certExpiryDaysRemaining : -1;
-                }
-
-                if (valueA < valueB) {
-                    comparison = -1;
-                } else if (valueA > valueB) {
-                    comparison = 1;
-                }
-
-                // Special handling for status sorting only
-                if (sortKey === 'status') {
-                    return sortDirection === 'desc' ? (comparison * -1) : comparison;
-                } else {
-                    // Use pure sort result, without special handling for down servers
-                    return sortDirection === 'asc' ? comparison : (comparison * -1);
-                }
-            });
-        },
-
         /**
          * Remove the specified group
          * @param {number} index Index of group to remove
@@ -816,9 +162,9 @@ export default {
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.id].type === "http" || this.$root.monitorList[monitor.id].type === "keyword" || this.$root.monitorList[monitor.id].type === "json-query";
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
             }
-            return monitor.sendUrl && monitor.url && monitor.url !== "https://";
+            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
         },
 
         /**
@@ -827,9 +173,9 @@ export default {
          * @returns {string} Certificate expiry message
          */
         formattedCertExpiryMessage(monitor) {
-            if (monitor?.validCert && monitor?.certExpiryDaysRemaining) {
-                return monitor.certExpiryDaysRemaining + " " + this.$tc("day", monitor.certExpiryDaysRemaining);
-            } else if (monitor?.validCert === false) {
+            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
+                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
+            } else if (monitor?.element?.validCert === false) {
                 return this.$t("noOrBadCertificate");
             } else {
                 return this.$t("Unknown") + " " + this.$tc("day", 2);
@@ -842,198 +188,11 @@ export default {
          * @returns {string} Color for certificate expiry
          */
         certExpiryColor(monitor) {
-            if (monitor?.validCert && monitor.certExpiryDaysRemaining > 7) {
+            if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
                 return "#059669";
             }
             return "#DC2626";
         },
-
-        /**
-         * Toggle global sort state
-         */
-        toggleGlobalSort() {
-            this.isGlobalSortActive = !this.isGlobalSortActive;
-
-            // Reset all groups' independent sort flags and save their status to localStorage
-            if (this.$root && this.$root.publicGroupList) {
-                this.$root.publicGroupList.forEach(group => {
-                    if (group) {
-                        // When toggling global sort, reset all group's independent sort flags
-                        group.useOwnSort = false;
-
-                        // Save the updated status to localStorage for each group
-                        try {
-                            const groupId = group.id || group.name || 'Default Group';
-                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-                            const groupSortSettings = {
-                                key: group.sortKey,
-                                direction: group.sortDirection,
-                                useOwnSort: false
-                            };
-                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
-                        } catch (error) {
-                            console.error('Cannot save group sort settings', error);
-                        }
-                    }
-                });
-            }
-
-            // Save global sort toggle state
-            try {
-                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
-                const globalSortSettings = {
-                    key: this.globalSortKey,
-                    direction: this.globalSortDirection,
-                    active: this.isGlobalSortActive
-                };
-                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
-            } catch (error) {
-                console.error('Cannot save global sort settings', error);
-            }
-
-            // Apply appropriate sorting based on global sort state
-            if (this.isGlobalSortActive) {
-                this.applyGlobalSort();
-            } else {
-                // Restore independent sorting for each group
-                if (this.$root && this.$root.publicGroupList) {
-                    this.$root.publicGroupList.forEach(group => {
-                        if (group) {
-                            this.applySort(group);
-                        }
-                    });
-                }
-            }
-        },
-
-        /**
-         * Set global sort key and direction
-         * @param {string} key The sort key ('status', 'name', 'uptime', 'cert')
-         */
-        setGlobalSort(key) {
-            // Update global sort settings
-            if (this.globalSortKey === key) {
-                this.globalSortDirection = this.globalSortDirection === 'asc' ? 'desc' : 'asc';
-            } else {
-                this.globalSortKey = key;
-                this.globalSortDirection = (key === 'status') ? 'desc' : 'asc';
-            }
-
-            // Activate global sort
-            this.isGlobalSortActive = true;
-
-            // Clear all groups' independent sort flags and save each group's settings
-            if (this.$root && this.$root.publicGroupList) {
-                this.$root.publicGroupList.forEach(group => {
-                    if (group) {
-                        // Set useOwnSort to false for all groups
-                        group.useOwnSort = false;
-
-                        // Save the group's sort settings with useOwnSort=false to localStorage
-                        try {
-                            const groupId = group.id || group.name || 'Default Group';
-                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-                            const groupSortSettings = {
-                                key: group.sortKey,
-                                direction: group.sortDirection,
-                                useOwnSort: false
-                            };
-                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
-                        } catch (error) {
-                            console.error('Cannot save group sort settings', error);
-                        }
-                    }
-                });
-            }
-
-            // Save global sort settings to localStorage
-            try {
-                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
-
-                // Save global sort settings
-                const globalSortSettings = {
-                    key: this.globalSortKey,
-                    direction: this.globalSortDirection,
-                    active: this.isGlobalSortActive
-                };
-                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
-            } catch (error) {
-                console.error('Cannot save global sort settings', error);
-            }
-
-            // Apply global sort
-            this.applyGlobalSort();
-        },
-
-        /**
-         * Disable global sort and restore independent sorting for each group
-         */
-        disableGlobalSort() {
-            this.isGlobalSortActive = false;
-
-            // Save the updated useOwnSort=false status for all groups
-            if (this.$root && this.$root.publicGroupList) {
-                this.$root.publicGroupList.forEach(group => {
-                    if (group) {
-                        // Mark all groups as not using independent sort when global sort is disabled
-                        group.useOwnSort = false;
-
-                        // Save the updated status to localStorage
-                        try {
-                            const groupId = group.id || group.name || 'Default Group';
-                            const groupStorageKey = `uptime-kuma-sort-${this.slug}-${groupId}`;
-                            const groupSortSettings = {
-                                key: group.sortKey,
-                                direction: group.sortDirection,
-                                useOwnSort: false
-                            };
-                            localStorage.setItem(groupStorageKey, JSON.stringify(groupSortSettings));
-                        } catch (error) {
-                            console.error('Cannot save group sort settings', error);
-                        }
-                    }
-                });
-            }
-
-            // Save global sort settings with active=false
-            try {
-                const storageKey = `uptime-kuma-global-sort-${this.slug}`;
-                const globalSortSettings = {
-                    key: this.globalSortKey,
-                    direction: this.globalSortDirection,
-                    active: false
-                };
-                localStorage.setItem(storageKey, JSON.stringify(globalSortSettings));
-            } catch (error) {
-                console.error('Cannot save global sort settings', error);
-            }
-
-            // Restore original sorting for each group
-            if (this.$root && this.$root.publicGroupList) {
-                this.$root.publicGroupList.forEach(group => {
-                    if (group) {
-                        this.applySort(group);
-                    }
-                });
-            }
-        },
-
-        /**
-         * Apply global sorting logic to all groups
-         */
-        applyGlobalSort() {
-            if (!this.isGlobalSortActive || !this.$root || !this.$root.publicGroupList) {
-                return;
-            }
-
-            // Apply global sort settings to all groups not using independent sorting
-            this.$root.publicGroupList.forEach(group => {
-                if (group && group.monitorList && !group.useOwnSort) {
-                    // Use global sort settings for sorting
-                    this.sortMonitorList(group.monitorList, this.globalSortKey, this.globalSortDirection);
-                }
-            });
-        },
     }
 };
 </script>
@@ -1041,144 +200,6 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars";
 
-.group-container {
-    margin-bottom: 2rem;
-}
-
-.group-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid #e9ecef;
-}
-
-.group-title {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 500;
-}
-
-.search-container {
-    margin-left: auto;
-}
-
-.search-input-wrapper {
-    position: relative;
-    display: flex;
-}
-
-.search-input {
-    padding-right: 35px;
-    width: 200px;
-    font-size: 0.85rem;
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    background-color: #fff;
-}
-
-.search-button {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    padding: 0 10px;
-    background: transparent;
-    border: none;
-    color: #6c757d;
-    cursor: pointer;
-}
-
-.search-button:hover {
-    color: #495057;
-}
-
-.sort-bar {
-    padding: 0.5rem 0;
-    margin-left: -1px;
-    margin-right: -1px;
-    width: calc(100% + 2px);
-}
-
-.sort-controls {
-    display: flex;
-    align-items: center;
-    padding: 0 1.25rem;
-}
-
-.sort-label {
-    white-space: nowrap;
-    margin-bottom: 0;
-    font-weight: 500;
-    color: #6c757d;
-}
-
-.sort-buttons {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.sort-button {
-    padding: 0.25rem 0.75rem;
-    margin-left: 0.25rem;
-    margin-bottom: 0;
-    background-color: #fff;
-    border: 1px solid #dee2e6;
-    color: #495057;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    font-size: 0.8rem;
-    border-radius: 4px;
-
-    &:hover {
-        background-color: #e9ecef;
-        border-color: #ced4da;
-    }
-
-    &.active {
-        background-color: #28a745;
-        border-color: #28a745;
-        color: white;
-    }
-
-    .fa-arrow-up,
-    .fa-arrow-down {
-        margin-left: 0.3em;
-        font-size: 0.75rem;
-    }
-}
-
-.monitor-list-container {
-    position: relative;
-}
-
-.monitor-list {
-    min-height: 46px;
-
-    .item {
-        padding: 0.75rem 1.25rem;
-        border-bottom: 1px solid #f0f0f0;
-
-        &:last-child {
-            border-bottom: none;
-        }
-    }
-}
-
-.shadow-box {
-    border-radius: 6px;
-    overflow: hidden;
-    background-color: #fff;
-    border: 1px solid #e9ecef;
-
-    .dark & {
-        background-color: #2d3748;
-        border-color: #4a5568;
-    }
-}
-
 .extra-info {
     display: flex;
     margin-bottom: 0.5rem;
@@ -1195,6 +216,10 @@ export default {
     left: 0;
 }
 
+.monitor-list {
+    min-height: 46px;
+}
+
 .item-name {
     padding-left: 5px;
     padding-right: 5px;
@@ -1228,6 +253,13 @@ export default {
     color: $danger;
 }
 
+.group-title {
+    span {
+        display: inline-block;
+        min-width: 15px;
+    }
+}
+
 .mobile {
     .item {
         padding: 13px 0 10px;
@@ -1238,201 +270,4 @@ export default {
     background-color: $maintenance;
 }
 
-.global-controls-container {
-    padding: 1rem;
-    background-color: #fff;
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
-    overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.global-controls-title {
-    text-align: center;
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #e9ecef;
-    font-size: 1.25rem;
-    font-weight: 500;
-    color: #495057;
-}
-
-.global-controls-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 0.5rem; /* Slightly reduce padding for content */
-}
-
-.global-sort-controls {
-    display: flex;
-    align-items: center;
-
-    .sort-label {
-        white-space: nowrap;
-        font-weight: 500;
-        color: #6c757d;
-        margin-right: 0.5rem;
-        padding: 0.25rem 0.5rem; /* Add padding to label */
-        border: 1px solid transparent; /* Match button border for alignment */
-        border-radius: 4px; /* Match button radius */
-    }
-
-    .sort-buttons {
-        display: flex;
-        border: 1px solid #dee2e6;
-        border-radius: 4px;
-        overflow: hidden;
-
-        .sort-button {
-            padding: 0.25rem 0.75rem;
-            border-radius: 0;
-            border: none;
-            border-right: 1px solid #dee2e6;
-            background-color: #fff;
-            color: #495057;
-            font-size: 0.8rem;
-            transition: background-color 0.15s ease-in-out;
-
-            &:last-child {
-                border-right: none;
-            }
-
-            &:hover {
-                background-color: #e9ecef;
-            }
-
-            &.active {
-                background-color: #28a745;
-                color: white;
-            }
-
-            .fa-arrow-up,
-            .fa-arrow-down {
-                margin-left: 0.3em;
-                font-size: 0.75rem;
-            }
-        }
-    }
-}
-
-.global-search-container {
-    margin-left: 1rem; /* Space between sort and search */
-    flex-grow: 1; /* Allow search to take remaining space */
-    max-width: 400px; /* Limit max width */
-
-    .input-group {
-        position: relative;
-
-        .form-control {
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-            background-color: #fff;
-        }
-
-        .btn {
-            position: absolute;
-            right: 1px; /* Position inside the input border */
-            top: 1px;
-            bottom: 1px;
-            border-radius: 0 4px 4px 0;
-            z-index: 3;
-            background-color: transparent;
-            border: none;
-            padding: 0 0.75rem;
-        }
-    }
-
-    small {
-        display: none; /* Hide the 'Found X monitors' text */
-    }
-}
-
-.dark {
-    .global-controls-container {
-        background-color: #2d3748;
-        border-color: #4a5568;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-    }
-
-    .global-controls-title {
-        border-bottom-color: #4a5568;
-        color: #e2e8f0;
-    }
-
-    .global-sort-controls {
-        .sort-label {
-            color: $dark-font-color;
-            border-color: transparent;
-        }
-
-        .sort-buttons {
-            border-color: #4a5568;
-
-            .sort-button {
-                background-color: #1a202c;
-                border-right-color: #4a5568;
-                color: #e2e8f0;
-
-                &:hover {
-                    background-color: #4a5568;
-                }
-
-                &.active {
-                    background-color: #28a745;
-                    color: white;
-                }
-            }
-        }
-    }
-
-    .global-search-container {
-        .form-control {
-            background-color: #1a202c;
-            border-color: #4a5568;
-            color: $dark-font-color;
-        }
-
-        .btn {
-            color: $dark-font-color;
-
-            &:hover {
-                color: white;
-            }
-        }
-    }
-}
-
-@media (max-width: 768px) {
-    .group-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .search-container {
-        margin-left: 0;
-        margin-top: 0.5rem;
-        width: 100%;
-    }
-
-    .search-input {
-        width: 100%;
-    }
-
-    .sort-controls {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .sort-buttons {
-        margin-top: 0.5rem;
-    }
-
-    .sort-button {
-        margin-bottom: 0.5rem;
-    }
-}
-
 </style>
-
diff --git a/src/icon.js b/src/icon.js
index 3f8c11441..7bdfe1ca0 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -20,8 +20,8 @@ import {
     faTachometerAlt,
     faTimes,
     faTimesCircle,
-    faCheckCircle,
     faTrash,
+    faCheckCircle,
     faStream,
     faSave,
     faExclamationCircle,
@@ -50,8 +50,6 @@ import {
     faInfoCircle,
     faClone,
     faCertificate,
-    faArrowUp,
-    faArrowDown,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -68,8 +66,8 @@ library.add(
     faTachometerAlt,
     faTimes,
     faTimesCircle,
-    faCheckCircle,
     faTrash,
+    faCheckCircle,
     faStream,
     faSave,
     faExclamationCircle,
@@ -99,8 +97,6 @@ library.add(
     faInfoCircle,
     faClone,
     faCertificate,
-    faArrowUp,
-    faArrowDown,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/lang/en.json b/src/lang/en.json
index bc3dd9ab8..cb704b0fe 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -48,7 +48,6 @@
     "Current": "Current",
     "Uptime": "Uptime",
     "Cert Exp.": "Cert Exp.",
-    "Sort By": "Sort By",
     "Monitor": "Monitor | Monitors",
     "now": "now",
     "time ago": "{0} ago",
diff --git a/src/lang/zh-CN.json b/src/lang/zh-CN.json
index af9ccaefc..5b473b071 100644
--- a/src/lang/zh-CN.json
+++ b/src/lang/zh-CN.json
@@ -27,7 +27,6 @@
     "notificationDescription": "通知必须被分配给监控项才能正常工作。",
     "keywordDescription": "在纯 HTML 或 JSON 响应中搜索关键字，区分大小写。",
     "pauseDashboardHome": "暂停",
-    "Sort By": "排序方式",
     "deleteMonitorMsg": "确定要删除此监控项吗？",
     "deleteMaintenanceMsg": "确定要删除此维护吗？",
     "deleteNotificationMsg": "确定要为所有监控项删除此通知吗？",
@@ -1118,7 +1117,5 @@
     "wayToGetWahaApiKey": "API 密钥是你用于运行 WAHA 的 WHATSAPP_API_KEY 环境变量值。",
     "telegramTemplateFormatDescription": "Telegram 允许在消息中使用不同的标记语言，具体细节请参见 Telegram {0}。",
     "YZJ Webhook URL": "YZJ Webhook 地址",
-    "YZJ Robot Token": "YZJ 机器人令牌",
-    "Search...": "搜索...",
-    "No services found": "未找到服务"
+    "YZJ Robot Token": "YZJ 机器人令牌"
 }
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index e3dc2b211..116968282 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -328,7 +328,7 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :slug="slug" />
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" />
             </div>
 
             <footer class="mt-5 mb-4">
@@ -773,12 +773,10 @@ export default {
             if (! this.editMode) {
                 axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
                     const { heartbeatList, uptimeList } = res.data;
+
                     this.$root.heartbeatList = heartbeatList;
                     this.$root.uptimeList = uptimeList;
-                    
-                    // 注：移除了原有的"宕机优先"排序逻辑
-                    // 现在监控器的排序将完全由PublicGroupList组件的排序功能控制
-                    
+
                     const heartbeatIds = Object.keys(heartbeatList);
                     const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
                         const monitorHeartbeats = heartbeatList[currentId];

From 8d7a595c9f4ea070d529ae559243363bf3bd5f06 Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sat, 19 Apr 2025 19:22:21 +0800
Subject: [PATCH 6/9] Adjust group sorting display style and support sharing
 sorting state with URL

---
 src/components/PublicGroupList.vue | 443 ++++++++++++++++++++++++++++-
 1 file changed, 439 insertions(+), 4 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index bacddbf13..7c3d6d6b0 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -10,9 +10,70 @@
             <div class="mb-5" data-testid="group">
                 <!-- Group Title -->
                 <h2 class="group-title">
-                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
-                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
-                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
+                    <div class="title-section">
+                        <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                        <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                        <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" data-testid="group-name" />
+                    </div>
+
+                    <div v-if="group.element && group.element.monitorList && group.element.monitorList.length > 1" class="sort-dropdown">
+                        <div class="dropdown">
+                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" type="button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{ $t('Sort By') }}
+                                <span v-if="group.element.sortKey" class="ms-1">
+                                    <span class="sort-direction-indicator">
+                                        {{ getSortDirectionSymbol(group.element) }}
+                                    </span>
+                                </span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end sort-menu" :aria-labelledby="'sortDropdown' + group.index">
+                                <li>
+                                    <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'status')">
+                                        <div class="sort-item-content">
+                                            <span>{{ $t('Status') }}</span>
+                                            <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
+                                                <font-awesome-icon icon="check" />
+                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                            </span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'name')">
+                                        <div class="sort-item-content">
+                                            <span>{{ $t('Name') }}</span>
+                                            <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
+                                                <font-awesome-icon icon="check" />
+                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                            </span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'uptime')">
+                                        <div class="sort-item-content">
+                                            <span>{{ $t('Uptime') }}</span>
+                                            <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
+                                                <font-awesome-icon icon="check" />
+                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                            </span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li v-if="showCertificateExpiry">
+                                    <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'cert')">
+                                        <div class="sort-item-content">
+                                            <span>{{ $t('Cert Exp.') }}</span>
+                                            <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
+                                                <font-awesome-icon icon="check" />
+                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                            </span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </h2>
 
                 <div class="shadow-box monitor-list mt-4 position-relative">
@@ -117,7 +178,6 @@ export default {
     },
     data() {
         return {
-
         };
     },
     computed: {
@@ -126,9 +186,239 @@ export default {
         }
     },
     created() {
+        // Initialize sort settings
+        this.initializeSortSettings();
+    },
+    mounted() {
+        // Load sort settings from URL
+        this.loadSortSettingsFromURL();
+        // Listen for URL changes
+        window.addEventListener('popstate', this.handlePopState);
+    },
+    beforeUnmount() {
+        // Remove URL change listener
+        window.removeEventListener('popstate', this.handlePopState);
+    },
+    watch: {
+        // Watch for changes in heartbeat list, reapply sorting
+        '$root.heartbeatList': {
+            handler() {
+                if (this.$root && this.$root.publicGroupList) {
+                    this.$root.publicGroupList.forEach(group => {
+                        if (group) {
+                            this.applySort(group);
+                        }
+                    });
+                }
+            },
+            deep: true,
+        },
 
+        // Watch for changes in uptime list, reapply sorting
+        '$root.uptimeList': {
+            handler() {
+                if (this.$root && this.$root.publicGroupList) {
+                    this.$root.publicGroupList.forEach(group => {
+                        if (group) {
+                            this.applySort(group);
+                        }
+                    });
+                }
+            },
+            deep: true,
+        },
     },
     methods: {
+        /**
+         * Initialize group sort settings
+         */
+        initializeSortSettings() {
+            if (this.$root.publicGroupList) {
+                this.$root.publicGroupList.forEach(group => {
+                    if (group) {
+                        // Try to read saved sort settings from localStorage
+                        const savedSettings = this.getSavedSortSettings(group);
+
+                        if (savedSettings) {
+                            // Apply saved settings
+                            group.sortKey = savedSettings.key;
+                            group.sortDirection = savedSettings.direction;
+                        } else {
+                            // Use default settings
+                            if (group.sortKey === undefined) {
+                                group.sortKey = 'status';
+                            }
+                            if (group.sortDirection === undefined) {
+                                group.sortDirection = 'desc';
+                            }
+                        }
+                        // Apply initial sorting
+                        this.applySort(group);
+                    }
+                });
+            }
+            // Watch for new groups being added and initialize their sort state
+            if (this.$root) {
+                this.$root.$watch('publicGroupList', (newGroups) => {
+                    if (newGroups) {
+                        newGroups.forEach(group => {
+                            if (group && group.sortKey === undefined) {
+                                const savedSettings = this.getSavedSortSettings(group);
+
+                                if (savedSettings) {
+                                    group.sortKey = savedSettings.key;
+                                    group.sortDirection = savedSettings.direction;
+                                } else {
+                                    group.sortKey = 'status';
+                                    group.sortDirection = 'desc';
+                                }
+
+                                this.applySort(group);
+                            }
+                        });
+                    }
+                }, { deep: true });
+            }
+        },
+
+        /**
+         * Get saved sort settings from localStorage
+         * @param {object} group object
+         * @returns {object|null} saved sorting settings
+         */
+        getSavedSortSettings(group) {
+            try {
+                const groupId = this.getGroupIdentifier(group);
+                const slug = this.$root.statusPage ? this.$root.statusPage.slug : 'default';
+                const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
+
+                const savedSettings = localStorage.getItem(storageKey);
+                if (savedSettings) {
+                    return JSON.parse(savedSettings);
+                }
+            } catch (error) {
+                console.error('Cannot read sort settings', error);
+            }
+            return null;
+        },
+
+        /**
+         * Get sort key for a group
+         * @param {object} group object
+         * @returns {string} sort key
+         */
+        getSortKey(group) {
+            return group.sortKey || 'status';
+        },
+
+        /**
+         * Get sort direction symbol
+         * @param {object} group object
+         * @returns {string} sort direction symbol
+         */
+        getSortDirectionSymbol(group) {
+            return (group.sortDirection === 'asc') ? '↑' : '↓';
+        },
+
+        /**
+         * Set group sort key and direction, then apply sorting
+         * @param {object} group object
+         * @param {string} sort key ('status', 'name', 'uptime', 'cert')
+         */
+        setSort(group, key) {
+            if (group.sortKey === key) {
+                group.sortDirection = group.sortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                group.sortKey = key;
+                group.sortDirection = (key === 'status') ? 'desc' : 'asc';
+            }
+            try {
+                const groupId = this.getGroupIdentifier(group);
+                const slug = this.$root.statusPage ? this.$root.statusPage.slug : 'default';
+                const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
+
+                const sortSettings = {
+                    key: group.sortKey,
+                    direction: group.sortDirection
+                };
+                localStorage.setItem(storageKey, JSON.stringify(sortSettings));
+            } catch (error) {
+                console.error('Cannot save sort settings', error);
+            }
+
+            this.applySort(group);
+
+            this.updateURLSortParams();
+        },
+
+        /**
+         * Apply sorting logic directly to the group's monitorList (in-place)
+         * @param {object} group object containing monitorList
+         */
+        applySort(group) {
+            if (!group || !group.monitorList || !Array.isArray(group.monitorList)) {
+                return;
+            }
+
+            const sortKey = group.sortKey || 'status';
+            const sortDirection = group.sortDirection || 'desc';
+
+            group.monitorList.sort((a, b) => {
+                if (!a || !b) return 0;
+
+                let comparison = 0;
+                let valueA, valueB;
+
+                if (sortKey === 'status') {
+                    // Sort by status
+                    const getStatusPriority = (monitor) => {
+                        if (!monitor || !monitor.id) return 4;
+
+                        const hbList = this.$root.heartbeatList || {};
+                        const hbArr = hbList[monitor.id];
+                        if (hbArr && hbArr.length > 0) {
+                            const lastStatus = hbArr.at(-1).status;
+                            if (lastStatus === 0) return 0; // Down
+                            if (lastStatus === 1) return 1; // Up
+                            if (lastStatus === 2) return 2; // Pending
+                            if (lastStatus === 3) return 3; // Maintenance
+                        }
+                        return 4; // Unknown/No data
+                    };
+                    valueA = getStatusPriority(a);
+                    valueB = getStatusPriority(b);
+                } else if (sortKey === 'name') {
+                    // Sort alphabetically by name
+                    valueA = a.name ? a.name.toLowerCase() : '';
+                    valueB = b.name ? b.name.toLowerCase() : '';
+                } else if (sortKey === 'uptime') {
+                    // Sort by uptime
+                    const uptimeList = this.$root.uptimeList || {};
+                    const uptimeA = a.id ? parseFloat(uptimeList[`${a.id}_24`]) || 0 : 0;
+                    const uptimeB = b.id ? parseFloat(uptimeList[`${b.id}_24`]) || 0 : 0;
+                    valueA = uptimeA;
+                    valueB = uptimeB;
+                } else if (sortKey === 'cert') {
+                    // Sort by certificate expiry time
+                    valueA = a.validCert && a.certExpiryDaysRemaining ? a.certExpiryDaysRemaining : -1;
+                    valueB = b.validCert && b.certExpiryDaysRemaining ? b.certExpiryDaysRemaining : -1;
+                }
+
+                if (valueA < valueB) {
+                    comparison = -1;
+                } else if (valueA > valueB) {
+                    comparison = 1;
+                }
+
+                // Special handling for status sorting
+                if (sortKey === 'status') {
+                    return sortDirection === 'desc' ? (comparison * -1) : comparison;
+                } else {
+                    return sortDirection === 'asc' ? comparison : (comparison * -1);
+                }
+            });
+        },
+
         /**
          * Remove the specified group
          * @param {number} index Index of group to remove
@@ -193,6 +483,89 @@ export default {
             }
             return "#DC2626";
         },
+
+        /**
+         * Handle browser back/forward button events
+         */
+        handlePopState() {
+            this.loadSortSettingsFromURL();
+        },
+
+        /**
+         * Load sort settings from URL
+         */
+        loadSortSettingsFromURL() {
+            if (!this.$root.publicGroupList) return;
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            // Iterate through all groups, look for sort parameters in URL
+            this.$root.publicGroupList.forEach(group => {
+                if (!group) return;
+
+                const groupId = this.getGroupIdentifier(group);
+                const sortParam = urlParams.get(`sort_${groupId}`);
+
+                if (sortParam) {
+                    const [key, direction] = sortParam.split('_');
+                    if (key && ['status', 'name', 'uptime', 'cert'].includes(key) &&
+                        direction && ['asc', 'desc'].includes(direction)) {
+                        group.sortKey = key;
+                        group.sortDirection = direction;
+                        this.applySort(group);
+                    }
+                }
+            });
+        },
+
+        /**
+         * Update sort parameters in URL
+         */
+        updateURLSortParams() {
+            if (!this.$root.publicGroupList) return;
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            // First clear all sort_ parameters
+            const paramsToRemove = [];
+            for (const [key] of urlParams.entries()) {
+                if (key.startsWith('sort_')) {
+                    paramsToRemove.push(key);
+                }
+            }
+
+            paramsToRemove.forEach(key => {
+                urlParams.delete(key);
+            });
+
+            // Add current sort parameters
+            this.$root.publicGroupList.forEach(group => {
+                if (!group || !group.sortKey) return;
+
+                const groupId = this.getGroupIdentifier(group);
+                urlParams.set(`sort_${groupId}`, `${group.sortKey}_${group.sortDirection}`);
+            });
+
+            // Update URL without refreshing the page
+            const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
+            window.history.pushState({ path: newUrl }, '', newUrl);
+        },
+
+        /**
+         * Get unique identifier for a group
+         * @param {object} group object
+         * @returns {string} group identifier
+         */
+        getGroupIdentifier(group) {
+            // Use the name directly if available
+            if (group.name) {
+                // Only remove spaces and use encodeURIComponent for URL safety
+                const cleanName = group.name.replace(/\s+/g, '');
+                return cleanName;
+            }
+            // Fallback to ID or index
+            return group.id ? `group${group.id}` : `group${this.$root.publicGroupList.indexOf(group)}`;
+        }
     }
 };
 </script>
@@ -254,16 +627,78 @@ export default {
 }
 
 .group-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title-section {
+        display: flex;
+        align-items: center;
+    }
+
     span {
         display: inline-block;
         min-width: 15px;
     }
 }
 
+.sort-dropdown {
+    margin-left: auto;
+}
+
+.sort-button {
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.3rem 0.7rem;
+}
+
+.sort-menu {
+    min-width: auto;
+    width: auto;
+    padding: 0.2rem 0;
+}
+
+.sort-item {
+    padding: 0.4rem 0.8rem;
+}
+
+.sort-item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    min-width: 120px;
+}
+
+.sort-indicators {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.sort-direction-indicator {
+    font-weight: bold;
+    display: inline-block;
+    margin-left: 2px;
+}
+
 .mobile {
     .item {
         padding: 13px 0 10px;
     }
+
+    .group-title {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .sort-dropdown {
+            margin-left: 0;
+            margin-top: 0.5rem;
+            width: 100%;
+        }
+    }
 }
 
 .bg-maintenance {

From ae6a44e73612b558821b21520af9e6a5f0bdd68a Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sat, 19 Apr 2025 22:26:28 +0800
Subject: [PATCH 7/9] Fix the warning and error

---
 src/components/PublicGroupList.vue | 98 +++++++++++++++---------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 7c3d6d6b0..4e9de7432 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -18,8 +18,8 @@
 
                     <div v-if="group.element && group.element.monitorList && group.element.monitorList.length > 1" class="sort-dropdown">
                         <div class="dropdown">
-                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" type="button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ $t('Sort By') }}
+                            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{ $t("Sort By") }}
                                 <span v-if="group.element.sortKey" class="ms-1">
                                     <span class="sort-direction-indicator">
                                         {{ getSortDirectionSymbol(group.element) }}
@@ -30,9 +30,8 @@
                                 <li>
                                     <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'status')">
                                         <div class="sort-item-content">
-                                            <span>{{ $t('Status') }}</span>
+                                            <span>{{ $t("Status") }}</span>
                                             <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
-                                                <font-awesome-icon icon="check" />
                                                 <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
                                             </span>
                                         </div>
@@ -41,9 +40,8 @@
                                 <li>
                                     <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'name')">
                                         <div class="sort-item-content">
-                                            <span>{{ $t('Name') }}</span>
+                                            <span>{{ $t("Name") }}</span>
                                             <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
-                                                <font-awesome-icon icon="check" />
                                                 <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
                                             </span>
                                         </div>
@@ -52,9 +50,8 @@
                                 <li>
                                     <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'uptime')">
                                         <div class="sort-item-content">
-                                            <span>{{ $t('Uptime') }}</span>
+                                            <span>{{ $t("Uptime") }}</span>
                                             <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
-                                                <font-awesome-icon icon="check" />
                                                 <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
                                             </span>
                                         </div>
@@ -63,9 +60,8 @@
                                 <li v-if="showCertificateExpiry">
                                     <a class="dropdown-item sort-item" href="#" @click.prevent="setSort(group.element, 'cert')">
                                         <div class="sort-item-content">
-                                            <span>{{ $t('Cert Exp.') }}</span>
+                                            <span>{{ $t("Cert Exp.") }}</span>
                                             <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
-                                                <font-awesome-icon icon="check" />
                                                 <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
                                             </span>
                                         </div>
@@ -82,7 +78,6 @@
                     </div>
 
                     <!-- Monitor List -->
-                    <!-- animation is not working, no idea why -->
                     <Draggable
                         v-model="group.element.monitorList"
                         class="monitor-list"
@@ -193,15 +188,15 @@ export default {
         // Load sort settings from URL
         this.loadSortSettingsFromURL();
         // Listen for URL changes
-        window.addEventListener('popstate', this.handlePopState);
+        window.addEventListener("popstate", this.handlePopState);
     },
     beforeUnmount() {
         // Remove URL change listener
-        window.removeEventListener('popstate', this.handlePopState);
+        window.removeEventListener("popstate", this.handlePopState);
     },
     watch: {
         // Watch for changes in heartbeat list, reapply sorting
-        '$root.heartbeatList': {
+        "$root.heartbeatList": {
             handler() {
                 if (this.$root && this.$root.publicGroupList) {
                     this.$root.publicGroupList.forEach(group => {
@@ -215,7 +210,7 @@ export default {
         },
 
         // Watch for changes in uptime list, reapply sorting
-        '$root.uptimeList': {
+        "$root.uptimeList": {
             handler() {
                 if (this.$root && this.$root.publicGroupList) {
                     this.$root.publicGroupList.forEach(group => {
@@ -231,6 +226,7 @@ export default {
     methods: {
         /**
          * Initialize group sort settings
+         * @returns {void}
          */
         initializeSortSettings() {
             if (this.$root.publicGroupList) {
@@ -246,10 +242,10 @@ export default {
                         } else {
                             // Use default settings
                             if (group.sortKey === undefined) {
-                                group.sortKey = 'status';
+                                group.sortKey = "status";
                             }
                             if (group.sortDirection === undefined) {
-                                group.sortDirection = 'desc';
+                                group.sortDirection = "desc";
                             }
                         }
                         // Apply initial sorting
@@ -259,7 +255,7 @@ export default {
             }
             // Watch for new groups being added and initialize their sort state
             if (this.$root) {
-                this.$root.$watch('publicGroupList', (newGroups) => {
+                this.$root.$watch("publicGroupList", (newGroups) => {
                     if (newGroups) {
                         newGroups.forEach(group => {
                             if (group && group.sortKey === undefined) {
@@ -269,8 +265,8 @@ export default {
                                     group.sortKey = savedSettings.key;
                                     group.sortDirection = savedSettings.direction;
                                 } else {
-                                    group.sortKey = 'status';
-                                    group.sortDirection = 'desc';
+                                    group.sortKey = "status";
+                                    group.sortDirection = "desc";
                                 }
 
                                 this.applySort(group);
@@ -289,7 +285,7 @@ export default {
         getSavedSortSettings(group) {
             try {
                 const groupId = this.getGroupIdentifier(group);
-                const slug = this.$root.statusPage ? this.$root.statusPage.slug : 'default';
+                const slug = this.$root.statusPage ? this.$root.statusPage.slug : "default";
                 const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
 
                 const savedSettings = localStorage.getItem(storageKey);
@@ -297,7 +293,7 @@ export default {
                     return JSON.parse(savedSettings);
                 }
             } catch (error) {
-                console.error('Cannot read sort settings', error);
+                console.error("Cannot read sort settings", error);
             }
             return null;
         },
@@ -308,7 +304,7 @@ export default {
          * @returns {string} sort key
          */
         getSortKey(group) {
-            return group.sortKey || 'status';
+            return group.sortKey || "status";
         },
 
         /**
@@ -317,24 +313,25 @@ export default {
          * @returns {string} sort direction symbol
          */
         getSortDirectionSymbol(group) {
-            return (group.sortDirection === 'asc') ? '↑' : '↓';
+            return (group.sortDirection === "asc") ? "↑" : "↓";
         },
 
         /**
          * Set group sort key and direction, then apply sorting
          * @param {object} group object
-         * @param {string} sort key ('status', 'name', 'uptime', 'cert')
+         * @param {string} key - sort key ('status', 'name', 'uptime', 'cert')
+         * @returns {void}
          */
         setSort(group, key) {
             if (group.sortKey === key) {
-                group.sortDirection = group.sortDirection === 'asc' ? 'desc' : 'asc';
+                group.sortDirection = group.sortDirection === "asc" ? "desc" : "asc";
             } else {
                 group.sortKey = key;
-                group.sortDirection = (key === 'status') ? 'desc' : 'asc';
+                group.sortDirection = (key === "status") ? "desc" : "asc";
             }
             try {
                 const groupId = this.getGroupIdentifier(group);
-                const slug = this.$root.statusPage ? this.$root.statusPage.slug : 'default';
+                const slug = this.$root.statusPage ? this.$root.statusPage.slug : "default";
                 const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
 
                 const sortSettings = {
@@ -343,7 +340,7 @@ export default {
                 };
                 localStorage.setItem(storageKey, JSON.stringify(sortSettings));
             } catch (error) {
-                console.error('Cannot save sort settings', error);
+                console.error("Cannot save sort settings", error);
             }
 
             this.applySort(group);
@@ -354,14 +351,15 @@ export default {
         /**
          * Apply sorting logic directly to the group's monitorList (in-place)
          * @param {object} group object containing monitorList
+         * @returns {void}
          */
         applySort(group) {
             if (!group || !group.monitorList || !Array.isArray(group.monitorList)) {
                 return;
             }
 
-            const sortKey = group.sortKey || 'status';
-            const sortDirection = group.sortDirection || 'desc';
+            const sortKey = group.sortKey || "status";
+            const sortDirection = group.sortDirection || "desc";
 
             group.monitorList.sort((a, b) => {
                 if (!a || !b) return 0;
@@ -369,7 +367,7 @@ export default {
                 let comparison = 0;
                 let valueA, valueB;
 
-                if (sortKey === 'status') {
+                if (sortKey === "status") {
                     // Sort by status
                     const getStatusPriority = (monitor) => {
                         if (!monitor || !monitor.id) return 4;
@@ -387,18 +385,18 @@ export default {
                     };
                     valueA = getStatusPriority(a);
                     valueB = getStatusPriority(b);
-                } else if (sortKey === 'name') {
+                } else if (sortKey === "name") {
                     // Sort alphabetically by name
-                    valueA = a.name ? a.name.toLowerCase() : '';
-                    valueB = b.name ? b.name.toLowerCase() : '';
-                } else if (sortKey === 'uptime') {
+                    valueA = a.name ? a.name.toLowerCase() : "";
+                    valueB = b.name ? b.name.toLowerCase() : "";
+                } else if (sortKey === "uptime") {
                     // Sort by uptime
                     const uptimeList = this.$root.uptimeList || {};
                     const uptimeA = a.id ? parseFloat(uptimeList[`${a.id}_24`]) || 0 : 0;
                     const uptimeB = b.id ? parseFloat(uptimeList[`${b.id}_24`]) || 0 : 0;
                     valueA = uptimeA;
                     valueB = uptimeB;
-                } else if (sortKey === 'cert') {
+                } else if (sortKey === "cert") {
                     // Sort by certificate expiry time
                     valueA = a.validCert && a.certExpiryDaysRemaining ? a.certExpiryDaysRemaining : -1;
                     valueB = b.validCert && b.certExpiryDaysRemaining ? b.certExpiryDaysRemaining : -1;
@@ -411,10 +409,10 @@ export default {
                 }
 
                 // Special handling for status sorting
-                if (sortKey === 'status') {
-                    return sortDirection === 'desc' ? (comparison * -1) : comparison;
+                if (sortKey === "status") {
+                    return sortDirection === "desc" ? (comparison * -1) : comparison;
                 } else {
-                    return sortDirection === 'asc' ? comparison : (comparison * -1);
+                    return sortDirection === "asc" ? comparison : (comparison * -1);
                 }
             });
         },
@@ -430,8 +428,7 @@ export default {
 
         /**
          * Remove a monitor from a group
-         * @param {number} groupIndex Index of group to remove monitor
-         * from
+         * @param {number} groupIndex Index of group to remove monitor from
          * @param {number} index Index of monitor to remove
          * @returns {void}
          */
@@ -486,6 +483,7 @@ export default {
 
         /**
          * Handle browser back/forward button events
+         * @returns {void}
          */
         handlePopState() {
             this.loadSortSettingsFromURL();
@@ -493,6 +491,7 @@ export default {
 
         /**
          * Load sort settings from URL
+         * @returns {void}
          */
         loadSortSettingsFromURL() {
             if (!this.$root.publicGroupList) return;
@@ -507,9 +506,9 @@ export default {
                 const sortParam = urlParams.get(`sort_${groupId}`);
 
                 if (sortParam) {
-                    const [key, direction] = sortParam.split('_');
-                    if (key && ['status', 'name', 'uptime', 'cert'].includes(key) &&
-                        direction && ['asc', 'desc'].includes(direction)) {
+                    const [key, direction] = sortParam.split("_");
+                    if (key && ["status", "name", "uptime", "cert"].includes(key) &&
+                        direction && ["asc", "desc"].includes(direction)) {
                         group.sortKey = key;
                         group.sortDirection = direction;
                         this.applySort(group);
@@ -520,6 +519,7 @@ export default {
 
         /**
          * Update sort parameters in URL
+         * @returns {void}
          */
         updateURLSortParams() {
             if (!this.$root.publicGroupList) return;
@@ -529,7 +529,7 @@ export default {
             // First clear all sort_ parameters
             const paramsToRemove = [];
             for (const [key] of urlParams.entries()) {
-                if (key.startsWith('sort_')) {
+                if (key.startsWith("sort_")) {
                     paramsToRemove.push(key);
                 }
             }
@@ -547,8 +547,8 @@ export default {
             });
 
             // Update URL without refreshing the page
-            const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
-            window.history.pushState({ path: newUrl }, '', newUrl);
+            const newUrl = `${window.location.pathname}${urlParams.toString() ? "?" + urlParams.toString() : ""}`;
+            window.history.pushState({ path: newUrl }, "", newUrl);
         },
 
         /**
@@ -560,7 +560,7 @@ export default {
             // Use the name directly if available
             if (group.name) {
                 // Only remove spaces and use encodeURIComponent for URL safety
-                const cleanName = group.name.replace(/\s+/g, '');
+                const cleanName = group.name.replace(/\s+/g, "");
                 return cleanName;
             }
             // Fallback to ID or index

From c45660e49c44e1218e41c2bd94243fe0b35400dd Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sun, 20 Apr 2025 01:09:50 +0800
Subject: [PATCH 8/9] Change the style of the sorting dropdown button

---
 src/components/PublicGroupList.vue | 91 +++++++++++++++++++++++++-----
 src/icon.js                        |  4 ++
 2 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 4e9de7432..d98d078c8 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -19,12 +19,22 @@
                     <div v-if="group.element && group.element.monitorList && group.element.monitorList.length > 1" class="sort-dropdown">
                         <div class="dropdown">
                             <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ $t("Sort By") }}
-                                <span v-if="group.element.sortKey" class="ms-1">
-                                    <span class="sort-direction-indicator">
-                                        {{ getSortDirectionSymbol(group.element) }}
-                                    </span>
-                                </span>
+                                <div class="sort-arrows">
+                                    <font-awesome-icon 
+                                        icon="arrow-down" 
+                                        :class="{ 
+                                            'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'desc',
+                                            'arrow-active': group.element.sortKey && group.element.sortDirection === 'desc'
+                                        }" 
+                                    />
+                                    <font-awesome-icon 
+                                        icon="arrow-up" 
+                                        :class="{ 
+                                            'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'asc',
+                                            'arrow-active': group.element.sortKey && group.element.sortDirection === 'asc'
+                                        }" 
+                                    />
+                                </div>
                             </button>
                             <ul class="dropdown-menu dropdown-menu-end sort-menu" :aria-labelledby="'sortDropdown' + group.index">
                                 <li>
@@ -32,7 +42,10 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Status") }}</span>
                                             <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
-                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                                <font-awesome-icon 
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                                    class="arrow-active me-1" 
+                                                />
                                             </span>
                                         </div>
                                     </a>
@@ -42,7 +55,10 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Name") }}</span>
                                             <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
-                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                                <font-awesome-icon 
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                                    class="arrow-active me-1" 
+                                                />
                                             </span>
                                         </div>
                                     </a>
@@ -52,7 +68,10 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Uptime") }}</span>
                                             <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
-                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                                <font-awesome-icon 
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                                    class="arrow-active me-1" 
+                                                />
                                             </span>
                                         </div>
                                     </a>
@@ -62,7 +81,10 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Cert Exp.") }}</span>
                                             <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
-                                                <span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span>
+                                                <font-awesome-icon 
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
+                                                    class="arrow-active me-1" 
+                                                />
                                             </span>
                                         </div>
                                     </a>
@@ -647,21 +669,64 @@ export default {
 }
 
 .sort-button {
-    min-width: 100px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 0.3rem 0.7rem;
+    justify-content: center;
+    padding: 0.3rem 0.6rem;
+    min-width: 40px;
+    border-radius: 10px;
+    background-color: white;
+    border: none;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+    transition: all ease-in-out 0.15s;
+    
+    &:hover {
+        background-color: #f8f9fa;
+    }
+    
+    &:focus, &:active {
+        box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+        border: none;
+        outline: none;
+    }
+}
+
+.sort-arrows {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 2px;
+}
+
+.arrow-inactive {
+    color: #aaa;
+    font-size: 0.7rem;
+    opacity: 0.5;
+}
+
+.arrow-active {
+    color: #4caf50;
+    font-size: 0.8rem;
 }
 
 .sort-menu {
     min-width: auto;
     width: auto;
     padding: 0.2rem 0;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
 }
 
 .sort-item {
     padding: 0.4rem 0.8rem;
+    
+    &:hover {
+        background-color: #f8f9fa;
+    }
 }
 
 .sort-item-content {
diff --git a/src/icon.js b/src/icon.js
index 7bdfe1ca0..d81023df1 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -8,6 +8,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 // 2) add the icon name to the library.add() statement below.
 import {
     faArrowAltCircleUp,
+    faArrowDown,
+    faArrowUp,
     faCog,
     faEdit,
     faEye,
@@ -54,6 +56,8 @@ import {
 
 library.add(
     faArrowAltCircleUp,
+    faArrowDown,
+    faArrowUp,
     faCog,
     faEdit,
     faEye,

From 5ace5c00246d55e01b99f54eb8a788a2e548a2ad Mon Sep 17 00:00:00 2001
From: Marshu <haoduoduoyu@163.com>
Date: Sun, 20 Apr 2025 01:59:23 +0800
Subject: [PATCH 9/9] Fix the warning and error

---
 src/components/PublicGroupList.vue | 86 ++++++++++++++++++------------
 1 file changed, 53 insertions(+), 33 deletions(-)

diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index d98d078c8..da085dabf 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -20,19 +20,19 @@
                         <div class="dropdown">
                             <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
                                 <div class="sort-arrows">
-                                    <font-awesome-icon 
-                                        icon="arrow-down" 
+                                    <font-awesome-icon
+                                        icon="arrow-down"
                                         :class="{ 
                                             'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'desc',
                                             'arrow-active': group.element.sortKey && group.element.sortDirection === 'desc'
-                                        }" 
+                                        }"
                                     />
-                                    <font-awesome-icon 
-                                        icon="arrow-up" 
+                                    <font-awesome-icon
+                                        icon="arrow-up"
                                         :class="{ 
                                             'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'asc',
                                             'arrow-active': group.element.sortKey && group.element.sortDirection === 'asc'
-                                        }" 
+                                        }"
                                     />
                                 </div>
                             </button>
@@ -42,9 +42,9 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Status") }}</span>
                                             <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
-                                                <font-awesome-icon 
-                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
-                                                    class="arrow-active me-1" 
+                                                <font-awesome-icon
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
+                                                    class="arrow-active me-1"
                                                 />
                                             </span>
                                         </div>
@@ -55,9 +55,9 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Name") }}</span>
                                             <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
-                                                <font-awesome-icon 
-                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
-                                                    class="arrow-active me-1" 
+                                                <font-awesome-icon
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
+                                                    class="arrow-active me-1"
                                                 />
                                             </span>
                                         </div>
@@ -68,9 +68,9 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Uptime") }}</span>
                                             <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
-                                                <font-awesome-icon 
-                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
-                                                    class="arrow-active me-1" 
+                                                <font-awesome-icon
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
+                                                    class="arrow-active me-1"
                                                 />
                                             </span>
                                         </div>
@@ -81,9 +81,9 @@
                                         <div class="sort-item-content">
                                             <span>{{ $t("Cert Exp.") }}</span>
                                             <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
-                                                <font-awesome-icon 
-                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'" 
-                                                    class="arrow-active me-1" 
+                                                <font-awesome-icon
+                                                    :icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
+                                                    class="arrow-active me-1"
                                                 />
                                             </span>
                                         </div>
@@ -387,21 +387,32 @@ export default {
                 if (!a || !b) return 0;
 
                 let comparison = 0;
-                let valueA, valueB;
+                let valueA;
+                let valueB;
 
                 if (sortKey === "status") {
                     // Sort by status
                     const getStatusPriority = (monitor) => {
-                        if (!monitor || !monitor.id) return 4;
+                        if (!monitor || !monitor.id) {
+                            return 4;
+                        }
 
                         const hbList = this.$root.heartbeatList || {};
                         const hbArr = hbList[monitor.id];
                         if (hbArr && hbArr.length > 0) {
                             const lastStatus = hbArr.at(-1).status;
-                            if (lastStatus === 0) return 0; // Down
-                            if (lastStatus === 1) return 1; // Up
-                            if (lastStatus === 2) return 2; // Pending
-                            if (lastStatus === 3) return 3; // Maintenance
+                            if (lastStatus === 0) {
+                                return 0;
+                            } // Down
+                            if (lastStatus === 1) {
+                                return 1;
+                            } // Up
+                            if (lastStatus === 2) {
+                                return 2;
+                            } // Pending
+                            if (lastStatus === 3) {
+                                return 3;
+                            } // Maintenance
                         }
                         return 4; // Unknown/No data
                     };
@@ -471,7 +482,9 @@ export default {
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
+                return this.$root.monitorList[monitor.element.id].type === "http" ||
+                    this.$root.monitorList[monitor.element.id].type === "keyword" ||
+                    this.$root.monitorList[monitor.element.id].type === "json-query";
             }
             return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
         },
@@ -516,13 +529,17 @@ export default {
          * @returns {void}
          */
         loadSortSettingsFromURL() {
-            if (!this.$root.publicGroupList) return;
+            if (!this.$root.publicGroupList) {
+                return;
+            }
 
             const urlParams = new URLSearchParams(window.location.search);
 
             // Iterate through all groups, look for sort parameters in URL
             this.$root.publicGroupList.forEach(group => {
-                if (!group) return;
+                if (!group) {
+                    return;
+                }
 
                 const groupId = this.getGroupIdentifier(group);
                 const sortParam = urlParams.get(`sort_${groupId}`);
@@ -544,7 +561,9 @@ export default {
          * @returns {void}
          */
         updateURLSortParams() {
-            if (!this.$root.publicGroupList) return;
+            if (!this.$root.publicGroupList) {
+                return;
+            }
 
             const urlParams = new URLSearchParams(window.location.search);
 
@@ -562,7 +581,9 @@ export default {
 
             // Add current sort parameters
             this.$root.publicGroupList.forEach(group => {
-                if (!group || !group.sortKey) return;
+                if (!group || !group.sortKey) {
+                    return;
+                }
 
                 const groupId = this.getGroupIdentifier(group);
                 urlParams.set(`sort_${groupId}`, `${group.sortKey}_${group.sortDirection}`);
@@ -679,11 +700,11 @@ export default {
     border: none;
     box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
     transition: all ease-in-out 0.15s;
-    
+
     &:hover {
         background-color: #f8f9fa;
     }
-    
+
     &:focus, &:active {
         box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
         border: none;
@@ -723,7 +744,7 @@ export default {
 
 .sort-item {
     padding: 0.4rem 0.8rem;
-    
+
     &:hover {
         background-color: #f8f9fa;
     }
@@ -769,5 +790,4 @@ export default {
 .bg-maintenance {
     background-color: $maintenance;
 }
-
 </style>