feat: 储存 params 防止回退时被清空

app/frontend/components/images/ComImageIndex.jsx

@@ -2,11 +2,12 @@ import { useState, useEffect, useRef, useCallback } from 'react'
 import { Head, Link, router } from '@inertiajs/react'
 import * as Form from '@radix-ui/react-form'
 import * as Collapsible from '@radix-ui/react-collapsible'
+import * as Tabs from '@radix-ui/react-tabs'
 import { uniqBy } from 'lodash-es'
 import { ComImageCard } from './ComImageCard'
 import TagSearchInput from '../TagSearchInput'
 import DateRangePicker from '../DateRangePicker'
-import ComImageStatusSelect from './ComImageStatusSelect'
+// import ComImageStatusSelect from './ComImageStatusSelect'
 
 export default function ComImageIndex({ title, description, path, images, pagination, filters, auth, backLink, actionButton, showUserName = false, allTags = {} }) {
   const [allImages, setAllImages] = useState(images || [])
@@ -17,13 +18,34 @@ export default function ComImageIndex({ title, description, path, images, pagina
   const [filterCount, setFilterCount] = useState(0)
   const [loadedPageMap, setLoadedPageMap] = useState({})
   const bottomObserver = useRef()
-  const [searchParams, setSearchParams] = useState({
-    title_cont: filters.title_cont || '',
-    tags_name_cont: filters.tags_name_cont || '',
-    tags_id_in: filters.tags_id_in || [],
-    created_at_gteq: filters.created_at_gteq || '',
-    created_at_lteq: filters.created_at_lteq || '',
-    status_eq: filters.status_eq || '',
+  const [searchParams, setSearchParams] = useState(() => {
+    // 尝试从 localStorage 获取保存的搜索参数
+    const savedParams = localStorage.getItem(`img_manager_search_params_${path}`);
+    if (savedParams) {
+      try {
+        const parsedParams = JSON.parse(savedParams);
+        return {
+          title_cont: parsedParams.title_cont || '',
+          tags_name_cont: parsedParams.tags_name_cont || '',
+          tags_id_in: parsedParams.tags_id_in || [],
+          created_at_gteq: parsedParams.created_at_gteq || '',
+          created_at_lteq: parsedParams.created_at_lteq || '',
+          status_eq: parsedParams.status_eq || '',
+        };
+      } catch (e) {
+        console.error('Error parsing saved search params:', e);
+      }
+    }
+    
+    // 如果没有保存的参数或解析出错，使用传入的 filters
+    return {
+      title_cont: filters.title_cont || '',
+      tags_name_cont: filters.tags_name_cont || '',
+      tags_id_in: filters.tags_id_in || [],
+      created_at_gteq: filters.created_at_gteq || '',
+      created_at_lteq: filters.created_at_lteq || '',
+      status_eq: filters.status_eq || '',
+    };
   })
   const [isFilterOpen, setIsFilterOpen] = useState(false)
 
@@ -80,7 +102,7 @@ export default function ComImageIndex({ title, description, path, images, pagina
           onSuccess: (response) => {
             setPage(response.props.pagination.current_page)
             setHasMore(maxVisiblePage < response.props.pagination.total_pages)
-            setFilterCount(Object.values(searchParams).filter(i => Array.isArray(i) ? i.length : !!i).length)
+            setFilterCount(Object.entries(searchParams).filter(([k, v]) => k !== 'status_eq' && (Array.isArray(v) ? v.length : !!v)).length)
             setLoadedPageMap({...loadedPageMap, [response.props.pagination.current_page]: response.props.images})
             setLoading(false)
           },
@@ -115,6 +137,20 @@ export default function ComImageIndex({ title, description, path, images, pagina
     setMaxVisiblePage(expectPage)
   }
 
+  // 当搜索参数变化时，更新 localStorage
+  useEffect(() => {
+    localStorage.setItem(`img_manager_search_params_${path}`, JSON.stringify(searchParams));
+  }, [searchParams, path]);
+
+  // 初始化时自动执行搜索，使用保存的搜索参数
+  useEffect(() => {
+    // 如果有保存的搜索参数且不是初始加载，则执行搜索
+    const savedParams = localStorage.getItem(`img_manager_search_params_${path}`);
+    if (savedParams && Object.keys(loadedPageMap).length === 0) {
+      loadPage(1);
+    }
+  }, []);
+
   useEffect(() => {
     if (page >= 1 && !loadedPageMap[1]) {
       setVisibleImages(1)
@@ -185,6 +221,46 @@ export default function ComImageIndex({ title, description, path, images, pagina
       </div>
 
       <div className="px-4 sm:px-6 pb-5">
+        <Tabs.Root 
+          defaultValue="all" 
+          className="mb-6"
+          onValueChange={(value) => {
+            const statusValue = value === 'all' ? '' : value
+            setSearchParams({ ...searchParams, status_eq: statusValue })
+            setLoadedPageMap({})
+            setMaxVisiblePage(0)
+            setAllImages([])
+            loadPage(1)
+          }}
+        >
+          <Tabs.List className="flex border-b border-gray-200 mb-4">
+            <Tabs.Trigger 
+              value="all" 
+              className={`px-4 py-2 text-sm font-medium ${searchParams.status_eq === '' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
+            >
+              全部
+            </Tabs.Trigger>
+            <Tabs.Trigger 
+              value="pending" 
+              className={`px-4 py-2 text-sm font-medium ${searchParams.status_eq === 'pending' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
+            >
+              待审核
+            </Tabs.Trigger>
+            <Tabs.Trigger 
+              value="approved" 
+              className={`px-4 py-2 text-sm font-medium ${searchParams.status_eq === 'approved' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
+            >
+              已完成
+            </Tabs.Trigger>
+            <Tabs.Trigger 
+              value="rejected" 
+              className={`px-4 py-2 text-sm font-medium ${searchParams.status_eq === 'rejected' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
+            >
+              已拒绝
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs.Root>
+        
         <Collapsible.Root open={isFilterOpen} onOpenChange={setIsFilterOpen} className="w-full">
           <Collapsible.Content className="mb-6 mt-4 overflow-hidden">
             <Form.Root
@@ -244,7 +320,7 @@ export default function ComImageIndex({ title, description, path, images, pagina
                   </Form.Field>
                 </div>
 
-                <div className="sm:col-span-3">
+                {/* <div className="sm:col-span-3">
                   <Form.Field name="status_eq">
                     <Form.Label className="block text-sm font-medium text-gray-700">
                       状态
@@ -256,9 +332,9 @@ export default function ComImageIndex({ title, description, path, images, pagina
                       />
                     </Form.Control>
                   </Form.Field>
-                </div>
+                </div> */}
 
-                <div className="sm:col-span-6">
+                <div className="sm:col-span-3">
                   <Form.Field name="date_range">
                     <Form.Label className="block text-sm font-medium text-gray-700">
                       日期范围