完成评查点分组列表和评查点列表的页面，封装部分组件，重新构造样式文件结构
This commit is contained in:
@@ -34,7 +34,7 @@ export function Layout({ children }: LayoutProps) {
|
||||
<div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
|
||||
{/* <Header username="系统管理员" /> */}
|
||||
<div className="content-container">
|
||||
<Breadcrumb className="px-6 pt-4" />
|
||||
<Breadcrumb />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,17 +58,23 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
icon: 'ri-folder-open-line'
|
||||
},
|
||||
{
|
||||
id: 'rule-list',
|
||||
id: 'rules-list',
|
||||
title: '评查点列表',
|
||||
path: '/rules',
|
||||
icon: 'ri-list-check-3'
|
||||
},
|
||||
// {
|
||||
// id: 'rule-new',
|
||||
// title: '新增评查点',
|
||||
// path: '/rules/new',
|
||||
// icon: 'ri-add-circle-line'
|
||||
// }
|
||||
{
|
||||
id: 'rules-file',
|
||||
title: '评查文件列表',
|
||||
path: '/rules/files',
|
||||
icon: 'ri-list-check-2'
|
||||
},
|
||||
{
|
||||
id: 'rule-new',
|
||||
title: '新增评查点',
|
||||
path: '/rules/new',
|
||||
icon: 'ri-add-circle-line'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -125,9 +131,12 @@ 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);
|
||||
|
||||
setExpandedMenus(prev => ({
|
||||
...prev,
|
||||
[id]: !prev[id]
|
||||
@@ -140,11 +149,19 @@ 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();
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
|
||||
<div className="py-6 px-4 border-b border-gray-100 flex justify-between items-center">
|
||||
@@ -181,6 +198,10 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
<i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
|
||||
{!collapsed && <span>{item.title}</span>}
|
||||
@@ -188,8 +209,11 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer`}
|
||||
onClick={(e) => toggleMenu(item.id, e)}
|
||||
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}
|
||||
@@ -212,7 +236,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
|
||||
{(expandedMenus[item.id] || collapsed) && (
|
||||
<div
|
||||
className={`${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'}`}
|
||||
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) => (
|
||||
@@ -220,6 +244,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
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>}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
// app/components/ui/Modal.tsx
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
width?: number | string;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, title, children, footer, width = 500 }: ModalProps) {
|
||||
// 点击ESC键关闭模态框
|
||||
useEffect(() => {
|
||||
const handleEsc = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
return () => window.removeEventListener('keydown', handleEsc);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// 禁用背景滚动
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-backdrop"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{ maxWidth: typeof width === 'number' ? `${width}px` : width }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h3 className="text-lg font-medium">{title}</h3>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-500"
|
||||
onClick={onClose}
|
||||
aria-label="关闭"
|
||||
>
|
||||
<i className="ri-close-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body py-4">
|
||||
{children}
|
||||
</div>
|
||||
{footer && (
|
||||
<div className="modal-footer flex justify-end space-x-2 pt-4 border-t border-gray-100">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
// app/components/ui/Pagination.tsx
|
||||
import React from 'react';
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
total: number;
|
||||
pageSize: number;
|
||||
onChange: (page: number) => void;
|
||||
onPageSizeChange?: (pageSize: number) => void;
|
||||
pageSizeOptions?: number[];
|
||||
}
|
||||
|
||||
export function Pagination({
|
||||
currentPage,
|
||||
total,
|
||||
pageSize,
|
||||
onChange,
|
||||
onPageSizeChange,
|
||||
pageSizeOptions = [10, 20, 50]
|
||||
}: PaginationProps) {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
// 生成页码数组
|
||||
const getPageNumbers = () => {
|
||||
const pages = [];
|
||||
const maxVisiblePages = 5;
|
||||
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
// 总页数小于等于最大可见页数，显示所有页码
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else if (currentPage <= 3) {
|
||||
// 当前页靠近开始
|
||||
for (let i = 1; i <= maxVisiblePages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
// 当前页靠近结尾
|
||||
for (let i = totalPages - maxVisiblePages + 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页在中间
|
||||
for (let i = currentPage - 2; i <= currentPage + 2; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center p-4">
|
||||
{onPageSizeChange && (
|
||||
<div className="ant-pagination-options">
|
||||
<span className="text-sm mr-2">共 {total} 条</span>
|
||||
<select
|
||||
className="form-select ant-pagination-options-size-changer"
|
||||
value={pageSize}
|
||||
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
||||
>
|
||||
{pageSizeOptions.map(size => (
|
||||
<option key={size} value={size}>{size} 条/页</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="ant-pagination">
|
||||
<button
|
||||
className={`ant-pagination-item ant-pagination-prev ${currentPage <= 1 ? 'ant-pagination-disabled' : ''}`}
|
||||
onClick={() => currentPage > 1 && onChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
aria-label="上一页"
|
||||
>
|
||||
<i className="ri-arrow-left-s-line"></i>
|
||||
</button>
|
||||
|
||||
{getPageNumbers().map(page => (
|
||||
<button
|
||||
key={page}
|
||||
className={`ant-pagination-item ${page === currentPage ? 'ant-pagination-item-active' : ''}`}
|
||||
onClick={() => onChange(page)}
|
||||
aria-label={`第${page}页`}
|
||||
aria-current={page === currentPage ? 'page' : undefined}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
className={`ant-pagination-item ant-pagination-next ${currentPage >= totalPages ? 'ant-pagination-disabled' : ''}`}
|
||||
onClick={() => currentPage < totalPages && onChange(currentPage + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
aria-label="下一页"
|
||||
>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Button } from './Button';
|
||||
|
||||
interface SearchBoxProps {
|
||||
placeholder?: string;
|
||||
defaultValue?: string;
|
||||
onSearch: (value: string) => void;
|
||||
buttonText?: string;
|
||||
className?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export function SearchBox({
|
||||
placeholder = '请输入搜索内容',
|
||||
defaultValue = '',
|
||||
onSearch,
|
||||
buttonText = '搜索',
|
||||
className = '',
|
||||
name = 'keyword'
|
||||
}: SearchBoxProps) {
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const value = formData.get(name) as string;
|
||||
onSearch(value);
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// 对于没有按钮的输入框，我们希望在输入时就触发搜索
|
||||
if (className.includes('form-input-only')) {
|
||||
onSearch(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={`search-box ${className}`}>
|
||||
<input
|
||||
type="text"
|
||||
id={name}
|
||||
name={name}
|
||||
className={className.includes('form-input-only') ? "form-input" : "form-input rounded-r-none"}
|
||||
placeholder={placeholder}
|
||||
defaultValue={defaultValue}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{buttonText && !className.includes('form-input-only') && (
|
||||
<Button type="primary" icon="ri-search-line" className="rounded-l-none">
|
||||
{buttonText}
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
type StatusType = 'success' | 'error' | 'warning' | 'default' | 'processing';
|
||||
|
||||
interface StatusDotProps {
|
||||
status: StatusType | boolean;
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StatusDot({
|
||||
status,
|
||||
text,
|
||||
className = ''
|
||||
}: StatusDotProps) {
|
||||
// 如果status是布尔值，则转换为对应的状态类型
|
||||
const statusType = typeof status === 'boolean'
|
||||
? (status ? 'success' : 'default')
|
||||
: status;
|
||||
|
||||
// 如果没有提供文本，则根据状态类型提供默认文本
|
||||
const statusText = text ?? (
|
||||
statusType === 'success' ? '启用' :
|
||||
statusType === 'error' ? '禁用' :
|
||||
statusType === 'warning' ? '警告' :
|
||||
statusType === 'processing' ? '处理中' : '未知'
|
||||
);
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center ${className}`}>
|
||||
<i className={`status-dot status-dot-${statusType}`}></i>
|
||||
{statusText}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -3,58 +3,15 @@ import React from 'react';
|
||||
export type TagColor = 'blue' | 'green' | 'cyan' | 'purple' | 'orange' | 'red' | 'default';
|
||||
|
||||
interface TagProps {
|
||||
children: React.ReactNode;
|
||||
color?: TagColor;
|
||||
closable?: boolean;
|
||||
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Tag({
|
||||
children,
|
||||
color = 'default',
|
||||
closable = false,
|
||||
onClose,
|
||||
className = '',
|
||||
}: TagProps) {
|
||||
const baseClasses = 'ant-tag';
|
||||
|
||||
const colorClasses = {
|
||||
default: '',
|
||||
blue: 'ant-tag-blue',
|
||||
green: 'ant-tag-green',
|
||||
cyan: 'ant-tag-cyan',
|
||||
purple: 'ant-tag-purple',
|
||||
orange: 'ant-tag-orange',
|
||||
red: 'ant-tag-red'
|
||||
};
|
||||
|
||||
const classes = [
|
||||
baseClasses,
|
||||
colorClasses[color],
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClose?.(e as unknown as React.MouseEvent<HTMLElement>);
|
||||
}
|
||||
};
|
||||
|
||||
export function Tag({ color = 'default', children, className = '' }: TagProps) {
|
||||
return (
|
||||
<span className={classes}>
|
||||
<span className={`ant-tag ant-tag-${color} ${className}`}>
|
||||
{children}
|
||||
{closable && (
|
||||
<i
|
||||
className="ri-close-line ml-1 cursor-pointer text-opacity-60 hover:text-opacity-100"
|
||||
onClick={onClose}
|
||||
onKeyDown={handleKeyDown}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="关闭标签"
|
||||
></i>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
+8
-8
@@ -22,14 +22,14 @@ export interface Rule {
|
||||
}
|
||||
|
||||
export interface RuleGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
orderIndex: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
id: string; // 分组ID
|
||||
name: string; // 分组名称
|
||||
code: string; // 分组编码
|
||||
description: string; // 分组描述
|
||||
status: 'active' | 'inactive'; // 分组状态
|
||||
sortOrder: number; // 排序顺序
|
||||
createdAt: string; // 创建时间
|
||||
updatedAt: string; // 更新时间
|
||||
}
|
||||
|
||||
export const RULE_TYPE_LABELS: Record<RuleType, string> = {
|
||||
|
||||
+4
-2
@@ -13,7 +13,8 @@ import {
|
||||
import { Layout } from "~/components/layout/Layout";
|
||||
import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
|
||||
import "remixicon/fonts/remixicon.css";
|
||||
// 不使用import导入样式
|
||||
// 导入样式
|
||||
import styles from "~/styles/main.css?url";
|
||||
|
||||
// 添加客户端hydration错误处理
|
||||
// if (typeof window !== "undefined") {
|
||||
@@ -38,9 +39,10 @@ export const meta: MetaFunction = () => {
|
||||
];
|
||||
};
|
||||
|
||||
// 使用links函数为应用加载CSS和其他资源
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: "/tailwind.css" }, // 使用构建后的Tailwind CSS
|
||||
{ rel: "stylesheet", href: styles },
|
||||
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
||||
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
|
||||
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Card } from "~/components/ui/Card";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: "/app/styles/index.css" }
|
||||
{ rel: "stylesheet", href: "app/styles/pages/home.css" }
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { MetaFunction } from '@remix-run/node';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "文件上传 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "上传文件进行智能评查" }
|
||||
];
|
||||
};
|
||||
|
||||
export default function FilesNew() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* 页面标识 */}
|
||||
<div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
|
||||
<h3 className="font-bold text-lg">当前页面: 文件上传 (files/new.tsx)</h3>
|
||||
<p>如果你看到这个提示，说明你正在浏览文件上传页面，路由已成功加载。</p>
|
||||
<div className="mt-2">
|
||||
<a href="/" className="text-blue-600 hover:underline">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card title="文件上传" icon="ri-upload-cloud-line" className="mt-6">
|
||||
<div className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
|
||||
<i className="ri-upload-cloud-line text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-lg mb-4">拖拽文件到此处或点击上传</p>
|
||||
<Button type="primary" icon="ri-upload-line">选择文件</Button>
|
||||
<p className="text-gray-500 mt-3">支持 PDF、DOC、DOCX、XLS、XLSX 等格式</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { json, redirect, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
|
||||
import { Form, useLoaderData, useNavigation, useActionData } from "@remix-run/react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export const meta: MetaFunction = ({ data }) => {
|
||||
return [
|
||||
{ title: `编辑评查点分组 - ${data?.group?.name || '加载中'} - 中国烟草AI合同及卷宗审核系统` },
|
||||
{ name: "description", content: "编辑评查点分组信息，包括名称、编码、描述和状态" },
|
||||
];
|
||||
};
|
||||
|
||||
// 模拟数据
|
||||
const MOCK_GROUPS = [
|
||||
{
|
||||
id: "1",
|
||||
name: "合同条款类",
|
||||
code: "CONTRACT",
|
||||
description: "关于合同条款的评查点分组",
|
||||
status: "active",
|
||||
sortOrder: 1,
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "合规性类",
|
||||
code: "COMPLIANCE",
|
||||
description: "关于合规性的评查点分组",
|
||||
status: "active",
|
||||
sortOrder: 2,
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "风险提示类",
|
||||
code: "RISK",
|
||||
description: "关于风险提示的评查点分组",
|
||||
status: "inactive",
|
||||
sortOrder: 3,
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
];
|
||||
|
||||
export async function loader({ params }: LoaderFunctionArgs) {
|
||||
const { groupId } = params;
|
||||
|
||||
// 真实环境中，这里会调用API获取数据
|
||||
// const response = await fetch(`${process.env.API_URL}/api/rule-groups/${groupId}`);
|
||||
// if (response.status === 404) {
|
||||
// throw new Response("评查点分组不存在", { status: 404 });
|
||||
// }
|
||||
// if (!response.ok) {
|
||||
// throw new Response("获取评查点分组失败", { status: response.status });
|
||||
// }
|
||||
// const group = await response.json();
|
||||
|
||||
// 使用模拟数据
|
||||
const group = MOCK_GROUPS.find(g => g.id === groupId);
|
||||
if (!group) {
|
||||
throw new Response("评查点分组不存在", { status: 404 });
|
||||
}
|
||||
|
||||
return json({ group });
|
||||
}
|
||||
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
const formData = await request.formData();
|
||||
const groupId = params.groupId;
|
||||
|
||||
const name = formData.get("name");
|
||||
const code = formData.get("code");
|
||||
const description = formData.get("description");
|
||||
const status = formData.get("status");
|
||||
const sortOrder = formData.get("sortOrder");
|
||||
|
||||
// 基本验证
|
||||
const errors = {};
|
||||
if (!name) errors.name = "分组名称不能为空";
|
||||
if (!code) errors.code = "分组编码不能为空";
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json({ errors, values: Object.fromEntries(formData) });
|
||||
}
|
||||
|
||||
// 构建更新数据
|
||||
const updateData = {
|
||||
name,
|
||||
code,
|
||||
description,
|
||||
status,
|
||||
sortOrder: Number(sortOrder) || 0,
|
||||
};
|
||||
|
||||
// 真实环境中，这里会调用API更新数据
|
||||
// const response = await fetch(`${process.env.API_URL}/api/rule-groups/${groupId}`, {
|
||||
// method: "PUT",
|
||||
// headers: { "Content-Type": "application/json" },
|
||||
// body: JSON.stringify(updateData),
|
||||
// });
|
||||
//
|
||||
// if (!response.ok) {
|
||||
// throw new Response("更新评查点分组失败", { status: response.status });
|
||||
// }
|
||||
|
||||
// 模拟更新成功
|
||||
console.log('保存分组数据:', { id: groupId, ...updateData });
|
||||
|
||||
// 重定向回列表页
|
||||
return redirect('/rule-groups');
|
||||
}
|
||||
|
||||
export default function EditRuleGroup() {
|
||||
const { group } = useLoaderData<typeof loader>();
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: group.name,
|
||||
code: group.code,
|
||||
description: group.description || "",
|
||||
status: group.status,
|
||||
sortOrder: group.sortOrder.toString(),
|
||||
});
|
||||
|
||||
// 当actionData中有错误时，保留用户输入的值
|
||||
useEffect(() => {
|
||||
if (actionData?.values) {
|
||||
setFormData({
|
||||
name: actionData.values.name,
|
||||
code: actionData.values.code,
|
||||
description: actionData.values.description || "",
|
||||
status: actionData.values.status,
|
||||
sortOrder: actionData.values.sortOrder,
|
||||
});
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="edit-rule-group">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-medium">编辑评查点分组</h1>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<Form method="post" className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组名称 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={`w-full h-10 px-3 border ${actionData?.errors?.name ? 'border-red-500' : 'border-gray-300'} rounded-md focus:border-primary focus:ring-1 focus:ring-primary`}
|
||||
placeholder="请输入分组名称"
|
||||
/>
|
||||
{actionData?.errors?.name && (
|
||||
<p className="mt-1 text-sm text-red-500">{actionData.errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="code" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组编码 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="code"
|
||||
name="code"
|
||||
value={formData.code}
|
||||
onChange={handleChange}
|
||||
className={`w-full h-10 px-3 border ${actionData?.errors?.code ? 'border-red-500' : 'border-gray-300'} rounded-md focus:border-primary focus:ring-1 focus:ring-primary`}
|
||||
placeholder="请输入分组编码"
|
||||
/>
|
||||
{actionData?.errors?.code && (
|
||||
<p className="mt-1 text-sm text-red-500">{actionData.errors.code}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组描述
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
placeholder="请输入分组描述"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
状态
|
||||
</label>
|
||||
<select
|
||||
id="status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
>
|
||||
<option value="active">启用</option>
|
||||
<option value="inactive">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="sortOrder" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
排序
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="sortOrder"
|
||||
name="sortOrder"
|
||||
value={formData.sortOrder}
|
||||
onChange={handleChange}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
placeholder="请输入排序值"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-100">
|
||||
<a
|
||||
href="/rule-groups"
|
||||
className="ant-btn ant-btn-default"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.history.back();
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
className="ant-btn ant-btn-primary"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? '保存中...' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+283
-331
@@ -1,384 +1,336 @@
|
||||
import React from 'react';
|
||||
import { Link } from "@remix-run/react";
|
||||
import { json, type MetaFunction } from "@remix-run/node";
|
||||
import { useLoaderData, useNavigate } from "@remix-run/react";
|
||||
import { useLoaderData, Link, useNavigate } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import indexStyles from "~/styles/pages/rule-groups_index.css?url";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { SearchBox } from "~/components/ui/SearchBox";
|
||||
import { StatusDot } from "~/components/ui/StatusDot";
|
||||
|
||||
// import stylesUrl from "~/styles/pages/rule-groups.css";
|
||||
// 引入CSS
|
||||
// export function links() {
|
||||
// return [
|
||||
// { rel: "stylesheet", href: stylesUrl }
|
||||
// ];
|
||||
// }
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点分组列表" },
|
||||
{ name: "description", content: "评查点分组管理" }
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
// 分组接口定义
|
||||
// 定义数据类型
|
||||
interface RuleGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
ruleCount: number;
|
||||
childGroupCount: number;
|
||||
isActive: boolean;
|
||||
parentId: string | null;
|
||||
subGroupCount: number;
|
||||
status: 'active' | 'inactive';
|
||||
createdAt: string;
|
||||
level: 1 | 2; // 1-一级分组，2-二级分组
|
||||
children?: RuleGroup[];
|
||||
}
|
||||
|
||||
interface LoaderData {
|
||||
groups: RuleGroup[];
|
||||
export const handle = {
|
||||
breadcrumb: "评查点分组"
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "评查点分组 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "管理评查点分组，包括创建、编辑和删除分组" },
|
||||
];
|
||||
};
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: indexStyles }];
|
||||
}
|
||||
|
||||
// 模拟数据
|
||||
const MOCK_GROUPS: RuleGroup[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "合同基本要素检查",
|
||||
code: "contract-base",
|
||||
ruleCount: 18,
|
||||
subGroupCount: 12,
|
||||
status: "active",
|
||||
createdAt: "2023-10-01 14:30",
|
||||
children: [
|
||||
{
|
||||
id: "2",
|
||||
name: "必备要素检查",
|
||||
code: "essential-elements",
|
||||
ruleCount: 7,
|
||||
subGroupCount: 0,
|
||||
status: "active",
|
||||
createdAt: "2023-10-02 10:15",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "合同主体检查",
|
||||
code: "contract-parties",
|
||||
ruleCount: 5,
|
||||
subGroupCount: 0,
|
||||
status: "active",
|
||||
createdAt: "2023-10-03 16:20",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "销售合同专项检查",
|
||||
code: "contract-sales",
|
||||
ruleCount: 12,
|
||||
subGroupCount: 5,
|
||||
status: "active",
|
||||
createdAt: "2023-10-05 09:30",
|
||||
children: [
|
||||
{
|
||||
id: "6",
|
||||
name: "付款条件检查",
|
||||
code: "payment-terms",
|
||||
ruleCount: 5,
|
||||
subGroupCount: 0,
|
||||
status: "active",
|
||||
createdAt: "2023-10-05 14:45",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "行政处罚规范性检查",
|
||||
code: "punishment",
|
||||
ruleCount: 8,
|
||||
subGroupCount: 0,
|
||||
status: "inactive",
|
||||
createdAt: "2023-10-08 11:45",
|
||||
}
|
||||
];
|
||||
|
||||
export async function loader() {
|
||||
// 模拟数据，实际项目中应该从API获取
|
||||
const groups: RuleGroup[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "合同基本要素检查",
|
||||
code: "contract-base",
|
||||
ruleCount: 18,
|
||||
childGroupCount: 2,
|
||||
isActive: true,
|
||||
parentId: null,
|
||||
createdAt: "2023-10-01 14:30",
|
||||
level: 1
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "必备要素检查",
|
||||
code: "essential-elements",
|
||||
ruleCount: 7,
|
||||
childGroupCount: 0,
|
||||
isActive: true,
|
||||
parentId: "1",
|
||||
createdAt: "2023-10-02 10:15",
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "合同主体检查",
|
||||
code: "contract-parties",
|
||||
ruleCount: 5,
|
||||
childGroupCount: 0,
|
||||
isActive: true,
|
||||
parentId: "1",
|
||||
createdAt: "2023-10-02 11:40",
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "销售合同专项检查",
|
||||
code: "sales-contract",
|
||||
ruleCount: 10,
|
||||
childGroupCount: 2,
|
||||
isActive: true,
|
||||
parentId: null,
|
||||
createdAt: "2023-10-03 09:20",
|
||||
level: 1
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "交付条款检查",
|
||||
code: "delivery-terms",
|
||||
ruleCount: 4,
|
||||
childGroupCount: 0,
|
||||
isActive: true,
|
||||
parentId: "4",
|
||||
createdAt: "2023-10-03 14:30",
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "付款条款检查",
|
||||
code: "payment-terms",
|
||||
ruleCount: 6,
|
||||
childGroupCount: 0,
|
||||
isActive: true,
|
||||
parentId: "4",
|
||||
createdAt: "2023-10-03 15:45",
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "采购合同专项检查",
|
||||
code: "purchase-contract",
|
||||
ruleCount: 8,
|
||||
childGroupCount: 0,
|
||||
isActive: true,
|
||||
parentId: null,
|
||||
createdAt: "2023-10-04 10:15",
|
||||
level: 1
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "行政处罚规范性检查",
|
||||
code: "admin-punishment",
|
||||
ruleCount: 12,
|
||||
childGroupCount: 0,
|
||||
isActive: false,
|
||||
parentId: null,
|
||||
createdAt: "2023-10-05 16:30",
|
||||
level: 1
|
||||
}
|
||||
];
|
||||
|
||||
return json<LoaderData>({ groups });
|
||||
return json({ groups: MOCK_GROUPS });
|
||||
}
|
||||
|
||||
export default function RuleGroupsPage() {
|
||||
export default function RuleGroupsIndex() {
|
||||
const { groups } = useLoaderData<typeof loader>();
|
||||
const navigate = useNavigate();
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [groupCode, setGroupCode] = useState("");
|
||||
const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
|
||||
|
||||
// 过滤出父级分组和子级分组
|
||||
const parentGroups = groups.filter(group => group.parentId === null);
|
||||
|
||||
// 根据父级ID获取子分组
|
||||
const getChildGroups = (parentId: string) => {
|
||||
return groups.filter(group => group.parentId === parentId);
|
||||
// 处理展开/收起
|
||||
const toggleGroup = (groupId: string) => {
|
||||
setExpandedGroups(prev =>
|
||||
prev.includes(groupId)
|
||||
? prev.filter(id => id !== groupId)
|
||||
: [...prev, groupId]
|
||||
);
|
||||
};
|
||||
|
||||
// 模拟删除操作
|
||||
const handleDelete = (id: string) => {
|
||||
if (window.confirm("确定要删除该分组吗？删除后无法恢复，且会删除该分组下的所有评查点。")) {
|
||||
alert(`删除分组: ${id}`);
|
||||
}
|
||||
// 展开/收起全部
|
||||
const toggleAll = (expand: boolean) => {
|
||||
setExpandedGroups(expand ? groups.map(g => g.id) : []);
|
||||
};
|
||||
|
||||
// 创建新分组
|
||||
const handleCreate = () => {
|
||||
navigate("/rule-groups/new");
|
||||
};
|
||||
|
||||
// 展开/收起状态（实际项目中可以使用useState管理）
|
||||
const toggleExpand = (groupId: string) => {
|
||||
const childRows = document.querySelectorAll(`.child-of-${groupId}`);
|
||||
childRows.forEach(row => {
|
||||
(row as HTMLElement).style.display =
|
||||
(row as HTMLElement).style.display === "none" ? "table-row" : "none";
|
||||
});
|
||||
|
||||
// 切换图标
|
||||
const icon = document.querySelector(`span.expand-icon[data-group-id="${groupId}"] i`);
|
||||
if (icon) {
|
||||
icon.classList.toggle("ri-arrow-down-s-line");
|
||||
icon.classList.toggle("ri-arrow-right-s-line");
|
||||
// 处理删除分组
|
||||
const handleDeleteGroup = (groupId: string) => {
|
||||
if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
|
||||
console.log('删除分组ID:', groupId);
|
||||
// 实际应用中，这里会调用API删除数据
|
||||
}
|
||||
};
|
||||
|
||||
// 键盘处理器
|
||||
const handleKeyDown = (e: React.KeyboardEvent, groupId: string) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggleExpand(groupId);
|
||||
}
|
||||
// 处理搜索名称
|
||||
const handleNameSearch = (value: string) => {
|
||||
setSearchText(value);
|
||||
// 实际项目中这里可能需要调用API或过滤本地数据
|
||||
};
|
||||
|
||||
|
||||
// 处理搜索编码
|
||||
const handleCodeSearch = (value: string) => {
|
||||
setGroupCode(value);
|
||||
// 实际项目中这里可能需要调用API或过滤本地数据
|
||||
};
|
||||
|
||||
// 处理表格数据，包括父子级关系
|
||||
const processedData = groups.flatMap(group => {
|
||||
// 先添加父级分组
|
||||
const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
|
||||
{ ...group, isParent: true }
|
||||
];
|
||||
|
||||
// 如果有子级分组并且当前已展开，则添加子级分组
|
||||
if (group.children && expandedGroups.includes(group.id)) {
|
||||
group.children.forEach(child => {
|
||||
result.push({ ...child, parentId: group.id });
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* 页面标识 */}
|
||||
<div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
|
||||
<h3 className="font-bold text-lg">当前页面: 评查点分组列表 (rule-groups._index.tsx)</h3>
|
||||
<p>如果你看到这个提示，说明你已成功到达评查点分组列表页面。</p>
|
||||
<div className="mt-2">
|
||||
<a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> |
|
||||
<a href="/" className="ml-2 text-blue-600 hover:underline">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="content-container rule-groups-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-medium">评查点分组管理</h2>
|
||||
<div className="flex">
|
||||
<Button type="default" className="mr-2" icon="ri-arrow-down-s-line"
|
||||
onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "table-row")}>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-arrow-down-s-line"
|
||||
onClick={() => toggleAll(true)}
|
||||
className="mr-2"
|
||||
>
|
||||
展开全部
|
||||
</Button>
|
||||
<Button type="default" className="mr-2" icon="ri-arrow-up-s-line"
|
||||
onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "none")}>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-arrow-up-s-line"
|
||||
onClick={() => toggleAll(false)}
|
||||
className="mr-2"
|
||||
>
|
||||
收起全部
|
||||
</Button>
|
||||
<Button type="primary" icon="ri-add-line" onClick={handleCreate}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon="ri-add-line"
|
||||
onClick={() => navigate("/rule-groups/new")}
|
||||
>
|
||||
新增分组
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 搜索栏 */}
|
||||
<div className="card mb-4">
|
||||
<div className="card-body">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="groupName" className="form-label">分组名称</label>
|
||||
<input type="text" id="groupName" className="form-input" placeholder="请输入分组名称" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="groupCode" className="form-label">分组编码</label>
|
||||
<input type="text" id="groupCode" className="form-input" placeholder="请输入分组编码" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="groupStatus" className="form-label">状态</label>
|
||||
<select id="groupStatus" className="form-select">
|
||||
<option value="">全部</option>
|
||||
<option value="true">启用</option>
|
||||
<option value="false">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button type="default" className="mr-2" icon="ri-refresh-line">
|
||||
重置
|
||||
</Button>
|
||||
<Button type="primary" icon="ri-search-line">
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
<Card className="mb-4" bodyClassName="px-4 py-4">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="groupName" className="form-label">分组名称</label>
|
||||
<SearchBox
|
||||
placeholder="请输入分组名称"
|
||||
defaultValue={searchText}
|
||||
onSearch={handleNameSearch}
|
||||
name="groupName"
|
||||
buttonText=""
|
||||
className="form-input-only"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="groupCode" className="form-label">分组编码</label>
|
||||
<SearchBox
|
||||
placeholder="请输入分组编码"
|
||||
defaultValue={groupCode}
|
||||
onSearch={handleCodeSearch}
|
||||
name="groupCode"
|
||||
buttonText=""
|
||||
className="form-input-only"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label htmlFor="status" className="form-label">状态</label>
|
||||
<select id="status" className="form-select">
|
||||
<option value="">全部</option>
|
||||
<option value="true">启用</option>
|
||||
<option value="false">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button type="default" icon="ri-refresh-line" className="mr-2">
|
||||
重置
|
||||
</Button>
|
||||
<Button type="primary" icon="ri-search-line">
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table tree-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "400px" }}>分组名称</th>
|
||||
<th>分组编码</th>
|
||||
<th>评查点数量</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th style={{ width: "180px" }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{parentGroups.map(parent => (
|
||||
<React.Fragment key={parent.id}>
|
||||
{/* 一级分组 */}
|
||||
<tr className="group-row parent-row" data-group-id={parent.id}>
|
||||
<td>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className="expand-icon"
|
||||
data-group-id={parent.id}
|
||||
onClick={() => toggleExpand(parent.id)}
|
||||
onKeyDown={(e) => handleKeyDown(e, parent.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="展开/收起"
|
||||
>
|
||||
<i className="ri-arrow-down-s-line text-primary"></i>
|
||||
</span>
|
||||
<Link
|
||||
to={`/rules?groupId=${parent.id}`}
|
||||
className="text-primary hover:underline flex items-center ml-1"
|
||||
>
|
||||
<i className="ri-folder-line mr-1"></i> {parent.name}
|
||||
</Link>
|
||||
<span className="group-badge parent-badge">一级分组</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{parent.code}</td>
|
||||
<td>
|
||||
<Link to={`/rules?groupId=${parent.id}`} className="badge bg-primary text-white">
|
||||
{parent.ruleCount}
|
||||
</Link>
|
||||
{parent.childGroupCount > 0 && (
|
||||
<span className="text-secondary text-sm ml-1">
|
||||
| 子分组: {parent.childGroupCount}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status-dot ${parent.isActive ? 'status-success' : 'status-error'}`}></span>
|
||||
{parent.isActive ? '启用' : '禁用'}
|
||||
</td>
|
||||
<td>{parent.createdAt}</td>
|
||||
<td className="py-3 px-2 text-center">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
className="text-primary mr-2"
|
||||
icon="ri-edit-line"
|
||||
onClick={() => navigate(`/rule-groups/${parent.id}/edit`)}
|
||||
<Card bodyClassName="px-4 py-4">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="ant-table tree-table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "400px" }}>分组名称</th>
|
||||
<th>分组编码</th>
|
||||
<th>评查点数量</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th style={{ width: "180px" }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{processedData.map((item) => (
|
||||
<tr key={item.id} className={`group-row ${item.isParent ? 'parent-row' : 'child-row child-of-' + item.parentId}`}>
|
||||
<td>
|
||||
<div className={`flex items-center ${!item.isParent ? 'ml-8' : ''}`}>
|
||||
{item.isParent && (
|
||||
<span
|
||||
className="expand-icon"
|
||||
onClick={() => toggleGroup(item.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggleGroup(item.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="ri-delete-bin-line"
|
||||
onClick={() => handleDelete(parent.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* 二级分组 */}
|
||||
{getChildGroups(parent.id).map(child => (
|
||||
<tr
|
||||
key={child.id}
|
||||
className={`group-row child-row child-of-${parent.id}`}
|
||||
data-parent-id={parent.id}
|
||||
data-group-id={child.id}
|
||||
<i className={`ri-arrow-${expandedGroups.includes(item.id) ? 'down' : 'right'}-s-line`}></i>
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
to={`/rule-groups/${item.id}/rules`}
|
||||
className="group-name-link flex items-center ml-1"
|
||||
>
|
||||
<td>
|
||||
<div className="flex items-center ml-8">
|
||||
<Link
|
||||
to={`/rules?groupId=${child.id}`}
|
||||
className="text-primary hover:underline flex items-center"
|
||||
>
|
||||
<i className="ri-file-list-line mr-1"></i> {child.name}
|
||||
</Link>
|
||||
<span className="group-badge child-badge">二级分组</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{child.code}</td>
|
||||
<td>
|
||||
<Link to={`/rules?groupId=${child.id}`} className="badge bg-primary text-white">
|
||||
{child.ruleCount}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status-dot ${child.isActive ? 'status-success' : 'status-error'}`}></span>
|
||||
{child.isActive ? '启用' : '禁用'}
|
||||
</td>
|
||||
<td>{child.createdAt}</td>
|
||||
<td className="py-3 px-2 text-center">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
className="text-primary mr-2"
|
||||
icon="ri-edit-line"
|
||||
onClick={() => navigate(`/rule-groups/${child.id}/edit`)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="ri-delete-bin-line"
|
||||
onClick={() => handleDelete(child.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<i className={`${item.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1`}></i> {item.name}
|
||||
</Link>
|
||||
<span className={`group-badge ${item.isParent ? 'parent-badge' : 'child-badge'}`}>
|
||||
{item.isParent ? '一级分组' : '二级分组'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{item.code}</td>
|
||||
<td>
|
||||
<Link to={`/rule-groups/${item.id}/rules`} className="badge bg-primary text-white">
|
||||
{item.ruleCount}
|
||||
</Link>
|
||||
{item.subGroupCount > 0 && (
|
||||
<span className="text-secondary text-sm ml-1">
|
||||
| 子分组: {item.subGroupCount}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<StatusDot status={item.status === 'active' ? 'success' : 'error'} text={item.status === 'active' ? '启用' : '禁用'} />
|
||||
</td>
|
||||
<td>{item.createdAt}</td>
|
||||
<td>
|
||||
<button
|
||||
className="ant-btn ant-btn-text ant-btn-sm text-primary"
|
||||
onClick={() => navigate(`/rule-groups/${item.id}`)}
|
||||
>
|
||||
<i className="ri-edit-line"></i> 编辑
|
||||
</button>
|
||||
<button
|
||||
className="ant-btn ant-btn-text ant-btn-sm text-error"
|
||||
onClick={() => handleDeleteGroup(item.id)}
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div className="text-sm text-secondary">
|
||||
共 {groups.length} 条记录，每页显示 10 条
|
||||
</div>
|
||||
<div className="ant-pagination">
|
||||
<button className="ant-pagination-item ant-pagination-prev" disabled>
|
||||
<i className="ri-arrow-left-s-line"></i>
|
||||
</button>
|
||||
<button className="ant-pagination-item ant-pagination-item-active">1</button>
|
||||
<button className="ant-pagination-item ant-pagination-next" disabled>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
// app/routes/rule-groups.new.tsx
|
||||
import { json, redirect, type ActionFunctionArgs, type MetaFunction } from "@remix-run/node";
|
||||
import { Form, useNavigation, useActionData } from "@remix-run/react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "新建评查点分组 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "创建新的评查点分组，包括分组名称、编码、描述和状态" },
|
||||
];
|
||||
};
|
||||
|
||||
export async function action({ request }: ActionFunctionArgs) {
|
||||
const formData = await request.formData();
|
||||
|
||||
const name = formData.get("name");
|
||||
const code = formData.get("code");
|
||||
const description = formData.get("description");
|
||||
const status = formData.get("status") || "active";
|
||||
const sortOrder = formData.get("sortOrder") || "0";
|
||||
|
||||
// 基本验证
|
||||
const errors = {};
|
||||
if (!name) errors.name = "分组名称不能为空";
|
||||
if (!code) errors.code = "分组编码不能为空";
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return json({ errors, values: Object.fromEntries(formData) });
|
||||
}
|
||||
|
||||
// 构建创建数据
|
||||
const createData = {
|
||||
name,
|
||||
code,
|
||||
description,
|
||||
status,
|
||||
sortOrder: Number(sortOrder) || 0,
|
||||
};
|
||||
|
||||
// 真实环境中，这里会调用API创建数据
|
||||
// const response = await fetch(`${process.env.API_URL}/api/rule-groups`, {
|
||||
// method: "POST",
|
||||
// headers: { "Content-Type": "application/json" },
|
||||
// body: JSON.stringify(createData),
|
||||
// });
|
||||
//
|
||||
// if (!response.ok) {
|
||||
// throw new Response("创建评查点分组失败", { status: response.status });
|
||||
// }
|
||||
|
||||
// 模拟创建成功
|
||||
console.log('创建分组数据:', createData);
|
||||
|
||||
// 重定向回列表页
|
||||
return redirect('/rule-groups');
|
||||
}
|
||||
|
||||
export default function NewRuleGroup() {
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigation = useNavigation();
|
||||
|
||||
const isSubmitting = navigation.state === "submitting";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
code: "",
|
||||
description: "",
|
||||
status: "active",
|
||||
sortOrder: "0",
|
||||
});
|
||||
|
||||
// 当actionData中有错误时，保留用户输入的值
|
||||
useEffect(() => {
|
||||
if (actionData?.values) {
|
||||
setFormData({
|
||||
name: actionData.values.name,
|
||||
code: actionData.values.code,
|
||||
description: actionData.values.description || "",
|
||||
status: actionData.values.status,
|
||||
sortOrder: actionData.values.sortOrder,
|
||||
});
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="new-rule-group">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-medium">新建评查点分组</h1>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<Form method="post" className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组名称 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={`w-full h-10 px-3 border ${actionData?.errors?.name ? 'border-red-500' : 'border-gray-300'} rounded-md focus:border-primary focus:ring-1 focus:ring-primary`}
|
||||
placeholder="请输入分组名称"
|
||||
/>
|
||||
{actionData?.errors?.name && (
|
||||
<p className="mt-1 text-sm text-red-500">{actionData.errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="code" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组编码 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="code"
|
||||
name="code"
|
||||
value={formData.code}
|
||||
onChange={handleChange}
|
||||
className={`w-full h-10 px-3 border ${actionData?.errors?.code ? 'border-red-500' : 'border-gray-300'} rounded-md focus:border-primary focus:ring-1 focus:ring-primary`}
|
||||
placeholder="请输入分组编码"
|
||||
/>
|
||||
{actionData?.errors?.code && (
|
||||
<p className="mt-1 text-sm text-red-500">{actionData.errors.code}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
分组描述
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
placeholder="请输入分组描述"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
状态
|
||||
</label>
|
||||
<select
|
||||
id="status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
>
|
||||
<option value="active">启用</option>
|
||||
<option value="inactive">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="sortOrder" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
排序
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="sortOrder"
|
||||
name="sortOrder"
|
||||
value={formData.sortOrder}
|
||||
onChange={handleChange}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
placeholder="请输入排序值"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-100">
|
||||
<a
|
||||
href="/rule-groups"
|
||||
className="ant-btn ant-btn-default"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.history.back();
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
className="ant-btn ant-btn-primary"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? '创建中...' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,10 @@
|
||||
// app/routes/rule-groups.tsx
|
||||
import { Outlet } from "@remix-run/react";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: "/rule-groups.css" }
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点分组管理" },
|
||||
{ name: "description", content: "评查点分组管理页面" }
|
||||
];
|
||||
export const handle = {
|
||||
breadcrumb: "评查规则库"
|
||||
};
|
||||
|
||||
/**
|
||||
* 评查点分组管理路由布局
|
||||
*/
|
||||
export default function RuleGroupsLayout() {
|
||||
return <Outlet />;
|
||||
}
|
||||
export default function RuleGroupsLayout() {
|
||||
return <Outlet />
|
||||
}
|
||||
+473
-225
@@ -1,20 +1,30 @@
|
||||
import React from 'react';
|
||||
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
|
||||
import { useLoaderData, useSearchParams } from "@remix-run/react";
|
||||
import React, { useState } from 'react';
|
||||
import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
|
||||
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Tag, type TagColor } from '~/components/ui/Tag';
|
||||
import { SearchBox } from '~/components/ui/SearchBox';
|
||||
import { Tag } from '~/components/ui/Tag';
|
||||
import { StatusDot } from '~/components/ui/StatusDot';
|
||||
import rulesStyles from "~/styles/pages/rules_index.css?url";
|
||||
import type { Rule } from '~/models/rule';
|
||||
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
|
||||
import type { TagColor } from '~/components/ui/Tag';
|
||||
import { Link } from '@remix-run/react';
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: "/rules_index.css" }
|
||||
{ rel: "stylesheet", href: rulesStyles }
|
||||
];
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "评查点列表"
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
|
||||
{ name: "description", content: "评查点管理列表" }
|
||||
{ name: "description", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
|
||||
{ name: "keywords", content: "评查点,合同审核,规则管理,中国烟草" }
|
||||
];
|
||||
};
|
||||
|
||||
@@ -25,6 +35,9 @@ interface LoaderData {
|
||||
name: string;
|
||||
}[];
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
@@ -33,128 +46,269 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const groupId = url.searchParams.get("groupId") || "";
|
||||
const isActive = url.searchParams.get("isActive") || "";
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
||||
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const rules: Rule[] = [
|
||||
{
|
||||
id: "1",
|
||||
code: "CP001",
|
||||
name: "合同主体信息完整性检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "essential",
|
||||
priority: "high",
|
||||
description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-15 10:30",
|
||||
updatedAt: "2023-06-15 10:30"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
code: "CP002",
|
||||
name: "合同金额一致性校验",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "content",
|
||||
priority: "high",
|
||||
description: "检查合同大小写金额是否一致",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-20 14:15",
|
||||
updatedAt: "2023-06-20 14:15"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
code: "CP003",
|
||||
name: "保密条款合规性审核",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "legal",
|
||||
priority: "medium",
|
||||
description: "检查合同是否包含保密条款并符合行业要求",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-05 09:45",
|
||||
updatedAt: "2023-07-05 09:45"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
code: "CP004",
|
||||
name: "合同签约日期格式检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "format",
|
||||
priority: "low",
|
||||
description: "检查合同签约日期格式是否规范",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
|
||||
isActive: false,
|
||||
createdAt: "2023-07-10 16:20",
|
||||
updatedAt: "2023-07-10 16:20"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
code: "CP005",
|
||||
name: "违约责任条款完整性检查",
|
||||
ruleGroupId: "2",
|
||||
groupName: "销售合同专项检查",
|
||||
ruleType: "legal",
|
||||
priority: "high",
|
||||
description: "检查合同违约责任条款是否明确、完整",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-15 11:30",
|
||||
updatedAt: "2023-07-15 11:30"
|
||||
try {
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const rules: Rule[] = [
|
||||
{
|
||||
id: "1",
|
||||
code: "CP001",
|
||||
name: "合同主体信息完整性检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "essential",
|
||||
priority: "high",
|
||||
description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-15 10:30",
|
||||
updatedAt: "2023-06-15 10:30"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
code: "CP002",
|
||||
name: "合同金额一致性校验",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "content",
|
||||
priority: "high",
|
||||
description: "检查合同大小写金额是否一致",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-20 14:15",
|
||||
updatedAt: "2023-06-20 14:15"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
code: "CP003",
|
||||
name: "保密条款合规性审核",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "legal",
|
||||
priority: "medium",
|
||||
description: "检查合同是否包含保密条款并符合行业要求",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-05 09:45",
|
||||
updatedAt: "2023-07-05 09:45"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
code: "CP004",
|
||||
name: "合同签约日期格式检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "format",
|
||||
priority: "low",
|
||||
description: "检查合同签约日期格式是否规范",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
|
||||
isActive: false,
|
||||
createdAt: "2023-07-10 16:20",
|
||||
updatedAt: "2023-07-10 16:20"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
code: "CP005",
|
||||
name: "违约责任条款完整性检查",
|
||||
ruleGroupId: "2",
|
||||
groupName: "销售合同专项检查",
|
||||
ruleType: "legal",
|
||||
priority: "high",
|
||||
description: "检查合同违约责任条款是否明确、完整",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-15 11:30",
|
||||
updatedAt: "2023-07-15 11:30"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
code: "CP006",
|
||||
name: "交货期限有效性检查",
|
||||
ruleGroupId: "2",
|
||||
groupName: "销售合同专项检查",
|
||||
ruleType: "business",
|
||||
priority: "medium",
|
||||
description: "检查合同中交货期限是否明确、合理",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同中是否明确约定了交货期限，并且期限设置是否合理",
|
||||
isActive: true,
|
||||
createdAt: "2023-08-01 14:40",
|
||||
updatedAt: "2023-08-01 14:40"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
code: "CP007",
|
||||
name: "合同条款矛盾性检查",
|
||||
ruleGroupId: "3",
|
||||
groupName: "采购合同专项检查",
|
||||
ruleType: "legal",
|
||||
priority: "high",
|
||||
description: "检查合同条款之间是否存在矛盾或冲突",
|
||||
checkMethod: "mixed",
|
||||
prompt: "分析合同各条款，检查是否存在相互矛盾或冲突的内容",
|
||||
isActive: true,
|
||||
createdAt: "2023-08-10 09:15",
|
||||
updatedAt: "2023-08-10 09:15"
|
||||
}
|
||||
];
|
||||
|
||||
const groups = [
|
||||
{ id: "1", name: "合同基本要素检查" },
|
||||
{ id: "2", name: "销售合同专项检查" },
|
||||
{ id: "3", name: "采购合同专项检查" },
|
||||
{ id: "4", name: "专卖许可证审核规则" },
|
||||
{ id: "5", name: "行政处罚规范性检查" }
|
||||
];
|
||||
|
||||
// 过滤数据
|
||||
let filteredRules = [...rules];
|
||||
|
||||
if (ruleType) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
|
||||
}
|
||||
];
|
||||
|
||||
const groups = [
|
||||
{ id: "1", name: "合同基本要素检查" },
|
||||
{ id: "2", name: "销售合同专项检查" },
|
||||
{ id: "3", name: "采购合同专项检查" },
|
||||
{ id: "4", name: "专卖许可证审核规则" },
|
||||
{ id: "5", name: "行政处罚规范性检查" }
|
||||
];
|
||||
|
||||
// 过滤数据
|
||||
let filteredRules = [...rules];
|
||||
|
||||
if (ruleType) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
|
||||
|
||||
if (groupId) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
const activeValue = isActive === 'true';
|
||||
filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
|
||||
}
|
||||
|
||||
if (keyword) {
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
filteredRules = filteredRules.filter(rule =>
|
||||
rule.name.toLowerCase().includes(lowerKeyword) ||
|
||||
rule.code.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 计算分页信息
|
||||
const totalCount = filteredRules.length;
|
||||
const totalPages = Math.ceil(totalCount / pageSize);
|
||||
|
||||
// 验证页码范围
|
||||
if (currentPage < 1 || (totalCount > 0 && currentPage > totalPages)) {
|
||||
// 如果页码超出范围，重定向到第一页
|
||||
const newUrl = new URL(request.url);
|
||||
newUrl.searchParams.set('page', '1');
|
||||
return redirect(newUrl.pathname + newUrl.search);
|
||||
}
|
||||
|
||||
// 分页截取
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const paginatedRules = filteredRules.slice(startIndex, endIndex);
|
||||
|
||||
return json<LoaderData>({
|
||||
rules: paginatedRules,
|
||||
groups,
|
||||
totalCount,
|
||||
currentPage,
|
||||
pageSize,
|
||||
totalPages
|
||||
}, {
|
||||
headers: {
|
||||
// 添加缓存控制，在生产环境中可以调整
|
||||
"Cache-Control": "max-age=60, s-maxage=180"
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('加载评查点列表失败:', error);
|
||||
throw new Response('加载评查点列表失败', { status: 500 });
|
||||
}
|
||||
|
||||
if (groupId) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
const activeValue = isActive === 'true';
|
||||
filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
|
||||
}
|
||||
|
||||
if (keyword) {
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
filteredRules = filteredRules.filter(rule =>
|
||||
rule.name.toLowerCase().includes(lowerKeyword) ||
|
||||
rule.code.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
rules: filteredRules,
|
||||
groups,
|
||||
totalCount: rules.length
|
||||
});
|
||||
}
|
||||
|
||||
export async function action({ request }: LoaderFunctionArgs) {
|
||||
const formData = await request.formData();
|
||||
const _action = formData.get('_action');
|
||||
const ruleId = formData.get('ruleId');
|
||||
|
||||
if (!ruleId) {
|
||||
return json({ success: false, error: "缺少评查点ID" }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
if (_action === 'delete') {
|
||||
// 实际项目中应调用API删除评查点
|
||||
console.log(`删除评查点 ${ruleId}`);
|
||||
|
||||
// 模拟API调用
|
||||
// const response = await fetch(`/api/rules/${ruleId}`, {
|
||||
// method: 'DELETE',
|
||||
// });
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`删除失败: ${response.status}`);
|
||||
// }
|
||||
|
||||
return json({ success: true });
|
||||
}
|
||||
|
||||
if (_action === 'duplicate') {
|
||||
// 实际项目中应调用API复制评查点
|
||||
console.log(`复制评查点 ${ruleId}`);
|
||||
|
||||
// 模拟API调用
|
||||
// const response = await fetch(`/api/rules/${ruleId}/duplicate`, {
|
||||
// method: 'POST',
|
||||
// });
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`复制失败: ${response.status}`);
|
||||
// }
|
||||
|
||||
return json({ success: true });
|
||||
}
|
||||
|
||||
return json({ success: false, error: "未知操作" }, { status: 400 });
|
||||
} catch (error) {
|
||||
console.error('操作评查点失败:', error);
|
||||
return json({ success: false, error: "操作失败" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export function ErrorBoundary() {
|
||||
return (
|
||||
<div className="error-container p-6">
|
||||
<h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
|
||||
<p className="mb-4">加载评查点列表时发生错误。请稍后再试，或联系管理员。</p>
|
||||
<Button type="primary" to="/">返回首页</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 规则类型和优先级的描述标签映射
|
||||
const typeLabels = {
|
||||
'essential': '基本要素类',
|
||||
'content': '内容合规类',
|
||||
'legal': '法律风险类',
|
||||
'format': '格式规范类',
|
||||
'business': '业务专项类'
|
||||
};
|
||||
|
||||
const priorityLabels = {
|
||||
'high': '高',
|
||||
'medium': '中',
|
||||
'low': '低'
|
||||
};
|
||||
|
||||
export default function RulesList() {
|
||||
const { rules, groups } = useLoaderData<typeof loader>();
|
||||
const { rules, groups, totalCount, currentPage, pageSize, totalPages } = useLoaderData<typeof loader>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const submit = useSubmit();
|
||||
|
||||
// 状态管理
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [ruleToDelete, setRuleToDelete] = useState<Rule | null>(null);
|
||||
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
@@ -166,14 +320,13 @@ export default function RulesList() {
|
||||
newParams.delete(name);
|
||||
}
|
||||
|
||||
// 切换筛选条件时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target as HTMLFormElement);
|
||||
const keyword = formData.get('keyword') as string;
|
||||
|
||||
const handleSearch = (keyword: string) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
if (keyword) {
|
||||
newParams.set('keyword', keyword);
|
||||
@@ -181,33 +334,53 @@ export default function RulesList() {
|
||||
newParams.delete('keyword');
|
||||
}
|
||||
|
||||
// 搜索时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleCopy = (rule: Rule) => {
|
||||
// 实际项目中应调用API复制规则
|
||||
alert(`复制规则: ${rule.name}`);
|
||||
const handleDeleteClick = (rule: Rule) => {
|
||||
setRuleToDelete(rule);
|
||||
setShowDeleteConfirm(true);
|
||||
};
|
||||
|
||||
const handleDelete = (rule: Rule) => {
|
||||
// 实际项目中应调用API删除规则
|
||||
if (window.confirm(`确定要删除评查点"${rule.name}"吗？`)) {
|
||||
alert(`删除规则: ${rule.name}`);
|
||||
}
|
||||
const confirmDelete = () => {
|
||||
if (!ruleToDelete) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('_action', 'delete');
|
||||
formData.append('ruleId', ruleToDelete.id);
|
||||
|
||||
submit(formData, { method: 'post' });
|
||||
setShowDeleteConfirm(false);
|
||||
setRuleToDelete(null);
|
||||
};
|
||||
|
||||
const handleCopy = (rule: Rule) => {
|
||||
const formData = new FormData();
|
||||
formData.append('_action', 'duplicate');
|
||||
formData.append('ruleId', rule.id);
|
||||
|
||||
submit(formData, { method: 'post' });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('page', page.toString());
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newPageSize = e.target.value;
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('pageSize', newPageSize);
|
||||
newParams.set('page', '1'); // 更改每页条数时，重置到第一页
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* 页面标识 */}
|
||||
<div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
|
||||
<h3 className="font-bold text-lg">当前页面: 评查点列表 (rules._index.tsx)</h3>
|
||||
<p>如果你看到这个提示，说明你已成功到达评查点列表页面。</p>
|
||||
<div className="mt-2">
|
||||
<a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> |
|
||||
<a href="/" className="ml-2 text-blue-600 hover:underline">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rules-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-medium">评查点管理</h2>
|
||||
@@ -217,28 +390,30 @@ export default function RulesList() {
|
||||
</div>
|
||||
|
||||
{/* 筛选区域 */}
|
||||
<Card className="mb-4" noDivider>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
|
||||
<Card className="card-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label htmlFor="ruleType" className="block text-sm mb-1">评查点类型</label>
|
||||
<label htmlFor="ruleType" className="form-label">评查点类型</label>
|
||||
<select
|
||||
id="ruleType"
|
||||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||||
className="form-select"
|
||||
name="ruleType"
|
||||
value={searchParams.get('ruleType') || ''}
|
||||
onChange={handleFilterChange}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
{Object.entries(RULE_TYPE_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
<option value="essential">基本要素类</option>
|
||||
<option value="content">内容合规类</option>
|
||||
<option value="format">格式规范类</option>
|
||||
<option value="legal">法律风险类</option>
|
||||
<option value="business">业务专项类</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="groupId" className="block text-sm mb-1">所属规则组</label>
|
||||
<label htmlFor="groupId" className="form-label">所属规则组</label>
|
||||
<select
|
||||
id="groupId"
|
||||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||||
className="form-select"
|
||||
name="groupId"
|
||||
value={searchParams.get('groupId') || ''}
|
||||
onChange={handleFilterChange}
|
||||
@@ -250,10 +425,10 @@ export default function RulesList() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="isActive" className="block text-sm mb-1">状态</label>
|
||||
<label htmlFor="isActive" className="form-label">状态</label>
|
||||
<select
|
||||
id="isActive"
|
||||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||||
className="form-select"
|
||||
name="isActive"
|
||||
value={searchParams.get('isActive') || ''}
|
||||
onChange={handleFilterChange}
|
||||
@@ -264,88 +439,161 @@ export default function RulesList() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="keyword" className="block text-sm mb-1">搜索</label>
|
||||
<form onSubmit={handleSearch} className="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
id="keyword"
|
||||
name="keyword"
|
||||
className="form-input rounded-l flex-1 border-gray-300 shadow-sm"
|
||||
placeholder="输入评查点名称或编码"
|
||||
defaultValue={searchParams.get('keyword') || ''}
|
||||
/>
|
||||
<Button type="primary" icon="ri-search-line" className="rounded-l-none">
|
||||
搜索
|
||||
</Button>
|
||||
</form>
|
||||
<label htmlFor="keyword" className="form-label">搜索</label>
|
||||
<SearchBox
|
||||
placeholder="输入评查点名称或编码"
|
||||
defaultValue={searchParams.get('keyword') || ''}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 评查点列表 */}
|
||||
<Card noDivider>
|
||||
<Card className="ant-card">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-xs text-gray-500 border-b">
|
||||
<th className="py-3 px-4">评查点编码</th>
|
||||
<th className="py-3 px-4">评查点名称</th>
|
||||
<th className="py-3 px-4">评查点类型</th>
|
||||
<th className="py-3 px-4">所属规则组</th>
|
||||
<th className="py-3 px-4">优先级</th>
|
||||
<th className="py-3 px-4">状态</th>
|
||||
<th className="py-3 px-4">创建时间</th>
|
||||
<th className="py-3 px-4">操作</th>
|
||||
<table className="ant-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>评查点编码</th>
|
||||
<th>评查点名称</th>
|
||||
<th>评查点类型</th>
|
||||
<th>所属规则组</th>
|
||||
<th>优先级</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rules.map((rule) => {
|
||||
const typeColor = RULE_TYPE_COLORS[rule.ruleType] as TagColor;
|
||||
const priorityColor = RULE_PRIORITY_COLORS[rule.priority] as TagColor;
|
||||
|
||||
return (
|
||||
<tr key={rule.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-3 px-4">{rule.code}</td>
|
||||
<td className="py-3 px-4">{rule.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Tag color={typeColor}>{RULE_TYPE_LABELS[rule.ruleType]}</Tag>
|
||||
</td>
|
||||
<td className="py-3 px-4">{rule.groupName}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Tag color={priorityColor}>{RULE_PRIORITY_LABELS[rule.priority]}</Tag>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{rule.isActive ? (
|
||||
<span className="flex items-center">
|
||||
<i className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></i>
|
||||
启用
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center">
|
||||
<i className="inline-block w-2 h-2 rounded-full bg-gray-400 mr-2"></i>
|
||||
禁用
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4">{rule.createdAt}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Button type="default" size="small" icon="ri-edit-line" to={`/rules/${rule.id}`} className="mr-1">
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="default" size="small" icon="ri-file-copy-line" className="mr-1" onClick={() => handleCopy(rule)}>
|
||||
复制
|
||||
</Button>
|
||||
<Button type="danger" size="small" icon="ri-delete-bin-line" onClick={() => handleDelete(rule)}>
|
||||
删除
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{rules.length > 0 ? (
|
||||
rules.map((rule) => {
|
||||
const typeColor = RULE_TYPE_COLORS[rule.ruleType] as TagColor;
|
||||
const priorityColor = RULE_PRIORITY_COLORS[rule.priority] as TagColor;
|
||||
|
||||
return (
|
||||
<tr key={rule.id}>
|
||||
<td>{rule.code}</td>
|
||||
<td>{rule.name}</td>
|
||||
<td>
|
||||
<Tag color={typeColor}>
|
||||
{typeLabels[rule.ruleType as keyof typeof typeLabels] || RULE_TYPE_LABELS[rule.ruleType]}
|
||||
</Tag>
|
||||
</td>
|
||||
<td>{rule.groupName}</td>
|
||||
<td>
|
||||
<Tag color={priorityColor}>
|
||||
{priorityLabels[rule.priority as keyof typeof priorityLabels] || RULE_PRIORITY_LABELS[rule.priority]}
|
||||
</Tag>
|
||||
</td>
|
||||
<td>
|
||||
<StatusDot status={rule.isActive} />
|
||||
</td>
|
||||
<td>{rule.createdAt}</td>
|
||||
<td className="operations-cell">
|
||||
<Link to={`/rules/${rule.id}`} className="operation-btn">
|
||||
<i className="ri-edit-line"></i> 编辑
|
||||
</Link>
|
||||
<button className="operation-btn" onClick={() => handleCopy(rule)}>
|
||||
<i className="ri-file-copy-line"></i> 复制
|
||||
</button>
|
||||
<button className="operation-btn operation-btn-danger" onClick={() => handleDeleteClick(rule)}>
|
||||
<i className="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="text-center py-8 text-gray-500">
|
||||
暂无评查点数据
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{totalCount > 0 && (
|
||||
<div className="ant-pagination">
|
||||
<div className="ant-pagination-options">
|
||||
<span className="text-sm mr-2">共 {totalCount} 条</span>
|
||||
<select
|
||||
className="form-select ant-pagination-options-size-changer"
|
||||
style={{ width: "100px" }}
|
||||
value={pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
>
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="ant-pagination-right">
|
||||
<button
|
||||
className={`ant-pagination-item ant-pagination-prev ${currentPage <= 1 ? 'ant-pagination-disabled' : ''}`}
|
||||
onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
>
|
||||
<i className="ri-arrow-left-s-line"></i>
|
||||
</button>
|
||||
|
||||
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
||||
// 显示当前页附近的页码，最多显示5个
|
||||
let pageNum;
|
||||
if (totalPages <= 5) {
|
||||
// 总页数少于5，直接显示所有页码
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage <= 3) {
|
||||
// 当前页靠近开始
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
// 当前页靠近结尾
|
||||
pageNum = totalPages - 4 + i;
|
||||
} else {
|
||||
// 当前页在中间
|
||||
pageNum = currentPage - 2 + i;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={pageNum}
|
||||
className={`ant-pagination-item ${pageNum === currentPage ? 'ant-pagination-item-active' : ''}`}
|
||||
onClick={() => handlePageChange(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
className={`ant-pagination-item ant-pagination-next ${currentPage >= totalPages ? 'ant-pagination-disabled' : ''}`}
|
||||
onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 删除确认对话框 */}
|
||||
{showDeleteConfirm && ruleToDelete && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 max-w-md w-full">
|
||||
<h3 className="text-lg font-medium mb-4">确认删除</h3>
|
||||
<p className="mb-6">确定要删除评查点“{ruleToDelete.name}”吗？</p>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button type="default" onClick={() => setShowDeleteConfirm(false)}>取消</Button>
|
||||
<Button type="danger" onClick={confirmDelete}>删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,586 @@
|
||||
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
|
||||
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Table } from "~/components/ui/Table";
|
||||
import { SearchBox } from "~/components/ui/SearchBox";
|
||||
import rulesFilesStyles from "~/styles/pages/rules_files.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: rulesFilesStyles }
|
||||
];
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "评查文件列表"
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "评查文件列表 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "管理系统中所有上传的评查文件，支持按文件类型、评查状态进行筛选" },
|
||||
{ name: "keywords", content: "评查文件,合同审核,中国烟草,文件管理" }
|
||||
];
|
||||
};
|
||||
|
||||
// 评查文件类型枚举
|
||||
export enum FileType {
|
||||
CONTRACT = 'contract',
|
||||
LICENSE = 'license',
|
||||
PUNISHMENT = 'punishment',
|
||||
REPORT = 'report',
|
||||
OTHER = 'other'
|
||||
}
|
||||
|
||||
// 评查状态枚举
|
||||
export enum ReviewStatus {
|
||||
PASS = 'pass',
|
||||
WARNING = 'warning',
|
||||
FAIL = 'fail',
|
||||
PENDING = 'pending'
|
||||
}
|
||||
|
||||
// 日期范围枚举
|
||||
export enum DateRange {
|
||||
ALL = 'all',
|
||||
TODAY = 'today',
|
||||
WEEK = 'week',
|
||||
MONTH = 'month',
|
||||
CUSTOM = 'custom'
|
||||
}
|
||||
|
||||
// 文件类型标签映射
|
||||
export const FILE_TYPE_LABELS: Record<FileType, string> = {
|
||||
[FileType.CONTRACT]: '合同文档',
|
||||
[FileType.LICENSE]: '专卖许可证',
|
||||
[FileType.PUNISHMENT]: '行政处罚',
|
||||
[FileType.REPORT]: '报表文档',
|
||||
[FileType.OTHER]: '其他文档'
|
||||
};
|
||||
|
||||
// 评查状态标签映射
|
||||
export const REVIEW_STATUS_LABELS: Record<ReviewStatus, string> = {
|
||||
[ReviewStatus.PASS]: '通过',
|
||||
[ReviewStatus.WARNING]: '警告',
|
||||
[ReviewStatus.FAIL]: '不通过',
|
||||
[ReviewStatus.PENDING]: '待人工确认'
|
||||
};
|
||||
|
||||
// 评查文件模型
|
||||
interface ReviewFile {
|
||||
id: string;
|
||||
fileName: string;
|
||||
fileCode: string; // 文件编号
|
||||
fileType: FileType;
|
||||
fileSize: number;
|
||||
uploadTime: string;
|
||||
reviewStatus: ReviewStatus;
|
||||
issueCount: number;
|
||||
issues: Array<{
|
||||
severity: 'info' | 'warning' | 'error' | 'critical';
|
||||
message: string;
|
||||
}>;
|
||||
createdBy: string;
|
||||
}
|
||||
|
||||
interface LoaderData {
|
||||
files: ReviewFile[];
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const fileType = url.searchParams.get("fileType") || "";
|
||||
const reviewStatus = url.searchParams.get("reviewStatus") || "";
|
||||
const dateRange = url.searchParams.get("dateRange") || "";
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
const sortOrder = url.searchParams.get("sortOrder") || "upload_time_desc";
|
||||
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
||||
|
||||
try {
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const mockFiles: ReviewFile[] = [
|
||||
{
|
||||
id: "1",
|
||||
fileName: "烟草产品销售合同（2023版）.pdf",
|
||||
fileCode: "XS-2023-1025-001",
|
||||
fileType: FileType.CONTRACT,
|
||||
fileSize: 1024 * 1024 * 2.5, // 2.5MB
|
||||
uploadTime: "2023-10-25 14:30:45",
|
||||
reviewStatus: ReviewStatus.WARNING,
|
||||
issueCount: 3,
|
||||
issues: [
|
||||
{ severity: "warning", message: "付款条件描述不明确" },
|
||||
{ severity: "warning", message: "违约责任条款缺失" },
|
||||
{ severity: "warning", message: "签章不完整" }
|
||||
],
|
||||
createdBy: "张三"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
fileName: "2023年度烟草专卖零售许可证.pdf",
|
||||
fileCode: "LS-2023-0058",
|
||||
fileType: FileType.LICENSE,
|
||||
fileSize: 1024 * 1024 * 1.2, // 1.2MB
|
||||
uploadTime: "2023-10-24 10:15:22",
|
||||
reviewStatus: ReviewStatus.PASS,
|
||||
issueCount: 0,
|
||||
issues: [],
|
||||
createdBy: "李四"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
fileName: "XX公司违规处罚决定书.pdf",
|
||||
fileCode: "处罚[2023]42号",
|
||||
fileType: FileType.PUNISHMENT,
|
||||
fileSize: 1024 * 1024 * 3.1, // 3.1MB
|
||||
uploadTime: "2023-10-23 16:45:30",
|
||||
reviewStatus: ReviewStatus.FAIL,
|
||||
issueCount: 2,
|
||||
issues: [
|
||||
{ severity: "error", message: "处罚依据条款引用错误" },
|
||||
{ severity: "error", message: "处罚金额超出规定范围" }
|
||||
],
|
||||
createdBy: "王五"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
fileName: "烟草设备采购协议.docx",
|
||||
fileCode: "CG-2023-0089",
|
||||
fileType: FileType.CONTRACT,
|
||||
fileSize: 1024 * 1024 * 0.8, // 0.8MB
|
||||
uploadTime: "2023-10-22 09:22:15",
|
||||
reviewStatus: ReviewStatus.PENDING,
|
||||
issueCount: 1,
|
||||
issues: [
|
||||
{ severity: "warning", message: "交付日期条款存在歧义，需人工确认" }
|
||||
],
|
||||
createdBy: "赵六"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
fileName: "2023年度销售额报表.xlsx",
|
||||
fileCode: "BB-2023-Q3",
|
||||
fileType: FileType.REPORT,
|
||||
fileSize: 1024 * 1024 * 0.5, // 0.5MB
|
||||
uploadTime: "2023-10-20 14:05:38",
|
||||
reviewStatus: ReviewStatus.PASS,
|
||||
issueCount: 0,
|
||||
issues: [],
|
||||
createdBy: "钱七"
|
||||
}
|
||||
];
|
||||
|
||||
// 过滤数据
|
||||
let filteredFiles = [...mockFiles];
|
||||
|
||||
if (fileType) {
|
||||
filteredFiles = filteredFiles.filter(file => file.fileType === fileType);
|
||||
}
|
||||
|
||||
if (reviewStatus) {
|
||||
filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
|
||||
}
|
||||
|
||||
if (dateRange) {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
|
||||
switch (dateRange) {
|
||||
case DateRange.TODAY:
|
||||
filteredFiles = filteredFiles.filter(file => {
|
||||
const fileDate = new Date(file.uploadTime.split(' ')[0]);
|
||||
return fileDate >= today;
|
||||
});
|
||||
break;
|
||||
case DateRange.WEEK:
|
||||
const weekStart = new Date(today);
|
||||
weekStart.setDate(today.getDate() - today.getDay());
|
||||
filteredFiles = filteredFiles.filter(file => {
|
||||
const fileDate = new Date(file.uploadTime.split(' ')[0]);
|
||||
return fileDate >= weekStart;
|
||||
});
|
||||
break;
|
||||
case DateRange.MONTH:
|
||||
const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
filteredFiles = filteredFiles.filter(file => {
|
||||
const fileDate = new Date(file.uploadTime.split(' ')[0]);
|
||||
return fileDate >= monthStart;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (keyword) {
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
filteredFiles = filteredFiles.filter(file =>
|
||||
file.fileName.toLowerCase().includes(lowerKeyword) ||
|
||||
file.fileCode.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 排序
|
||||
switch (sortOrder) {
|
||||
case "upload_time_desc":
|
||||
filteredFiles.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime());
|
||||
break;
|
||||
case "upload_time_asc":
|
||||
filteredFiles.sort((a, b) => new Date(a.uploadTime).getTime() - new Date(b.uploadTime).getTime());
|
||||
break;
|
||||
case "issue_count_desc":
|
||||
filteredFiles.sort((a, b) => b.issueCount - a.issueCount);
|
||||
break;
|
||||
case "issue_count_asc":
|
||||
filteredFiles.sort((a, b) => a.issueCount - b.issueCount);
|
||||
break;
|
||||
}
|
||||
|
||||
// 计算分页信息
|
||||
const totalCount = filteredFiles.length;
|
||||
const totalPages = Math.ceil(totalCount / pageSize);
|
||||
|
||||
// 分页截取
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const paginatedFiles = filteredFiles.slice(startIndex, endIndex);
|
||||
|
||||
return json<LoaderData>({
|
||||
files: paginatedFiles,
|
||||
totalCount,
|
||||
currentPage,
|
||||
pageSize,
|
||||
totalPages
|
||||
}, {
|
||||
headers: {
|
||||
"Cache-Control": "max-age=60, s-maxage=180"
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('加载评查文件列表失败:', error);
|
||||
throw new Response('加载评查文件列表失败', { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export function ErrorBoundary() {
|
||||
return (
|
||||
<div className="error-container p-6">
|
||||
<h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
|
||||
<p className="mb-4">加载评查文件列表时发生错误。请稍后再试，或联系管理员。</p>
|
||||
<Button type="primary" to="/">返回首页</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ReviewFilesList() {
|
||||
const { files, totalCount, currentPage, pageSize, totalPages } = useLoaderData<typeof loader>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
|
||||
if (value) {
|
||||
newParams.set(name, value);
|
||||
} else {
|
||||
newParams.delete(name);
|
||||
}
|
||||
|
||||
// 切换筛选条件时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleSearch = (keyword: string) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
if (keyword) {
|
||||
newParams.set('keyword', keyword);
|
||||
} else {
|
||||
newParams.delete('keyword');
|
||||
}
|
||||
|
||||
// 搜索时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('page', page.toString());
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 渲染问题摘要
|
||||
const renderIssues = (issues: ReviewFile['issues']) => {
|
||||
if (issues.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-success">
|
||||
<i className="ri-check-double-line mr-1"></i>所有评查点均通过
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-sm">
|
||||
{issues.slice(0, 3).map((issue, index) => (
|
||||
<div key={index} className="mb-1 last:mb-0">
|
||||
<span className={`severity-indicator severity-${issue.severity}`}></span>
|
||||
{issue.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染文件图标
|
||||
const renderFileIcon = (fileName: string) => {
|
||||
if (fileName.endsWith('.pdf')) {
|
||||
return <i className="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>;
|
||||
} else if (fileName.endsWith('.docx') || fileName.endsWith('.doc')) {
|
||||
return <i className="ri-file-word-2-line text-blue-500 mr-2 text-lg"></i>;
|
||||
} else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
|
||||
return <i className="ri-file-excel-2-line text-green-500 mr-2 text-lg"></i>;
|
||||
} else {
|
||||
return <i className="ri-file-line text-gray-500 mr-2 text-lg"></i>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 review-files-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-xl font-medium">评查文件列表</h2>
|
||||
<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-bold text-primary ml-1">{totalCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="primary" icon="ri-file-upload-line" to="/files/new">
|
||||
上传新文件
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 筛选区域 */}
|
||||
<Card className="card-container">
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div className="w-48">
|
||||
<div className="mb-1 text-sm font-medium">文件类型</div>
|
||||
<select
|
||||
className="form-select w-full"
|
||||
name="fileType"
|
||||
value={searchParams.get('fileType') || ''}
|
||||
onChange={handleFilterChange}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
<option value={FileType.CONTRACT}>合同文档</option>
|
||||
<option value={FileType.LICENSE}>专卖许可证</option>
|
||||
<option value={FileType.PUNISHMENT}>行政处罚决定书</option>
|
||||
<option value={FileType.REPORT}>报表文档</option>
|
||||
<option value={FileType.OTHER}>其他文档</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="w-48">
|
||||
<div className="mb-1 text-sm font-medium">评查状态</div>
|
||||
<select
|
||||
className="form-select w-full"
|
||||
name="reviewStatus"
|
||||
value={searchParams.get('reviewStatus') || ''}
|
||||
onChange={handleFilterChange}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
<option value={ReviewStatus.PASS}>通过</option>
|
||||
<option value={ReviewStatus.WARNING}>警告</option>
|
||||
<option value={ReviewStatus.FAIL}>不通过</option>
|
||||
<option value={ReviewStatus.PENDING}>待人工确认</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="w-48">
|
||||
<div className="mb-1 text-sm font-medium">时间范围</div>
|
||||
<select
|
||||
className="form-select w-full"
|
||||
name="dateRange"
|
||||
value={searchParams.get('dateRange') || ''}
|
||||
onChange={handleFilterChange}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
<option value={DateRange.TODAY}>今天</option>
|
||||
<option value={DateRange.WEEK}>本周</option>
|
||||
<option value={DateRange.MONTH}>本月</option>
|
||||
<option value={DateRange.CUSTOM}>自定义时间段</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="w-72">
|
||||
<div className="mb-1 text-sm font-medium">搜索</div>
|
||||
<div className="flex border border-gray-300 rounded overflow-hidden">
|
||||
<SearchBox
|
||||
placeholder="搜索文件名、合同编号或关键词"
|
||||
defaultValue={searchParams.get('keyword') || ''}
|
||||
onSearch={handleSearch}
|
||||
className="search-input"
|
||||
buttonText="搜索"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto">
|
||||
<select
|
||||
className="form-select w-auto"
|
||||
name="sortOrder"
|
||||
value={searchParams.get('sortOrder') || 'upload_time_desc'}
|
||||
onChange={handleFilterChange}
|
||||
>
|
||||
<option value="upload_time_desc">上传时间 ↓</option>
|
||||
<option value="upload_time_asc">上传时间 ↑</option>
|
||||
<option value="issue_count_desc">问题数量 ↓</option>
|
||||
<option value="issue_count_asc">问题数量 ↑</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 文件列表 */}
|
||||
<Card className="content-card">
|
||||
<table className="ant-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "30%" }}>文件名称</th>
|
||||
<th style={{ width: "12%" }}>文件类型</th>
|
||||
<th style={{ width: "12%" }}>上传时间</th>
|
||||
<th style={{ width: "12%" }}>评查状态</th>
|
||||
<th style={{ width: "20%" }}>问题摘要</th>
|
||||
<th style={{ width: "14%" }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.length > 0 ? (
|
||||
files.map((file) => (
|
||||
<tr key={file.id}>
|
||||
<td>
|
||||
<div className="flex items-center">
|
||||
{renderFileIcon(file.fileName)}
|
||||
<div>
|
||||
<div className="font-medium">{file.fileName}</div>
|
||||
<div className="text-xs text-secondary mt-1">
|
||||
{file.fileType === FileType.CONTRACT && "合同编号："}
|
||||
{file.fileType === FileType.LICENSE && "许可证号："}
|
||||
{file.fileType === FileType.PUNISHMENT && "文号："}
|
||||
{file.fileType === FileType.REPORT && "报表编号："}
|
||||
{file.fileCode}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`file-type-badge file-type-${file.fileType}`}>
|
||||
{file.fileType === FileType.CONTRACT && <i className="ri-file-list-3-line"></i>}
|
||||
{file.fileType === FileType.LICENSE && <i className="ri-vip-crown-line"></i>}
|
||||
{file.fileType === FileType.PUNISHMENT && <i className="ri-scales-line"></i>}
|
||||
{file.fileType === FileType.REPORT && <i className="ri-file-chart-line"></i>}
|
||||
{file.fileType === FileType.OTHER && <i className="ri-file-line"></i>}
|
||||
{FILE_TYPE_LABELS[file.fileType]}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{file.uploadTime.split(' ')[0]}
|
||||
<br />
|
||||
<span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status-badge status-${file.reviewStatus}`}>
|
||||
{file.reviewStatus === ReviewStatus.PASS && <i className="ri-checkbox-circle-line mr-1"></i>}
|
||||
{file.reviewStatus === ReviewStatus.WARNING && <i className="ri-alert-line mr-1"></i>}
|
||||
{file.reviewStatus === ReviewStatus.FAIL && <i className="ri-close-circle-line mr-1"></i>}
|
||||
{file.reviewStatus === ReviewStatus.PENDING && <i className="ri-time-line mr-1"></i>}
|
||||
{REVIEW_STATUS_LABELS[file.reviewStatus]}
|
||||
{file.issueCount > 0 && ` (${file.issueCount})`}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{renderIssues(file.issues)}
|
||||
</td>
|
||||
<td>
|
||||
{file.reviewStatus === ReviewStatus.PENDING ? (
|
||||
<Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
|
||||
确认
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
|
||||
查看
|
||||
</Button>
|
||||
)}
|
||||
<Button type="default" size="small" icon="ri-download-2-line">
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center py-8 text-gray-500">
|
||||
暂无文件数据
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* 分页 */}
|
||||
{totalCount > 0 && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
className={`pagination-item ${currentPage <= 1 ? 'disabled' : ''}`}
|
||||
onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
>
|
||||
<i className="ri-arrow-left-s-line"></i>
|
||||
</button>
|
||||
|
||||
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
||||
// 显示当前页附近的页码，最多显示5个
|
||||
let pageNum;
|
||||
if (totalPages <= 5) {
|
||||
// 总页数少于5，直接显示所有页码
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage <= 3) {
|
||||
// 当前页靠近开始
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
// 当前页靠近结尾
|
||||
pageNum = totalPages - 4 + i;
|
||||
} else {
|
||||
// 当前页在中间
|
||||
pageNum = currentPage - 2 + i;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={pageNum}
|
||||
className={`pagination-item ${pageNum === currentPage ? 'active' : ''}`}
|
||||
onClick={() => handlePageChange(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
className={`pagination-item ${currentPage >= totalPages ? 'disabled' : ''}`}
|
||||
onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
>
|
||||
<i className="ri-arrow-right-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+14
-7
@@ -1,20 +1,27 @@
|
||||
import { Outlet } from "@remix-run/react";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
|
||||
// export const links = () => [
|
||||
// { rel: "stylesheet", href: "app/styles/pages/rules.css" }
|
||||
// ];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 规则管理" },
|
||||
{ name: "description", content: "规则管理页面" }
|
||||
{ title: "评查规则管理 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{
|
||||
name: "description",
|
||||
content: "评查规则管理模块，包括评查点列表、创建和编辑功能"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "评查规则库"
|
||||
};
|
||||
|
||||
/**
|
||||
* 规则管理路由布局
|
||||
*/
|
||||
export default function RulesLayout() {
|
||||
return (
|
||||
<>
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
return <Outlet />;
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
/**
|
||||
* 基础样式文件
|
||||
* 包含全局变量与Tailwind基础配置
|
||||
*/
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* 主题颜色变量 */
|
||||
--color-primary: #00684a;
|
||||
--color-primary-hover: #005a3f;
|
||||
--color-primary-light: rgba(0, 104, 74, 0.1);
|
||||
|
||||
/* 成功、警告、错误颜色 */
|
||||
--color-success: #52c41a;
|
||||
--color-warning: #faad14;
|
||||
--color-error: #f5222d;
|
||||
|
||||
/* 中性色 */
|
||||
--color-gray-50: #f8f9fa;
|
||||
--color-gray-100: #f1f3f5;
|
||||
--color-gray-200: #e9ecef;
|
||||
--color-gray-300: #dee2e6;
|
||||
--color-gray-400: #ced4da;
|
||||
--color-gray-500: #adb5bd;
|
||||
--color-gray-600: #868e96;
|
||||
--color-gray-700: #495057;
|
||||
--color-gray-800: #343a40;
|
||||
--color-gray-900: #212529;
|
||||
|
||||
/* 字体设置 */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* 间距倍数基准 */
|
||||
--spacing-base: 0.25rem;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.25rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-normal: 0.2s ease;
|
||||
}
|
||||
|
||||
/* 基本元素样式 */
|
||||
html, body {
|
||||
@apply font-sans text-gray-800 antialiased;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 文字选择颜色 */
|
||||
::selection {
|
||||
@apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
||||
}
|
||||
|
||||
/* 主要文本颜色 */
|
||||
.text-primary {
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
@apply bg-[#00684a];
|
||||
}
|
||||
|
||||
/* 平滑过渡 */
|
||||
.transition-all-ease {
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* 组件样式索引文件
|
||||
* 集中导入所有组件样式
|
||||
*/
|
||||
|
||||
/* 布局相关组件 */
|
||||
@import "../layout.css";
|
||||
/* 已合并到layout.css中 */
|
||||
/* @import "./sidebar.css"; */
|
||||
|
||||
/* UI 基础组件 */
|
||||
@import "./button.css";
|
||||
@import "./card.css";
|
||||
@import "./form.css";
|
||||
@import "./table.css";
|
||||
@import "./badge.css";
|
||||
@import "./navigation.css";
|
||||
|
||||
/**
|
||||
* 注意：如果上述导入的文件不存在，将会在构建时报错
|
||||
* 请确保先创建这些文件，或者先注释掉不存在的文件
|
||||
*/
|
||||
@@ -1,19 +0,0 @@
|
||||
/**
|
||||
* 主样式入口文件
|
||||
* 本文件集中导入所有样式
|
||||
*/
|
||||
|
||||
/* Tailwind 基础指令 */
|
||||
@import "./base.css";
|
||||
|
||||
/* 组件样式 */
|
||||
@import "./components/index.css";
|
||||
|
||||
/* 页面特定样式 */
|
||||
@import "./pages/index.css";
|
||||
|
||||
/*
|
||||
* 注意: 页面特定样式已经移到各自页面的links函数中按需加载
|
||||
* 不再通过全局样式文件导入
|
||||
*/
|
||||
/* @import "./pages/index.css"; */
|
||||
@@ -1,201 +0,0 @@
|
||||
/**
|
||||
* 全局布局样式
|
||||
* 定义应用的主要布局结构
|
||||
*/
|
||||
|
||||
/**
|
||||
* 侧边栏基础样式
|
||||
*/
|
||||
.sidebar {
|
||||
@apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col
|
||||
transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
|
||||
shadow-[0_0_15px_rgba(0,0,0,0.05)];
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
@apply w-20;
|
||||
}
|
||||
|
||||
/* 侧边栏头部 */
|
||||
.sidebar-header {
|
||||
@apply h-16 border-b border-gray-100 flex items-center justify-between px-5;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
@apply flex items-center space-x-2;
|
||||
}
|
||||
|
||||
.sidebar-logo-img {
|
||||
@apply h-8 w-auto;
|
||||
}
|
||||
|
||||
.sidebar-logo-text {
|
||||
@apply font-medium text-lg text-gray-900 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-logo-text {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
@apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1
|
||||
rounded transition-all duration-200;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
/* 用户资料 */
|
||||
.sidebar-user {
|
||||
@apply flex items-center px-5 py-3 border-b border-gray-100;
|
||||
}
|
||||
|
||||
.sidebar-user-avatar {
|
||||
@apply w-10 h-10 rounded-full overflow-hidden flex-shrink-0;
|
||||
}
|
||||
|
||||
.sidebar-user-info {
|
||||
@apply ml-3 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-user-info {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-user-name {
|
||||
@apply text-sm font-medium text-gray-900;
|
||||
}
|
||||
|
||||
.sidebar-user-role {
|
||||
@apply text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 导航菜单 */
|
||||
.sidebar-menu {
|
||||
@apply flex-1 overflow-y-auto py-4 px-3;
|
||||
}
|
||||
|
||||
.sidebar-menu-item {
|
||||
@apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md
|
||||
cursor-pointer transition-all duration-200 mb-1;
|
||||
}
|
||||
|
||||
.sidebar-menu-item i {
|
||||
@apply text-base w-6 text-center;
|
||||
}
|
||||
|
||||
.sidebar-menu-icon {
|
||||
@apply text-xl opacity-80 w-5 flex-shrink-0;
|
||||
}
|
||||
|
||||
.sidebar-menu-text {
|
||||
@apply ml-2.5 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-menu-text {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-menu-badge {
|
||||
@apply ml-auto bg-[#00684a] text-white text-xs font-semibold h-5 min-w-[20px] rounded-full
|
||||
flex items-center justify-center px-1 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-menu-badge {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-menu-item:hover {
|
||||
@apply bg-[rgba(0,104,74,0.05)];
|
||||
}
|
||||
|
||||
.sidebar-menu-item.active {
|
||||
@apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
|
||||
}
|
||||
|
||||
.sidebar-submenu {
|
||||
@apply pl-7 mt-1 space-y-1 transition-all duration-200 overflow-hidden;
|
||||
}
|
||||
|
||||
.sidebar-submenu-item {
|
||||
@apply flex items-center px-3 py-2 rounded-md text-sm text-gray-500
|
||||
hover:bg-gray-50 transition-colors duration-100;
|
||||
}
|
||||
|
||||
.sidebar-submenu-item.active {
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
/* 侧边栏底部 */
|
||||
.sidebar-footer {
|
||||
@apply border-t border-gray-100 px-5 py-4;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主布局容器
|
||||
*/
|
||||
.layout-container {
|
||||
@apply flex min-h-screen bg-gray-50;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主内容区域
|
||||
*/
|
||||
.main-content {
|
||||
@apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
@apply ml-20;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
@apply flex-1 p-5 overflow-auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 面包屑导航
|
||||
*/
|
||||
.breadcrumb {
|
||||
@apply flex items-center text-sm text-gray-500 mb-4;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.breadcrumb-item:not(:last-child)::after {
|
||||
content: "/";
|
||||
@apply mx-2;
|
||||
}
|
||||
|
||||
.breadcrumb-item:last-child {
|
||||
@apply text-gray-700 font-medium;
|
||||
}
|
||||
|
||||
/**
|
||||
* 响应式调整
|
||||
*/
|
||||
@screen sm {
|
||||
.content-container {
|
||||
@apply p-6;
|
||||
}
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.sidebar-toggle {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 暗色模式
|
||||
*/
|
||||
.dark .layout-container {
|
||||
@apply bg-gray-900;
|
||||
}
|
||||
|
||||
.dark .content-container {
|
||||
@apply bg-gray-900 text-gray-200;
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
/**
|
||||
* 主样式文件
|
||||
* 包含应用所有样式
|
||||
*/
|
||||
|
||||
/* Tailwind 基础指令 */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 全局变量和基础样式 */
|
||||
@layer base {
|
||||
:root {
|
||||
/* 主题颜色变量 */
|
||||
--color-primary: #00684a;
|
||||
--color-primary-hover: #005a3f;
|
||||
--color-primary-light: rgba(0, 104, 74, 0.1);
|
||||
|
||||
/* 成功、警告、错误颜色 */
|
||||
--color-success: #52c41a;
|
||||
--color-warning: #faad14;
|
||||
--color-error: #f5222d;
|
||||
|
||||
/* 中性色 */
|
||||
--color-gray-50: #f8f9fa;
|
||||
--color-gray-100: #f1f3f5;
|
||||
--color-gray-200: #e9ecef;
|
||||
--color-gray-300: #dee2e6;
|
||||
--color-gray-400: #ced4da;
|
||||
--color-gray-500: #adb5bd;
|
||||
--color-gray-600: #868e96;
|
||||
--color-gray-700: #495057;
|
||||
--color-gray-800: #343a40;
|
||||
--color-gray-900: #212529;
|
||||
}
|
||||
|
||||
/* 基本元素样式 */
|
||||
html, body {
|
||||
@apply text-gray-800 antialiased;
|
||||
font-smooth: always;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 文字选择颜色 */
|
||||
::selection {
|
||||
@apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* 组件相关样式 */
|
||||
@layer components {
|
||||
/* 文本颜色工具类 */
|
||||
.text-primary {
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
@apply bg-[#00684a];
|
||||
}
|
||||
|
||||
.transition-all-ease {
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
/* === 布局组件 === */
|
||||
.layout-container {
|
||||
@apply flex min-h-screen bg-gray-50;
|
||||
}
|
||||
|
||||
/* 用户资料 */
|
||||
.user-profile {
|
||||
@apply p-4 border-b border-gray-100 flex items-center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center;
|
||||
}
|
||||
|
||||
/* === 侧边栏 === */
|
||||
.sidebar {
|
||||
@apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col
|
||||
transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
|
||||
shadow-[0_0_15px_rgba(0,0,0,0.05)];
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
@apply w-20;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
@apply flex-1 overflow-y-auto py-4 px-3;
|
||||
}
|
||||
|
||||
.sidebar-menu-item {
|
||||
@apply flex items-center py-3 px-4 text-gray-800 no-underline rounded-md
|
||||
cursor-pointer transition-all duration-200 mb-1 relative
|
||||
hover:bg-[rgba(0,104,74,0.05)];
|
||||
/* 确保点击事件可以正常工作 */
|
||||
pointer-events: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-menu-item i {
|
||||
@apply text-base w-6 text-center;
|
||||
}
|
||||
|
||||
.sidebar-menu-text {
|
||||
@apply ml-2.5 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-menu-text {
|
||||
@apply opacity-0 invisible;
|
||||
}
|
||||
|
||||
.sidebar-menu-item.active {
|
||||
@apply bg-[rgba(0,104,74,0.1)] text-[#00684A] font-medium;
|
||||
}
|
||||
|
||||
.submenu-container {
|
||||
@apply mt-1 mb-2 space-y-1 overflow-hidden border-l border-gray-100 ml-4 pl-3 relative;
|
||||
/* 确保子菜单在父菜单之上 */
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .submenu-container {
|
||||
@apply border-l-0 pl-0;
|
||||
}
|
||||
|
||||
.submenu-container .sidebar-menu-item {
|
||||
@apply py-2 pl-2 text-sm;
|
||||
}
|
||||
|
||||
.sidebar-menu-item:hover {
|
||||
@apply bg-[rgba(0,104,74,0.05)];
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
@apply bg-transparent border-none text-xl text-gray-500 cursor-pointer p-1
|
||||
rounded transition-all duration-200;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
/* === 主内容区域 === */
|
||||
.main-content {
|
||||
@apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
@apply ml-20;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
@apply flex-1 p-5 overflow-auto;
|
||||
}
|
||||
|
||||
/* === 面包屑导航 === */
|
||||
.breadcrumb {
|
||||
@apply flex items-center text-sm text-gray-500 mb-4;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.breadcrumb-item:not(:last-child)::after {
|
||||
content: "/";
|
||||
@apply mx-2;
|
||||
}
|
||||
|
||||
.breadcrumb-item:last-child {
|
||||
@apply text-gray-700 font-medium;
|
||||
}
|
||||
|
||||
/* === UI组件 === */
|
||||
|
||||
/* 按钮样式 */
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2
|
||||
border border-transparent rounded-md font-medium text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
@apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
@apply px-3 py-1.5 text-sm;
|
||||
}
|
||||
|
||||
/* 卡片组件 */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
|
||||
}
|
||||
|
||||
/* === 响应式调整 === */
|
||||
@screen sm {
|
||||
.content-container {
|
||||
@apply p-6;
|
||||
}
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.sidebar-toggle {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
|
||||
/* === 暗色模式 === */
|
||||
.dark .layout-container {
|
||||
@apply bg-gray-900;
|
||||
}
|
||||
|
||||
.dark .content-container {
|
||||
@apply bg-gray-900 text-gray-200;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/**
|
||||
* 页面样式索引文件
|
||||
* 集中导入所有页面特定样式
|
||||
*/
|
||||
|
||||
/* 首页 */
|
||||
@import "./home.css";
|
||||
|
||||
/* 评查点列表 */
|
||||
@import "./rules_index.css";
|
||||
|
||||
/* 评查点分组 */
|
||||
@import "./rule-groups.css";
|
||||
|
||||
/* 其他页面 - 待创建 */
|
||||
/*
|
||||
@import "./files.css";
|
||||
@import "./rules.css";
|
||||
@import "./reviews.css";
|
||||
@import "./settings.css";
|
||||
*/
|
||||
|
||||
/**
|
||||
* 注意：如果上述导入的文件不存在，将会在构建时报错
|
||||
* 请确保先创建这些文件，或者先注释掉不存在的文件
|
||||
*/
|
||||
@@ -1,76 +0,0 @@
|
||||
/* 评查点分组管理页面样式 */
|
||||
|
||||
/* 树形结构样式 */
|
||||
.tree-table .group-row {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tree-table .group-row:hover {
|
||||
background-color: rgba(0, 104, 74, 0.05);
|
||||
}
|
||||
|
||||
.tree-table .parent-row {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-table .child-row {
|
||||
border-left: 3px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.expand-icon:hover {
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.group-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.parent-badge {
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.child-badge {
|
||||
background-color: rgba(0, 104, 74, 0.05);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 按钮文本样式，不与其他冲突 */
|
||||
.btn-text {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--color-gray-800);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* 小尺寸按钮 */
|
||||
.btn-sm {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
/* app/styles/pages/rule-groups_index.css */
|
||||
/* 使用命名空间限制样式作用范围，避免覆盖全局样式 */
|
||||
.rule-groups-page a.badge.bg-primary.text-white {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page a.badge.bg-primary.text-white:hover {
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 修改分组名称链接颜色为绿色 */
|
||||
.rule-groups-page .tree-table a.text-primary {
|
||||
color: #00684a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rule-groups-page .tree-table a.text-primary:hover {
|
||||
text-decoration: underline;
|
||||
color: #005a3f;
|
||||
}
|
||||
|
||||
/* 分组名称链接样式 */
|
||||
.rule-groups-page .group-name-link {
|
||||
color: #00684a;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .group-name-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #005a3f;
|
||||
}
|
||||
|
||||
/* 展开/收起图标颜色 */
|
||||
.rule-groups-page .expand-icon i {
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
/* 树形结构样式 */
|
||||
.rule-groups-page .tree-table .group-row {
|
||||
transition: all 0.2s;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
}
|
||||
|
||||
.rule-groups-page .tree-table .group-row:hover {
|
||||
background-color: rgba(0, 104, 74, 0.05);
|
||||
}
|
||||
|
||||
.rule-groups-page .tree-table .parent-row {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
}
|
||||
|
||||
.rule-groups-page .tree-table .child-row {
|
||||
border-left: 3px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.rule-groups-page .expand-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .expand-icon:hover {
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.rule-groups-page .group-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.rule-groups-page .parent-badge {
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.rule-groups-page .child-badge {
|
||||
background-color: rgba(0, 104, 74, 0.05);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 状态点样式 */
|
||||
.rule-groups-page .status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.rule-groups-page .status-success {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.rule-groups-page .status-error {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.rule-groups-page .form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #495057;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rule-groups-page .form-input,
|
||||
.rule-groups-page .form-select {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .form-input:focus,
|
||||
.rule-groups-page .form-select:focus {
|
||||
border-color: #00684a;
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.rule-groups-page .ant-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.rule-groups-page .ant-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-table th,
|
||||
.rule-groups-page .ant-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
color: #495057;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.rule-groups-page .ant-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-pagination-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-pagination-item:hover {
|
||||
border-color: #00684a;
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-pagination-item-active {
|
||||
background-color: #00684a;
|
||||
border-color: #00684a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-pagination-prev,
|
||||
.rule-groups-page .ant-pagination-next {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-pagination-prev:disabled,
|
||||
.rule-groups-page .ant-pagination-next:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 特定链接样式 */
|
||||
.rule-groups-page .badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
}
|
||||
|
||||
/* 添加badge链接的特殊悬停样式 */
|
||||
.rule-groups-page a.badge.bg-primary.text-white:hover {
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 仅在rule-groups页面内生效的样式 */
|
||||
.rule-groups-page .bg-primary {
|
||||
background-color: #00684a;
|
||||
}
|
||||
|
||||
.rule-groups-page .text-white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rule-groups-page .text-secondary {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.rule-groups-page .text-error {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
/* 行操作按钮 */
|
||||
.rule-groups-page .ant-btn-text {
|
||||
background: transparent;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-btn-text.text-primary {
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-btn-text.text-primary:hover {
|
||||
color: #005a3f;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-btn-text.text-error {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-btn-text.text-error:hover {
|
||||
color: #cf1f29;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.rule-groups-page .flex-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rule-groups-page .flex-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索框样式 */
|
||||
.rule-groups-page .search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rule-groups-page .search-box .form-input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.rule-groups-page .search-box .ant-btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* 无按钮搜索框样式 */
|
||||
.rule-groups-page .search-box.form-input-only .form-input {
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
/* 评查文件列表页面样式 */
|
||||
.review-files-page {
|
||||
/* 所有样式都包含在此命名空间内 */
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.review-files-page .card-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 搜索框样式 */
|
||||
.review-files-page .search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.review-files-page .search-box .form-input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.review-files-page .search-box .ant-btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.review-files-page .ant-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.review-files-page .ant-table th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 500;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.review-files-page .ant-table td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.review-files-page .ant-table tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* 文件类型徽章 */
|
||||
.review-files-page .file-type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-badge i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-contract {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-license {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-punishment {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-report {
|
||||
background-color: #e6fffb;
|
||||
color: #13c2c2;
|
||||
}
|
||||
|
||||
.review-files-page .file-type-other {
|
||||
background-color: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
/* 状态徽章 */
|
||||
.review-files-page .status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.review-files-page .status-pass {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.review-files-page .status-warning {
|
||||
background-color: #fffbe6;
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.review-files-page .status-fail {
|
||||
background-color: #fff1f0;
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.review-files-page .status-pending {
|
||||
background-color: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
/* 严重程度指示器 */
|
||||
.review-files-page .severity-indicator {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.review-files-page .severity-info {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.review-files-page .severity-warning {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
.review-files-page .severity-error {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
|
||||
.review-files-page .severity-critical {
|
||||
background-color: #722ed1;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.review-files-page .pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.review-files-page .pagination-item {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.review-files-page .pagination-item:hover {
|
||||
border-color: var(--color-primary, #1677ff);
|
||||
color: var(--color-primary, #1677ff);
|
||||
}
|
||||
|
||||
.review-files-page .pagination-item.active {
|
||||
border-color: var(--color-primary, #1677ff);
|
||||
background-color: var(--color-primary, #1677ff);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.review-files-page .pagination-item.disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
border-color: #d9d9d9;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 表单组件样式 */
|
||||
.review-files-page .form-select {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.review-files-page .form-select:focus {
|
||||
border-color: var(--color-primary, #1677ff);
|
||||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 内容卡片样式 */
|
||||
.review-files-page .content-card .ant-card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 文本颜色辅助类 */
|
||||
.review-files-page .text-success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.review-files-page .text-warning {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.review-files-page .text-error {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.review-files-page .text-secondary {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
/* 错误容器样式 */
|
||||
.review-files-page .error-container {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
max-width: 500px;
|
||||
margin: 48px auto;
|
||||
}
|
||||
@@ -1,40 +1,120 @@
|
||||
/* 评查点列表页面样式 */
|
||||
.rules-page {
|
||||
/* 所有样式都包含在此命名空间内 */
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-card {
|
||||
.rules-page .filter-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 搜索框样式 */
|
||||
.search-box {
|
||||
.rules-page .search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box .form-input {
|
||||
.rules-page .search-box .form-input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.search-box .ant-btn {
|
||||
.rules-page .search-box .ant-btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.rules-table {
|
||||
/* 无按钮搜索框样式 */
|
||||
.rules-page .search-box.form-input-only .form-input {
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.rules-page .ant-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.rules-page .ant-table th {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.rules-page .ant-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
}
|
||||
|
||||
.rules-page .ant-table tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* 表格操作列样式 */
|
||||
.operations-cell {
|
||||
.rules-page .operations-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 - 改为文本按钮样式 */
|
||||
.rules-page .operations-cell .ant-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #e9ecef;
|
||||
padding: 4px 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
height: auto;
|
||||
min-width: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.rules-page .operation-btn {
|
||||
margin-right: 8px;
|
||||
font-weight: normal;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #e4e4e4;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rules-page .operation-btn i {
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.rules-page .operation-btn:hover {
|
||||
border-color: #00684a;
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.rules-page .operation-btn-danger {
|
||||
background-color: #f5222d;
|
||||
border-color: #f5222d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rules-page .operation-btn-danger:hover {
|
||||
background-color: #cf1f29;
|
||||
border-color: #cf1f29;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* 状态点样式 */
|
||||
.status-dot {
|
||||
.rules-page .status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -42,28 +122,177 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.status-dot-success {
|
||||
.rules-page .status-dot-success {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.status-dot-default {
|
||||
.rules-page .status-dot-default {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
/* 标签自定义样式 */
|
||||
.rule-tag {
|
||||
.rules-page .ant-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
font-weight: 400; /* 减少文字粗细度 */
|
||||
}
|
||||
|
||||
/* 表格行悬停效果 */
|
||||
.ant-table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
.rules-page .ant-tag-blue {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.rules-page .ant-tag-green {
|
||||
background-color: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.rules-page .ant-tag-cyan {
|
||||
background-color: rgba(19, 194, 194, 0.1);
|
||||
color: #13c2c2;
|
||||
}
|
||||
|
||||
.rules-page .ant-tag-purple {
|
||||
background-color: rgba(114, 46, 209, 0.1);
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.rules-page .ant-tag-orange {
|
||||
background-color: rgba(250, 173, 20, 0.1);
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.rules-page .ant-tag-red {
|
||||
background-color: rgba(245, 34, 45, 0.1);
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.rules-page .ant-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-item {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-item-active {
|
||||
background-color: #00684a;
|
||||
border-color: #00684a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-prev,
|
||||
.rules-page .ant-pagination-next {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rules-page .ant-pagination-options-size-changer {
|
||||
margin-left: 8px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 卡片内容调整 */
|
||||
.rules-page .content-card .ant-card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 表单标签 */
|
||||
.rules-page .form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.rules-page .form-select,
|
||||
.rules-page .form-input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rules-page .form-select:focus,
|
||||
.rules-page .form-input:focus {
|
||||
border-color: #00684a;
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 确认对话框 */
|
||||
.rules-page .modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.rules-page .modal-content {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.rules-page .error-container {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
max-width: 500px;
|
||||
margin: 48px auto;
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.page-header {
|
||||
.rules-page .page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -71,10 +300,44 @@
|
||||
}
|
||||
|
||||
/* 卡片内容间距 */
|
||||
.content-card {
|
||||
padding: 0;
|
||||
.rules-page .card-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content-card .ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
.rules-page .ant-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.rules-page .ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 按钮样式修正 */
|
||||
.rules-page .ant-btn-sm {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 按钮悬停覆盖样式 */
|
||||
.rules-page .ant-btn-primary {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.rules-page .ant-btn-primary:hover {
|
||||
color: white !important;
|
||||
background-color: #005a3f;
|
||||
}
|
||||
|
||||
/* 针对操作列中的按钮
|
||||
.rules-page .operations-cell .ant-btn-default:hover {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.rules-page .operations-cell .ant-btn-danger:hover {
|
||||
color: white;
|
||||
} */
|
||||
@@ -1,342 +0,0 @@
|
||||
/**
|
||||
* Tailwind CSS 配置
|
||||
*
|
||||
* 这个文件曾经包含所有样式定义，但现在已重组为更模块化的结构。
|
||||
* 请使用 app/styles/index.css 作为主样式入口文件。
|
||||
* 以下样式已转移到其他组件特定的CSS文件中，保留在此仅作备份参考。
|
||||
*/
|
||||
|
||||
@import "./base.css";
|
||||
|
||||
:root {
|
||||
--primary-color: #00684a;
|
||||
--primary-hover: #005a40;
|
||||
--primary-light: rgba(0, 104, 74, 0.1);
|
||||
--success-color: #52c41a;
|
||||
--warning-color: #faad14;
|
||||
--error-color: #ff4d4f;
|
||||
--text-color: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--border-color: #f0f0f0;
|
||||
--bg-gray: #f5f5f5;
|
||||
}
|
||||
|
||||
/*
|
||||
@layer components {
|
||||
/* 布局容器 */
|
||||
/*
|
||||
.layout-container {
|
||||
@apply flex h-screen w-full overflow-hidden;
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
/*
|
||||
.sidebar {
|
||||
@apply w-60 h-screen bg-blue-50 border-r border-gray-100 flex flex-col transition-all duration-300 fixed left-0 top-0 z-50 overflow-y-auto shadow-sm;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
@apply w-16;
|
||||
}
|
||||
|
||||
/* 主内容区 */
|
||||
/*
|
||||
.main-content {
|
||||
@apply flex-1 p-5 overflow-y-auto ml-60 transition-all duration-300;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
@apply ml-16;
|
||||
}
|
||||
|
||||
/* 面包屑导航 */
|
||||
/*
|
||||
.breadcrumb {
|
||||
@apply flex items-center text-sm text-gray-500 mb-4;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.breadcrumb-item:not(:last-child)::after {
|
||||
content: "/";
|
||||
@apply mx-2 text-gray-400;
|
||||
}
|
||||
|
||||
.breadcrumb-item:last-child {
|
||||
@apply text-gray-700 font-medium;
|
||||
}
|
||||
|
||||
/* 侧边栏菜单 */
|
||||
/*
|
||||
.sidebar-menu-item {
|
||||
@apply py-2 px-4 hover:bg-gray-50 rounded-md transition-all duration-200 mb-1;
|
||||
}
|
||||
|
||||
.sidebar-menu-item.active {
|
||||
@apply bg-primary bg-opacity-10;
|
||||
}
|
||||
|
||||
.sidebar-menu-item.active a {
|
||||
@apply text-primary font-medium;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
/*
|
||||
.dashboard-card {
|
||||
@apply bg-white rounded-lg shadow-sm p-5 mb-5;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-base font-semibold mb-4 flex items-center text-gray-800;
|
||||
}
|
||||
|
||||
.card-title i {
|
||||
@apply text-xl mr-2 text-primary;
|
||||
}
|
||||
|
||||
/* 统计卡片网格 */
|
||||
/*
|
||||
.stat-grid {
|
||||
@apply grid grid-cols-1 md:grid-cols-4 gap-4;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
/*
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-badge.status-success {
|
||||
@apply bg-green-50 text-green-600;
|
||||
}
|
||||
|
||||
.status-badge.status-warning {
|
||||
@apply bg-yellow-50 text-yellow-600;
|
||||
}
|
||||
|
||||
.status-badge.status-error {
|
||||
@apply bg-red-50 text-red-600;
|
||||
}
|
||||
|
||||
/* 状态点 */
|
||||
/*
|
||||
.status-dot {
|
||||
@apply inline-block w-2 h-2 rounded-full mr-1.5;
|
||||
}
|
||||
|
||||
.status-dot-success {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
.status-dot-warning {
|
||||
@apply bg-yellow-500;
|
||||
}
|
||||
|
||||
.status-dot-error {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
.status-dot-default {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
/* 表单组件 */
|
||||
/*
|
||||
.form-label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-1;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@apply relative flex;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
@apply pr-10;
|
||||
}
|
||||
|
||||
.search-box button {
|
||||
@apply absolute inset-y-0 right-0 flex items-center px-2;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
/*
|
||||
.ant-table {
|
||||
@apply w-full bg-white rounded-md overflow-hidden;
|
||||
}
|
||||
|
||||
.ant-table th {
|
||||
@apply py-3 px-4 text-left text-sm font-medium text-gray-600 bg-gray-50 border-b border-gray-200;
|
||||
}
|
||||
|
||||
.ant-table td {
|
||||
@apply py-3 px-4 text-sm text-gray-700 border-b border-gray-100;
|
||||
}
|
||||
|
||||
.ant-table tr:hover td {
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
/*
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none transition-colors duration-200;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply bg-primary text-white hover:bg-primary-dark;
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
@apply bg-white text-red-600 border-gray-300 hover:bg-red-50 hover:border-red-300;
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
@apply px-2.5 py-1 text-xs;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
/*
|
||||
.ant-tag {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
|
||||
}
|
||||
|
||||
.ant-tag-blue {
|
||||
@apply bg-blue-50 text-blue-600;
|
||||
}
|
||||
|
||||
.ant-tag-green {
|
||||
@apply bg-green-50 text-green-600;
|
||||
}
|
||||
|
||||
.ant-tag-cyan {
|
||||
@apply bg-cyan-50 text-cyan-600;
|
||||
}
|
||||
|
||||
.ant-tag-purple {
|
||||
@apply bg-purple-50 text-purple-600;
|
||||
}
|
||||
|
||||
.ant-tag-orange {
|
||||
@apply bg-orange-50 text-orange-600;
|
||||
}
|
||||
|
||||
.ant-tag-red {
|
||||
@apply bg-red-50 text-red-600;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
/*
|
||||
.ant-card {
|
||||
@apply bg-white rounded-md shadow-sm overflow-hidden mb-5;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
@apply p-5;
|
||||
}
|
||||
|
||||
/* 评查结果面板 */
|
||||
/*
|
||||
.review-points-panel {
|
||||
@apply bg-white rounded-md shadow-sm overflow-hidden h-full;
|
||||
}
|
||||
|
||||
.review-panel-header {
|
||||
@apply bg-primary bg-opacity-10 flex items-center;
|
||||
}
|
||||
|
||||
/* 评查点样式 */
|
||||
/*
|
||||
.review-point-item {
|
||||
@apply border-b border-gray-100 p-3 hover:bg-gray-50 cursor-pointer;
|
||||
}
|
||||
|
||||
.review-point-header {
|
||||
@apply flex items-center justify-between mb-1;
|
||||
}
|
||||
|
||||
.review-point-title {
|
||||
@apply text-sm font-medium text-gray-700;
|
||||
}
|
||||
|
||||
.review-point-location {
|
||||
@apply flex items-center text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 选项卡 */
|
||||
/*
|
||||
.tab-container {
|
||||
@apply bg-white rounded-md shadow-sm overflow-hidden;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
@apply flex border-b border-gray-200;
|
||||
}
|
||||
|
||||
.tab-nav-item {
|
||||
@apply flex items-center py-3 px-4 text-sm font-medium text-gray-600 cursor-pointer;
|
||||
}
|
||||
|
||||
.tab-nav-item i {
|
||||
@apply mr-1.5;
|
||||
}
|
||||
|
||||
.tab-nav-item.active {
|
||||
@apply text-primary border-b-2 border-primary;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
/* 辅助类 */
|
||||
/*
|
||||
.text-primary {
|
||||
@apply text-green-700;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
@apply bg-green-700;
|
||||
}
|
||||
|
||||
.bg-primary-light {
|
||||
@apply bg-green-50;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
@apply text-green-600;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
@apply text-yellow-600;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
@apply text-red-600;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
@apply border-green-700;
|
||||
}
|
||||
} */
|
||||
Reference in New Issue
Block a user