Merge branch 'shiy' into awen
# Conflicts: # package-lock.json # package.json
This commit is contained in:
@@ -34,7 +34,7 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
{
|
||||
id: 'file-upload',
|
||||
title: '文件上传',
|
||||
path: '/files/new',
|
||||
path: '/files/upload',
|
||||
icon: 'ri-upload-cloud-line'
|
||||
},
|
||||
{
|
||||
@@ -42,6 +42,12 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
|
||||
title: '文件列表',
|
||||
path: '/files',
|
||||
icon: 'ri-file-list-3-line'
|
||||
},
|
||||
{
|
||||
id:'documents',
|
||||
title:'文档列表',
|
||||
path:'/documents',
|
||||
icon:'ri-file-list-3-line'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
|
||||
interface AlertProps {
|
||||
type: 'info' | 'success' | 'warning' | 'error';
|
||||
title: React.ReactNode;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Alert({ type, title, className = '', children }: AlertProps) {
|
||||
const getTypeStyles = () => {
|
||||
switch (type) {
|
||||
case 'info':
|
||||
return {
|
||||
container: 'bg-blue-50 border-blue-200 text-blue-800',
|
||||
icon: 'ri-information-line text-blue-600'
|
||||
};
|
||||
case 'success':
|
||||
return {
|
||||
container: 'bg-green-50 border-green-200 text-green-800',
|
||||
icon: 'ri-checkbox-circle-line text-green-600'
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
||||
icon: 'ri-alert-line text-yellow-600'
|
||||
};
|
||||
case 'error':
|
||||
return {
|
||||
container: 'bg-red-50 border-red-200 text-red-800',
|
||||
icon: 'ri-error-warning-line text-red-600'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
container: 'bg-gray-50 border-gray-200 text-gray-800',
|
||||
icon: 'ri-information-line text-gray-600'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const styles = getTypeStyles();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded-md p-3 ${styles.container} ${className}`}
|
||||
role="alert"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<i className={`${styles.icon} mr-2 text-lg`}></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{title}</div>
|
||||
{children && <div className="mt-1 text-sm">{children}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import dateRangePickerStyles from "~/styles/components/date-range-picker.css?url";
|
||||
|
||||
export interface DateRangePickerProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
onStartDateChange: (value: string) => void;
|
||||
onEndDateChange: (value: string) => void;
|
||||
startLabel?: string;
|
||||
endLabel?: string;
|
||||
className?: string;
|
||||
startId?: string;
|
||||
endId?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: dateRangePickerStyles }
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围选择器组件
|
||||
* 用于选择日期范围，如开始日期和结束日期
|
||||
*/
|
||||
export function DateRangePicker({
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
startLabel = "从",
|
||||
endLabel = "至",
|
||||
className = "",
|
||||
startId = "date-start",
|
||||
endId = "date-end"
|
||||
}: DateRangePickerProps) {
|
||||
return (
|
||||
<div className={`date-range-picker ${className}`}>
|
||||
<div className="date-range-fields">
|
||||
<div className="date-field">
|
||||
<label htmlFor={startId} className="date-label">{startLabel}</label>
|
||||
<input
|
||||
id={startId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={startDate}
|
||||
onChange={(e) => onStartDateChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="date-separator">至</span>
|
||||
<div className="date-field">
|
||||
<label htmlFor={endId} className="date-label">{endLabel}</label>
|
||||
<input
|
||||
id={endId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={endDate}
|
||||
onChange={(e) => onEndDateChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 简化版日期范围选择器，适用于紧凑布局，不显示标签
|
||||
export function SimpleDateRangePicker({
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
className = "",
|
||||
startId = "date-start-simple",
|
||||
endId = "date-end-simple"
|
||||
}: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
|
||||
return (
|
||||
<div className={`date-range-picker simple-date-range-picker ${className}`}>
|
||||
<div className="date-range-fields">
|
||||
<input
|
||||
id={startId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={startDate}
|
||||
onChange={(e) => onStartDateChange(e.target.value)}
|
||||
aria-label="开始日期"
|
||||
/>
|
||||
<span className="date-separator">至</span>
|
||||
<input
|
||||
id={endId}
|
||||
type="date"
|
||||
className="date-input"
|
||||
value={endDate}
|
||||
onChange={(e) => onEndDateChange(e.target.value)}
|
||||
aria-label="结束日期"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import fileProgressStyles from "~/styles/components/file-progress.css?url";
|
||||
|
||||
interface FileProgressProps {
|
||||
fileName: string;
|
||||
fileSize?: string;
|
||||
progress: number;
|
||||
speed?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: fileProgressStyles }];
|
||||
}
|
||||
|
||||
export function FileProgress({
|
||||
fileName,
|
||||
fileSize,
|
||||
progress,
|
||||
speed = "0KB/s",
|
||||
className = ""
|
||||
}: FileProgressProps) {
|
||||
return (
|
||||
<div className={`progress-container ${className}`}>
|
||||
<div className="mb-2 flex justify-between items-center">
|
||||
<span className="font-medium">{fileName}</span>
|
||||
{fileSize && <span className="text-secondary text-sm">{fileSize}</span>}
|
||||
</div>
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="progress-bar-inner"
|
||||
style={{ width: `${progress}%` }}
|
||||
role="progressbar"
|
||||
aria-valuenow={progress}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
></div>
|
||||
</div>
|
||||
<div className="progress-text">
|
||||
<span>{progress}%</span>
|
||||
<span>{speed}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import fileTagStyles from '~/styles/components/file-tag.css?url';
|
||||
|
||||
// 支持的文件拓展名类型
|
||||
export type FileExtension =
|
||||
| 'pdf'
|
||||
| 'doc'
|
||||
| 'docx'
|
||||
| 'xls'
|
||||
| 'xlsx'
|
||||
| 'ppt'
|
||||
| 'pptx'
|
||||
| 'zip'
|
||||
| 'rar'
|
||||
| 'txt'
|
||||
| 'jpg'
|
||||
| 'png'
|
||||
| 'gif'
|
||||
| string;
|
||||
|
||||
interface FileTagProps {
|
||||
extension: FileExtension;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
showIcon?: boolean;
|
||||
showText?: boolean;
|
||||
showBackground?: boolean;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: fileTagStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件标签组件
|
||||
* 用于显示文件的扩展名，如PDF、Word、Excel等
|
||||
* @param extension 文件扩展名
|
||||
* @param className 额外的类名
|
||||
* @param size 尺寸：default, sm, lg
|
||||
* @param showIcon 是否显示图标，默认为true
|
||||
* @param showText 是否显示文件扩展名文本，默认为false
|
||||
* @param showBackground 是否显示背景颜色，默认为true
|
||||
*/
|
||||
export function FileTag({
|
||||
extension,
|
||||
className = '',
|
||||
size = 'default',
|
||||
showIcon = true,
|
||||
showText = false,
|
||||
showBackground = true
|
||||
}: FileTagProps) {
|
||||
// 获取干净的扩展名（去除点号并转换为小写）
|
||||
const getCleanExtension = () => {
|
||||
return extension.replace(/^\./, '').toLowerCase();
|
||||
};
|
||||
|
||||
// 文件扩展名对应的图标
|
||||
const getExtensionIcon = () => {
|
||||
const ext = getCleanExtension();
|
||||
const extensionIconMap: Record<string, string> = {
|
||||
'pdf': 'ri-file-pdf-line',
|
||||
'doc': 'ri-file-word-line',
|
||||
'docx': 'ri-file-word-line',
|
||||
'xls': 'ri-file-excel-line',
|
||||
'xlsx': 'ri-file-excel-line',
|
||||
'ppt': 'ri-file-ppt-line',
|
||||
'pptx': 'ri-file-ppt-line',
|
||||
'zip': 'ri-file-zip-line',
|
||||
'rar': 'ri-file-zip-line',
|
||||
'txt': 'ri-file-text-line',
|
||||
'jpg': 'ri-image-line',
|
||||
'jpeg': 'ri-image-line',
|
||||
'png': 'ri-image-line',
|
||||
'gif': 'ri-file-gif-line',
|
||||
};
|
||||
return extensionIconMap[ext] || 'ri-file-line';
|
||||
};
|
||||
|
||||
// 获取文件拓展名对应的类名
|
||||
const getExtensionClass = () => {
|
||||
const ext = getCleanExtension();
|
||||
return `file-tag file-tag-${ext} ${showBackground ? '' : 'file-tag-no-bg'}`;
|
||||
};
|
||||
|
||||
// 获取尺寸类名
|
||||
const getSizeClass = () => {
|
||||
return size !== 'default' ? `file-tag-${size}` : '';
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`${getExtensionClass()} ${getSizeClass()} ${className}`}>
|
||||
{showIcon && <i className={`${getExtensionIcon()} file-tag-icon`}></i>}
|
||||
{showText && <span className="file-tag-text">{getCleanExtension().toUpperCase()}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +1,86 @@
|
||||
import { FileType, FILE_TYPE_LABELS } from '~/routes/rules-files';
|
||||
import fileTypeTagStyles from '~/styles/components/file-type-tag.css?url';
|
||||
|
||||
export type FileType =
|
||||
| 'sales-contract'
|
||||
| 'purchase-contract'
|
||||
| 'license'
|
||||
| 'punishment'
|
||||
| 'agreement'
|
||||
| string;
|
||||
|
||||
interface FileTypeTagProps {
|
||||
fileType: FileType;
|
||||
type: FileType;
|
||||
text?: string;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
showIcon?: boolean;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: fileTypeTagStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件类型标签组件
|
||||
* 根据文件类型显示不同样式的标签
|
||||
* 文档类型标签组件
|
||||
* 用于显示文档的类型，如销售合同、采购合同、许可证等
|
||||
* @param type 文档类型
|
||||
* @param text 自定义文本，不提供则使用默认文本
|
||||
* @param className 额外的类名
|
||||
* @param size 尺寸：default, sm, lg
|
||||
* @param showIcon 是否显示图标，默认为true
|
||||
*/
|
||||
export function FileTypeTag({ fileType, className = '', size }: FileTypeTagProps) {
|
||||
const sizeClass = size ? `file-type-tag-${size}` : '';
|
||||
const tagClassName = `file-type-tag file-type-tag-${fileType.toLowerCase()} ${sizeClass} file-type-tag-with-icon ${className}`;
|
||||
|
||||
// 根据文件类型选择图标
|
||||
const getFileTypeIcon = () => {
|
||||
switch (fileType) {
|
||||
case FileType.CONTRACT:
|
||||
return <i className="ri-file-list-3-line"></i>;
|
||||
case FileType.LICENSE:
|
||||
return <i className="ri-vip-crown-line"></i>;
|
||||
case FileType.PUNISHMENT:
|
||||
return <i className="ri-scales-line"></i>;
|
||||
case FileType.REPORT:
|
||||
return <i className="ri-file-chart-line"></i>;
|
||||
default:
|
||||
return <i className="ri-file-line"></i>;
|
||||
}
|
||||
export function FileTypeTag({
|
||||
type,
|
||||
text,
|
||||
className = '',
|
||||
size = 'default',
|
||||
showIcon = true
|
||||
}: FileTypeTagProps) {
|
||||
// 文档类型对应的图标
|
||||
const getTypeIcon = () => {
|
||||
const typeIconMap: Record<string, string> = {
|
||||
'sales-contract': 'ri-file-list-3-line',
|
||||
'purchase-contract': 'ri-shopping-cart-line',
|
||||
'license': 'ri-vip-crown-line',
|
||||
'punishment': 'ri-scales-line',
|
||||
'agreement': 'ri-file-paper-line',
|
||||
};
|
||||
return typeIconMap[type] || 'ri-file-text-line';
|
||||
};
|
||||
|
||||
// 文档类型对应的文本
|
||||
const getTypeText = () => {
|
||||
if (text) return text;
|
||||
|
||||
const typeTextMap: Record<string, string> = {
|
||||
'sales-contract': '销售合同',
|
||||
'purchase-contract': '采购合同',
|
||||
'license': '专卖许可证',
|
||||
'punishment': '行政处罚决定书',
|
||||
'agreement': '承包协议',
|
||||
};
|
||||
return typeTextMap[type] || type;
|
||||
};
|
||||
|
||||
// 获取文档类型对应的类名
|
||||
const getTypeClass = () => {
|
||||
return `file-type-tag file-type-${type}`;
|
||||
};
|
||||
|
||||
// 获取尺寸类名
|
||||
const getSizeClass = () => {
|
||||
return size !== 'default' ? `file-type-tag-${size}` : '';
|
||||
};
|
||||
|
||||
// 获取图标显示相关的类名
|
||||
const getIconClass = () => {
|
||||
return !showIcon ? 'file-type-tag-no-icon' : '';
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={tagClassName}>
|
||||
{getFileTypeIcon()}
|
||||
{FILE_TYPE_LABELS[fileType]}
|
||||
<span className={`${getTypeClass()} ${getSizeClass()} ${getIconClass()} ${className}`}>
|
||||
{showIcon && <i className={`${getTypeIcon()} file-type-icon`}></i>}
|
||||
<span className="file-type-text">{getTypeText()}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { SearchBox } from '~/components/ui/SearchBox';
|
||||
import { SimpleDateRangePicker, DateRangePicker } from '~/components/ui/DateRangePicker';
|
||||
|
||||
interface FilterOption {
|
||||
value: string;
|
||||
@@ -131,5 +132,69 @@ export function SearchFilter({
|
||||
);
|
||||
}
|
||||
|
||||
// 导出筛选下拉框组件
|
||||
|
||||
interface DateRangeFilterProps {
|
||||
label: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
onStartDateChange: (value: string) => void;
|
||||
onEndDateChange: (value: string) => void;
|
||||
className?: string;
|
||||
startLabel?: string;
|
||||
endLabel?: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围筛选组件
|
||||
*
|
||||
* 使用示例:
|
||||
* ```tsx
|
||||
* <DateRangeFilter
|
||||
* label="上传时间"
|
||||
* startDate={dateFrom}
|
||||
* endDate={dateTo}
|
||||
* onStartDateChange={(value) => handleDateChange('dateFrom', value)}
|
||||
* onEndDateChange={(value) => handleDateChange('dateTo', value)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export function DateRangeFilter({
|
||||
label,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
className = '',
|
||||
startLabel = "从",
|
||||
endLabel = "至",
|
||||
simple = false
|
||||
}: DateRangeFilterProps) {
|
||||
return (
|
||||
<div className={`filter-item ${className}`}>
|
||||
<label className="filter-label">{label}</label>
|
||||
{simple ? (
|
||||
<SimpleDateRangePicker
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={onStartDateChange}
|
||||
onEndDateChange={onEndDateChange}
|
||||
className="filter-control"
|
||||
/>
|
||||
) : (
|
||||
<DateRangePicker
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={onStartDateChange}
|
||||
onEndDateChange={onEndDateChange}
|
||||
startLabel={startLabel}
|
||||
endLabel={endLabel}
|
||||
className="filter-control"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 导出筛选下拉框组件和日期范围筛选组件
|
||||
export { FilterSelect };
|
||||
@@ -0,0 +1,41 @@
|
||||
import processingStepsStyles from "~/styles/components/processing-steps.css?url";
|
||||
|
||||
export interface Step {
|
||||
title: string;
|
||||
description: string;
|
||||
status: 'waiting' | 'active' | 'done' | 'error';
|
||||
}
|
||||
|
||||
interface ProcessingStepsProps {
|
||||
steps: Step[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: processingStepsStyles }];
|
||||
}
|
||||
|
||||
export function ProcessingSteps({ steps, className = "" }: ProcessingStepsProps) {
|
||||
return (
|
||||
<div className={`steps-container-horizontal ${className}`}>
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`step-item-horizontal ${step.status}`}
|
||||
data-step={index + 1}
|
||||
>
|
||||
<div className="step-icon-horizontal">
|
||||
{step.status === 'done' && <i className="ri-check-line"></i>}
|
||||
{step.status === 'error' && <i className="ri-close-line"></i>}
|
||||
{step.status === 'active' && <span className="loading-spinner"></span>}
|
||||
{step.status === 'waiting' && <span>{index + 1}</span>}
|
||||
</div>
|
||||
<div className="step-content-horizontal">
|
||||
<div className="step-title-horizontal">{step.title}</div>
|
||||
<div className="step-description-horizontal">{step.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +1,83 @@
|
||||
import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';
|
||||
import statusBadgeStyles from '~/styles/components/status-badge.css?url';
|
||||
|
||||
export type StatusType = 'pending' | 'processing' | 'pass' | 'warning' | 'fail' | string;
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: ReviewStatus;
|
||||
issueCount?: number;
|
||||
status: StatusType;
|
||||
text?: string;
|
||||
className?: string;
|
||||
size?: 'default' | 'sm' | 'lg';
|
||||
clickable?: boolean;
|
||||
onClick?: () => void;
|
||||
showIcon?: boolean;
|
||||
customIcon?: string;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: statusBadgeStyles }];
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件评查状态标签组件
|
||||
* 根据评查状态显示不同样式的标签
|
||||
* 状态徽章组件
|
||||
* 用于显示文档的处理状态，如待审核、审核中、通过等
|
||||
*/
|
||||
export function StatusBadge({
|
||||
status,
|
||||
issueCount = 0,
|
||||
text,
|
||||
className = '',
|
||||
size,
|
||||
clickable = false,
|
||||
onClick
|
||||
showIcon = true,
|
||||
customIcon
|
||||
}: StatusBadgeProps) {
|
||||
const statusMap: Record<ReviewStatus, string> = {
|
||||
[ReviewStatus.PASS]: 'success',
|
||||
[ReviewStatus.WARNING]: 'warning',
|
||||
[ReviewStatus.FAIL]: 'error',
|
||||
[ReviewStatus.PENDING]: 'processing'
|
||||
};
|
||||
|
||||
const badgeType = statusMap[status] || 'default';
|
||||
const sizeClass = size ? `status-badge-${size}` : '';
|
||||
const clickableClass = clickable ? 'status-badge-clickable' : '';
|
||||
|
||||
// 根据状态选择图标
|
||||
// 状态对应的图标
|
||||
const getStatusIcon = () => {
|
||||
switch (status) {
|
||||
case ReviewStatus.PASS:
|
||||
return <i className="ri-checkbox-circle-line"></i>;
|
||||
case ReviewStatus.WARNING:
|
||||
return <i className="ri-alert-line"></i>;
|
||||
case ReviewStatus.FAIL:
|
||||
return <i className="ri-close-circle-line"></i>;
|
||||
case ReviewStatus.PENDING:
|
||||
return <i className="ri-time-line"></i>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
// 如果提供了自定义图标，优先使用
|
||||
if (customIcon) return customIcon;
|
||||
|
||||
const statusIconMap: Record<string, string> = {
|
||||
pending: 'ri-time-line',
|
||||
processing: 'ri-loader-4-line',
|
||||
pass: 'ri-checkbox-circle-line',
|
||||
warning: 'ri-alert-line',
|
||||
fail: 'ri-error-warning-line',
|
||||
};
|
||||
return statusIconMap[status] || '';
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (clickable && onClick) {
|
||||
onClick();
|
||||
}
|
||||
// 状态对应的文本
|
||||
const getStatusText = () => {
|
||||
if (text) return text;
|
||||
|
||||
const statusTextMap: Record<string, string> = {
|
||||
pending: '待审核',
|
||||
processing: '审核中',
|
||||
pass: '通过',
|
||||
warning: '警告',
|
||||
fail: '不通过',
|
||||
};
|
||||
|
||||
// 中英文映射，方便国际化
|
||||
const statusEnglishTextMap: Record<string, string> = {
|
||||
pending: 'Pending',
|
||||
processing: 'Processing',
|
||||
pass: 'Pass',
|
||||
warning: 'Warning',
|
||||
fail: 'Failed',
|
||||
};
|
||||
|
||||
// 获取当前语言环境，这里默认使用中文
|
||||
const lang: string = 'zh';
|
||||
|
||||
return lang === 'en'
|
||||
? (statusEnglishTextMap[status] || status)
|
||||
: (statusTextMap[status] || status);
|
||||
};
|
||||
|
||||
// 获取状态对应的类名
|
||||
const getStatusClass = () => {
|
||||
return `status-badge status-${status}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`status-badge status-badge-${badgeType} status-badge-with-icon ${sizeClass} ${clickableClass} ${className}`}
|
||||
onClick={handleClick}
|
||||
role={clickable ? "button" : undefined}
|
||||
tabIndex={clickable ? 0 : undefined}
|
||||
>
|
||||
{getStatusIcon()}
|
||||
{REVIEW_STATUS_LABELS[status]}
|
||||
{issueCount > 0 && ` (${issueCount})`}
|
||||
<span className={`${getStatusClass()} ${className}`}>
|
||||
{showIcon && getStatusIcon() && <i className={`${getStatusIcon()} mr-1`}></i>}
|
||||
{getStatusText()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
/* 封装了状态的点，用于显示状态*/
|
||||
// 状态类型
|
||||
type StatusType = 'success' | 'error' | 'warning' | 'default' | 'processing';
|
||||
|
||||
interface StatusDotProps {
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useRef, useState, useCallback, ReactNode, forwardRef, useImperativeHandle } from "react";
|
||||
import { Button } from "./Button";
|
||||
import uploadAreaStyles from "~/styles/components/upload-area.css?url";
|
||||
|
||||
interface UploadAreaProps {
|
||||
onFilesSelected: (files: FileList) => void;
|
||||
className?: string;
|
||||
accept?: string;
|
||||
multiple?: boolean;
|
||||
icon?: string;
|
||||
buttonText?: string;
|
||||
mainText?: string;
|
||||
tipText?: ReactNode;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface UploadAreaRef {
|
||||
resetFileInput: () => void;
|
||||
}
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: uploadAreaStyles }];
|
||||
}
|
||||
|
||||
export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
|
||||
onFilesSelected,
|
||||
className = "",
|
||||
accept = "",
|
||||
multiple = false,
|
||||
icon = "ri-upload-cloud-2-line",
|
||||
buttonText = "选择文件",
|
||||
mainText = "点击或拖拽文件到此区域上传",
|
||||
tipText = "",
|
||||
disabled = false
|
||||
}, ref) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
const resetFileInput = useCallback(() => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 暴露resetFileInput方法给父组件
|
||||
useImperativeHandle(ref, () => ({
|
||||
resetFileInput
|
||||
}));
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (!disabled && fileInputRef.current) {
|
||||
fileInputRef.current.click();
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
const handleFileChange = useCallback(() => {
|
||||
if (fileInputRef.current?.files?.length) {
|
||||
onFilesSelected(fileInputRef.current.files);
|
||||
}
|
||||
}, [onFilesSelected]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
if (!disabled) {
|
||||
setIsDragOver(true);
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
const handleDragLeave = useCallback(() => {
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
|
||||
if (!disabled && e.dataTransfer.files.length > 0) {
|
||||
onFilesSelected(e.dataTransfer.files);
|
||||
}
|
||||
}, [disabled, onFilesSelected]);
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}
|
||||
}, [handleClick, disabled]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`upload-area ${isDragOver ? 'dragover' : ''} ${disabled ? 'disabled' : ''} ${className}`}
|
||||
onClick={handleClick}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onKeyDown={handleKeyDown}
|
||||
role="button"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-label="上传文件区域"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
accept={accept}
|
||||
multiple={multiple}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<i className={`${icon} upload-icon`} aria-hidden="true"></i>
|
||||
<div className="upload-text">{mainText}</div>
|
||||
{tipText && <p className="upload-tip mb-2">{tipText}</p>}
|
||||
<Button
|
||||
type="primary"
|
||||
icon="ri-file-upload-line"
|
||||
disabled={disabled}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleClick();
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
UploadArea.displayName = "UploadArea";
|
||||
Reference in New Issue
Block a user