优化: 深度重构 UI 为玻璃拟态风格，优化大数据量下的搜索筛选性能，解决控制台报错

static/js/main.js

@@ -153,25 +153,45 @@ function displayData(data) {
 function renderStats(data) {
     let totalQty = 0;
     let totalAmt = 0;
-    const days = data.daily_summary.length;
-    const uniqueProducts = new Set(); // Simplified unique product count logic based on daily summary data structure might differ, here we approximate or iterate raw if needed.
-    // Correction: Use raw_data for unique products count if available, or iterate all dailies.
+
+    // 1. Calculate Unique Days (based on YYYY-MM-DD)
+    const uniqueDates = new Set();
+
+    // 2. Track Unique Products
+    const uniqueProducts = new Set();
 
     data.daily_summary.forEach(day => {
-        if (day.summary_info) {
+        // Extract YYYY-MM-DD from timestamp "YYYY-MM-DD HH:MM:SS"
+        if (day.date && day.date.length >= 10) {
+            uniqueDates.add(day.date.substring(0, 10));
+        }
+
+        // Sum up totals
+        // Priority: Use the sum of products (day.total_...) if available.
+        // If products are missing/zero but header info (summary_info) exists, use that.
+        if (day.products && day.products.length > 0) {
+            // Use calculated sum from products
+            totalQty += day.total_quantity;
+            totalAmt += day.total_amount;
+        } else if (day.summary_info) {
+            // Fallback to header info if no products parsed
             totalQty += day.summary_info.total_quantity;
             totalAmt += day.summary_info.total_amount;
         } else {
             totalQty += day.total_quantity;
             totalAmt += day.total_amount;
         }
-        day.products.forEach(p => uniqueProducts.add(p.product));
+
+        // Collect unique products
+        if (day.products) {
+            day.products.forEach(p => uniqueProducts.add(p.product));
+        }
     });
 
     // Count Animation
     animateValue(elements.totalAmount, totalAmt, '¥');
     animateValue(elements.totalQuantity, totalQty, '');
-    animateValue(elements.totalDays, days, '');
+    animateValue(elements.totalDays, uniqueDates.size, ''); // Use unique dates count
     animateValue(elements.totalProducts, uniqueProducts.size, '');
 }
 
@@ -205,8 +225,19 @@ function animateValue(obj, end, prefix = '') {
     window.requestAnimationFrame(step);
 }
 
+// Pagination State
+const ITEMS_PER_PAGE = 20;
+let displayedItems = ITEMS_PER_PAGE;
+
 function renderDailyList(data) {
-    elements.dailyData.innerHTML = data.daily_summary.map(day => {
+    const listContainer = elements.dailyData;
+    const totalItems = data.daily_summary.length;
+
+    // Slice data based on current limit
+    const visibleData = data.daily_summary.slice(0, displayedItems);
+
+    // Render list
+    const listHTML = visibleData.map(day => {
         const totalAmt = day.summary_info ? day.summary_info.total_amount : day.total_amount;
         const totalQty = day.summary_info ? day.summary_info.total_quantity : day.total_quantity;
 
@@ -236,6 +267,29 @@ function renderDailyList(data) {
                 </div>
                 `;
     }).join('');
+
+    // Append "Show More" button if needed
+    let buttonHTML = '';
+    if (displayedItems < totalItems) {
+        buttonHTML = `
+            <div class="load-more-container" style="text-align: center; margin-top: 20px;">
+                <button class="btn btn-outline" onclick="loadMoreItems()">
+                    显示更多 (${totalItems - displayedItems} remaining)
+                </button>
+            </div>
+        `;
+    }
+
+    listContainer.innerHTML = listHTML + buttonHTML;
+}
+
+function loadMoreItems() {
+    displayedItems += ITEMS_PER_PAGE;
+    if (state.filteredData) {
+        renderDailyList(state.filteredData);
+    } else if (state.allData) {
+        renderDailyList(state.allData); // Fallback if no filter active
+    }
 }
 
 function toggleDayDetails(header) {
@@ -246,41 +300,55 @@ function toggleDayDetails(header) {
 function applyFilters() {
     if (!state.allData) return;
 
-    let filtered = JSON.parse(JSON.stringify(state.allData));
+    // Reset pagination on filter change
+    displayedItems = ITEMS_PER_PAGE;
 
-    // Search Filter
-    if (state.searchTerm) {
-        filtered.daily_summary = filtered.daily_summary.map(day => {
-            const matchedProducts = day.products.filter(p => p.product.toLowerCase().includes(state.searchTerm));
-            if (matchedProducts.length > 0) {
-                const tQty = matchedProducts.reduce((a, b) => a + b.quantity, 0);
-                const tAmt = matchedProducts.reduce((a, b) => a + b.amount, 0);
-                return { ...day, products: matchedProducts, total_quantity: tQty, total_amount: tAmt, summary_info: null };
-            }
-            return null;
-        }).filter(d => d);
-    }
+    const searchTerm = (state.searchTerm || "").trim();
+    const currentFilter = state.currentFilter;
 
-    // Amount Filter
-    if (state.currentFilter !== 'all') {
-        filtered.daily_summary = filtered.daily_summary.filter(day => {
-            const amt = day.summary_info ? day.summary_info.total_amount : day.total_amount;
-            if (state.currentFilter === 'high') return amt >= 1000;
-            if (state.currentFilter === 'medium') return amt >= 100 && amt < 1000;
-            if (state.currentFilter === 'low') return amt < 100;
-            return true;
-        });
-    }
+    // Filter without cloning for massive performance boost
+    const filteredItems = state.allData.daily_summary.map(day => {
+        // 1. Search filter
+        let matchedProducts = day.products;
+        if (searchTerm) {
+            matchedProducts = day.products.filter(p =>
+                p.product.toLowerCase().includes(searchTerm)
+            );
+        }
 
-    state.filteredData = filtered;
-    renderStats(filtered);
-    renderDailyList(filtered);
+        if (matchedProducts.length === 0) return null;
+
+        // 2. Amount filter
+        const amt = day.summary_info ? day.summary_info.total_amount : day.total_amount;
+        let amountMatch = true;
+
+        if (currentFilter === 'high') amountMatch = (amt >= 1000);
+        else if (currentFilter === 'medium') amountMatch = (amt >= 100 && amt < 1000);
+        else if (currentFilter === 'low') amountMatch = (amt < 100);
+
+        if (amountMatch) {
+            return {
+                ...day,
+                products: matchedProducts,
+                total_quantity: searchTerm ? matchedProducts.reduce((a, b) => a + b.quantity, 0) : day.total_quantity,
+                total_amount: searchTerm ? matchedProducts.reduce((a, b) => a + b.amount, 0) : day.total_amount,
+                summary_info: searchTerm ? null : day.summary_info
+            };
+        }
+        return null;
+    }).filter(d => d);
+
+    state.filteredData = { daily_summary: filteredItems };
+    renderStats(state.filteredData);
+    renderDailyList(state.filteredData);
 }
 
-function filterByAmount(type) {
+function filterByAmount(type, btnElement) {
     state.currentFilter = type;
     document.querySelectorAll('.filter-chip').forEach(btn => btn.classList.remove('active'));
-    event.target.classList.add('active');
+    if (btnElement) {
+        btnElement.classList.add('active');
+    }
     applyFilters();
 }