删除所有console.log输出,优化评查结果的表格的显示,添加新的页码获取逻辑

This commit is contained in:
2025-06-02 18:55:00 +08:00
parent 820baa5b22
commit b02978508d
71 changed files with 862 additions and 572 deletions
+4 -1
View File
@@ -3,9 +3,11 @@ import { Sidebar } from './Sidebar';
// import { Header } from './Header';
import { Breadcrumb } from './Breadcrumb';
import { useMatches, useLocation } from '@remix-run/react';
import type { UserRole } from '~/root';
interface LayoutProps {
children: React.ReactNode;
userRole?: UserRole;
}
// 添加一个接口表示路由handle可能包含的属性
@@ -20,7 +22,7 @@ interface Match {
data: unknown;
}
export function Layout({ children }: LayoutProps) {
export function Layout({ children, userRole = 'developer' }: LayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const matches = useMatches() as Match[];
const location = useLocation();
@@ -58,6 +60,7 @@ export function Layout({ children }: LayoutProps) {
<Sidebar
collapsed={sidebarCollapsed}
onToggle={toggleSidebar}
userRole={userRole}
/>
<div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+32 -14
View File
@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { Link, useLocation } from '@remix-run/react';
import type { UserRole } from '~/root';
interface MenuItem {
id: string;
@@ -7,15 +8,17 @@ interface MenuItem {
path: string;
icon: string;
hideBreadcrumb?: boolean;
requiredRole?: UserRole;
children?: MenuItem[];
}
interface SidebarProps {
onToggle: () => void;
collapsed: boolean;
userRole: UserRole;
}
export function Sidebar({ onToggle, collapsed }: SidebarProps) {
export function Sidebar({ onToggle, collapsed, userRole }: SidebarProps) {
const location = useLocation();
const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
@@ -109,12 +112,14 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
title: '系统设置',
path: '/settings',
icon: 'ri-settings-4-line',
requiredRole: 'developer',
children: [
{
id: 'config-lists',
title: '配置列表',
path: '/config-lists',
icon: 'ri-list-check-3'
icon: 'ri-list-check-3',
requiredRole: 'developer'
},
// {
// id: 'basic-settings',
@@ -126,13 +131,15 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
id: 'document-types',
title: '文档类型',
path: '/document-types',
icon: 'ri-file-list-line'
icon: 'ri-file-list-line',
requiredRole: 'developer'
},
{
id: 'prompt-management',
title: '提示词管理',
path: '/prompts',
icon: 'ri-chat-1-line'
icon: 'ri-chat-1-line',
requiredRole: 'developer'
}
]
}
@@ -150,11 +157,10 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
}, []);
const toggleMenu = (id: string, e: React.MouseEvent) => {
// 防止事件冒泡默认行为
e.preventDefault();
// 我们只防止事件冒泡,不阻止默认行为
e.stopPropagation();
// console.log('%c父菜单展开/折叠 ===> ', 'background: #f5222d; color: white; padding: 2px 4px; border-radius: 2px;', id);
// console.log('父菜单展开/折叠:', id);
setExpandedMenus(prev => ({
...prev,
@@ -168,18 +174,27 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
// 处理侧边栏切换事件
const handleToggleSidebar = (e: React.MouseEvent) => {
// console.log('%c侧边栏折叠/展开 ===> ', 'background: #1890ff; color: white; padding: 2px 4px; border-radius: 2px;');
e.preventDefault();
// console.log('侧边栏折叠/展开');
// 只防止事件冒泡,不阻止默认行为
e.stopPropagation();
onToggle();
};
// 处理子菜单项点击事件
const handleSubMenuClick = (child: MenuItem, e: React.MouseEvent) => {
// 需要阻止冒泡,否则会触发父级菜单的展开/折叠事件
// 需要阻止冒泡,不阻止默认行为
e.stopPropagation();
// console.log('%c子菜单点击 ===> ', 'background: #00684a; color: white; padding: 2px 4px; border-radius: 2px;', child.title, '路径:', child.path);
// console.log('子菜单点击:', child.title, '路径:', child.path);
};
// 根据用户角色过滤菜单项
const filteredMenuItems = menuItems.filter(item => {
// 如果菜单项需要特定角色但用户没有
if (item.requiredRole && item.requiredRole !== userRole) {
return false;
}
return true;
});
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
@@ -211,15 +226,16 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
)} */}
<div className="py-4 px-[10px]">
{menuItems.map((item) => (
{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('%c单级菜单点击 ===> ', 'background: #52c41a; color: white; padding: 2px 4px; border-radius: 2px;', item.title, '路径:', item.path);
// console.log('单级菜单点击:', item.title, '路径:', item.path);
}}
>
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
@@ -258,7 +274,9 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
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.map((child) => (
{item.children
.filter(child => !child.requiredRole || child.requiredRole === userRole)
.map((child) => (
<Link
key={child.id}
to={child.path}