From a48d90533f77a167339d14de6714060e8b5f2b01 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Sat, 7 Mar 2026 23:55:30 +0800
Subject: [PATCH] feat(logs-page): refactor structured filters panel for
 improved readability and functionality

---
 src/pages/LogsPage.tsx | 144 ++++++++++++++++++++---------------------
 1 file changed, 71 insertions(+), 73 deletions(-)

diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx
index 0601a52..3053191 100644
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
@@ -541,89 +541,87 @@ export function LogsPage() {
                 </Button>
               </div>
 
-              <div
-                id={structuredFiltersPanelId}
-                className={styles.structuredFilters}
-                hidden={!structuredFiltersExpanded}
-              >
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_method')}</span>
-                  <div className={styles.filterChipList}>
-                    {HTTP_METHODS.map((method) => {
-                      const active = filters.methodFilters.includes(method);
-                      const count = filters.methodCounts[method] ?? 0;
-                      return (
-                        <button
-                          key={method}
-                          type="button"
-                          className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                          onClick={() => filters.toggleMethodFilter(method)}
-                          disabled={count === 0 && !active}
-                          aria-pressed={active}
-                        >
-                          {method} ({count})
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_status')}</span>
-                  <div className={styles.filterChipList}>
-                    {STATUS_GROUPS.map((statusGroup) => {
-                      const active = filters.statusFilters.includes(statusGroup);
-                      const count = filters.statusCounts[statusGroup] ?? 0;
-                      return (
-                        <button
-                          key={statusGroup}
-                          type="button"
-                          className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                          onClick={() => filters.toggleStatusFilter(statusGroup)}
-                          disabled={count === 0 && !active}
-                          aria-pressed={active}
-                        >
-                          {t(`logs.filter_status_${statusGroup}`)} ({count})
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                <div className={styles.filterChipGroup}>
-                  <span className={styles.filterChipLabel}>{t('logs.filter_path')}</span>
-                  <div className={styles.filterChipList}>
-                    {filters.pathOptions.length === 0 ? (
-                      <span className={styles.filterChipHint}>{t('logs.filter_path_empty')}</span>
-                    ) : (
-                      filters.pathOptions.map(({ path, count }) => {
-                        const active = filters.pathFilters.includes(path);
+              {structuredFiltersExpanded && (
+                <div id={structuredFiltersPanelId} className={styles.structuredFilters}>
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_method')}</span>
+                    <div className={styles.filterChipList}>
+                      {HTTP_METHODS.map((method) => {
+                        const active = filters.methodFilters.includes(method);
+                        const count = filters.methodCounts[method] ?? 0;
                         return (
                           <button
-                            key={path}
+                            key={method}
                             type="button"
                             className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                            onClick={() => filters.togglePathFilter(path)}
+                            onClick={() => filters.toggleMethodFilter(method)}
+                            disabled={count === 0 && !active}
                             aria-pressed={active}
-                            title={path}
                           >
-                            {path} ({count})
+                            {method} ({count})
                           </button>
                         );
-                      })
-                    )}
+                      })}
+                    </div>
                   </div>
-                </div>
 
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={filters.clearStructuredFilters}
-                  disabled={!filters.hasStructuredFilters}
-                >
-                  {t('logs.clear_filters')}
-                </Button>
-              </div>
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_status')}</span>
+                    <div className={styles.filterChipList}>
+                      {STATUS_GROUPS.map((statusGroup) => {
+                        const active = filters.statusFilters.includes(statusGroup);
+                        const count = filters.statusCounts[statusGroup] ?? 0;
+                        return (
+                          <button
+                            key={statusGroup}
+                            type="button"
+                            className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                            onClick={() => filters.toggleStatusFilter(statusGroup)}
+                            disabled={count === 0 && !active}
+                            aria-pressed={active}
+                          >
+                            {t(`logs.filter_status_${statusGroup}`)} ({count})
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  <div className={styles.filterChipGroup}>
+                    <span className={styles.filterChipLabel}>{t('logs.filter_path')}</span>
+                    <div className={styles.filterChipList}>
+                      {filters.pathOptions.length === 0 ? (
+                        <span className={styles.filterChipHint}>{t('logs.filter_path_empty')}</span>
+                      ) : (
+                        filters.pathOptions.map(({ path, count }) => {
+                          const active = filters.pathFilters.includes(path);
+                          return (
+                            <button
+                              key={path}
+                              type="button"
+                              className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                              onClick={() => filters.togglePathFilter(path)}
+                              aria-pressed={active}
+                              title={path}
+                            >
+                              {path} ({count})
+                            </button>
+                          );
+                        })
+                      )}
+                    </div>
+                  </div>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={filters.clearStructuredFilters}
+                    disabled={!filters.hasStructuredFilters}
+                  >
+                    {t('logs.clear_filters')}
+                  </Button>
+                </div>
+              )}
 
               <ToggleSwitch
                 checked={hideManagementLogs}