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

app/routes/_index.tsx

@@ -138,54 +138,51 @@ export default function Index() {
 
       {/* 主要内容 */}
       <main className="index-main-content">
-        <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
+        <div className="index-main-content-container">
+          <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
 
-        <div className="modules-container">
-          {/* 合同管理模块 */}
-          <div
-            className="module-card"
-            onClick={() => handleModuleClick('/contract-template/search', 'contract')}
-            onKeyDown={(e) => handleKeyDown('/contract-template/search', 'contract', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="合同管理"
-          >
-            <i className="ri-file-list-2-fill text-[3rem] text-[#269b6c]"></i>
-            <span className="module-name">合同管理</span>
-          </div>
+          <div className="modules-container">
+            {/* 合同管理模块 */}
+            <div
+              className="module-card"
+              onClick={() => handleModuleClick('/contract-template/search', 'contract')}
+              onKeyDown={(e) => handleKeyDown('/contract-template/search', 'contract', e)}
+              role="button"
+              tabIndex={0}
+              aria-label="合同管理"
+            >
+              <i className="ri-file-list-2-fill text-[3rem] text-[#269b6c]"></i>
+              <span className="module-name">合同管理</span>
+            </div>
 
-          {/* 案卷智能评查模块 */}
-          <div
-            className="module-card"
-            onClick={() => handleModuleClick('/home', 'record')}
-            onKeyDown={(e) => handleKeyDown('/home', 'record', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="案卷智能评查"
-          >
-            <i className="ri-folder-shared-fill text-[3rem] text-[#269b6c]"></i>
-            <span className="module-name">案卷智能评查</span>
-          </div>
+            {/* 案卷智能评查模块 */}
+            <div
+              className="module-card"
+              onClick={() => handleModuleClick('/home', 'record')}
+              onKeyDown={(e) => handleKeyDown('/home', 'record', e)}
+              role="button"
+              tabIndex={0}
+              aria-label="案卷智能评查"
+            >
+              <i className="ri-folder-shared-fill text-[3rem] text-[#269b6c]"></i>
+              <span className="module-name">案卷智能评查</span>
+            </div>
 
-          {/* 智慧法务大模型模块 */}
-          <div
-            className="module-card"
-            onClick={() => handleModuleClick('/chat-with-llm', 'model')}
-            onKeyDown={(e) => handleKeyDown('/chat-with-llm', 'model', e)}
-            role="button"
-            tabIndex={0}
-            aria-label="智慧法务大模型"
-          >
-            <i className="ri-robot-2-fill text-[3rem] text-[#269b6c]"></i>
-            <span className="module-name">智慧法务大模型</span>
+            {/* 智慧法务大模型模块 */}
+            <div
+              className="module-card"
+              onClick={() => handleModuleClick('/chat-with-llm', 'model')}
+              onKeyDown={(e) => handleKeyDown('/chat-with-llm', 'model', e)}
+              role="button"
+              tabIndex={0}
+              aria-label="智慧法务大模型"
+            >
+              <i className="ri-robot-2-fill text-[3rem] text-[#269b6c]"></i>
+              <span className="module-name">智慧法务大模型</span>
+            </div>
           </div>
         </div>
       </main>
-      {/* 底部山水背景 */}
-      <footer className="footer">
-        <div className="mountains-bg"></div>
-      </footer>
-
     </div>
   );
 }

app/routes/documents._index.tsx

@@ -8,6 +8,7 @@ import { Pagination } from "~/components/ui/Pagination";
 import { FileTypeTag } from "~/components/ui/FileTypeTag";
 import { FileTag } from "~/components/ui/FileTag";
 import { FilterPanel, FilterSelect, SearchFilter, DateRangeFilter } from "~/components/ui/FilterPanel";
+import { TableRowSkeleton, LoadingIndicator, NumberSkeleton } from '~/components/ui/SkeletonScreen';
 import documentsIndexStyles from "~/styles/pages/documents_index.css?url";
 import { getDocuments, deleteDocument, type DocumentUI } from "~/api/files/documents";
 import { getDocumentTypes } from "~/api/document-types/document-types";
@@ -833,7 +834,18 @@ export default function DocumentsIndex() {
       <div className={isLoadingData ? "opacity-70 pointer-events-none transition-opacity" : "transition-opacity"}>
         {/* 页面头部 */}
         <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>
+            {isLoadingData ? (
+              <div className="ml-4">
+                <NumberSkeleton />
+              </div>
+            ) : (
+              <div className="ml-4 text-sm text-secondary">
+                共 <span className="font-medium text-primary">{total}</span> 条记录
+              </div>
+            )}
+          </div>
           <div>
             <Button 
               type="primary" 
@@ -917,6 +929,8 @@ export default function DocumentsIndex() {
         
         {/* 数据表格 */}
         <Card>
+          {isLoadingData && <LoadingIndicator />}
+          
           <div className="mb-3 flex items-center justify-between">
             <div>
               <Button 
@@ -942,12 +956,16 @@ export default function DocumentsIndex() {
           </div>
           
           <div className="overflow-x-auto">
-            <Table
-              columns={columns}
-              dataSource={documents}
-              rowKey="id"
-              emptyText="暂无数据"
-            />
+            {isLoadingData && documents.length === 0 ? (
+              <TableRowSkeleton count={5} />
+            ) : (
+              <Table
+                columns={columns}
+                dataSource={documents}
+                rowKey="id"
+                emptyText={isLoadingData ? "加载中..." : "暂无数据"}
+              />
+            )}
           </div>
           
           {/* 分页 */}

app/routes/home.tsx

@@ -304,9 +304,9 @@ export default function Home() {
               <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
                 <span>{userRole === 'developer' ? '管' : '用'}</span>
               </div>
-              <div className="ml-3">
-                <p className="text-sm font-medium">{userRole === 'developer' ? '系统管理员' : '普通用户'}</p>
-                <p className="text-xs text-gray-500">{userRole === 'developer' ? '超级管理员' : '标准权限'}</p>
+              <div className="ml-1">
+                <p className="text-sm font-medium mb-0">{userRole === 'developer' ? '系统管理员' : '普通用户'}</p>
+                <p className="text-xs text-gray-500 mb-0">{userRole === 'developer' ? '超级管理员' : '标准权限'}</p>
               </div>
             </div>
             {/* 登出操作 */}
@@ -430,7 +430,7 @@ function StatCard({ title, value, icon, trend }: StatCardProps) {
       <div className="stat-title">{title}</div>
       <div className="stat-value">{value}</div>
       {trend && (
-        <div className={`stat-trend ${trend.isUp ? 'trend-up' : 'trend-down'}`}>
+        <div className={`stat-trend ${title === '本月问题检出数' ? !trend.isUp? 'trend-up':'trend-down' : trend.isUp ? 'trend-up' : 'trend-down'}`}>
           <i className={`mr-1 ${trend.isUp ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}`}></i>
           <span>{trend.value}%</span>
           <span className="ml-1 text-gray-500">较上月</span>

app/routes/rules-files.tsx

@@ -9,6 +9,7 @@ import { Pagination } from "~/components/ui/Pagination";
 import { Table } from "~/components/ui/Table";
 import { StatusBadge } from "~/components/ui/StatusBadge";
 import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
+import { NumberSkeleton, TableRowSkeleton, LoadingIndicator } from "~/components/ui/SkeletonScreen";
 import rulesFilesStyles from "~/styles/pages/rules-files.css?url";
 import { 
   getReviewFiles, 
@@ -541,7 +542,11 @@ export default function RulesFiles() {
           <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">{totalCount}</span>
+            {isLoading ? (
+              <NumberSkeleton className="ml-1" />
+            ) : (
+              <span className="text-base font-normal text-primary ml-1">{totalCount}</span>
+            )}
           </div>
         </div>
         <Button type="primary" icon="ri-file-upload-line" to="/files/upload">
@@ -622,13 +627,19 @@ export default function RulesFiles() {
       {/* 文件列表 */}
       <Card>
         <div className={isLoading ? "opacity-70 pointer-events-none transition-opacity" : ""}>
-          <Table
-            columns={columns}
-            dataSource={files}
-            rowKey="id"
-            emptyText="暂无文件数据"
-            className="files-table table-auto-height"
-          />
+          {isLoading && <LoadingIndicator />}
+          
+          {isLoading && files.length === 0 ? (
+            <TableRowSkeleton count={5} />
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={files}
+              rowKey="id"
+              emptyText={isLoading ? "加载中..." : "暂无文件数据"}
+              className="files-table table-auto-height"
+            />
+          )}
           
           {/* 分页组件 */}
           {totalCount > 0 && (

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}