Update: Js 4 Log.html

frontend/input.css

@@ -1,6 +1,6 @@
 /* static/css/input.css */
 @import "tailwindcss";
-
+/* @import "./css/flatpickr.min.css"; */
 /* =================================================================== */
 /*       [核心] 定义 shadcn/ui 的设计系统变量                          */
 /* =================================================================== */
@@ -97,6 +97,155 @@
            focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
            disabled:cursor-not-allowed disabled:opacity-50;
   }
+
+  /* ------------------------------------------------ */
+  /* Custom Flatpickr Theme using shadcn/ui variables */
+  /* ------------------------------------------------ */
+
+    .flatpickr-calendar {
+      /* --- 主题样式 --- */
+      @apply bg-background text-foreground rounded-lg shadow-lg border border-border w-auto font-sans;
+      animation: var(--animation-panel-in);
+      width: 200px; 
+      /* --- 核心结构样式 --- */
+      display: none;
+      position: absolute;
+      visibility: hidden;
+      opacity: 0;
+      padding: 0;
+      z-index: 999;
+      box-sizing: border-box;
+      transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
+  }
+  .flatpickr-calendar.open {
+      opacity: 1;
+      visibility: visible;
+      display: inline-block;
+  }
+  
+  .flatpickr-calendar.not-ready {
+      top: 0;
+      left: 0;
+      visibility: hidden;
+  }
+  .flatpickr-calendar.static {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: block;
+      visibility: visible;
+      opacity: 1;
+  }
+  .flatpickr-calendar.static { position: relative; top: auto; left: auto; display: block; visibility: visible; opacity: 1; }
+  .flatpickr-calendar.not-ready { top: 0; left: 0; visibility: hidden; }
+  /* 月份导航区域 */
+  .flatpickr-months {
+      @apply flex items-center bg-transparent p-0 border-b border-zinc-500/30;
+  }
+  .flatpickr-month { @apply h-auto pt-2 pb-1; }
+  .flatpickr-current-month {
+      @apply flex flex-1 items-center justify-center text-foreground font-semibold text-sm h-auto;
+  }
+  
+  .flatpickr-current-month .numInputWrapper {
+      @apply ml-0;
+  }
+
+  .flatpickr-current-month .numInputWrapper input.numInput {
+
+      @apply w-14 text-center font-semibold bg-transparent border-0 p-0 text-sm text-foreground;
+      
+      /* 移除默认的浏览器样式和聚焦时的轮廓 */
+      @apply appearance-none focus:outline-none focus:ring-0;
+      -moz-appearance: textfield;
+  }
+  /* 强制移除数字输入框在 Chrome, Safari, Edge 等 Webkit 浏览器中的上下箭头 */
+  .flatpickr-current-month .numInputWrapper input.numInput::-webkit-outer-spin-button,
+  .flatpickr-current-month .numInputWrapper input.numInput::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+  }
+  .flatpickr-current-month .cur-month { @apply font-semibold; }
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+ 
+      @apply w-[5.5rem] font-semibold bg-transparent border-0 p-0 text-sm text-foreground text-right;
+      
+      @apply appearance-none focus:outline-none focus:ring-0;
+      
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; /* 确保月份名不换行 */
+  }
+  option.flatpickr-monthDropdown-month {
+      @apply bg-background text-foreground border-0;
+      @apply dark:bg-zinc-800 dark:text-zinc-200;
+  }
+  .flatpickr-current-month .flatpickr-monthDropdown-months,
+  .flatpickr-current-month .numInputWrapper input.numInput {
+      @apply text-sm pl-0 ; 
+  }
+  /* 导航箭头 */
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+      @apply inline-flex items-center justify-center whitespace-nowrap rounded-md pt-2 pb-1 text-sm font-medium transition-colors 
+             focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
+             disabled:pointer-events-none disabled:opacity-50
+             hover:text-accent-foreground
+             h-7 w-7 flex-shrink-0; 
+      position: relative;
+  }
+  .flatpickr-prev-month svg,
+  .flatpickr-next-month svg {
+      @apply h-3 w-3 hover:h-4 hover:w-4 fill-zinc-500;
+  }
+  
+  /* 星期标题 */
+  .flatpickr-weekdaycontainer {
+      @apply flex justify-around p-1;
+  }
+  span.flatpickr-weekday {
+      @apply flex-1 text-center text-muted-foreground font-medium;
+      font-size: 0.7rem;
+  }
+  /* 日期网格 */
+  .dayContainer { 
+      @apply flex flex-wrap p-1 pt-0;
+      box-sizing: border-box;
+  }
+  .flatpickr-day {
+      @apply w-4 h-6.5 flex items-center justify-center rounded-full border-0 text-foreground transition-colors flex-shrink-0; /* <--- 从 w-9 h-9 缩小 */
+      flex-basis: 14.2857%;
+      line-height: 1;
+      cursor: pointer;
+      font-size: 0.7rem; /* 介于 text-xs 和 text-sm 之间 */
+  }
+  .flatpickr-day:hover,
+  .flatpickr-day:focus { @apply bg-accent text-accent-foreground outline-none; }
+  .flatpickr-day.today { @apply border border-primary; }
+  .flatpickr-day.selected,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange,
+  .flatpickr-day.selected:hover,
+  .flatpickr-day.startRange:hover,
+  .flatpickr-day.endRange:hover {
+      @apply bg-primary text-primary-foreground;
+  }
+  .flatpickr-day.inRange { @apply bg-accent rounded-none shadow-none; }
+  .flatpickr-day.startRange { @apply rounded-l-full; }
+  .flatpickr-day.endRange { @apply rounded-r-full; }
+  .flatpickr-day.disabled,
+  .flatpickr-day.disabled:hover { @apply bg-transparent text-muted-foreground/50 cursor-not-allowed; }
+  .flatpickr-day.nextMonthDay, .flatpickr-day.prevMonthDay { @apply text-muted-foreground/50; }
+  .flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay:hover { @apply bg-accent; }
+  
+  /* 清除按钮 */
+  .flatpickr-calendar .flatpickr-clear-button {
+      @apply h-6 py-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium transition-colors
+             focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
+             disabled:pointer-events-none disabled:opacity-50
+             text-primary underline-offset-4 hover:text-sm
+             w-full rounded-t-none border-t border-zinc-500/20;
+  }
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -752,14 +901,18 @@
     @apply text-4xl;
 }
 
+
+/* =================================================================== */
+/*       自定义 table 样式 (Custom SweetAlert2 Styles)         */
+/* =================================================================== */
 @layer components {
-    /* --- [新增] 可复用的表格组件样式 --- */
+    /* ---  可复用的表格组件样式 --- */
     .table {
         @apply w-full caption-bottom text-sm;
     }
     .table-header {
         /* 使用语义化颜色，自动适应暗色模式 */
-        @apply sticky top-0 z-10 border-b border-border bg-muted/50;
+        @apply sticky top-0 z-10 border-b border-border bg-zinc-200 dark:bg-zinc-900;
     }
     .table-header .table-row {
         /* 表头的 hover 效果通常与数据行不同，或者没有 */
@@ -769,7 +922,7 @@
         @apply [&_tr:last-child]:border-0;
     }
     .table-row {
-        @apply border-b border-border transition-colors hover:bg-muted/80;
+        @apply border-b border-border transition-colors hover:bg-muted;
     }
     .table-head-cell {
         @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
@@ -778,3 +931,4 @@
         @apply p-4 align-middle;
     }
 }
+

frontend/js/pages/logs/batchActions.js

@@ -0,0 +1,151 @@
+// Filename: frontend/js/components/BatchActions.js
+import { apiFetchJson } from '../../services/api.js';
+
+// 存储对 LogsPage 实例的引用
+let logsPageInstance = null;
+
+// 存储对 DOM 元素的引用
+const elements = {
+    batchActionsBtn: null,
+    batchActionsMenu: null,
+    deleteSelectedLogsBtn: null,
+    clearAllLogsBtn: null,
+};
+
+// 用于处理页面点击以关闭菜单的绑定函数
+const handleDocumentClick = (event) => {
+    if (!elements.batchActionsMenu.contains(event.target) && !elements.batchActionsBtn.contains(event.target)) {
+        closeBatchActionsMenu();
+    }
+};
+
+// 关闭菜单的逻辑
+function closeBatchActionsMenu() {
+    if (elements.batchActionsMenu && !elements.batchActionsMenu.classList.contains('hidden')) {
+        elements.batchActionsMenu.classList.remove('opacity-100', 'scale-100');
+        elements.batchActionsMenu.classList.add('opacity-0', 'scale-95');
+        setTimeout(() => {
+            elements.batchActionsMenu.classList.add('hidden');
+        }, 100);
+        document.removeEventListener('click', handleDocumentClick);
+    }
+}
+
+// 切换菜单显示/隐藏
+function handleBatchActionsToggle(event) {
+    event.stopPropagation();
+    const isHidden = elements.batchActionsMenu.classList.contains('hidden');
+    if (isHidden) {
+        elements.batchActionsMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
+        elements.batchActionsMenu.classList.add('opacity-100', 'scale-100');
+        document.addEventListener('click', handleDocumentClick);
+    } else {
+        closeBatchActionsMenu();
+    }
+}
+
+// 处理删除选中日志的逻辑
+async function handleDeleteSelectedLogs() {
+    closeBatchActionsMenu();
+    const selectedIds = Array.from(logsPageInstance.state.selectedLogIds);
+    if (selectedIds.length === 0) return;
+
+    Swal.fire({
+        width: '20rem',
+        backdrop: `rgba(0,0,0,0.5)`,
+        heightAuto: false,
+        customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
+        title: '确认删除',
+        text: `您确定要删除选定的 ${selectedIds.length} 条日志吗？此操作不可撤销。`,
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消',
+        reverseButtons: false,
+        confirmButtonColor: '#ef4444',
+        cancelButtonColor: '#6b7280',
+        focusCancel: true,
+        target: '#main-content-wrapper',
+    }).then(async (result) => {
+        if (result.isConfirmed) {
+            try {
+                const idsQueryString = selectedIds.join(',');
+                const url = `/admin/logs?ids=${idsQueryString}`;
+                const { success, message } = await apiFetchJson(url, { method: 'DELETE' });
+                if (success) {
+                    Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: '删除成功', showConfirmButton: false, timer: 2000, timerProgressBar: true });
+                    logsPageInstance.loadAndRenderLogs(); // 使用实例刷新列表
+                } else {
+                    throw new Error(message || '删除失败，请稍后重试。');
+                }
+            } catch (error) {
+                Swal.fire({ icon: 'error', title: '操作失败', text: error.message, target: '#main-content-wrapper' });
+            }
+        }
+    });
+}
+
+// [NEW] 处理清空所有日志的逻辑
+async function handleClearAllLogs() {
+    closeBatchActionsMenu();
+
+    Swal.fire({
+        width: '20rem',
+        backdrop: `rgba(0,0,0,0.5)`,
+        heightAuto: false,
+        customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
+        title: '危险操作确认',
+        html: `您确定要<strong class="text-red-500">清空全部</strong>日志吗？<br>此操作不可撤销！`,
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: '确认清空',
+        cancelButtonText: '取消',
+        reverseButtons: false,
+        confirmButtonColor: '#ef4444',
+        cancelButtonColor: '#6b7280',
+        focusCancel: true,
+        target: '#main-content-wrapper',
+    }).then(async (result) => {
+        if (result.isConfirmed) {
+            try {
+                const url = `/admin/logs/all`; // 后端清空所有日志的接口
+                const { success, message } = await apiFetchJson(url, { method: 'DELETE' });
+                if (success) {
+                    Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: '清空成功', showConfirmButton: false, timer: 2000, timerProgressBar: true });
+                    logsPageInstance.loadAndRenderLogs(); // 刷新列表
+                } else {
+                    throw new Error(message || '清空失败，请稍后重试。');
+                }
+            } catch (error) {
+                Swal.fire({ icon: 'error', title: '操作失败', text: error.message, target: '#main-content-wrapper' });
+            }
+        }
+    });
+}
+
+
+/**
+ * 初始化批量操作模块
+ * @param {object} logsPage - LogsPage 类的实例
+ */
+export function initBatchActions(logsPage) {
+    logsPageInstance = logsPage;
+
+    // 查询所有需要的 DOM 元素
+    elements.batchActionsBtn = document.getElementById('batch-actions-btn');
+    elements.batchActionsMenu = document.getElementById('batch-actions-menu');
+    elements.deleteSelectedLogsBtn = document.getElementById('delete-selected-logs-btn');
+    elements.clearAllLogsBtn = document.getElementById('clear-all-logs-btn'); // [NEW] 查询新按钮
+
+    if (!elements.batchActionsBtn) return; // 如果找不到主按钮，则不进行任何操作
+
+    // 绑定事件监听器
+    elements.batchActionsBtn.addEventListener('click', handleBatchActionsToggle);
+    if (elements.deleteSelectedLogsBtn) {
+        elements.deleteSelectedLogsBtn.addEventListener('click', handleDeleteSelectedLogs);
+    }
+    if (elements.clearAllLogsBtn) { // [NEW] 绑定新按钮的事件
+        elements.clearAllLogsBtn.addEventListener('click', handleClearAllLogs);
+    }
+}
+// [NEW] - END

frontend/js/pages/logs/index.js

@@ -6,12 +6,13 @@ import { debounce } from '../../utils/utils.js';
 import FilterPopover from '../../components/filterPopover.js';
 import { STATIC_ERROR_MAP, STATUS_CODE_MAP } from './logList.js';
 import SystemLogTerminal from './systemLog.js';
+import { initBatchActions } from './batchActions.js'; 
+import flatpickr from '../../vendor/flatpickr.js'; 
 
 const dataStore = {
     groups: new Map(),
     keys: new Map(),
 }; 
-
 class LogsPage {
     constructor() {
         this.state = {
@@ -26,6 +27,8 @@ class LogsPage {
                 group_ids: new Set(),
                 error_types: new Set(),
                 status_codes: new Set(),
+                start_date: null,
+                end_date: null,
             },
             selectedLogIds: new Set(),
             currentView: 'error', 
@@ -43,6 +46,8 @@ class LogsPage {
             this.logList = null;
             this.systemLogTerminal = null;
             this.debouncedLoadAndRender = debounce(() => this.loadAndRenderLogs(), 300);
+            this.fp = null;
+            this.themeObserver = null; 
         }
     }
     async init() {
@@ -69,6 +74,16 @@ class LogsPage {
             this.systemLogTerminal.disconnect();
             this.systemLogTerminal = null;
         }
+        if (this.fp) {
+            this.fp.destroy();
+            this.fp = null;
+        }
+
+        if (this.themeObserver) {
+            this.themeObserver.disconnect();
+            this.themeObserver = null;
+        }
+
         this.state.currentView = viewName;
         this.elements.contentContainer.innerHTML = '';
         if (viewName === 'error') {
@@ -100,13 +115,42 @@ class LogsPage {
         this.elements.searchInput = document.getElementById('log-search-input');
         this.elements.errorTypeFilterBtn = document.getElementById('filter-error-type-btn');
         this.elements.errorCodeFilterBtn = document.getElementById('filter-error-code-btn');
+        this.elements.dateRangeFilterBtn = document.getElementById('filter-date-range-btn');
+        
         this.logList = new LogList(this.elements.tableBody, dataStore);
         const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
         if (selectContainer) { new CustomSelectV2(selectContainer); }
+        
         this.initFilterPopovers();
+        this.initDateRangePicker();
         this.initEventListeners();
+        this._observeThemeChanges();
+        initBatchActions(this);
         this.loadAndRenderLogs();
     }
+
+    _observeThemeChanges() {
+        const applyTheme = () => {
+            if (!this.fp || !this.fp.calendarContainer) return;
+            if (document.documentElement.classList.contains('dark')) {
+                this.fp.calendarContainer.classList.add('dark');
+            } else {
+                this.fp.calendarContainer.classList.remove('dark');
+            }
+        };
+        this.themeObserver = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    applyTheme();
+                }
+            }
+        });
+        this.themeObserver.observe(document.documentElement, { attributes: true });
+        
+        // 确保初始状态正确
+        applyTheme();
+    }
+
     _initSystemLogView() {
         this.systemLogTerminal = new SystemLogTerminal(
             this.elements.contentContainer, 
@@ -116,9 +160,7 @@ class LogsPage {
             width: '20rem',
             backdrop: `rgba(0,0,0,0.5)`,
             heightAuto: false,
-            customClass: {
+            customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
-                popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`
-            },
             title: '系统终端日志',
             text: '您即将连接到实时系统日志流窗口。',
             showCancelButton: true,
@@ -153,6 +195,83 @@ class LogsPage {
             new FilterPopover(this.elements.errorCodeFilterBtn, statusCodeOptions, '筛选状态码');
         }
     }
+    initDateRangePicker() {
+        if (!this.elements.dateRangeFilterBtn) return;
+        const buttonTextSpan = this.elements.dateRangeFilterBtn.querySelector('span');
+        const originalText = buttonTextSpan.textContent;
+        this.fp = flatpickr(this.elements.dateRangeFilterBtn, {
+            mode: 'range',
+            dateFormat: 'Y-m-d',
+            onClose: (selectedDates) => {
+                if (selectedDates.length === 2) {
+                    const [start, end] = selectedDates;
+                    end.setHours(23, 59, 59, 999); 
+                    this.state.filters.start_date = start.toISOString();
+                    this.state.filters.end_date = end.toISOString();
+                    const startDateStr = start.toISOString().split('T')[0];
+                    const endDateStr = end.toISOString().split('T')[0];
+                    
+                    buttonTextSpan.textContent = `${startDateStr} ~ ${endDateStr}`;
+                    this.elements.dateRangeFilterBtn.classList.add('!border-primary', '!text-primary');
+                    this.state.filters.page = 1;
+                    this.loadAndRenderLogs();
+                }
+            },
+            onReady: (selectedDates, dateStr, instance) => {
+                // 暗黑模式和清除按钮的现有逻辑保持不变
+                if (document.documentElement.classList.contains('dark')) {
+                    instance.calendarContainer.classList.add('dark');
+                }
+                const clearButton = document.createElement('button');
+                clearButton.textContent = '清除';
+                clearButton.className = 'button flatpickr-button flatpickr-clear-button';
+                clearButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    instance.clear();
+                    
+                    this.state.filters.start_date = null;
+                    this.state.filters.end_date = null;
+                    buttonTextSpan.textContent = originalText;
+                    this.elements.dateRangeFilterBtn.classList.remove('!border-primary', '!text-primary');
+                    
+                    this.state.filters.page = 1;
+                    this.loadAndRenderLogs();
+                    instance.close();
+                });
+                instance.calendarContainer.appendChild(clearButton);
+                const nativeMonthSelect = instance.monthsDropdownContainer;
+                if (!nativeMonthSelect) return;
+                const monthYearContainer = nativeMonthSelect.parentElement;
+                const wrapper = document.createElement('div');
+                wrapper.className = 'custom-select-v2-container relative inline-block text-left';
+                
+                wrapper.innerHTML = `
+                    <button type="button" class="custom-select-trigger inline-flex justify-center items-center w-22 gap-x-1.5 rounded-md bg-transparent px-1 py-1 text-xs font-semibold text-foreground shadow-sm ring-0 ring-inset ring-input hover:bg-accent focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-background focus:ring-primary" aria-haspopup="true">
+                        <span class="truncate"></span>
+                    </button>
+                `;
+                
+                const template = document.createElement('template');
+                template.className = 'custom-select-panel-template';
+                
+                template.innerHTML = `
+                    <div class="custom-select-panel absolute z-[1000] my-2 w-24 origin-top-right rounded-md bg-popover dark:bg-zinc-900 shadow-lg ring-1 ring-zinc-500/30 ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" tabindex="-1">
+                    </div>
+                `;
+                nativeMonthSelect.classList.add('hidden');
+                wrapper.appendChild(nativeMonthSelect);
+                wrapper.appendChild(template);
+                monthYearContainer.prepend(wrapper);
+                const customSelect = new CustomSelectV2(wrapper);
+                instance.customMonthSelect = customSelect; 
+            },
+            onMonthChange: (selectedDates, dateStr, instance) => {
+                if (instance.customMonthSelect) {
+                    instance.customMonthSelect.updateTriggerText();
+                }
+            },
+        });
+    }
     initEventListeners() {
         if (this.elements.pageSizeSelect) {
             this.elements.pageSizeSelect.addEventListener('change', (e) => this.changePageSize(parseInt(e.target.value, 10)));
@@ -191,16 +310,12 @@ class LogsPage {
         this.state.filters.page = 1;
         this.loadAndRenderLogs();
     }
-
     handleSearchInput(event) {
         const searchTerm = event.target.value.trim().toLowerCase();
-        
-        // 重置分页和与本次搜索相关的筛选条件
         this.state.filters.page = 1;
         this.state.filters.q = '';
         this.state.filters.key_ids = new Set();
         this.state.filters.group_ids = new Set();
-        
         if (searchTerm === '') {
             this.debouncedLoadAndRender();
             return;
@@ -219,13 +334,11 @@ class LogsPage {
         });
         if (matchedGroupIds.size > 0) this.state.filters.group_ids = matchedGroupIds;
         if (matchedKeyIds.size > 0) this.state.filters.key_ids = matchedKeyIds;
-        // 如果没有找到任何匹配的ID，则回退到原始的全局模糊搜索
         if (matchedGroupIds.size === 0 && matchedKeyIds.size === 0) {
             this.state.filters.q = searchTerm;
         }
         this.debouncedLoadAndRender();
     }
-
     handleSelectionChange(checkbox) {
         const row = checkbox.closest('.table-row');
         if (!row) return;
@@ -238,7 +351,6 @@ class LogsPage {
         }
         this.syncSelectionUI();
     }
-
     handleSelectAllChange(event) {
         const isChecked = event.target.checked;
         this.state.logs.forEach(log => {
@@ -251,36 +363,35 @@ class LogsPage {
         this.syncRowCheckboxes();
         this.syncSelectionUI();
     }
-
     syncRowCheckboxes() {
         const isAllChecked = this.elements.selectAllCheckbox.checked;
         this.elements.tableBody.querySelectorAll('input[type="checkbox"]').forEach(cb => {
             cb.checked = isAllChecked;
         });
     }
-
     syncSelectionUI() {
         if (!this.elements.selectAllCheckbox || !this.elements.selectedCount) return;
         const selectedCount = this.state.selectedLogIds.size;
         const visibleLogsCount = this.state.logs.length;
-        // 1. 更新表头“全选”复选框的状态
+        
         if (selectedCount === 0) {
             this.elements.selectAllCheckbox.checked = false;
             this.elements.selectAllCheckbox.indeterminate = false;
         } else if (selectedCount < visibleLogsCount) {
             this.elements.selectAllCheckbox.checked = false;
-            this.elements.selectAllCheckbox.indeterminate = true; // 半选状态
+            this.elements.selectAllCheckbox.indeterminate = true;
         } else if (selectedCount === visibleLogsCount && visibleLogsCount > 0) {
             this.elements.selectAllCheckbox.checked = true;
             this.elements.selectAllCheckbox.indeterminate = false;
         }
-        // 2. 更新“已选择”计数
-        this.elements.selectedCount.textContent = selectedCount;
-        // 3. (未来扩展) 更新批量操作按钮的状态
-        // const batchButton = document.querySelector('.batch-action-button');
-        // if (batchButton) batchButton.disabled = selectedCount === 0;
-    }
         
+        this.elements.selectedCount.textContent = selectedCount;
+        const hasSelection = selectedCount > 0;
+        const deleteSelectedBtn = document.getElementById('delete-selected-logs-btn');
+        if (deleteSelectedBtn) {
+            deleteSelectedBtn.disabled = !hasSelection;
+        }
+    }
     changePageSize(newSize) {
         this.state.filters.page_size = newSize;
         this.state.filters.page = 1;
@@ -291,14 +402,11 @@ class LogsPage {
         this.state.filters.page = page;
         this.loadAndRenderLogs();
     }
-
     updatePaginationUI() {
         const { page, pages, total } = this.state.pagination;
-
         if (this.elements.pageInfo) {
             this.elements.pageInfo.textContent = `第 ${page} / ${pages} 页`;
         }
-
         if (this.elements.totalCount) {
             this.elements.totalCount.textContent = total;
         }
@@ -312,7 +420,6 @@ class LogsPage {
             this.elements.paginationBtns[3].disabled = isLastPage;
         }
     }
-
     async loadGroupsOnce() {
         if (dataStore.groups.size > 0) return;
         try {
@@ -324,7 +431,6 @@ class LogsPage {
             console.error("Failed to load key groups:", error);
         }
     }
-
     async loadAndRenderLogs() {
         this.state.isLoading = true;
         this.state.selectedLogIds.clear();
@@ -332,19 +438,15 @@ class LogsPage {
         this.updatePaginationUI();
         this.syncSelectionUI();
         try {
-            // --- 查询参数准备阶段 ---
             const finalParams = {};
             const { filters } = this.state;
         
-            // 1. 复制所有非 Set 类型的参数
             Object.keys(filters).forEach(key => {
                 if (!(filters[key] instanceof Set)) {
                     finalParams[key] = filters[key];
                 }
             });
-            // 2. 翻译 'error_types'
             const translatedErrorCodes = new Set(); 
-            // 从用户直接选择的状态码开始初始化
             const translatedStatusCodes = new Set(filters.status_codes); 
             if (filters.error_types.size > 0) {
                 filters.error_types.forEach(type => {
@@ -356,19 +458,23 @@ class LogsPage {
                     }
                 });
             }
-            // 3. 统一处理所有 Set 类型的参数，转换为字符串
+            
             if (filters.key_ids.size > 0) finalParams.key_ids = [...filters.key_ids].join(',');
             if (filters.group_ids.size > 0) finalParams.group_ids = [...filters.group_ids].join(',');
             if (translatedErrorCodes.size > 0) finalParams.error_codes = [...translatedErrorCodes].join(',');
             if (translatedStatusCodes.size > 0) finalParams.status_codes = [...translatedStatusCodes].join(',');
-            // 4. 清理空值
+            
             Object.keys(finalParams).forEach(key => {
                 if (finalParams[key] === '' || finalParams[key] === null || finalParams[key] === undefined) {
                     delete finalParams[key];
                 }
             });
             const query = new URLSearchParams(finalParams);
-            const { success, data } = await apiFetchJson(`/admin/logs?${query.toString()}`);
+            
+            const { success, data } = await apiFetchJson(
+                `/admin/logs?${query.toString()}`,
+                { cache: 'no-cache', noCache: true }
+            );
             if (success && typeof data === 'object' && data.items) {
                 const { items, total, page, page_size } = data;
                 this.state.logs = items;
@@ -392,10 +498,9 @@ class LogsPage {
             this.syncSelectionUI();
         }
     }
-
     async enrichLogsWithKeyNames(logs) {
         const missingKeyIds = [...new Set(
-            logs.filter(log => log.KeyID && !dataStore.keys.has(log.KeyID)).map(log => log.KeyID)
+            logs.filter(log => log.KeyID && !dataStore.keys.has(log.KeyID)).map(log => log.ID)
         )];
         if (missingKeyIds.length === 0) return;
         try {
@@ -409,7 +514,6 @@ class LogsPage {
         }
     }
 }
-
 export default function() {
     const page = new LogsPage();
     page.init();

internal/handlers/log_handler.go

@@ -6,6 +6,9 @@ import (
 	"gemini-balancer/internal/response"
 	"gemini-balancer/internal/service"
 
+	"strconv"
+	"strings"
+
 	"github.com/gin-gonic/gin"
 )
 
@@ -41,3 +44,58 @@ func (h *LogHandler) GetLogs(c *gin.Context) {
 		"page_size": params.PageSize,
 	})
 }
+
+// DeleteLogs 删除选定日志 DELETE /admin/logs?ids=1,2,3
+func (h *LogHandler) DeleteLogs(c *gin.Context) {
+	idsStr := c.Query("ids")
+	if idsStr == "" {
+		response.Error(c, errors.ErrBadRequest)
+		return
+	}
+
+	var ids []uint
+	for _, idStr := range strings.Split(idsStr, ",") {
+		if id, err := strconv.ParseUint(strings.TrimSpace(idStr), 10, 32); err == nil {
+			ids = append(ids, uint(id))
+		}
+	}
+
+	if len(ids) == 0 {
+		response.Error(c, errors.ErrBadRequest)
+		return
+	}
+
+	if err := h.logService.DeleteLogs(c.Request.Context(), ids); err != nil {
+		response.Error(c, errors.ErrDatabase)
+		return
+	}
+
+	response.Success(c, gin.H{"deleted": len(ids)})
+}
+
+// DeleteAllLogs 删除全部日志 DELETE /admin/logs/all
+func (h *LogHandler) DeleteAllLogs(c *gin.Context) {
+	if err := h.logService.DeleteAllLogs(c.Request.Context()); err != nil {
+		response.Error(c, errors.ErrDatabase)
+		return
+	}
+	response.Success(c, gin.H{"message": "all logs deleted"})
+}
+
+// DeleteOldLogs 删除旧日志 DELETE /admin/logs/old?days=30
+func (h *LogHandler) DeleteOldLogs(c *gin.Context) {
+	daysStr := c.Query("days")
+	days, err := strconv.Atoi(daysStr)
+	if err != nil || days <= 0 {
+		response.Error(c, errors.ErrBadRequest)
+		return
+	}
+
+	deleted, err := h.logService.DeleteOldLogs(c.Request.Context(), days)
+	if err != nil {
+		response.Error(c, errors.ErrDatabase)
+		return
+	}
+
+	response.Success(c, gin.H{"deleted": deleted, "days": days})
+}

internal/router/router.go

@@ -340,6 +340,9 @@ func registerSystemRoutes(
 
 	// 日志管理
 	admin.GET("/logs", logHandler.GetLogs)
+	admin.DELETE("/logs", logHandler.DeleteLogs)        // 删除选定
+	admin.DELETE("/logs/all", logHandler.DeleteAllLogs) // 删除全部
+	admin.DELETE("/logs/old", logHandler.DeleteOldLogs) // 删除旧日志
 
 	// 设置管理
 	admin.GET("/settings", settingHandler.GetSettings)

internal/service/log_service.go

@@ -162,3 +162,27 @@ func ParseLogQueryParams(queryParams map[string]string) (LogQueryParams, error)
 	}
 	return params, nil
 }
+
+// DeleteLogs 删除指定ID的日志
+func (s *LogService) DeleteLogs(ctx context.Context, ids []uint) error {
+	if len(ids) == 0 {
+		return fmt.Errorf("no log IDs provided")
+	}
+	return s.db.WithContext(ctx).Delete(&models.RequestLog{}, ids).Error
+}
+
+// DeleteAllLogs 删除所有日志
+func (s *LogService) DeleteAllLogs(ctx context.Context) error {
+	return s.db.WithContext(ctx).Where("1 = 1").Delete(&models.RequestLog{}).Error
+}
+
+// DeleteOldLogs 删除指定天数之前的日志
+func (s *LogService) DeleteOldLogs(ctx context.Context, days int) (int64, error) {
+	if days <= 0 {
+		return 0, fmt.Errorf("days must be positive")
+	}
+	result := s.db.WithContext(ctx).
+		Where("request_time < DATE_SUB(NOW(), INTERVAL ? DAY)", days).
+		Delete(&models.RequestLog{})
+	return result.RowsAffected, result.Error
+}

web/static/css/output.css

@@ -175,6 +175,7 @@
     --color-accent-foreground: var(--accent-foreground);
     --color-border: var(--border);
     --color-input: var(--input);
+    --animation-panel-in: panel-in 0.2s ease-out;
   }
 }
 @layer base {
@@ -451,6 +452,9 @@
   .z-\[100\] {
     z-index: 100;
   }
+  .z-\[1000\] {
+    z-index: 1000;
+  }
   .z-\[9998\] {
     z-index: 9998;
   }
@@ -484,6 +488,9 @@
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
@@ -496,6 +503,9 @@
   .my-1\.5 {
     margin-block: calc(var(--spacing) * 1.5);
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -595,6 +605,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -746,6 +759,9 @@
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-22 {
+    width: calc(var(--spacing) * 22);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -879,6 +895,18 @@
     --tw-translate-y: calc(var(--spacing) * 3);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
@@ -1167,6 +1195,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .\!border-primary {
+    border-color: var(--color-primary) !important;
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -1774,15 +1805,15 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .\!text-primary {
+    color: var(--color-primary) !important;
+  }
   .text-amber-300 {
     color: var(--color-amber-300);
   }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
-  .text-blue-400 {
-    color: var(--color-blue-400);
-  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1942,6 +1973,10 @@
   .italic {
     font-style: italic;
   }
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1993,6 +2028,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2027,6 +2066,18 @@
       --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
     }
   }
+  .ring-input {
+    --tw-ring-color: var(--color-input);
+  }
+  .ring-zinc-500 {
+    --tw-ring-color: var(--color-zinc-500);
+  }
+  .ring-zinc-500\/30 {
+    --tw-ring-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-zinc-500) 30%, transparent);
+    }
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2081,6 +2132,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
   .duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -2129,6 +2184,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2282,6 +2340,13 @@
       }
     }
   }
+  .hover\:bg-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-muted);
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -2488,6 +2553,22 @@
       }
     }
   }
+  .focus\:ring-primary {
+    &:focus {
+      --tw-ring-color: var(--color-primary);
+    }
+  }
+  .focus\:ring-offset-1 {
+    &:focus {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus\:ring-offset-background {
+    &:focus {
+      --tw-ring-offset-color: var(--color-background);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -2499,6 +2580,11 @@
       --tw-ring-inset: inset;
     }
   }
+  .disabled\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -3389,6 +3475,362 @@
       opacity: 50%;
     }
   }
+  .flatpickr-calendar {
+    width: auto;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-background);
+    font-family: var(--font-sans);
+    color: var(--color-foreground);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    animation: var(--animation-panel-in);
+    width: 200px;
+    display: none;
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    padding: 0;
+    z-index: 999;
+    box-sizing: border-box;
+    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
+  }
+  .flatpickr-calendar.open {
+    opacity: 1;
+    visibility: visible;
+    display: inline-block;
+  }
+  .flatpickr-calendar.not-ready {
+    top: 0;
+    left: 0;
+    visibility: hidden;
+  }
+  .flatpickr-calendar.static {
+    position: relative;
+    top: auto;
+    left: auto;
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+  .flatpickr-calendar.static {
+    position: relative;
+    top: auto;
+    left: auto;
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+  .flatpickr-calendar.not-ready {
+    top: 0;
+    left: 0;
+    visibility: hidden;
+  }
+  .flatpickr-months {
+    display: flex;
+    align-items: center;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-zinc-500) 30%, transparent);
+    }
+    background-color: transparent;
+    padding: calc(var(--spacing) * 0);
+  }
+  .flatpickr-month {
+    height: auto;
+    padding-top: calc(var(--spacing) * 2);
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+  .flatpickr-current-month {
+    display: flex;
+    height: auto;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+  }
+  .flatpickr-current-month .numInputWrapper {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .flatpickr-current-month .numInputWrapper input.numInput {
+    width: calc(var(--spacing) * 14);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding: calc(var(--spacing) * 0);
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+    appearance: none;
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    -moz-appearance: textfield;
+  }
+  .flatpickr-current-month .numInputWrapper input.numInput::-webkit-outer-spin-button, .flatpickr-current-month .numInputWrapper input.numInput::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .flatpickr-current-month .cur-month {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+    width: 5.5rem;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding: calc(var(--spacing) * 0);
+    text-align: right;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+    appearance: none;
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  option.flatpickr-monthDropdown-month {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    &:where(.dark, .dark *) {
+      background-color: var(--color-zinc-800);
+    }
+    &:where(.dark, .dark *) {
+      color: var(--color-zinc-200);
+    }
+  }
+  .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month .numInputWrapper input.numInput {
+    padding-left: calc(var(--spacing) * 0);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .flatpickr-prev-month, .flatpickr-next-month {
+    display: inline-flex;
+    height: calc(var(--spacing) * 7);
+    width: calc(var(--spacing) * 7);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    padding-top: calc(var(--spacing) * 2);
+    padding-bottom: calc(var(--spacing) * 1);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-accent-foreground);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: (var(--ring));
+    }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:disabled {
+      pointer-events: none;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
+    position: relative;
+  }
+  .flatpickr-prev-month svg, .flatpickr-next-month svg {
+    height: calc(var(--spacing) * 3);
+    width: calc(var(--spacing) * 3);
+    fill: var(--color-zinc-500);
+    &:hover {
+      @media (hover: hover) {
+        height: calc(var(--spacing) * 4);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        width: calc(var(--spacing) * 4);
+      }
+    }
+  }
+  .flatpickr-weekdaycontainer {
+    display: flex;
+    justify-content: space-around;
+    padding: calc(var(--spacing) * 1);
+  }
+  span.flatpickr-weekday {
+    flex: 1;
+    text-align: center;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-muted-foreground);
+    font-size: 0.7rem;
+  }
+  .dayContainer {
+    display: flex;
+    flex-wrap: wrap;
+    padding: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 0);
+    box-sizing: border-box;
+  }
+  .flatpickr-day {
+    display: flex;
+    height: calc(var(--spacing) * 6.5);
+    width: calc(var(--spacing) * 4);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    color: var(--color-foreground);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    flex-basis: 14.2857%;
+    line-height: 1;
+    cursor: pointer;
+    font-size: 0.7rem;
+  }
+  .flatpickr-day:hover, .flatpickr-day:focus {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .flatpickr-day.today {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-primary);
+  }
+  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+  .flatpickr-day.inRange {
+    border-radius: 0;
+    background-color: var(--color-accent);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .flatpickr-day.startRange {
+    border-top-left-radius: calc(infinity * 1px);
+    border-bottom-left-radius: calc(infinity * 1px);
+  }
+  .flatpickr-day.endRange {
+    border-top-right-radius: calc(infinity * 1px);
+    border-bottom-right-radius: calc(infinity * 1px);
+  }
+  .flatpickr-day.disabled, .flatpickr-day.disabled:hover {
+    cursor: not-allowed;
+    background-color: transparent;
+    color: var(--color-muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
+    }
+  }
+  .flatpickr-day.nextMonthDay, .flatpickr-day.prevMonthDay {
+    color: var(--color-muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
+    }
+  }
+  .flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay:hover {
+    background-color: var(--color-accent);
+  }
+  .flatpickr-calendar .flatpickr-clear-button {
+    display: inline-flex;
+    height: calc(var(--spacing) * 6);
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: color-mix(in srgb, oklch(55.2% 0.016 285.938) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-zinc-500) 20%, transparent);
+    }
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    color: var(--color-primary);
+    text-underline-offset: 4px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:hover {
+      @media (hover: hover) {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: (var(--ring));
+    }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:disabled {
+      pointer-events: none;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
+  }
 }
 .main-content-scroll::-webkit-scrollbar {
   width: 16px;
@@ -4914,9 +5356,9 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
     border-color: var(--color-border);
-    background-color: var(--color-muted);
+    background-color: var(--color-zinc-200);
-    @supports (color: color-mix(in lab, red, red)) {
+    &:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: var(--color-zinc-900);
     }
   }
   .table-header .table-row {
@@ -4942,9 +5384,6 @@
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-muted);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
-        }
       }
     }
   }
@@ -4977,6 +5416,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -5071,6 +5525,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -5238,21 +5712,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5275,6 +5734,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -5296,6 +5758,11 @@
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -5335,9 +5802,6 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
     }
   }
 }

web/static/js/main.js

@@ -182,7 +182,7 @@ var pageModules = {
   // esbuild 看到这个 import() 语法，就会自动将 dashboard.js 及其依赖打包成一个独立的 chunk 文件
   "dashboard": () => import("./dashboard-XFUWX3IN.js"),
   "keys": () => import("./keys-2IUHJHHE.js"),
-  "logs": () => import("./logs-MNVRT6ND.js")
+  "logs": () => import("./logs-YPEOUZVC.js")
   // 'settings': () => import('./pages/settings.js'), // 未来启用 settings 页面
   // 未来新增的页面，只需在这里添加一行映射，esbuild会自动处理
 };

web/templates/logs.html

@@ -55,13 +55,15 @@
                 错误码
             </button>
             
-            <button class="btn btn-outline border-dashed h-8 px-3 text-xs">
+            <button id="filter-date-range-btn" class="btn btn-outline border-dashed h-8 px-3 text-xs">
-                <i class="fas fa-calendar-alt mr-2 h-4 w-4"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect><line x1="16" x2="16" y1="2" y2="6"></line><line x1="8" x2="8" y1="2" y2="6"></line><line x1="3" x2="21" y1="10" y2="10"></line></svg>
-                时间范围
+                <span>时间范围</span>
             </button>
         </div>
         
-        <button class="btn btn-outline hidden lg:flex h-8 px-3 text-xs">
+        <div class="relative inline-block text-left">
+        <div>
+            <button id="batch-actions-btn" type="button" class="btn btn-outline hidden lg:flex h-8 px-3 text-xs">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
                     <path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle>
                 </svg>
@@ -69,6 +71,26 @@
             </button>
         </div>
 
+        <!-- [ADDED] 下拉菜单的 HTML 结构 -->
+        <div id="batch-actions-menu" class="absolute right-0 z-30 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition ease-out duration-100 transform opacity-0 scale-95 hidden" role="menu" aria-orientation="vertical" aria-labelledby="batch-actions-btn" tabindex="-1">
+            <div class="py-1" role="none">
+                <button id="delete-selected-logs-btn" class="flex items-center w-full px-4 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:pointer-events-none" role="menuitem" tabindex="-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4 text-red-500"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+                    <span>删除选定日志</span>
+                </button>
+                <button id="clear-all-logs-btn" class="flex items-center w-full px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem" tabindex="-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"></path><path d="m14 7 3 3"></path><path d="M5 6v4h4"></path><path d="M19 14v4h-4"></path></svg>
+                    <span>清除所有日志</span>
+                </button>
+                <button class="flex items-center w-full px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem" tabindex="-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>
+                    <span>导出日志记录</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
         <!-- [新增] 3.2 系统日志的快捷操作栏 (默认隐藏) -->
     <div id="system-logs-controls" class="hidden flex items-center justify-end shrink-0 py-4 space-x-4">
         <div id="terminal-status-indicator" class="flex items-center text-xs text-zinc-500 dark:text-zinc-400">