1525 lines
62 KiB
JavaScript
1525 lines
62 KiB
JavaScript
'use strict';
|
||
'require view';
|
||
'require ui';
|
||
'require uci';
|
||
'require rpc';
|
||
'require poll';
|
||
|
||
const translations = {
|
||
'zh-cn': {
|
||
'Bandix DNS 监控': 'Bandix DNS 监控',
|
||
'正在加载数据...': '正在加载数据...',
|
||
'无法获取数据': '无法获取数据',
|
||
'DNS 监控': 'DNS 监控',
|
||
'DNS 查询记录': 'DNS 查询记录',
|
||
'DNS 统计信息': 'DNS 统计信息',
|
||
'DNS监控未启用': 'DNS监控未启用',
|
||
'请在设置中启用DNS监控功能': '请在设置中启用DNS监控功能',
|
||
'前往设置': '前往设置',
|
||
'无数据': '无数据',
|
||
'时间': '时间',
|
||
'域名': '域名',
|
||
'查询类型': '查询类型',
|
||
'类型': '类型',
|
||
'响应码': '响应码',
|
||
'响应时间': '响应时间',
|
||
'源IP': '源IP',
|
||
'目标IP': '目标IP',
|
||
'设备': '设备',
|
||
'响应IP': '响应IP',
|
||
'响应结果': '响应结果',
|
||
'DNS服务器': 'DNS服务器',
|
||
'查询': '查询',
|
||
'响应': '响应',
|
||
'过滤': '过滤',
|
||
'域名过滤': '域名过滤',
|
||
'设备过滤': '设备过滤',
|
||
'DNS服务器过滤': 'DNS服务器过滤',
|
||
'类型过滤': '类型过滤',
|
||
'全部': '全部',
|
||
'仅查询': '仅查询',
|
||
'仅响应': '仅响应',
|
||
'搜索': '搜索',
|
||
'搜索域名': '搜索域名',
|
||
'搜索设备': '搜索设备',
|
||
'搜索DNS服务器': '搜索DNS服务器',
|
||
'清除': '清除',
|
||
'上一页': '上一页',
|
||
'下一页': '下一页',
|
||
'第': '第',
|
||
'页，共': '页，共',
|
||
'共': '共',
|
||
'条记录': '条记录',
|
||
'每页显示': '每页显示',
|
||
'条': '条',
|
||
'总查询数': '总查询数',
|
||
'总响应数': '总响应数',
|
||
'有响应查询': '有响应查询',
|
||
'无响应查询': '无响应查询',
|
||
'平均响应时间': '平均响应时间',
|
||
'最快响应时间': '最快响应时间',
|
||
'最慢响应时间': '最慢响应时间',
|
||
'响应时间': '响应时间',
|
||
'成功率': '成功率',
|
||
'成功': '成功',
|
||
'失败': '失败',
|
||
'最常查询域名': '最常查询域名',
|
||
'最常用查询类型': '最常用查询类型',
|
||
'最活跃设备': '最活跃设备',
|
||
'最常用DNS服务器': '最常用DNS服务器',
|
||
'唯一设备数': '唯一设备数',
|
||
'时间范围': '时间范围',
|
||
'毫秒': '毫秒',
|
||
'分钟': '分钟',
|
||
'刷新': '刷新',
|
||
'未知设备': '未知设备',
|
||
'成功': '成功',
|
||
'域名未找到': '域名未找到',
|
||
'服务器错误': '服务器错误',
|
||
'格式错误': '格式错误',
|
||
'拒绝': '拒绝',
|
||
'其他': '其他'
|
||
},
|
||
'zh-tw': {
|
||
'Bandix DNS 监控': 'Bandix DNS 監控',
|
||
'正在加载数据...': '正在載入資料...',
|
||
'无法获取数据': '無法獲取資料',
|
||
'DNS 监控': 'DNS 監控',
|
||
'DNS 查询记录': 'DNS 查詢記錄',
|
||
'DNS 统计信息': 'DNS 統計資訊',
|
||
'DNS监控未启用': 'DNS監控未啟用',
|
||
'请在设置中启用DNS监控功能': '請在設置中啟用DNS監控功能',
|
||
'前往设置': '前往設置',
|
||
'无数据': '無數據',
|
||
'时间': '時間',
|
||
'域名': '域名',
|
||
'查询类型': '查詢類型',
|
||
'类型': '類型',
|
||
'响应码': '響應碼',
|
||
'响应时间': '響應時間',
|
||
'源IP': '源IP',
|
||
'目标IP': '目標IP',
|
||
'设备': '設備',
|
||
'响应IP': '響應IP',
|
||
'响应结果': '響應結果',
|
||
'DNS服务器': 'DNS伺服器',
|
||
'查询': '查詢',
|
||
'响应': '響應',
|
||
'过滤': '過濾',
|
||
'域名过滤': '域名過濾',
|
||
'设备过滤': '設備過濾',
|
||
'DNS服务器过滤': 'DNS伺服器過濾',
|
||
'类型过滤': '類型過濾',
|
||
'全部': '全部',
|
||
'仅查询': '僅查詢',
|
||
'仅响应': '僅響應',
|
||
'搜索': '搜尋',
|
||
'搜索域名': '搜尋域名',
|
||
'搜索设备': '搜尋設備',
|
||
'搜索DNS服务器': '搜尋DNS伺服器',
|
||
'清除': '清除',
|
||
'上一页': '上一頁',
|
||
'下一页': '下一頁',
|
||
'第': '第',
|
||
'页，共': '頁，共',
|
||
'共': '共',
|
||
'条记录': '條記錄',
|
||
'每页显示': '每頁顯示',
|
||
'条': '條',
|
||
'总查询数': '總查詢數',
|
||
'总响应数': '總響應數',
|
||
'有响应查询': '有響應查詢',
|
||
'无响应查询': '無響應查詢',
|
||
'平均响应时间': '平均響應時間',
|
||
'最快响应时间': '最快響應時間',
|
||
'最慢响应时间': '最慢響應時間',
|
||
'响应时间': '響應時間',
|
||
'成功率': '成功率',
|
||
'成功': '成功',
|
||
'失败': '失敗',
|
||
'最常查询域名': '最常查詢域名',
|
||
'最常用查询类型': '最常用查詢類型',
|
||
'最活跃设备': '最活躍設備',
|
||
'最常用DNS服务器': '最常用DNS伺服器',
|
||
'唯一设备数': '唯一設備數',
|
||
'时间范围': '時間範圍',
|
||
'毫秒': '毫秒',
|
||
'分钟': '分鐘',
|
||
'刷新': '重新整理',
|
||
'未知设备': '未知設備',
|
||
'成功': '成功',
|
||
'域名未找到': '域名未找到',
|
||
'服务器错误': '伺服器錯誤',
|
||
'格式错误': '格式錯誤',
|
||
'拒绝': '拒絕',
|
||
'其他': '其他'
|
||
},
|
||
'en': {
|
||
'Bandix DNS 监控': 'Bandix DNS Monitor',
|
||
'正在加载数据...': 'Loading data...',
|
||
'无法获取数据': 'Unable to fetch data',
|
||
'DNS 监控': 'DNS Monitor',
|
||
'DNS 查询记录': 'DNS Query Records',
|
||
'DNS 统计信息': 'DNS Statistics',
|
||
'DNS监控未启用': 'DNS Monitoring Disabled',
|
||
'请在设置中启用DNS监控功能': 'Please enable DNS monitoring in settings',
|
||
'前往设置': 'Go to Settings',
|
||
'无数据': 'No Data',
|
||
'时间': 'Time',
|
||
'域名': 'Domain',
|
||
'查询类型': 'Query Type',
|
||
'类型': 'Type',
|
||
'响应码': 'Response Code',
|
||
'响应时间': 'Response Time',
|
||
'源IP': 'Source IP',
|
||
'目标IP': 'Destination IP',
|
||
'设备': 'Device',
|
||
'响应IP': 'Response IPs',
|
||
'响应结果': 'Response Result',
|
||
'DNS服务器': 'DNS Server',
|
||
'查询': 'Query',
|
||
'响应': 'Response',
|
||
'过滤': 'Filter',
|
||
'域名过滤': 'Domain Filter',
|
||
'设备过滤': 'Device Filter',
|
||
'DNS服务器过滤': 'DNS Server Filter',
|
||
'类型过滤': 'Type Filter',
|
||
'全部': 'All',
|
||
'仅查询': 'Queries Only',
|
||
'仅响应': 'Responses Only',
|
||
'搜索': 'Search',
|
||
'搜索域名': 'Search Domain',
|
||
'搜索设备': 'Search Device',
|
||
'搜索DNS服务器': 'Search DNS Server',
|
||
'清除': 'Clear',
|
||
'上一页': 'Previous',
|
||
'下一页': 'Next',
|
||
'第': 'Page',
|
||
'页，共': 'of',
|
||
'共': 'Total',
|
||
'条记录': 'records',
|
||
'每页显示': 'Per Page',
|
||
'条': '',
|
||
'总查询数': 'Total Queries',
|
||
'总响应数': 'Total Responses',
|
||
'有响应查询': 'Queries with Response',
|
||
'无响应查询': 'Queries without Response',
|
||
'平均响应时间': 'Avg Response Time',
|
||
'最快响应时间': 'Min Response Time',
|
||
'最慢响应时间': 'Max Response Time',
|
||
'响应时间': 'Response Time',
|
||
'成功率': 'Success Rate',
|
||
'成功': 'Success',
|
||
'失败': 'Failure',
|
||
'最常查询域名': 'Top Domains',
|
||
'最常用查询类型': 'Top Query Types',
|
||
'最活跃设备': 'Top Devices',
|
||
'最常用DNS服务器': 'Top DNS Servers',
|
||
'唯一设备数': 'Unique Devices',
|
||
'时间范围': 'Time Range',
|
||
'毫秒': 'ms',
|
||
'分钟': 'minutes',
|
||
'刷新': 'Refresh',
|
||
'未知设备': 'Unknown Device',
|
||
'成功': 'Success',
|
||
'域名未找到': 'Domain not found',
|
||
'服务器错误': 'Server error',
|
||
'格式错误': 'Format error',
|
||
'拒绝': 'Refused',
|
||
'其他': 'Other'
|
||
},
|
||
'fr': {
|
||
'Bandix DNS 监控': 'Bandix Surveillance DNS',
|
||
'正在加载数据...': 'Chargement des données...',
|
||
'无法获取数据': 'Impossible de récupérer les données',
|
||
'DNS 监控': 'Surveillance DNS',
|
||
'DNS 查询记录': 'Enregistrements de Requêtes DNS',
|
||
'DNS 统计信息': 'Statistiques DNS',
|
||
'DNS监控未启用': 'Surveillance DNS désactivée',
|
||
'请在设置中启用DNS监控功能': 'Veuillez activer la surveillance DNS dans les paramètres',
|
||
'前往设置': 'Aller aux Paramètres',
|
||
'无数据': 'Aucune Donnée',
|
||
'时间': 'Heure',
|
||
'域名': 'Domaine',
|
||
'查询类型': 'Type de Requête',
|
||
'类型': 'Type',
|
||
'响应码': 'Code de Réponse',
|
||
'响应时间': 'Temps de Réponse',
|
||
'源IP': 'IP Source',
|
||
'目标IP': 'IP de Destination',
|
||
'设备': 'Appareil',
|
||
'响应IP': 'IPs de Réponse',
|
||
'响应结果': 'Résultat de Réponse',
|
||
'DNS服务器': 'Serveur DNS',
|
||
'查询': 'Requête',
|
||
'响应': 'Réponse',
|
||
'过滤': 'Filtre',
|
||
'域名过滤': 'Filtre de Domaine',
|
||
'设备过滤': 'Filtre d\'Appareil',
|
||
'DNS服务器过滤': 'Filtre de Serveur DNS',
|
||
'类型过滤': 'Filtre de Type',
|
||
'全部': 'Tous',
|
||
'仅查询': 'Requêtes Seulement',
|
||
'仅响应': 'Réponses Seulement',
|
||
'搜索': 'Rechercher',
|
||
'搜索域名': 'Rechercher un Domaine',
|
||
'搜索设备': 'Rechercher un Appareil',
|
||
'搜索DNS服务器': 'Rechercher un Serveur DNS',
|
||
'清除': 'Effacer',
|
||
'上一页': 'Précédent',
|
||
'下一页': 'Suivant',
|
||
'第': 'Page',
|
||
'页，共': 'sur',
|
||
'共': 'Total',
|
||
'条记录': 'enregistrements',
|
||
'每页显示': 'Par Page',
|
||
'条': '',
|
||
'总查询数': 'Total des Requêtes',
|
||
'总响应数': 'Total des Réponses',
|
||
'有响应查询': 'Requêtes avec Réponse',
|
||
'无响应查询': 'Requêtes sans Réponse',
|
||
'平均响应时间': 'Temps de Réponse Moyen',
|
||
'最快响应时间': 'Temps de Réponse Minimum',
|
||
'最慢响应时间': 'Temps de Réponse Maximum',
|
||
'响应时间': 'Temps de Réponse',
|
||
'成功率': 'Taux de Réussite',
|
||
'成功': 'Succès',
|
||
'失败': 'Échec',
|
||
'最常查询域名': 'Domaines les Plus Consultés',
|
||
'最常用查询类型': 'Types de Requêtes les Plus Utilisés',
|
||
'最活跃设备': 'Appareils les Plus Actifs',
|
||
'最常用DNS服务器': 'Serveurs DNS les Plus Utilisés',
|
||
'唯一设备数': 'Appareils Uniques',
|
||
'时间范围': 'Plage de Temps',
|
||
'毫秒': 'ms',
|
||
'分钟': 'minutes',
|
||
'刷新': 'Actualiser',
|
||
'未知设备': 'Appareil Inconnu',
|
||
'成功': 'Succès',
|
||
'域名未找到': 'Domaine introuvable',
|
||
'服务器错误': 'Erreur serveur',
|
||
'格式错误': 'Erreur de format',
|
||
'拒绝': 'Refusé',
|
||
'其他': 'Autre'
|
||
},
|
||
'ja': {
|
||
'Bandix DNS 监控': 'Bandix DNS監視',
|
||
'正在加载数据...': 'データを読み込み中...',
|
||
'无法获取数据': 'データを取得できません',
|
||
'DNS 监控': 'DNS監視',
|
||
'DNS 查询记录': 'DNSクエリ記録',
|
||
'DNS 统计信息': 'DNS統計情報',
|
||
'DNS监控未启用': 'DNS監視が無効です',
|
||
'请在设置中启用DNS监控功能': '設定でDNS監視機能を有効にしてください',
|
||
'前往设置': '設定へ',
|
||
'无数据': 'データなし',
|
||
'时间': '時刻',
|
||
'域名': 'ドメイン',
|
||
'查询类型': 'クエリタイプ',
|
||
'类型': 'タイプ',
|
||
'响应码': '応答コード',
|
||
'响应时间': '応答時間',
|
||
'源IP': '送信元IP',
|
||
'目标IP': '宛先IP',
|
||
'设备': 'デバイス',
|
||
'响应IP': '応答IP',
|
||
'响应结果': '応答結果',
|
||
'DNS服务器': 'DNSサーバー',
|
||
'查询': 'クエリ',
|
||
'响应': '応答',
|
||
'过滤': 'フィルター',
|
||
'域名过滤': 'ドメインフィルター',
|
||
'设备过滤': 'デバイスフィルター',
|
||
'DNS服务器过滤': 'DNSサーバーフィルター',
|
||
'类型过滤': 'タイプフィルター',
|
||
'全部': 'すべて',
|
||
'仅查询': 'クエリのみ',
|
||
'仅响应': '応答のみ',
|
||
'搜索': '検索',
|
||
'搜索域名': 'ドメインを検索',
|
||
'搜索设备': 'デバイスを検索',
|
||
'搜索DNS服务器': 'DNSサーバーを検索',
|
||
'清除': 'クリア',
|
||
'上一页': '前へ',
|
||
'下一页': '次へ',
|
||
'第': 'ページ',
|
||
'页，共': '/',
|
||
'共': '合計',
|
||
'条记录': '件の記録',
|
||
'每页显示': 'ページあたり',
|
||
'条': '',
|
||
'总查询数': '総クエリ数',
|
||
'总响应数': '総応答数',
|
||
'有响应查询': '応答ありのクエリ',
|
||
'无响应查询': '応答なしのクエリ',
|
||
'平均响应时间': '平均応答時間',
|
||
'最快响应时间': '最小応答時間',
|
||
'最慢响应时间': '最大応答時間',
|
||
'响应时间': '応答時間',
|
||
'成功率': '成功率',
|
||
'成功': '成功',
|
||
'失败': '失敗',
|
||
'最常查询域名': '最も頻繁にクエリされるドメイン',
|
||
'最常用查询类型': '最も使用されるクエリタイプ',
|
||
'最活跃设备': '最もアクティブなデバイス',
|
||
'最常用DNS服务器': '最も使用されるDNSサーバー',
|
||
'唯一设备数': 'ユニークデバイス数',
|
||
'时间范围': '時間範囲',
|
||
'毫秒': 'ミリ秒',
|
||
'分钟': '分',
|
||
'刷新': '更新',
|
||
'未知设备': '不明なデバイス',
|
||
'成功': '成功',
|
||
'域名未找到': 'ドメインが見つかりません',
|
||
'服务器错误': 'サーバーエラー',
|
||
'格式错误': 'フォーマットエラー',
|
||
'拒绝': '拒否',
|
||
'其他': 'その他'
|
||
},
|
||
'ru': {
|
||
'Bandix DNS 监控': 'Bandix Мониторинг DNS',
|
||
'正在加载数据...': 'Загрузка данных...',
|
||
'无法获取数据': 'Не удалось получить данные',
|
||
'DNS 监控': 'Мониторинг DNS',
|
||
'DNS 查询记录': 'Записи DNS-запросов',
|
||
'DNS 统计信息': 'Статистика DNS',
|
||
'DNS监控未启用': 'Мониторинг DNS отключен',
|
||
'请在设置中启用DNS监控功能': 'Пожалуйста, включите мониторинг DNS в настройках',
|
||
'前往设置': 'Перейти в Настройки',
|
||
'无数据': 'Нет Данных',
|
||
'时间': 'Время',
|
||
'域名': 'Домен',
|
||
'查询类型': 'Тип Запроса',
|
||
'类型': 'Тип',
|
||
'响应码': 'Код Ответа',
|
||
'响应时间': 'Время Ответа',
|
||
'源IP': 'Исходный IP',
|
||
'目标IP': 'IP Назначения',
|
||
'设备': 'Устройство',
|
||
'响应IP': 'IP Ответов',
|
||
'响应结果': 'Результат Ответа',
|
||
'DNS服务器': 'DNS Сервер',
|
||
'查询': 'Запрос',
|
||
'响应': 'Ответ',
|
||
'过滤': 'Фильтр',
|
||
'域名过滤': 'Фильтр Домена',
|
||
'设备过滤': 'Фильтр Устройства',
|
||
'DNS服务器过滤': 'Фильтр DNS Сервера',
|
||
'类型过滤': 'Фильтр Типа',
|
||
'全部': 'Все',
|
||
'仅查询': 'Только Запросы',
|
||
'仅响应': 'Только Ответы',
|
||
'搜索': 'Поиск',
|
||
'搜索域名': 'Поиск Домена',
|
||
'搜索设备': 'Поиск Устройства',
|
||
'搜索DNS服务器': 'Поиск DNS Сервера',
|
||
'清除': 'Очистить',
|
||
'上一页': 'Предыдущая',
|
||
'下一页': 'Следующая',
|
||
'第': 'Страница',
|
||
'页，共': 'из',
|
||
'共': 'Всего',
|
||
'条记录': 'записей',
|
||
'每页显示': 'На Странице',
|
||
'条': '',
|
||
'总查询数': 'Всего Запросов',
|
||
'总响应数': 'Всего Ответов',
|
||
'有响应查询': 'Запросы с Ответом',
|
||
'无响应查询': 'Запросы без Ответа',
|
||
'平均响应时间': 'Среднее Время Ответа',
|
||
'最快响应时间': 'Минимальное Время Ответа',
|
||
'最慢响应时间': 'Максимальное Время Ответа',
|
||
'响应时间': 'Время Ответа',
|
||
'成功率': 'Процент Успеха',
|
||
'成功': 'Успех',
|
||
'失败': 'Неудача',
|
||
'最常查询域名': 'Наиболее Запрашиваемые Домены',
|
||
'最常用查询类型': 'Наиболее Используемые Типы Запросов',
|
||
'最活跃设备': 'Наиболее Активные Устройства',
|
||
'最常用DNS服务器': 'Наиболее Используемые DNS Серверы',
|
||
'唯一设备数': 'Уникальных Устройств',
|
||
'时间范围': 'Временной Диапазон',
|
||
'毫秒': 'мс',
|
||
'分钟': 'минут',
|
||
'刷新': 'Обновить',
|
||
'未知设备': 'Неизвестное Устройство',
|
||
'成功': 'Успех',
|
||
'域名未找到': 'Домен не найден',
|
||
'服务器错误': 'Ошибка сервера',
|
||
'格式错误': 'Ошибка формата',
|
||
'拒绝': 'Отклонено',
|
||
'其他': 'Другое'
|
||
}
|
||
};
|
||
|
||
function getTranslation(key, language) {
|
||
return translations[language]?.[key] || key;
|
||
}
|
||
|
||
function getSystemLanguage() {
|
||
var luciLang = uci.get('luci', 'main', 'lang');
|
||
if (luciLang && translations[luciLang]) {
|
||
return luciLang;
|
||
}
|
||
var systemLang = document.documentElement.lang || 'en';
|
||
if (translations[systemLang]) {
|
||
return systemLang;
|
||
}
|
||
return 'en';
|
||
}
|
||
|
||
function isDarkMode() {
|
||
var userTheme = uci.get('bandix', 'general', 'theme');
|
||
if (userTheme) {
|
||
if (userTheme === 'dark') {
|
||
return true;
|
||
} else if (userTheme === 'light') {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
var mediaUrlBase = uci.get('luci', 'main', 'mediaurlbase');
|
||
if (mediaUrlBase && mediaUrlBase.toLowerCase().includes('dark')) {
|
||
return true;
|
||
}
|
||
|
||
if (mediaUrlBase && mediaUrlBase.toLowerCase().includes('argon')) {
|
||
var argonMode = uci.get('argon', '@global[0]', 'mode');
|
||
if (argonMode) {
|
||
if (argonMode.toLowerCase() === 'dark') {
|
||
return true;
|
||
} else if (argonMode.toLowerCase() === 'light') {
|
||
return false;
|
||
}
|
||
if (argonMode.toLowerCase() === 'normal' || argonMode.toLowerCase() === 'auto') {
|
||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
function formatTimestamp(timestamp) {
|
||
if (!timestamp) return '-';
|
||
var date = new Date(timestamp);
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
fractionalSecondDigits: 3
|
||
});
|
||
}
|
||
|
||
function formatResponseCode(code) {
|
||
var language = getSystemLanguage();
|
||
if (code === 'Success') return getTranslation('成功', language);
|
||
if (code === 'Domain not found') return getTranslation('域名未找到', language);
|
||
if (code === 'Server error') return getTranslation('服务器错误', language);
|
||
if (code === 'Format error') return getTranslation('格式错误', language);
|
||
if (code === 'Refused') return getTranslation('拒绝', language);
|
||
return code || getTranslation('其他', language);
|
||
}
|
||
|
||
function formatDeviceName(device) {
|
||
var language = getSystemLanguage();
|
||
var parts = [];
|
||
if (device && device.device_name && device.device_name !== '') {
|
||
parts.push(device.device_name);
|
||
}
|
||
// 显示IP地址
|
||
// 查询时使用source_ip（查询设备的IP）
|
||
// 响应时使用destination_ip（目标IP，即查询设备的IP），而不是source_ip（DNS服务器的IP）
|
||
var ip = null;
|
||
if (device && device.is_query) {
|
||
// 查询记录：使用source_ip
|
||
ip = device.source_ip;
|
||
} else {
|
||
// 响应记录：使用destination_ip（目标IP）
|
||
ip = device.destination_ip;
|
||
}
|
||
if (ip) {
|
||
parts.push(ip);
|
||
}
|
||
if (parts.length === 0) {
|
||
return getTranslation('未知设备', language);
|
||
}
|
||
return parts.join(' / ');
|
||
}
|
||
|
||
function formatDnsServer(query) {
|
||
if (!query) return '-';
|
||
// 查询时显示目标IP（destination_ip），响应时显示源IP（source_ip）
|
||
if (query.is_query) {
|
||
return query.destination_ip || '-';
|
||
} else {
|
||
return query.source_ip || '-';
|
||
}
|
||
}
|
||
|
||
function formatResponseResult(query) {
|
||
if (!query) return { display: [], full: [] };
|
||
|
||
// 显示响应IP（response_ips），它是一个字符串数组
|
||
if (query.response_ips && Array.isArray(query.response_ips) && query.response_ips.length > 0) {
|
||
var maxDisplay = 5; // 最多显示5条
|
||
var displayRecords = query.response_ips.slice(0, maxDisplay);
|
||
var fullRecords = query.response_ips;
|
||
|
||
return {
|
||
display: displayRecords,
|
||
full: fullRecords,
|
||
hasMore: fullRecords.length > maxDisplay
|
||
};
|
||
}
|
||
|
||
return { display: [], full: [] };
|
||
}
|
||
|
||
var callGetDnsQueries = rpc.declare({
|
||
object: 'luci.bandix',
|
||
method: 'getDnsQueries',
|
||
params: ['domain', 'device', 'is_query', 'dns_server', 'page', 'page_size'],
|
||
expect: {}
|
||
});
|
||
|
||
var callGetDnsStats = rpc.declare({
|
||
object: 'luci.bandix',
|
||
method: 'getDnsStats',
|
||
expect: {}
|
||
});
|
||
|
||
return view.extend({
|
||
load: function () {
|
||
return Promise.all([
|
||
uci.load('bandix'),
|
||
uci.load('luci'),
|
||
uci.load('argon').catch(function () {
|
||
return null;
|
||
})
|
||
]);
|
||
},
|
||
|
||
render: function (data) {
|
||
var language = uci.get('bandix', 'general', 'language');
|
||
if (!language || language === 'auto') {
|
||
language = getSystemLanguage();
|
||
}
|
||
var darkMode = isDarkMode();
|
||
var dnsEnabled = uci.get('bandix', 'dns', 'enabled') === '1';
|
||
|
||
var style = E('style', {}, `
|
||
.bandix-dns-container {
|
||
margin: 0;
|
||
padding: 16px;
|
||
background-color: ${darkMode ? '#1a1a1a' : '#f8fafc'};
|
||
min-height: calc(100vh - 100px);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
color: ${darkMode ? '#e2e8f0' : '#1f2937'};
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.bandix-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.bandix-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#f1f5f9' : '#1f2937'};
|
||
margin: 0;
|
||
}
|
||
|
||
.bandix-alert {
|
||
background-color: ${darkMode ? '#2a2a2a' : '#eff6ff'};
|
||
border-left: 3px solid ${darkMode ? '#3b82f6' : '#2563eb'};
|
||
border-radius: 4px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: ${darkMode ? '#d0d0d0' : '#1e293b'};
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.bandix-alert-icon {
|
||
color: ${darkMode ? '#60a5fa' : '#2563eb'};
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
width: 18px;
|
||
height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid currentColor;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bandix-card {
|
||
background-color: ${darkMode ? '#2a2a2a' : 'white'};
|
||
border-radius: 8px;
|
||
border: 1px solid ${darkMode ? '#444444' : '#e2e8f0'};
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, ${darkMode ? '0.3' : '0.08'});
|
||
margin-bottom: 24px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bandix-card-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid ${darkMode ? '#444444' : '#e2e8f0'};
|
||
background-color: ${darkMode ? '#2a2a2a' : '#f8fafc'};
|
||
}
|
||
|
||
.bandix-card-title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#f1f5f9' : '#1f2937'};
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.bandix-card-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.filter-section {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.filter-label {
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: ${darkMode ? '#94a3b8' : '#64748b'};
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-input {
|
||
padding: 6px 12px;
|
||
border: 1px solid ${darkMode ? '#444444' : '#cbd5e1'};
|
||
border-radius: 4px;
|
||
background-color: ${darkMode ? '#1a1a1a' : 'white'};
|
||
color: ${darkMode ? '#e2e8f0' : '#1f2937'};
|
||
font-size: 0.875rem;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.filter-select {
|
||
padding: 6px 12px;
|
||
border: 1px solid ${darkMode ? '#444444' : '#cbd5e1'};
|
||
border-radius: 4px;
|
||
background-color: ${darkMode ? '#1a1a1a' : 'white'};
|
||
color: ${darkMode ? '#e2e8f0' : '#1f2937'};
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #3b82f6;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #2563eb;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background-color: ${darkMode ? '#3a3a3a' : '#e5e7eb'};
|
||
color: ${darkMode ? '#d0d0d0' : '#374151'};
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: ${darkMode ? '#4a4a4a' : '#d1d5db'};
|
||
}
|
||
|
||
.bandix-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background-color: transparent;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.bandix-table th {
|
||
background-color: ${darkMode ? '#2a2a2a' : '#f8fafc'};
|
||
padding: 10px 12px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#d0d0d0' : '#475569'};
|
||
border-bottom: 2px solid ${darkMode ? '#444444' : '#e2e8f0'};
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bandix-table td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid ${darkMode ? '#333333' : '#f1f5f9'};
|
||
color: ${darkMode ? '#d0d0d0' : '#334155'};
|
||
word-break: break-word;
|
||
}
|
||
|
||
.query-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.query-badge.query {
|
||
background-color: #3b82f6;
|
||
color: white;
|
||
}
|
||
|
||
.query-badge.response {
|
||
background-color: #10b981;
|
||
color: white;
|
||
}
|
||
|
||
.response-code {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.response-code.success {
|
||
background-color: #10b981;
|
||
color: white;
|
||
}
|
||
|
||
.response-code.error {
|
||
background-color: #ef4444;
|
||
color: white;
|
||
}
|
||
|
||
.response-code.warning {
|
||
background-color: #f59e0b;
|
||
color: white;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.pagination-info {
|
||
color: ${darkMode ? '#94a3b8' : '#64748b'};
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.stats-card {
|
||
background-color: ${darkMode ? '#2a2a2a' : 'white'};
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
border: 1px solid ${darkMode ? '#444444' : '#e2e8f0'};
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, ${darkMode ? '0.3' : '0.08'});
|
||
}
|
||
|
||
.stats-card-title {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#94a3b8' : '#64748b'};
|
||
margin: 0 0 8px 0;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.025em;
|
||
}
|
||
|
||
.stats-card-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: ${darkMode ? '#f1f5f9' : '#1f2937'};
|
||
margin: 0;
|
||
}
|
||
|
||
.stats-card-unit {
|
||
font-size: 0.875rem;
|
||
color: ${darkMode ? '#94a3b8' : '#64748b'};
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.stats-card-details {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stats-detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.stats-detail-label {
|
||
color: ${darkMode ? '#9ca3af' : '#6b7280'};
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stats-detail-value {
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#e2e8f0' : '#374151'};
|
||
}
|
||
|
||
.top-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.top-list-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid ${darkMode ? '#333333' : '#f1f5f9'};
|
||
}
|
||
|
||
.top-list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.top-list-name {
|
||
flex: 1;
|
||
color: ${darkMode ? '#e2e8f0' : '#334155'};
|
||
font-size: 0.875rem;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.top-list-count {
|
||
font-weight: 600;
|
||
color: ${darkMode ? '#f1f5f9' : '#1f2937'};
|
||
font-size: 0.875rem;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.loading-state {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: ${darkMode ? '#94a3b8' : '#6b7280'};
|
||
font-style: italic;
|
||
}
|
||
|
||
.error-state {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: ${darkMode ? '#f87171' : '#ef4444'};
|
||
}
|
||
|
||
.response-ips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.response-ip-badge {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
background-color: ${darkMode ? '#3a3a3a' : '#e5e7eb'};
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
color: ${darkMode ? '#d0d0d0' : '#374151'};
|
||
}
|
||
`);
|
||
document.head.appendChild(style);
|
||
|
||
var container = E('div', { 'class': 'bandix-dns-container' });
|
||
|
||
var header = E('div', { 'class': 'bandix-header' }, [
|
||
E('h1', { 'class': 'bandix-title' }, getTranslation('Bandix DNS 监控', language))
|
||
]);
|
||
container.appendChild(header);
|
||
|
||
if (!dnsEnabled) {
|
||
var alertDiv = E('div', { 'class': 'bandix-alert' }, [
|
||
E('span', { 'class': 'bandix-alert-icon' }, '!'),
|
||
E('div', {}, [
|
||
E('strong', {}, getTranslation('DNS监控未启用', language)),
|
||
E('p', { 'style': 'margin: 4px 0 0 0;' },
|
||
getTranslation('请在设置中启用DNS监控功能', language))
|
||
])
|
||
]);
|
||
container.appendChild(alertDiv);
|
||
|
||
var settingsCard = E('div', { 'class': 'bandix-card' }, [
|
||
E('div', { 'class': 'bandix-card-body', 'style': 'text-align: center;' }, [
|
||
E('a', {
|
||
'href': '/cgi-bin/luci/admin/network/bandix/settings',
|
||
'class': 'btn btn-primary'
|
||
}, getTranslation('前往设置', language))
|
||
])
|
||
]);
|
||
container.appendChild(settingsCard);
|
||
return container;
|
||
}
|
||
|
||
// DNS 统计信息卡片
|
||
var statsCard = E('div', { 'class': 'bandix-card' }, [
|
||
E('div', { 'class': 'bandix-card-body' }, [
|
||
E('div', { 'id': 'dns-stats-container' }, [
|
||
E('div', { 'class': 'loading-state' }, getTranslation('正在加载数据...', language))
|
||
])
|
||
])
|
||
]);
|
||
container.appendChild(statsCard);
|
||
|
||
// DNS 查询记录卡片
|
||
var queriesCard = E('div', { 'class': 'bandix-card' }, [
|
||
E('div', { 'class': 'bandix-card-header' }, [
|
||
E('h2', { 'class': 'bandix-card-title' }, getTranslation('DNS 查询记录', language))
|
||
]),
|
||
E('div', { 'class': 'bandix-card-body' }, [
|
||
E('div', { 'class': 'filter-section' }, [
|
||
E('div', { 'class': 'filter-group' }, [
|
||
E('label', { 'class': 'filter-label' }, getTranslation('类型过滤', language) + ':'),
|
||
E('select', { 'class': 'filter-select', 'id': 'type-filter' }, [
|
||
E('option', { 'value': '' }, getTranslation('全部', language)),
|
||
E('option', { 'value': 'true' }, getTranslation('仅查询', language)),
|
||
E('option', { 'value': 'false' }, getTranslation('仅响应', language))
|
||
])
|
||
]),
|
||
E('div', { 'class': 'filter-group' }, [
|
||
E('label', { 'class': 'filter-label' }, getTranslation('域名过滤', language) + ':'),
|
||
E('input', {
|
||
'type': 'text',
|
||
'class': 'filter-input',
|
||
'id': 'domain-filter',
|
||
'placeholder': getTranslation('搜索域名', language)
|
||
})
|
||
]),
|
||
E('div', { 'class': 'filter-group' }, [
|
||
E('label', { 'class': 'filter-label' }, getTranslation('设备过滤', language) + ':'),
|
||
E('input', {
|
||
'type': 'text',
|
||
'class': 'filter-input',
|
||
'id': 'device-filter',
|
||
'placeholder': getTranslation('搜索设备', language)
|
||
})
|
||
]),
|
||
E('div', { 'class': 'filter-group' }, [
|
||
E('label', { 'class': 'filter-label' }, getTranslation('DNS服务器过滤', language) + ':'),
|
||
E('input', {
|
||
'type': 'text',
|
||
'class': 'filter-input',
|
||
'id': 'dns-server-filter',
|
||
'placeholder': getTranslation('搜索DNS服务器', language)
|
||
})
|
||
]),
|
||
E('div', { 'class': 'filter-group', 'style': 'margin-left: auto;' }, [
|
||
E('button', {
|
||
'class': 'btn btn-primary',
|
||
'id': 'refresh-queries-btn'
|
||
}, getTranslation('刷新', language))
|
||
])
|
||
]),
|
||
E('div', { 'id': 'dns-queries-container' }, [
|
||
E('div', { 'class': 'loading-state' }, getTranslation('正在加载数据...', language))
|
||
])
|
||
])
|
||
]);
|
||
container.appendChild(queriesCard);
|
||
|
||
// 状态变量
|
||
var currentPage = 1;
|
||
var pageSize = 20;
|
||
var currentFilters = {
|
||
domain: '',
|
||
device: '',
|
||
is_query: '',
|
||
dns_server: ''
|
||
};
|
||
|
||
// 更新统计信息
|
||
var statsInitialized = false;
|
||
function updateStats() {
|
||
callGetDnsStats().then(function (result) {
|
||
var container = document.getElementById('dns-stats-container');
|
||
if (!container) return;
|
||
if (!result || result.status !== 'success' || !result.data || !result.data.stats) {
|
||
if (!statsInitialized) {
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'error-state' },
|
||
getTranslation('无法获取数据', language)));
|
||
}
|
||
return;
|
||
}
|
||
|
||
var stats = result.data.stats;
|
||
|
||
// 如果还没有初始化，创建完整的 UI 结构
|
||
if (!statsInitialized) {
|
||
var statsHtml = E('div', {}, [
|
||
E('div', { 'class': 'stats-grid' }, [
|
||
E('div', { 'class': 'stats-card' }, [
|
||
E('div', { 'class': 'stats-card-title' }, getTranslation('总查询数', language)),
|
||
E('div', { 'class': 'stats-card-value', 'id': 'stat-total-queries' }, stats.total_queries || 0)
|
||
]),
|
||
E('div', { 'class': 'stats-card' }, [
|
||
E('div', { 'class': 'stats-card-title' }, getTranslation('响应时间', language)),
|
||
E('div', { 'class': 'stats-card-value', 'id': 'stat-avg-response-time', 'style': 'margin-bottom: 12px;' }, [
|
||
E('span', {}, (stats.avg_response_time_ms || 0).toFixed(1)),
|
||
E('span', { 'class': 'stats-card-unit' }, ' ' + getTranslation('毫秒', language))
|
||
]),
|
||
E('div', { 'class': 'stats-card-details', 'id': 'stat-response-time-details' }, [
|
||
E('div', { 'class': 'stats-detail-row' }, [
|
||
E('span', { 'class': 'stats-detail-label' }, getTranslation('最快响应时间', language) + ':'),
|
||
E('span', { 'class': 'stats-detail-value', 'id': 'stat-min-response-time' },
|
||
(stats.min_response_time_ms || 0) + ' ' + getTranslation('毫秒', language))
|
||
]),
|
||
E('div', { 'class': 'stats-detail-row' }, [
|
||
E('span', { 'class': 'stats-detail-label' }, getTranslation('最慢响应时间', language) + ':'),
|
||
E('span', { 'class': 'stats-detail-value', 'id': 'stat-max-response-time' },
|
||
(stats.max_response_time_ms || 0) + ' ' + getTranslation('毫秒', language))
|
||
])
|
||
])
|
||
]),
|
||
E('div', { 'class': 'stats-card' }, [
|
||
E('div', { 'class': 'stats-card-title' }, getTranslation('成功率', language)),
|
||
E('div', { 'class': 'stats-card-value', 'id': 'stat-success-rate' }, [
|
||
E('span', {}, ((stats.success_rate || 0) * 100).toFixed(1)),
|
||
E('span', { 'class': 'stats-card-unit' }, '%')
|
||
])
|
||
])
|
||
]),
|
||
E('div', { 'style': 'display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 24px;' }, [
|
||
E('div', { 'class': 'stats-card', 'id': 'top-domains-card' }),
|
||
E('div', { 'class': 'stats-card', 'id': 'top-query-types-card' }),
|
||
E('div', { 'class': 'stats-card', 'id': 'top-devices-card' }),
|
||
E('div', { 'class': 'stats-card', 'id': 'top-dns-servers-card' })
|
||
])
|
||
]);
|
||
|
||
container.innerHTML = '';
|
||
container.appendChild(statsHtml);
|
||
statsInitialized = true;
|
||
}
|
||
|
||
// 只更新数字内容
|
||
var totalQueriesEl = document.getElementById('stat-total-queries');
|
||
if (totalQueriesEl) {
|
||
totalQueriesEl.textContent = stats.total_queries || 0;
|
||
}
|
||
|
||
var avgResponseTimeEl = document.getElementById('stat-avg-response-time');
|
||
if (avgResponseTimeEl && avgResponseTimeEl.firstChild) {
|
||
avgResponseTimeEl.firstChild.textContent = (stats.avg_response_time_ms || 0).toFixed(1);
|
||
}
|
||
|
||
var minResponseTimeEl = document.getElementById('stat-min-response-time');
|
||
if (minResponseTimeEl) {
|
||
minResponseTimeEl.textContent = (stats.min_response_time_ms || 0) + ' ' + getTranslation('毫秒', language);
|
||
}
|
||
|
||
var maxResponseTimeEl = document.getElementById('stat-max-response-time');
|
||
if (maxResponseTimeEl) {
|
||
maxResponseTimeEl.textContent = (stats.max_response_time_ms || 0) + ' ' + getTranslation('毫秒', language);
|
||
}
|
||
|
||
var successRateEl = document.getElementById('stat-success-rate');
|
||
if (successRateEl && successRateEl.firstChild) {
|
||
successRateEl.firstChild.textContent = ((stats.success_rate || 0) * 100).toFixed(1);
|
||
}
|
||
|
||
// 更新 Top 列表
|
||
function updateTopList(cardId, titleKey, items, maxItems) {
|
||
var card = document.getElementById(cardId);
|
||
if (!card) return;
|
||
|
||
if (!items || items.length === 0) {
|
||
card.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
card.style.display = '';
|
||
var list = card.querySelector('.top-list');
|
||
|
||
if (!list) {
|
||
// 创建列表
|
||
card.innerHTML = '';
|
||
card.appendChild(E('div', { 'class': 'stats-card-title' }, getTranslation(titleKey, language)));
|
||
list = E('ul', { 'class': 'top-list' });
|
||
card.appendChild(list);
|
||
}
|
||
|
||
var itemsToShow = items.slice(0, maxItems || 10);
|
||
var listItems = list.querySelectorAll('.top-list-item');
|
||
|
||
// 如果列表项数量不匹配，重新创建列表
|
||
if (listItems.length !== itemsToShow.length) {
|
||
list.innerHTML = '';
|
||
itemsToShow.forEach(function (item) {
|
||
list.appendChild(E('li', { 'class': 'top-list-item' }, [
|
||
E('span', { 'class': 'top-list-name' }, item.name || '-'),
|
||
E('span', { 'class': 'top-list-count' }, item.count || 0)
|
||
]));
|
||
});
|
||
} else {
|
||
// 只更新文本内容
|
||
itemsToShow.forEach(function (item, index) {
|
||
var listItem = listItems[index];
|
||
if (listItem) {
|
||
var nameEl = listItem.querySelector('.top-list-name');
|
||
var countEl = listItem.querySelector('.top-list-count');
|
||
if (nameEl) nameEl.textContent = item.name || '-';
|
||
if (countEl) countEl.textContent = item.count || 0;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
updateTopList('top-domains-card', '最常查询域名', stats.top_domains, 10);
|
||
updateTopList('top-query-types-card', '最常用查询类型', stats.top_query_types);
|
||
updateTopList('top-devices-card', '最活跃设备', stats.top_devices, 10);
|
||
updateTopList('top-dns-servers-card', '最常用DNS服务器', stats.top_dns_servers, 5);
|
||
}).catch(function (error) {
|
||
console.error('Failed to load DNS stats:', error);
|
||
var container = document.getElementById('dns-stats-container');
|
||
if (!container) return;
|
||
if (!statsInitialized) {
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'error-state' },
|
||
getTranslation('无法获取数据', language)));
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新查询记录
|
||
function updateQueries() {
|
||
var container = document.getElementById('dns-queries-container');
|
||
if (!container) return;
|
||
|
||
// 检查是否有现有内容
|
||
var hasContent = container.querySelector('.bandix-table') || container.querySelector('.loading-state') || container.querySelector('.error-state');
|
||
|
||
// 保存当前容器高度，避免跳动（只在有内容时）
|
||
var currentHeight = container.offsetHeight;
|
||
if (currentHeight > 0 && hasContent) {
|
||
container.style.minHeight = currentHeight + 'px';
|
||
}
|
||
|
||
// 显示加载状态，但保持容器结构（只在有内容时显示遮罩层）
|
||
var loadingDiv = container.querySelector('.loading-overlay');
|
||
if (hasContent) {
|
||
if (!loadingDiv) {
|
||
var overlayBg = darkMode ? 'rgba(42, 42, 42, 0.9)' : 'rgba(255, 255, 255, 0.9)';
|
||
loadingDiv = E('div', {
|
||
'class': 'loading-overlay',
|
||
'style': 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: ' + overlayBg + '; display: flex; align-items: center; justify-content: center; z-index: 10; color: ' + (darkMode ? '#e2e8f0' : '#1f2937') + ';'
|
||
}, getTranslation('正在加载数据...', language));
|
||
container.style.position = 'relative';
|
||
container.appendChild(loadingDiv);
|
||
} else {
|
||
loadingDiv.style.display = 'flex';
|
||
}
|
||
} else {
|
||
// 如果没有内容，使用简单的加载状态
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'loading-state' },
|
||
getTranslation('正在加载数据...', language)));
|
||
}
|
||
|
||
callGetDnsQueries(
|
||
currentFilters.domain,
|
||
currentFilters.device,
|
||
currentFilters.is_query,
|
||
currentFilters.dns_server,
|
||
currentPage,
|
||
pageSize
|
||
).then(function (result) {
|
||
// 隐藏或移除加载状态
|
||
if (loadingDiv) {
|
||
loadingDiv.remove();
|
||
}
|
||
|
||
// 恢复最小高度和定位
|
||
container.style.minHeight = '';
|
||
if (!hasContent) {
|
||
container.style.position = '';
|
||
}
|
||
|
||
if (!result || result.status !== 'success' || !result.data) {
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'error-state' },
|
||
getTranslation('无法获取数据', language)));
|
||
return;
|
||
}
|
||
|
||
var queries = result.data.queries || [];
|
||
var total = result.data.total || 0;
|
||
var totalPages = result.data.total_pages || 1;
|
||
|
||
if (queries.length === 0) {
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'loading-state' },
|
||
getTranslation('无数据', language)));
|
||
return;
|
||
}
|
||
|
||
// 移除旧的表格和分页
|
||
var oldTable = container.querySelector('.bandix-table');
|
||
var oldPagination = container.querySelector('.pagination');
|
||
var oldLoadingState = container.querySelector('.loading-state');
|
||
if (oldTable) oldTable.remove();
|
||
if (oldPagination) oldPagination.remove();
|
||
if (oldLoadingState) oldLoadingState.remove();
|
||
|
||
// 确保容器是相对定位（用于遮罩层）
|
||
container.style.position = 'relative';
|
||
|
||
var table = E('table', { 'class': 'bandix-table' }, [
|
||
E('thead', {}, [
|
||
E('tr', {}, [
|
||
E('th', { 'style': 'width: 180px;' }, getTranslation('时间', language)),
|
||
E('th', { 'style': 'width: 200px;' }, getTranslation('域名', language)),
|
||
E('th', { 'style': 'width: 100px;' }, getTranslation('查询类型', language)),
|
||
E('th', { 'style': 'width: 100px;' }, getTranslation('类型', language)),
|
||
E('th', { 'style': 'width: 100px;' }, getTranslation('响应时间', language)),
|
||
E('th', { 'style': 'width: 200px;' }, getTranslation('设备', language)),
|
||
E('th', { 'style': 'width: 140px;' }, getTranslation('DNS服务器', language)),
|
||
E('th', { 'style': 'width: 200px;' }, getTranslation('响应结果', language))
|
||
])
|
||
]),
|
||
E('tbody', {}, queries.map(function (query) {
|
||
return E('tr', {}, [
|
||
E('td', {}, formatTimestamp(query.timestamp)),
|
||
E('td', {}, query.domain || '-'),
|
||
E('td', {}, query.query_type || '-'),
|
||
E('td', {}, [
|
||
E('span', {
|
||
'class': 'query-badge ' + (query.is_query ? 'query' : 'response')
|
||
}, query.is_query ? getTranslation('查询', language) : getTranslation('响应', language))
|
||
]),
|
||
E('td', {}, query.response_time_ms ? query.response_time_ms + ' ' + getTranslation('毫秒', language) : '-'),
|
||
E('td', {}, formatDeviceName(query)),
|
||
E('td', {}, formatDnsServer(query)),
|
||
E('td', {}, [
|
||
E('div', {
|
||
'class': 'response-ips',
|
||
'title': (function() {
|
||
var result = formatResponseResult(query);
|
||
if (result.full.length === 0) {
|
||
return '';
|
||
}
|
||
return result.full.join('\n');
|
||
})()
|
||
}, (function() {
|
||
var result = formatResponseResult(query);
|
||
if (result.display.length === 0) {
|
||
return [E('span', { 'class': 'response-ip-badge' }, '-')];
|
||
}
|
||
var badges = result.display.map(function (item) {
|
||
return E('span', { 'class': 'response-ip-badge' }, item);
|
||
});
|
||
if (result.hasMore) {
|
||
badges.push(E('span', { 'class': 'response-ip-badge', 'style': 'opacity: 0.7;' }, '...'));
|
||
}
|
||
return badges;
|
||
})())
|
||
])
|
||
]);
|
||
}))
|
||
]);
|
||
|
||
var pagination = E('div', { 'class': 'pagination' }, [
|
||
E('div', { 'class': 'pagination-info' },
|
||
getTranslation('第', language) + ' ' + currentPage + ' ' + getTranslation('页，共', language) + ' ' + totalPages + '，' + getTranslation('共', language) + ' ' + total + ' ' + getTranslation('条记录', language)
|
||
),
|
||
E('div', { 'class': 'pagination-controls' }, [
|
||
E('select', {
|
||
'class': 'filter-select',
|
||
'id': 'page-size-select',
|
||
'style': 'margin-right: 8px;'
|
||
}, [
|
||
E('option', { 'value': '10', 'selected': pageSize === 10 }, '10'),
|
||
E('option', { 'value': '20', 'selected': pageSize === 20 }, '20'),
|
||
E('option', { 'value': '50', 'selected': pageSize === 50 }, '50'),
|
||
E('option', { 'value': '100', 'selected': pageSize === 100 }, '100')
|
||
]),
|
||
E('button', {
|
||
'class': 'btn btn-secondary',
|
||
'id': 'prev-page-btn',
|
||
'disabled': currentPage <= 1 ? 'disabled' : null
|
||
}, getTranslation('上一页', language)),
|
||
E('button', {
|
||
'class': 'btn btn-secondary',
|
||
'id': 'next-page-btn',
|
||
'disabled': currentPage >= totalPages ? 'disabled' : null
|
||
}, getTranslation('下一页', language))
|
||
])
|
||
]);
|
||
|
||
container.appendChild(table);
|
||
container.appendChild(pagination);
|
||
|
||
// 绑定分页事件
|
||
var prevBtn = document.getElementById('prev-page-btn');
|
||
var nextBtn = document.getElementById('next-page-btn');
|
||
var pageSizeSelect = document.getElementById('page-size-select');
|
||
|
||
// 设置按钮的 disabled 状态
|
||
if (prevBtn) {
|
||
if (currentPage <= 1) {
|
||
prevBtn.setAttribute('disabled', 'disabled');
|
||
} else {
|
||
prevBtn.removeAttribute('disabled');
|
||
}
|
||
prevBtn.onclick = function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (currentPage > 1) {
|
||
currentPage--;
|
||
updateQueries();
|
||
}
|
||
};
|
||
}
|
||
|
||
if (nextBtn) {
|
||
if (currentPage >= totalPages) {
|
||
nextBtn.setAttribute('disabled', 'disabled');
|
||
} else {
|
||
nextBtn.removeAttribute('disabled');
|
||
}
|
||
nextBtn.onclick = function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (currentPage < totalPages) {
|
||
currentPage++;
|
||
updateQueries();
|
||
}
|
||
};
|
||
}
|
||
|
||
if (pageSizeSelect) {
|
||
pageSizeSelect.value = pageSize.toString();
|
||
pageSizeSelect.onchange = function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
pageSize = parseInt(this.value);
|
||
currentPage = 1;
|
||
updateQueries();
|
||
};
|
||
}
|
||
}).catch(function (error) {
|
||
console.error('Failed to load DNS queries:', error);
|
||
var container = document.getElementById('dns-queries-container');
|
||
if (!container) return;
|
||
container.innerHTML = '';
|
||
container.appendChild(E('div', { 'class': 'error-state' },
|
||
getTranslation('无法获取数据', language)));
|
||
});
|
||
}
|
||
|
||
// 初始化数据加载 - 延迟执行确保 DOM 元素已添加
|
||
setTimeout(function () {
|
||
updateStats();
|
||
updateQueries();
|
||
|
||
// 实时搜索功能（带防抖）
|
||
var domainFilter = document.getElementById('domain-filter');
|
||
var deviceFilter = document.getElementById('device-filter');
|
||
var dnsServerFilter = document.getElementById('dns-server-filter');
|
||
var typeFilter = document.getElementById('type-filter');
|
||
var refreshBtn = document.getElementById('refresh-queries-btn');
|
||
|
||
if (domainFilter && deviceFilter && dnsServerFilter && typeFilter) {
|
||
var searchTimer = null;
|
||
|
||
function performSearch() {
|
||
currentFilters.domain = domainFilter.value.trim();
|
||
currentFilters.device = deviceFilter.value.trim();
|
||
currentFilters.dns_server = dnsServerFilter.value.trim();
|
||
currentFilters.is_query = typeFilter.value;
|
||
currentPage = 1;
|
||
updateQueries();
|
||
}
|
||
|
||
// 防抖函数
|
||
function debounceSearch() {
|
||
if (searchTimer) {
|
||
clearTimeout(searchTimer);
|
||
}
|
||
searchTimer = setTimeout(performSearch, 300);
|
||
}
|
||
|
||
// 输入框实时搜索（带防抖）
|
||
domainFilter.addEventListener('input', debounceSearch);
|
||
deviceFilter.addEventListener('input', debounceSearch);
|
||
dnsServerFilter.addEventListener('input', debounceSearch);
|
||
|
||
// 下拉框立即搜索（不需要防抖）
|
||
typeFilter.addEventListener('change', performSearch);
|
||
|
||
// 刷新按钮
|
||
if (refreshBtn) {
|
||
refreshBtn.addEventListener('click', function () {
|
||
updateQueries();
|
||
});
|
||
}
|
||
}
|
||
}, 100);
|
||
|
||
// 轮询更新统计信息（每1秒），查询记录不自动刷新
|
||
poll.add(updateStats, 1);
|
||
|
||
return container;
|
||
}
|
||
});
|
||
|