添加新的骨架屏，将评查点列表和评查文件列表，文档列表进行数据分类

app/routes/rules._index.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
-import { useLoaderData, useSearchParams, Link, useNavigate, useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useLoaderData, useSearchParams, Link, useNavigate, useFetcher, useRouteLoaderData, useLocation } from "@remix-run/react";
 import { Button } from '~/components/ui/Button';
 import { Card } from '~/components/ui/Card';
 import { Tag } from '~/components/ui/Tag';
 import { StatusDot } from '~/components/ui/StatusDot';
+import { TableRowSkeleton, LoadingIndicator, NumberSkeleton } from '~/components/ui/SkeletonScreen';
 import rulesStyles from "~/styles/pages/rules_index.css?url";
 import type { Rule, RuleType, RulePriority } from '~/models/rule';
 import { RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
@@ -171,6 +172,7 @@ export default function RulesIndex() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
   const fetcher = useFetcher<ActionResponse>();
+  const location = useLocation();
 
   // 状态管理
   const [ruleGroups, setRuleGroups] = useState<RuleGroup[]>([]);
@@ -181,9 +183,18 @@ export default function RulesIndex() {
   const [filteredTotalCount, setFilteredTotalCount] = useState<number>(initialTotalCount);
   const [ruleTypes, setRuleTypes] = useState<ApiRuleType[]>(initialRuleTypes);
   
+  // 添加一个路由变化计数器
+  const [routeChangeCount, setRouteChangeCount] = useState(0);
+  
   // 获取当前的ruleType值
   const ruleTypeParam = searchParams.get('ruleType');
   
+  // 追踪路由变化
+  useEffect(() => {
+    // console.log("路由变化:", location.key);
+    setRouteChangeCount(prev => prev + 1);
+  }, [location]);
+  
   // 判断是否禁用规则组选择
   const isRuleGroupSelectDisabled = loadingGroups || !ruleTypeParam || ruleGroups.length === 0;
   
@@ -197,30 +208,6 @@ export default function RulesIndex() {
     setFilteredTotalCount(initialTotalCount);
     setRuleTypes(initialRuleTypes);
   }, [initialRules, initialTotalCount, initialRuleTypes]);
-  
-  // 在组件挂载时从 sessionStorage 获取 reviewType
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        const storedReviewType = sessionStorage.getItem('reviewType');
-        if (storedReviewType !== reviewType) {
-          setReviewType(storedReviewType);
-          
-          if (initialLoad) {
-            // 如果是初始加载，立即加载数据
-            // 不需要更新 URL 参数，因为下一步的 loadRulesData 会处理
-          } else {
-            // 如果不是初始加载，更新 URL 参数
-            const newParams = new URLSearchParams(searchParams);
-            newParams.set('page', '1'); // 回到第一页
-            setSearchParams(newParams);
-          }
-        }
-      }
-    } catch (error) {
-      console.error('获取 sessionStorage 中的 reviewType 失败:', error);
-    }
-  }, [reviewType, searchParams, setSearchParams, initialLoad]);
 
   // 使用useEffect监听loaderData.error变化并显示Toast
   useEffect(() => {
@@ -230,6 +217,61 @@ export default function RulesIndex() {
       toastService.error("评查点类型数据为空");
     }
   }, [loaderData.error,loaderData.ruleTypes]);
+  
+  // 客户端数据加载函数
+  const fetchData = useCallback(async () => {
+    try {
+      // 从sessionStorage获取reviewType
+      const storedReviewType = typeof window !== 'undefined' ? sessionStorage.getItem('reviewType') : null;
+      const typeToUse = reviewType || storedReviewType;
+      
+      if (!typeToUse) {
+        console.warn('无法加载评查点数据：未找到reviewType');
+        return;
+      }
+      
+      // console.log("fetchData被调用，加载评查点数据", typeToUse);
+      setLoading(true);
+      
+      // 获取评查点类型
+      try {
+        const typeResponse = await getRuleTypes(typeToUse);
+        if (typeResponse.data) {
+          setRuleTypes(typeResponse.data);
+        }
+      } catch (error) {
+        console.error('加载评查点类型失败:', error);
+      }
+      
+      // 构建查询参数
+      const queryParams = {
+        ruleType: ruleTypeParam || undefined,
+        groupId: searchParams.get('groupId') || undefined,
+        isActive: searchParams.get('isActive') ? searchParams.get('isActive') === 'true' : undefined,
+        keyword: searchParams.get('keyword') || undefined,
+        page: currentPage,
+        pageSize,
+        reviewType: typeToUse
+      };
+      
+      // 调用 API 获取数据
+      const response = await getRulesList(queryParams);
+      
+      if (response.data) {
+        const apiRules = response.data.rules || [];
+        const total = response.data.totalCount || 0;
+        const mappedRules = apiRules.map((apiRule: ApiRule) => mapApiRuleToModel(apiRule));
+        
+        setFilteredRules(mappedRules);
+        setFilteredTotalCount(total);
+      }
+    } catch (error) {
+      console.error('客户端加载评查点列表失败:', error);
+      toastService.error('加载评查点列表失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [reviewType, ruleTypeParam, searchParams, currentPage, pageSize]);
 
   // 当评查点类型变化时，加载对应的规则组
   useEffect(() => {
@@ -261,7 +303,12 @@ export default function RulesIndex() {
     loadRuleGroups();
   }, [ruleTypeParam]);
 
-  // 使用useEffect监听fetcher状态变化并显示Toast
+  // 使用useEffect监听fetcher状态变化并显示Toast fetcher.state有以下几种状态： 通过fetcher提交数据后，action返回结果，fetcher.state会发生变化
+  // idle: 空闲状态
+  // loading: 加载中状态
+  // submittting: 提交中状态
+  // loading: 加载中状态
+  // idle: 空闲状态
   useEffect(() => {
     if (fetcher.data && fetcher.state === 'idle') {
       if (fetcher.data.result) {
@@ -276,86 +323,55 @@ export default function RulesIndex() {
     }
   }, [fetcher.data,fetcher.state]);
 
-  // 添加客户端数据加载函数
-  const loadRulesData = useCallback(async () => {
-    if (!reviewType) return;
-    
-    setLoading(true);
+  // 在组件挂载时从 sessionStorage 获取 reviewType 并加载数据
+  useEffect(() => {
     try {
-      // 构建查询参数
-      const queryParams = {
-        ruleType: ruleTypeParam || undefined,
-        groupId: searchParams.get('groupId') || undefined,
-        isActive: searchParams.get('isActive') ? searchParams.get('isActive') === 'true' : undefined,
-        keyword: searchParams.get('keyword') || undefined,
-        page: currentPage,
-        pageSize,
-        reviewType
-      };
-      
-      // 调用 API 获取数据
-      const response = await getRulesList(queryParams);
-      
-      if (response.data) {
-        const apiRules = response.data.rules || [];
-        const total = response.data.totalCount || 0;
-        const mappedRules = apiRules.map((apiRule: ApiRule) => mapApiRuleToModel(apiRule));
+      if (typeof window !== 'undefined') {
+        const storedReviewType = sessionStorage.getItem('reviewType');
+        // console.log("组件挂载，从sessionStorage获取reviewType:", storedReviewType);
         
-        setFilteredRules(mappedRules);
-        setFilteredTotalCount(total);
+        if (storedReviewType !== reviewType) {
+          setReviewType(storedReviewType);
+        }
+        
+        // 无论如何，都加载数据，不依赖于reviewType的变化
+        if (storedReviewType) {
+          // 使用setTimeout确保该操作在其他状态更新之后执行
+          setTimeout(() => {
+            fetchData();
+          }, 0);
+        }
       }
     } catch (error) {
-      console.error('客户端加载评查点列表失败:', error);
-      toastService.error('加载评查点列表失败');
-    } finally {
-      setLoading(false);
+      console.error('获取 sessionStorage 中的 reviewType 失败:', error);
     }
-  }, [reviewType, ruleTypeParam, searchParams, currentPage, pageSize]);
-  
-  // 添加加载评查点类型的函数
-  const loadRuleTypes = useCallback(async () => {
-    if (!reviewType) return;
-    
-    try {
-      // 调用 API 获取评查点类型，传递 reviewType 参数
-      const response = await getRuleTypes(reviewType);
-      
-      if (response.data) {
-        const typesData = response.data;
-        // 这里可以添加类型过滤的逻辑，但实际上 API 中已经根据 reviewType 进行了过滤
+  }, [initialLoad, fetchData]);
+
+  // 监听路由变化，每次路由到此页面时刷新数据
+  useEffect(() => {
+    if (routeChangeCount > 0) {
+      // console.log("路由变化触发数据刷新，计数:", routeChangeCount);
+      const storedReviewType = typeof window !== 'undefined' ? sessionStorage.getItem('reviewType') : null;
+      // console.log("storedReviewType:", storedReviewType);
+      if (storedReviewType) {
+        if (storedReviewType !== reviewType) {
+          setReviewType(storedReviewType);
+        }
         
-        // 更新状态
-        const updatedTypes = typesData;
-        // 替换掉 loaderData 中的 ruleTypes
-        setRuleTypes(updatedTypes);
+        // 使用setTimeout确保该操作在其他状态更新之后执行
+        setTimeout(() => {
+          fetchData();
+        }, 0);
       }
-    } catch (error) {
-      console.error('加载评查点类型失败:', error);
-      toastService.error('加载评查点类型失败');
     }
-  }, [reviewType]);
+  }, [routeChangeCount, fetchData]);
 
-  // 在 reviewType 变化时加载评查点类型
+  // 监听 URL 参数变化，重新获取数据
   useEffect(() => {
     if (reviewType) {
-      loadRuleTypes();
+      fetchData();
     }
-  }, [reviewType, loadRuleTypes]);
-
-  // 在 reviewType 变化或其他参数变化时加载数据
-  useEffect(() => {
-    if (reviewType) {
-      loadRulesData();
-    }
-  }, [reviewType, loadRulesData]);
-
-  // 在初始加载完成后，如果有 reviewType，立即加载数据
-  useEffect(() => {
-    if (initialLoad && reviewType) {
-      loadRuleTypes();
-      loadRulesData();
-    }
-  }, [initialLoad, reviewType, loadRuleTypes, loadRulesData]);
+  }, [searchParams, fetchData, reviewType]);
 
   // 筛选评查点
   const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
@@ -563,7 +579,20 @@ export default function RulesIndex() {
     <div className="rules-page">
       {/* 页面头部 */}
       <div className="flex justify-between items-center mb-4">
-        <h2 className="text-xl font-medium">评查点管理</h2>
+        <div className="flex items-center">
+          <h2 className="text-xl font-medium">评查点管理</h2>
+          {loading ? (
+            <div className="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
+              <NumberSkeleton className="ml-1" />
+            </div>
+          ) : (
+            <div className="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
+              <i className="ri-file-list-3-line text-primary text-lg mr-1"></i>
+              <span className="text-sm text-secondary">总评查点数：</span>
+              <span className="text-base font-normal text-primary ml-1">{filteredTotalCount}</span>
+            </div>
+          )}
+        </div>
         {isDeveloper && (
           <Button type="primary" icon="ri-add-line" to="/rules-new" className="btn-add-rule">
             新增评查点
@@ -635,20 +664,26 @@ export default function RulesIndex() {
       
       {/* 评查点列表 - 使用Table组件 */}
       <Card className="ant-card">
+          {loading && <LoadingIndicator />}
         <div className={loading ? "opacity-70 pointer-events-none transition-opacity" : ""}>
-          <Table
-            columns={columns}
-            dataSource={filteredRules.length > 0 ? filteredRules : initialRules}
-            rowKey="id"
-            emptyText="暂无评查点数据"
-            className="rules-table"
-          />
+          
+          {loading && filteredRules.length === 0 ? (
+            <TableRowSkeleton count={5} />
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={filteredRules}
+              rowKey="id"
+              // emptyText={loading ? "正在加载数据..." : "暂无评查点数据"}
+              className="rules-table"
+            />
+          )}
           
           {/* 分页 */}
           {filteredTotalCount > 0 && (
             <Pagination
               currentPage={currentPage}
-              total={filteredTotalCount > 0 ? filteredTotalCount : initialTotalCount}
+              total={filteredTotalCount}
               pageSize={pageSize}
               onChange={handlePageChange}
               onPageSizeChange={handlePageSizeChange}