feat: 统计页面添加分类筛选与搜索优化

- 统计页面添加分类多选筛选功能 - 点击分类可跳转到搜索页面查看详情 - 搜索页面添加 URL 同步与自动搜索 - 提取 useCategories hook 消除重复代码 - 修复自定义分类图标显示问题 - 添加 useMemo 优化计算性能 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-17 13:35:40 +08:00
parent b5f9a238bb
commit a89d4f2402
6 changed files with 345 additions and 60 deletions
@@ -1,16 +1,17 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { isLoggedIn, getRecurringBills, createRecurringBill, updateRecurringBill, deleteRecurringBill, applyRecurringBill } from '../lib/api';
-import { DEFAULT_CATEGORIES } from '../lib/categories';
 import AppShell from '../components/AppShell';
 import { Icon } from '../components/icons';
 import { useToast } from '../components/ToastProvider';
 import { useConfirm } from '../components/ConfirmProvider';
+import { useCategories } from '../hooks/useCategories';

 export default function Recurring() {
  const router = useRouter();
  const { showToast } = useToast();
  const { confirm } = useConfirm();
+  const { categories } = useCategories();
  const [bills, setBills] = useState([]);
  const [modalOpen, setModalOpen] = useState(false);
  const [editingBill, setEditingBill] = useState(null);
@@ -197,8 +198,8 @@ export default function Recurring() {
          </div>
          <div className="bills-list">
            {bills.map((bill) => {
-              const categories = DEFAULT_CATEGORIES[bill.type];
-              const cat = categories.find((item) => item.name === bill.category) || { icon: '📝' };
+              const categoryList = categories[bill.type];
+              const cat = categoryList.find((item) => item.name === bill.category) || { icon: '📝' };
              return (
                <button
                  key={bill.id}
@@ -304,7 +305,7 @@ export default function Recurring() {
              <div className="form-group">
                <label>分类</label>
                <div className="category-grid">
-                  {DEFAULT_CATEGORIES[formData.type].map((cat) => (
+                  {categories[formData.type].map((cat) => (
                    <button
                      key={cat.name}
                      type="button"
@@ -1,17 +1,18 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { isLoggedIn, searchRecords, updateRecord, deleteRecord } from '../lib/api';
-import { DEFAULT_CATEGORIES } from '../lib/categories';
 import AppShell from '../components/AppShell';
 import { Icon } from '../components/icons';
 import RecordModal from '../components/RecordModal';
 import { useToast } from '../components/ToastProvider';
 import { useConfirm } from '../components/ConfirmProvider';
+import { useCategories } from '../hooks/useCategories';

 export default function Search() {
  const router = useRouter();
  const { showToast } = useToast();
  const confirm = useConfirm();
+  const { categories } = useCategories();
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
@@ -35,6 +36,28 @@ export default function Search() {
    }
  }, [router]);

+  // 检查 URL 参数，自动搜索
+  useEffect(() => {
+    if (router.isReady && router.query.q) {
+      const q = decodeURIComponent(router.query.q);
+      setKeyword(q);
+      // 自动搜索
+      const doSearch = async () => {
+        setLoading(true);
+        try {
+          const data = await searchRecords(q);
+          setResults(data);
+        } catch (err) {
+          console.error(err);
+          showToast(err.message, { tone: 'error' });
+        } finally {
+          setLoading(false);
+        }
+      };
+      doSearch();
+    }
+  }, [router.isReady, router.query.q]);
+
  const handleSearch = async (e) => {
    e.preventDefault();
    if (!keyword.trim()) {
@@ -42,6 +65,9 @@ export default function Search() {
      return;
    }

+    // 更新 URL
+    router.push(`/search?q=${encodeURIComponent(keyword)}`, undefined, { shallow: true });
+
    setLoading(true);
    try {
      const data = await searchRecords(keyword);
@@ -142,6 +168,7 @@ export default function Search() {
  const formatMoney = (num) => (num || 0).toFixed(2);

  const groupedResults = useMemo(() => {
+    if (!Array.isArray(results)) return {};
    return results.reduce((groups, record) => {
      const date = record.date.split(' ')[0];
      if (!groups[date]) groups[date] = [];
@@ -156,6 +183,7 @@ export default function Search() {
  );

  const { totalIncome, totalExpense, totalBalance } = useMemo(() => {
+    if (!Array.isArray(results)) return { totalIncome: 0, totalExpense: 0, totalBalance: 0 };
    let income = 0;
    let expense = 0;
    for (const record of results) {
@@ -165,16 +193,16 @@ export default function Search() {
    return { totalIncome: income, totalExpense: expense, totalBalance: income - expense };
  }, [results]);

-  // O(1) category icon lookup map
+  // O(1) category icon lookup map (includes custom categories)
  const categoryIconMap = useMemo(() => {
    const icons = {};
    for (const type of ['expense', 'income']) {
-      for (const cat of DEFAULT_CATEGORIES[type]) {
+      for (const cat of categories[type]) {
        icons[`${type}:${cat.name}`] = cat.icon;
      }
    }
    return icons;
-  }, []);
+  }, [categories]);

  const actions = (
    <button type="button" className="icon-button" aria-label="设置" onClick={() => router.push('/settings')}>
@@ -209,16 +237,16 @@ export default function Search() {

        {results.length > 0 ? (
          <>
-            <div className="search-summary">
-              <div className="search-stat">
+            <div className="stats-grid stats-grid--hero">
+              <div className="stat-card">
                <span className="label">收入</span>
                <span className="value income">+{formatMoney(totalIncome)}</span>
              </div>
-              <div className="search-stat">
+              <div className="stat-card">
                <span className="label">支出</span>
                <span className="value expense">-{formatMoney(totalExpense)}</span>
              </div>
-              <div className="search-stat">
+              <div className="stat-card stat-card--balance">
                <span className="label">结余</span>
                <span className="value">{formatMoney(totalBalance)}</span>
              </div>
@@ -283,7 +311,7 @@ export default function Search() {
        submitting={submitting}
        deleting={deleting}
        editingRecord={editingRecord}
-        categories={DEFAULT_CATEGORIES}
+        categories={categories}
      />
    </AppShell>
  );
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { isLoggedIn, getTrendStats, getCategoryStats } from '../lib/api';
 import { Chart, registerables } from 'chart.js';
@@ -16,12 +16,11 @@ export default function Stats() {
  const [trendData, setTrendData] = useState([]);
  const [categoryData, setCategoryData] = useState([]);
  const [categoryType, setCategoryType] = useState('expense');
+  const [selectedCategories, setSelectedCategories] = useState([]);
  const [trendLoading, setTrendLoading] = useState(true);
  const [categoryLoading, setCategoryLoading] = useState(true);
  const trendChartRef = useRef(null);
-  const categoryChartRef = useRef(null);
  const trendChartInstance = useRef(null);
-  const categoryChartInstance = useRef(null);

  useEffect(() => {
    if (!isLoggedIn()) {
@@ -112,35 +111,6 @@ export default function Stats() {
    }
  }, [trendData]);

-  useEffect(() => {
-    if (categoryChartInstance.current) {
-      categoryChartInstance.current.destroy();
-    }
-    if (categoryChartRef.current && categoryData.length > 0) {
-      const ctx = categoryChartRef.current.getContext('2d');
-      const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16', '#f97316', '#6366f1'];
-      categoryChartInstance.current = new Chart(ctx, {
-        type: 'doughnut',
-        data: {
-          labels: categoryData.map((item) => item.category),
-          datasets: [{
-            data: categoryData.map((item) => item.total),
-            backgroundColor: colors.slice(0, categoryData.length),
-          }],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              position: 'bottom',
-            },
-          },
-        },
-      });
-    }
-  }, [categoryData]);
-
  const prevMonth = () => {
    const newDate = new Date(currentMonth);
    newDate.setMonth(newDate.getMonth() - 1);
@@ -153,7 +123,29 @@ export default function Stats() {
    setCurrentMonth(newDate);
  };

-  const totalCategoryAmount = categoryData.reduce((sum, item) => sum + item.total, 0);
+  const handleCategoryTypeChange = (type) => {
+    setCategoryType(type);
+    setSelectedCategories([]); // 切换类型时清空选中
+  };
+
+  const toggleCategory = (categoryName) => {
+    if (selectedCategories.includes(categoryName)) {
+      setSelectedCategories(selectedCategories.filter(c => c !== categoryName));
+    } else {
+      setSelectedCategories([...selectedCategories, categoryName]);
+    }
+  };
+
+  // 根据选中分类过滤数据
+  const filteredCategoryData = useMemo(() => {
+    return selectedCategories.length > 0
+      ? categoryData.filter(cat => selectedCategories.includes(cat.category))
+      : categoryData;
+  }, [selectedCategories, categoryData]);
+
+  const filteredTotalAmount = useMemo(() => {
+    return filteredCategoryData.reduce((sum, item) => sum + item.total, 0);
+  }, [filteredCategoryData]);

  const headerContent = (
    <div className="header-center-container">
@@ -201,14 +193,40 @@ export default function Stats() {
          </div>
        </div>
        <div className="category-type-tabs">
-          <button type="button" className={categoryType === 'expense' ? 'active' : ''} onClick={() => setCategoryType('expense')}>支出</button>
-          <button type="button" className={categoryType === 'income' ? 'active' : ''} onClick={() => setCategoryType('income')}>收入</button>
+          <button type="button" className={categoryType === 'expense' ? 'active' : ''} onClick={() => handleCategoryTypeChange('expense')}>支出</button>
+          <button type="button" className={categoryType === 'income' ? 'active' : ''} onClick={() => handleCategoryTypeChange('income')}>收入</button>
        </div>
+
+        {/* 总额显示 */}
+        <div className="stats-total">
+          <span className="stats-total-label">{categoryType === 'expense' ? '支出' : '收入'}</span>
+          <span className="stats-total-amount">¥{filteredTotalAmount.toFixed(2)}</span>
+        </div>
+
+        {/* 分类选择chips */}
+        <div className="category-chips">
+          {categoryData.map((cat) => (
+            <button
+              key={cat.category}
+              type="button"
+              className={`category-chip ${selectedCategories.includes(cat.category) ? 'selected' : ''}`}
+              onClick={() => toggleCategory(cat.category)}
+            >
+              {cat.category}
+            </button>
+          ))}
+        </div>
+
        <div className="category-breakdown category-breakdown--stats">
-          {categoryData.length > 0 ? categoryData.map((cat, index) => {
-            const percent = totalCategoryAmount ? ((cat.total / totalCategoryAmount) * 100).toFixed(1) : '0.0';
+          {filteredCategoryData.length > 0 ? filteredCategoryData.map((cat, index) => {
+            const percent = filteredTotalAmount ? ((cat.total / filteredTotalAmount) * 100).toFixed(1) : '0.0';
            return (
-              <div key={index} className="stats-category-item">
+              <button
+                key={index}
+                type="button"
+                className="stats-category-item stats-category-item--clickable"
+                onClick={() => router.push(`/search?q=${encodeURIComponent(cat.category)}`)}
+              >
                <div className="stats-category-header">
                  <span className="stats-category-name">{cat.category}</span>
                  <span className="stats-category-amount">{cat.total.toFixed(2)}</span>
@@ -216,7 +234,7 @@ export default function Stats() {
                <div className="stats-category-bar-wrap">
                  <div className="stats-category-bar" style={{ width: `${percent}%` }}></div>
                </div>
-              </div>
+              </button>
            );
          }) : <div className="empty-state empty-state--inline">暂无数据</div>}
        </div>