TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yorn
2025-06-04 17:31:10 +08:00
parent bbc074eeec
commit 8fbf915656
17 changed files with 537 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/chat/chat-message.tsx
+1 -1
View File
@@ -114,7 +114,7 @@ export default function ChatMessage({
className="question-button text-left"
onClick={() => {
// 这里可以添加点击建议问题的处理逻辑
console.log('Suggested question clicked:', question);
// console.log('Suggested question clicked:', question);
}}
>
{question}
app/components/chat/index.tsx
+17 -17
View File
@@ -59,7 +59,7 @@ export default function Chat() {
} = useChatMessage({
onUpdateConversationList: updateConversationInList,
onConversationIdChange: async (conversationId: string) => {
console.log('🔄 收到会话ID变更通知:', conversationId);
// console.log('🔄 收到会话ID变更通知:', conversationId);
// 设置当前会话ID（这会触发localStorage更新）
setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
@@ -67,7 +67,7 @@ export default function Chat() {
// 如果是新会话，添加到会话列表
const existingConversation = conversationList.find(item => item.id === conversationId);
if (!existingConversation) {
console.log('🆕 添加新会话到列表:', conversationId);
// console.log('🆕 添加新会话到列表:', conversationId);
const newConversation = {
id: conversationId,
name: '新对话',
@@ -78,7 +78,7 @@ export default function Chat() {
// 检查是否需要自动重命名（新对话的第一条消息）
if (!newConversationFirstMessageSent.has(conversationId)) {
console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);
// console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);
// 标记该对话已发送第一条消息
setNewConversationFirstMessageSent(prev => new Set(prev).add(conversationId));
@@ -88,7 +88,7 @@ export default function Chat() {
try {
if (sidebarRef.current) {
await sidebarRef.current.autoRename(conversationId);
console.log('✅ 新对话自动重命名完成:', conversationId);
// console.log('✅ 新对话自动重命名完成:', conversationId);
} else {
console.warn('⚠️ 侧边栏引用不可用，无法自动重命名');
}
@@ -170,7 +170,7 @@ export default function Chat() {
return;
}
console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });
// console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });
// 更新当前会话的输入
let notSyncToStateIntroduction = '';
@@ -193,11 +193,11 @@ export default function Chat() {
// 更新当前会话的聊天列表
if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponding) {
try {
console.log('📨 获取会话历史消息:', currConversationId);
// console.log('📨 获取会话历史消息:', currConversationId);
// 调用API获取历史消息
const response = await fetchChatList(currConversationId);
console.log('📋 历史消息响应:', response);
// console.log('📋 历史消息响应:', response);
if (response && (response as any).data) {
const { data: historyMessages } = response as any;
@@ -226,7 +226,7 @@ export default function Chat() {
});
});
console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
// console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
setChatList(newChatList);
} else {
console.warn('⚠️ 获取历史消息失败或无数据');
@@ -251,7 +251,7 @@ export default function Chat() {
* 处理会话ID变化
*/
const handleConversationIdChange = (id: string) => {
console.log('🔄 会话ID变化:', { id, currentId: currConversationId });
// console.log('🔄 会话ID变化:', { id, currentId: currConversationId });
if (id === '-1') {
createNewChat();
@@ -352,7 +352,7 @@ export default function Chat() {
* 处理会话删除后的状态更新
*/
const handleConversationDeleted = (conversationId: string) => {
console.log('🗑️ 处理会话删除后的状态更新:', conversationId);
// console.log('🗑️ 处理会话删除后的状态更新:', conversationId);
// 如果删除的是当前会话，切换到新会话
if (conversationId === currConversationId) {
@@ -362,19 +362,19 @@ export default function Chat() {
// 从列表中移除会话
removeConversationFromList(conversationId);
console.log('✅ 会话删除状态更新完成:', conversationId);
// console.log('✅ 会话删除状态更新完成:', conversationId);
};
/**
* 处理会话重命名后的状态更新
*/
const handleConversationRenamed = (conversationId: string, newName: string) => {
console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });
// console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });
// 更新本地会话列表中的名称
updateConversationInList(conversationId, { name: newName });
console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
// console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
};
/**
@@ -397,7 +397,7 @@ export default function Chat() {
fetchAppParams()
]);
console.log('📋 获取到的数据:', { conversationData, appParams });
// console.log('📋 获取到的数据:', { conversationData, appParams });
// 处理会话数据
const conversations = (conversationData as any).data || [];
@@ -410,8 +410,8 @@ export default function Chat() {
const _conversationId = getConversationIdFromStorage(CHAT_CONFIG.APP_ID);
const isNotNewConversation = conversations.some((item: ConversationItem) => item.id === _conversationId);
console.log('💾 本地存储的会话ID:', _conversationId);
console.log('🔍 是否为已存在的会话:', isNotNewConversation);
// console.log('💾 本地存储的会话ID:', _conversationId);
// console.log('🔍 是否为已存在的会话:', isNotNewConversation);
// 获取新会话信息
const { user_input_form, opening_statement: introduction } = (appParams as any).data || {};
@@ -432,7 +432,7 @@ export default function Chat() {
// 如果存在有效的会话ID，则设置为当前会话
if (isNotNewConversation) {
console.log('🎯 设置当前会话ID:', _conversationId);
// console.log('🎯 设置当前会话ID:', _conversationId);
setCurrConversationId(_conversationId, CHAT_CONFIG.APP_ID, false);
} else {
// 如果localStorage为空或会话不存在，自动创建新会话
app/components/layout/Layout.tsx
+3 -2
View File
@@ -6,7 +6,7 @@ import { useMatches, useLocation } from '@remix-run/react';
import type { UserRole } from '~/root';
// 定义应用模块类型
type AppModule = 'contract' | 'record' | 'model';
type AppModule = 'contract' | 'record' | 'model' | '';
// 应用模块与reviewType的映射
const REVIEW_TYPE_TO_APP: Record<string, AppModule> = {
@@ -34,7 +34,7 @@ interface Match {
export function Layout({ children, userRole = 'developer' }: LayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [selectedApp, setSelectedApp] = useState<AppModule>('contract');
const [selectedApp, setSelectedApp] = useState<AppModule>('');
const matches = useMatches() as Match[];
const location = useLocation();
@@ -102,6 +102,7 @@ export function Layout({ children, userRole = 'developer' }: LayoutProps) {
return (
<div className="layout-container">
{/* 侧边栏始终保留，不再使用条件渲染 */}
<Sidebar
collapsed={sidebarCollapsed}
onToggle={toggleSidebar}
app/components/layout/Sidebar.tsx
+137 -72
View File
@@ -40,24 +40,42 @@ const APP_ICON_MAP: Record<string, string> = {
'model': 'ri-robot-2-fill'
};
export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract' }: SidebarProps) {
export function Sidebar({ onToggle, collapsed, userRole, selectedApp = '' }: SidebarProps) {
const location = useLocation();
const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
const [currentApp, setCurrentApp] = useState<string>(selectedApp);
const [currentApp, setCurrentApp] = useState<string>(''); // 初始设置为空字符串而不是selectedApp
const [isLoading, setIsLoading] = useState<boolean>(true); // 添加加载状态
const navigate = useNavigate();
// 组件挂载后从 sessionStorage 读取初始 reviewType
useEffect(() => {
let mounted = true;
setIsLoading(true); // 设置加载状态
try {
const reviewType = sessionStorage.getItem('reviewType');
// console.log('初始 reviewType:', reviewType);
if (reviewType) {
if (reviewType && mounted) {
setCurrentApp(reviewType);
} else if (selectedApp && mounted) {
// 如果没有reviewType，但有selectedApp，使用selectedApp
setCurrentApp(selectedApp);
}
} catch (error) {
console.error('读取 reviewType 失败:', error);
} finally {
// 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
setTimeout(() => {
if (mounted) {
setIsLoading(false); // 数据加载完成
}
}, 0);
}
}, []);
return () => {
mounted = false;
};
}, [selectedApp]);
// 从 sessionStorage 获取 reviewType 并设置当前应用模块
useEffect(() => {
@@ -78,23 +96,44 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
// 监听路由变化，重新检查 reviewType
useEffect(() => {
let mounted = true;
try {
const reviewType = sessionStorage.getItem('reviewType');
// console.log('路由变化, 检查 reviewType:', reviewType, '路径:', location.pathname);
if (reviewType) {
// 只有当reviewType变化时才设置加载状态和更新currentApp
if (reviewType && reviewType !== currentApp && mounted) {
setIsLoading(true); // 路由变化时设置加载状态
setCurrentApp(reviewType);
// 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
setTimeout(() => {
if (mounted) {
setIsLoading(false);
}
}, 0);
}
} catch (error) {
console.error('路由变化时读取 reviewType 失败:', error);
if (mounted) {
setIsLoading(false);
}
}
}, [location.pathname]);
return () => {
mounted = false;
};
}, [location.pathname, currentApp]);
// 监听 selectedApp 属性变化
useEffect(() => {
if (selectedApp) {
if (selectedApp && selectedApp !== currentApp) {
setIsLoading(true); // 设置加载状态
setCurrentApp(selectedApp);
// 使用setTimeout确保状态在DOM更新后再变化，避免闪烁
setTimeout(() => {
setIsLoading(false); // 数据加载完成
}, 0);
}
}, [selectedApp]);
}, [selectedApp, currentApp]);
const menuItems: MenuItem[] = [
{
@@ -270,6 +309,7 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
// 获取当前应用模式下应显示的菜单ID列表
const visibleMenuIds = APP_MENU_MAP[currentApp as keyof typeof APP_MENU_MAP] || APP_MENU_MAP['contract'];
// const visibleMenuIds = APP_MENU_MAP[currentApp as keyof typeof APP_MENU_MAP]
// console.log('当前应用模式:', currentApp, '可见菜单ID:', visibleMenuIds);
// 根据用户角色和当前应用模式过滤菜单项
@@ -319,80 +359,105 @@ export function Sidebar({ onToggle, collapsed, userRole, selectedApp = 'contract
{!collapsed && (
<div className="px-4 py-3 border-b border-gray-100">
<div className="flex items-center text-green-700">
<i className={`${APP_ICON_MAP[currentApp] || 'ri-file-list-2-fill'} mr-2 text-xl`}></i>
<span className="font-medium">{APP_NAME_MAP[currentApp] || '合同管理'}</span>
{isLoading ? (
// 加载中状态，只显示加载图标，保留布局
<div className="flex items-center">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-700 mr-2"></div>
<span className="font-medium text-gray-500">加载中...</span>
</div>
) : (
<>
<i className={`${APP_ICON_MAP[currentApp] || ''} mr-2 text-xl`}></i>
<span className="font-medium">{APP_NAME_MAP[currentApp] || ''}</span>
</>
)}
</div>
</div>
)}
<div className="py-4 px-[10px]">
{filteredMenuItems.map((item) => (
<div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
{!item.children ? (
<Link
to={item.path}
className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
onClick={(e) => {
// 只阻止冒泡，不阻止默认行为
e.stopPropagation();
// console.log('单级菜单点击:', item.title, '路径:', item.path);
}}
>
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{item.title}</span>}
</Link>
) : (
<>
<div
className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer z-10`}
{isLoading ? (
// 加载中状态显示，保留菜单布局结构
<div className="py-2">
{Array(5).fill(0).map((_, index) => (
<div key={index} className="sidebar-menu-item-skeleton mb-2">
<div className="flex items-center">
<div className="bg-gray-200 rounded-md h-5 w-5 mr-3 animate-pulse"></div>
{!collapsed && <div className="bg-gray-200 rounded-md h-4 w-24 animate-pulse"></div>}
</div>
</div>
))}
</div>
) : (
// 数据加载完成后显示菜单
filteredMenuItems.map((item) => (
<div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
{!item.children ? (
<Link
to={item.path}
className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
onClick={(e) => {
// console.log('%c父菜单点击 ===> ', 'background: #722ed1; color: white; padding: 2px 4px; border-radius: 2px;', item.title);
toggleMenu(item.id, e);
}}
role="button"
tabIndex={0}
aria-expanded={expandedMenus[item.id] || false}
aria-controls={`submenu-${item.id}`}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleMenu(item.id, e as unknown as React.MouseEvent);
}
// 只阻止冒泡，不阻止默认行为
e.stopPropagation();
// console.log('单级菜单点击:', item.title, '路径:', item.path);
}}
>
<div className="flex items-center">
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{item.title}</span>}
</div>
{!collapsed && (
<i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
)}
</div>
{(expandedMenus[item.id] || collapsed) && (
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{item.title}</span>}
</Link>
) : (
<>
<div
className={`submenu-container ${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'} z-20`}
id={`submenu-${item.id}`}
className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer z-10`}
onClick={(e) => {
// console.log('%c父菜单点击 ===> ', 'background: #722ed1; color: white; padding: 2px 4px; border-radius: 2px;', item.title);
toggleMenu(item.id, e);
}}
role="button"
tabIndex={0}
aria-expanded={expandedMenus[item.id] || false}
aria-controls={`submenu-${item.id}`}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleMenu(item.id, e as unknown as React.MouseEvent);
}
}}
>
{item.children
.filter(child => !child.requiredRole || child.requiredRole === userRole)
.map((child) => (
<Link
key={child.id}
to={child.path}
className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
onClick={(e) => handleSubMenuClick(child, e)}
>
<i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{child.title}</span>}
</Link>
))}
<div className="flex items-center">
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{item.title}</span>}
</div>
{!collapsed && (
<i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
)}
</div>
)}
</>
)}
</div>
))}
{(expandedMenus[item.id] || collapsed) && (
<div
className={`submenu-container ${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'} z-20`}
id={`submenu-${item.id}`}
>
{item.children
.filter(child => !child.requiredRole || child.requiredRole === userRole)
.map((child) => (
<Link
key={child.id}
to={child.path}
className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
onClick={(e) => handleSubMenuClick(child, e)}
>
<i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
{!collapsed && <span>{child.title}</span>}
</Link>
))}
</div>
)}
</>
)}
</div>
))
)}
</div>
</div>
);
app/components/rules/new/ReviewSettings.tsx
+2 -2
View File
@@ -1564,8 +1564,8 @@ export function ReviewSettings({
}}
>
<option value="deepseek">DeepSeek</option>
<option value="qwen72b">Qwen72B-VL</option>
<option value="qwen14b">Qwen14B</option>
{/* <option value="qwen72b">Qwen72B-VL</option> */}
{/* <option value="qwen14b">Qwen14B</option> */}
</select>
</div>
<div>
app/components/ui/SkeletonScreen.tsx
+128
View File
@@ -0,0 +1,128 @@
// import React from 'react';
interface SkeletonBarProps {
width?: string;
height?: string;
className?: string;
}
// 基础骨架条
export function SkeletonBar({ width = 'w-full', height = 'h-5', className = '' }: SkeletonBarProps) {
return (
<div className={`${width} ${height} bg-gray-200 rounded-md animate-pulse ${className}`}></div>
);
}
// 通用骨架屏
export function SkeletonScreen() {
return (
<div className="flex flex-col gap-4">
<SkeletonBar height="h-10" />
<SkeletonBar height="h-10" />
<SkeletonBar height="h-10" />
</div>
);
}
// 数字统计骨架
export function NumberSkeleton({ className = '' }: { className?: string }) {
return (
<SkeletonBar width="w-12" height="h-5" className={className} />
);
}
// 表格行骨架屏
interface TableRowSkeletonProps {
count?: number;
className?: string;
}
export function TableRowSkeleton({ count = 5, className = '' }: TableRowSkeletonProps) {
return (
<div className={`py-2 ${className}`}>
{Array(count).fill(0).map((_, index) => (
<div key={index} className="flex items-center p-4 border-b border-gray-100">
<div className="w-[30%] flex">
<SkeletonBar width="w-10" height="h-10" />
<div className="ml-2">
<SkeletonBar width="w-48" className="mb-2" />
<SkeletonBar width="w-32" height="h-3" />
</div>
</div>
<div className="w-[12%]">
<SkeletonBar width="w-20" height="h-6" />
</div>
<div className="w-[12%]">
<SkeletonBar width="w-24" className="mb-1" />
<SkeletonBar width="w-16" height="h-3" />
</div>
<div className="w-[12%]">
<SkeletonBar width="w-16" height="h-5" className="mb-1" />
<SkeletonBar width="w-16" height="h-5" />
</div>
<div className="w-[20%]">
<SkeletonBar width="w-32" className="mb-1" />
<SkeletonBar width="w-24" />
</div>
<div className="w-[14%]">
<SkeletonBar width="w-16" height="h-8" />
</div>
</div>
))}
</div>
);
}
// 自定义列宽的表格行骨架屏
interface CustomTableRowSkeletonProps {
count?: number;
columns: Array<{
width: string;
rows?: Array<{
width: string;
height?: string;
className?: string;
}>;
}>;
className?: string;
}
export function CustomTableRowSkeleton({ count = 5, columns, className = '' }: CustomTableRowSkeletonProps) {
return (
<div className={`py-2 ${className}`}>
{Array(count).fill(0).map((_, rowIndex) => (
<div key={rowIndex} className="flex items-center p-4 border-b border-gray-100">
{columns.map((column, colIndex) => (
<div key={colIndex} className={`${column.width}`}>
{column.rows ? (
column.rows.map((row, rowIdx) => (
<SkeletonBar
key={rowIdx}
width={row.width}
height={row.height || 'h-4'}
className={`${rowIdx < column.rows!.length - 1 ? 'mb-1' : ''} ${row.className || ''}`}
/>
))
) : (
<SkeletonBar width="w-full" />
)}
</div>
))}
</div>
))}
</div>
);
}
// 加载指示器
export function LoadingIndicator({ text = '正在加载数据...' }: { text?: string }) {
return (
<div className="py-4 flex justify-center items-center">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-green-700 mr-2"></div>
<span className="text-sm text-gray-500">{text}</span>
</div>
);
}
app/routes/_index.tsx
+39 -42
View File
@@ -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
+25 -7
View File
@@ -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
+4 -4
View File
@@ -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
+19 -8
View File
@@ -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
+138 -103
View File
@@ -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}
app/styles/pages/home.css
+16 -15
View File
@@ -81,17 +81,27 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1rem;
padding-bottom: 0;
margin-bottom: 0;
background-color: #f0f7f4;
background-image: url('/images/主页背景-min.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.index-main-content-container {
padding: 2rem 0;
margin: 0 auto;
width: 90%;
max-width: 1200px;
transform: translateY(-7rem);
}
.welcome-text {
font-size: 1.75rem;
font-weight: 500;
color: #333;
margin-bottom: 3rem;
margin-bottom: 5rem;
text-align: center;
}
@@ -110,13 +120,14 @@
background: linear-gradient(to bottom, #ebebeb, #ffffff);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
cursor: pointer;
border: 1px solid transparent;
}
.module-card:hover {
transform: translateY(-5px);
border: 1px solid #269b6c;
border-color: #269b6c;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
@@ -139,16 +150,6 @@
color: #333;
}
/* 底部山水背景 */
.footer {
height: 200px;
margin: 1rem;
margin-top: 0;
overflow: hidden;
position: relative;
background-color: #f0f7f4;
border-radius: 0 0 0.5rem 0.5rem;
}
.mountains-bg {
position: absolute;
app/styles/pages/login.css
+4 -1
View File
@@ -4,7 +4,10 @@
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f0f7f4 0%, #c5e8e0 100%);
background-image: url('/images/登录页背景-min.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.login-container {
package-lock.json
Generated
+3 -1
View File
@@ -34,6 +34,7 @@
"react-dom": "^18.2.0",
"react-pdf": "^5.7.2",
"remixicon": "^4.6.0",
"tslib": "^2.8.1",
"uuid": "^11.1.0"
},
"devDependencies": {
@@ -14660,7 +14661,8 @@
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/turbo-stream": {
"version": "2.4.0",
package.json
+1
View File
@@ -39,6 +39,7 @@
"react-dom": "^18.2.0",
"react-pdf": "^5.7.2",
"remixicon": "^4.6.0",
"tslib": "^2.8.1",
"uuid": "^11.1.0"
},
"devDependencies": {
public/images/主页背景-min.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 498 KiB

public/images/登录页背景-min.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB