feat(logs-page): refactor structured filters panel for improved readability and functionality

src/i18n/locales/en.json

@@ -1043,6 +1043,10 @@
     "show_raw_logs": "Show Raw Logs",
     "show_raw_logs_hint": "Show original log text for easier multi-line copy",
     "search_placeholder": "Search logs by content or keyword",
+    "filter_panel_title": "Structured Filters",
+    "filter_panel_expand": "Expand structured filters",
+    "filter_panel_collapse": "Collapse structured filters",
+    "filter_panel_active_count": "{{count}} active",
     "filter_method": "Method",
     "filter_status": "Status",
     "filter_path": "Path",

src/i18n/locales/ru.json

@@ -1046,6 +1046,10 @@
     "show_raw_logs": "Показать исходные журналы",
     "show_raw_logs_hint": "Показать текст журнала без обработки для удобного копирования в несколько строк",
     "search_placeholder": "Искать по содержимому или ключевым словам",
+    "filter_panel_title": "Структурные фильтры",
+    "filter_panel_expand": "Развернуть структурные фильтры",
+    "filter_panel_collapse": "Свернуть структурные фильтры",
+    "filter_panel_active_count": "Активно: {{count}}",
     "filter_method": "Метод",
     "filter_status": "Статус",
     "filter_path": "Путь",

src/i18n/locales/zh-CN.json

@@ -1043,6 +1043,10 @@
     "show_raw_logs": "显示原始日志",
     "show_raw_logs_hint": "直接显示原始日志文本，方便多行复制",
     "search_placeholder": "搜索日志内容或关键字",
+    "filter_panel_title": "结构化筛选",
+    "filter_panel_expand": "展开结构化筛选",
+    "filter_panel_collapse": "收起结构化筛选",
+    "filter_panel_active_count": "已选 {{count}} 项",
     "filter_method": "请求方法",
     "filter_status": "状态码",
     "filter_path": "路径",

src/pages/LoginPage.module.scss

@@ -169,22 +169,8 @@
 
 // 语言下拉选择
 .languageSelect {
-  white-space: nowrap;
-  border: 1px solid var(--border-color);
-  border-radius: $radius-md;
-  padding: 10px 12px;
-  font-size: 14px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  cursor: pointer;
-  height: 40px;
-  box-sizing: border-box;
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
-  }
+  min-width: 108px;
+  flex: 0 0 auto;
 }
 
 // 连接信息框
@@ -218,19 +204,13 @@
 .toggleAdvanced {
   display: flex;
   justify-content: flex-start;
-  align-items: center;
-  gap: $spacing-xs;
+  width: 100%;
+}
+
+.toggleLabel {
   color: var(--text-secondary);
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    cursor: pointer;
-  }
-
-  label {
-    cursor: pointer;
-    font-size: 14px;
-  }
+  font-size: 14px;
+  font-weight: 500;
 }
 
 // 错误提示框

src/pages/LoginPage.tsx

@@ -3,6 +3,8 @@ import { Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import { IconEye, IconEyeOff } from '@/components/ui/icons';
 import { useAuthStore, useLanguageStore, useNotificationStore } from '@/stores';
 import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
@@ -89,9 +91,16 @@ export function LoginPage() {
   const [error, setError] = useState('');
 
   const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
+  const languageOptions = useMemo(
+    () =>
+      LANGUAGE_ORDER.map((lang) => ({
+        value: lang,
+        label: t(LANGUAGE_LABEL_KEYS[lang])
+      })),
+    [t]
+  );
   const handleLanguageChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const selectedLanguage = event.target.value;
+    (selectedLanguage: string) => {
       if (!isSupportedLanguage(selectedLanguage)) {
         return;
       }
@@ -205,19 +214,14 @@ export function LoginPage() {
               <div className={styles.loginHeader}>
                 <div className={styles.titleRow}>
                   <div className={styles.title}>{t('title.login')}</div>
-                  <select
+                  <Select
                     className={styles.languageSelect}
                     value={language}
+                    options={languageOptions}
                     onChange={handleLanguageChange}
-                    title={t('language.switch')}
-                    aria-label={t('language.switch')}
-                  >
-                    {LANGUAGE_ORDER.map((lang) => (
-                      <option key={lang} value={lang}>
-                        {t(LANGUAGE_LABEL_KEYS[lang])}
-                      </option>
-                    ))}
-                  </select>
+                    fullWidth={false}
+                    ariaLabel={t('language.switch')}
+                  />
                 </div>
                 <div className={styles.subtitle}>{t('login.subtitle')}</div>
               </div>
@@ -229,13 +233,12 @@ export function LoginPage() {
               </div>
 
               <div className={styles.toggleAdvanced}>
-                <input
-                  id="custom-connection-toggle"
-                  type="checkbox"
+                <ToggleSwitch
                   checked={showCustomBase}
-                  onChange={(e) => setShowCustomBase(e.target.checked)}
+                  onChange={setShowCustomBase}
+                  ariaLabel={t('login.custom_connection_label')}
+                  label={<span className={styles.toggleLabel}>{t('login.custom_connection_label')}</span>}
                 />
-                <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
               </div>
 
               {showCustomBase && (
@@ -278,13 +281,12 @@ export function LoginPage() {
               />
 
               <div className={styles.toggleAdvanced}>
-                <input
-                  id="remember-password-toggle"
-                  type="checkbox"
+                <ToggleSwitch
                   checked={rememberPassword}
-                  onChange={(e) => setRememberPassword(e.target.checked)}
+                  onChange={setRememberPassword}
+                  ariaLabel={t('login.remember_password_label')}
+                  label={<span className={styles.toggleLabel}>{t('login.remember_password_label')}</span>}
                 />
-                <label htmlFor="remember-password-toggle">{t('login.remember_password_label')}</label>
               </div>
 
               <Button fullWidth onClick={handleSubmit} loading={loading}>

src/pages/LogsPage.module.scss

@@ -121,6 +121,33 @@
   max-width: 420px;
 }
 
+.filterPanelHeader {
+  display: flex;
+  align-items: center;
+  flex: 1 1 100%;
+}
+
+.filterPanelToggle {
+  white-space: nowrap;
+}
+
+.filterPanelButtonContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filterPanelCount {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  background: rgba($primary-color, 0.12);
+  color: var(--primary-color);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 .structuredFilters {
   display: flex;
   flex-direction: column;
@@ -200,6 +227,20 @@
 }
 
 @include mobile {
+  .filterPanelHeader {
+    width: 100%;
+  }
+
+  .filterPanelToggle {
+    width: 100%;
+  }
+
+  .filterPanelButtonContent {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
   .filterChipGroup {
     flex-direction: column;
     gap: 6px;

src/pages/LogsPage.tsx

@@ -8,16 +8,20 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
 import {
-  IconDownload,
+  IconChevronDown,
+  IconChevronUp,
   IconCode,
+  IconDownload,
   IconEyeOff,
   IconRefreshCw,
   IconSearch,
+  IconSlidersHorizontal,
   IconTimer,
   IconTrash2,
   IconX,
 } from '@/components/ui/icons';
 import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
 import { copyToClipboard } from '@/utils/clipboard';
@@ -79,6 +83,10 @@ export function LogsPage() {
   const deferredSearchQuery = useDeferredValue(searchQuery);
   const [hideManagementLogs, setHideManagementLogs] = useState(true);
   const [showRawLogs, setShowRawLogs] = useState(false);
+  const [structuredFiltersExpanded, setStructuredFiltersExpanded] = useLocalStorage(
+    'logsPage.structuredFiltersExpanded',
+    true
+  );
   const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
   const [loadingErrors, setLoadingErrors] = useState(false);
   const [errorLogsError, setErrorLogsError] = useState('');
@@ -305,6 +313,9 @@ export function LogsPage() {
   }, [baseLines, hideManagementLogs, trimmedSearchQuery]);
 
   const filters = useLogFilters({ parsedLines: parsedSearchLines });
+  const structuredFiltersPanelId = 'logs-structured-filters';
+  const structuredFilterCount =
+    filters.methodFilters.length + filters.statusFilters.length + filters.pathFilters.length;
 
   const { filteredParsedLines, filteredLines, removedCount } = useMemo(() => {
     const filteredParsed = parsedSearchLines.filter((line) => {
@@ -498,86 +509,120 @@ export function LogsPage() {
                 />
               </div>
 
-              <div 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={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);
-                        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>
-
+              <div className={styles.filterPanelHeader}>
                 <Button
-                  variant="ghost"
+                  type="button"
+                  variant="secondary"
                   size="sm"
-                  onClick={filters.clearStructuredFilters}
-                  disabled={!filters.hasStructuredFilters}
+                  className={styles.filterPanelToggle}
+                  onClick={() => setStructuredFiltersExpanded((prev) => !prev)}
+                  aria-expanded={structuredFiltersExpanded}
+                  aria-controls={structuredFiltersPanelId}
+                  title={
+                    structuredFiltersExpanded
+                      ? t('logs.filter_panel_collapse')
+                      : t('logs.filter_panel_expand')
+                  }
                 >
-                  {t('logs.clear_filters')}
+                  <span className={styles.filterPanelButtonContent}>
+                    <IconSlidersHorizontal size={16} />
+                    <span>{t('logs.filter_panel_title')}</span>
+                    {structuredFilterCount > 0 && (
+                      <span className={styles.filterPanelCount}>
+                        {t('logs.filter_panel_active_count', { count: structuredFilterCount })}
+                      </span>
+                    )}
+                    {structuredFiltersExpanded ? (
+                      <IconChevronUp size={16} />
+                    ) : (
+                      <IconChevronDown size={16} />
+                    )}
+                  </span>
                 </Button>
               </div>
 
+              {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={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);
+                          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}
                 onChange={setHideManagementLogs}

src/styles/layout.scss

@@ -346,12 +346,24 @@
 
       @media (max-width: $breakpoint-mobile) {
         .theme-menu-popover {
-          right: auto;
-          left: 50%;
-          transform: translateX(-50%);
+          right: 0;
+          left: auto;
+          transform: none;
           display: grid;
-          grid-template-columns: repeat(2, max-content);
-          justify-content: center;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          justify-content: stretch;
+          width: min(188px, calc(100vw - 16px));
+        }
+
+        .theme-card {
+          width: 100%;
+          min-width: 0;
+        }
+
+        .theme-card-label {
+          white-space: normal;
+          text-align: center;
+          line-height: 1.2;
         }
       }
     }