BLD-ERPAuto/BIPMaterialManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): theme-adapt all page/dialog components for dark mode

Browse Source 
Replace hardcoded Tailwind colors (bg-white, text-slate-*, border-slate-*,
bg-gray-*, text-gray-*) with shadcn semantic tokens (bg-card, text-foreground,
text-muted-foreground, border-border, bg-muted, bg-accent, border-input)
across 23 renderer components.

This enables proper light/dark mode rendering for all pages and dialogs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Misaka
2026-04-01 21:17:12 +08:00
parent cb438a34db
commit a59904c71f
23 changed files with 258 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/renderer/src/components/ExecutionReportDialog.tsx
View File

@@ -142,7 +142,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
</div> </div>
<p <p
id="execution-dialog-progress-desc" id="execution-dialog-progress-desc"
className="text-sm text-gray-600 mb-4" className="text-sm text-muted-foreground mb-4"
aria-live="polite" aria-live="polite"
aria-atomic="true" aria-atomic="true"
> >
@@ -161,7 +161,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
<CheckCircle className="w-12 h-12 text-green-500" /> <CheckCircle className="w-12 h-12 text-green-500" />
)} )}
</div> </div>
<p className="text-sm text-gray-600"> <p className="text-sm text-muted-foreground">
{dryRun {dryRun
? '预览模式 - 未实际删除数据' ? '预览模式 - 未实际删除数据'
: hasErrors : hasErrors
@@ -183,9 +183,9 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
</div> </div>
</div> </div>
<div className="flex justify-around py-4 bg-gray-50 rounded-lg border border-gray-200"> <div className="flex justify-around py-4 bg-muted rounded-lg border border-border">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-xs text-gray-600">订单进度</span> <span className="text-xs text-muted-foreground">订单进度</span>
<span className="text-lg font-semibold text-blue-600"> <span className="text-lg font-semibold text-blue-600">
{Math.min(progress!.currentOrderIndex, progress!.totalOrders)} /{' '} {Math.min(progress!.currentOrderIndex, progress!.totalOrders)} /{' '}
{progress!.totalOrders} {progress!.totalOrders}
@@ -193,14 +193,14 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
</div> </div>
{progress!.totalMaterialsInOrder > 0 && ( {progress!.totalMaterialsInOrder > 0 && (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-xs text-gray-600">物料进度</span> <span className="text-xs text-muted-foreground">物料进度</span>
<span className="text-lg font-semibold text-blue-600"> <span className="text-lg font-semibold text-blue-600">
{progress!.currentMaterialIndex} / {progress!.totalMaterialsInOrder} {progress!.currentMaterialIndex} / {progress!.totalMaterialsInOrder}
</span> </span>
</div> </div>
)} )}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-xs text-gray-600">总进度</span> <span className="text-xs text-muted-foreground">总进度</span>
<span className="text-lg font-semibold text-blue-600"> <span className="text-lg font-semibold text-blue-600">
{Math.round(progress?.progress || 0)}% {Math.round(progress?.progress || 0)}%
</span> </span>
@@ -210,8 +210,8 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
{progress?.currentOrderNumber && ( {progress?.currentOrderNumber && (
<div className="flex items-center justify-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200"> <div className="flex items-center justify-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
<Package size={14} className="text-blue-600" /> <Package size={14} className="text-blue-600" />
<span className="text-sm text-gray-600">当前订单:</span> <span className="text-sm text-muted-foreground">当前订单:</span>
<span className="text-sm font-medium text-gray-900 font-mono"> <span className="text-sm font-medium text-foreground font-mono">
{progress.currentOrderNumber} {progress.currentOrderNumber}
</span> </span>
</div> </div>
@@ -220,7 +220,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
{elapsedTime && ( {elapsedTime && (
<div className="flex flex-col items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 mb-2"> <div className="flex flex-col items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 mb-2">
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<span className="text-gray-600">已运行</span> <span className="text-muted-foreground">已运行</span>
<span className="font-semibold text-blue-600">{elapsedTime.formatted}</span> <span className="font-semibold text-blue-600">{elapsedTime.formatted}</span>
</div> </div>
</div> </div>
@@ -229,15 +229,15 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
{estimatedTime && ( {estimatedTime && (
<div className="flex flex-col items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200"> <div className="flex flex-col items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200">
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<span className="text-gray-600">预估还要</span> <span className="text-muted-foreground">预估还要</span>
<span className="font-semibold text-green-600"> <span className="font-semibold text-green-600">
{estimatedTime.remainingMinutes} 分钟 {estimatedTime.remainingMinutes} 分钟
</span> </span>
</div> </div>
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<span className="text-gray-600">将会在</span> <span className="text-muted-foreground">将会在</span>
<span className="font-semibold text-green-600">{estimatedTime.formattedTime}</span> <span className="font-semibold text-green-600">{estimatedTime.formattedTime}</span>
<span className="text-gray-600">执行完毕</span> <span className="text-muted-foreground">执行完毕</span>
</div> </div>
</div> </div>
)} )}
@@ -246,43 +246,43 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
// Result View Content // Result View Content
<> <>
<div className="grid grid-cols-3 gap-3 mb-4"> <div className="grid grid-cols-3 gap-3 mb-4">
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border">
<div className="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
<Package size={20} className="text-blue-600" /> <Package size={20} className="text-blue-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">处理订单</div> <div className="text-xs text-muted-foreground">处理订单</div>
<div className="text-xl font-semibold text-gray-900">{ordersProcessed}</div> <div className="text-xl font-semibold text-foreground">{ordersProcessed}</div>
</div> </div>
</div> </div>
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border">
<div className="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center flex-shrink-0">
<CheckCircle size={20} className="text-green-600" /> <CheckCircle size={20} className="text-green-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">{dryRun ? '拟删除物料' : '删除物料'}</div> <div className="text-xs text-muted-foreground">{dryRun ? '拟删除物料' : '删除物料'}</div>
<div className="text-xl font-semibold text-gray-900">{materialsDeleted}</div> <div className="text-xl font-semibold text-foreground">{materialsDeleted}</div>
</div> </div>
</div> </div>
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border">
<div className="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center flex-shrink-0">
<SkipForward size={20} className="text-amber-600" /> <SkipForward size={20} className="text-amber-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">跳过物料</div> <div className="text-xs text-muted-foreground">跳过物料</div>
<div className="text-xl font-semibold text-gray-900">{materialsSkipped}</div> <div className="text-xl font-semibold text-foreground">{materialsSkipped}</div>
</div> </div>
</div> </div>
{hasErrors && ( {hasErrors && (
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200 col-span-3"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border col-span-3">
<div className="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0">
<XCircle size={20} className="text-red-600" /> <XCircle size={20} className="text-red-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">错误数量</div> <div className="text-xs text-muted-foreground">错误数量</div>
<div className="text-xl font-semibold text-red-600">{errors.length}</div> <div className="text-xl font-semibold text-red-600">{errors.length}</div>
</div> </div>
</div> </div>
@@ -290,7 +290,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
{hasRetries && ( {hasRetries && (
<> <>
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border">
<div className="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center flex-shrink-0">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -311,18 +311,18 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
</svg> </svg>
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">重试订单</div> <div className="text-xs text-muted-foreground">重试订单</div>
<div className="text-xl font-semibold text-gray-900">{retriedOrders}</div> <div className="text-xl font-semibold text-foreground">{retriedOrders}</div>
</div> </div>
</div> </div>
<div className="bg-gray-50 rounded-lg p-3 flex items-center gap-3 border border-gray-200"> <div className="bg-muted rounded-lg p-3 flex items-center gap-3 border border-border">
<div className="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center flex-shrink-0"> <div className="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center flex-shrink-0">
<CheckCircle size={20} className="text-emerald-600" /> <CheckCircle size={20} className="text-emerald-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-xs text-gray-600">成功重试</div> <div className="text-xs text-muted-foreground">成功重试</div>
<div className="text-xl font-semibold text-gray-900">{successfulRetries}</div> <div className="text-xl font-semibold text-foreground">{successfulRetries}</div>
</div> </div>
</div> </div>
</> </>
@@ -353,7 +353,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
)} )}
{hasErrors && ( {hasErrors && (
<div className="mt-4 pt-4 border-t border-gray-200"> <div className="mt-4 pt-4 border-t border-border">
<div className="text-sm font-semibold text-red-600 mb-2">错误详情</div> <div className="text-sm font-semibold text-red-600 mb-2">错误详情</div>
<div className="flex flex-col gap-2 max-h-40 overflow-y-auto"> <div className="flex flex-col gap-2 max-h-40 overflow-y-auto">
{errors.map((error, index) => ( {errors.map((error, index) => (
@@ -362,7 +362,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
className="flex items-start gap-2 p-2 bg-red-50 rounded border border-red-200" className="flex items-start gap-2 p-2 bg-red-50 rounded border border-red-200"
> >
<XCircle size={14} className="text-red-600 flex-shrink-0 mt-0.5" /> <XCircle size={14} className="text-red-600 flex-shrink-0 mt-0.5" />
<span className="text-sm text-gray-900 break-words">{error}</span> <span className="text-sm text-foreground break-words">{error}</span>
</div> </div>
))} ))}
</div> </div>

78
src/renderer/src/components/ExtractorOperationHistoryModal.tsx
View File

@@ -238,11 +238,11 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
<Modal isOpen={isOpen} onClose={onClose} title="操作历史" size="3xl"> <Modal isOpen={isOpen} onClose={onClose} title="操作历史" size="3xl">
<div className="flex flex-col h-[70vh]"> <div className="flex flex-col h-[70vh]">
{/* Toolbar */} {/* Toolbar */}
<div className="flex items-start justify-between mb-4 pb-4 border-b border-gray-200"> <div className="flex items-start justify-between mb-4 pb-4 border-b border-border">
<div className="flex-1"> <div className="flex-1">
{isAdmin && allUsers.length > 0 && ( {isAdmin && allUsers.length > 0 && (
<div className="mb-3"> <div className="mb-3">
<div className="text-xs text-gray-500 mb-2">筛选用户：</div> <div className="text-xs text-muted-foreground mb-2">筛选用户：</div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{allUsers.map((username) => { {allUsers.map((username) => {
const isSelected = selectedUsers.includes(username) const isSelected = selectedUsers.includes(username)
@@ -253,7 +253,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${ className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
isSelected isSelected
? 'bg-blue-600 text-white shadow-sm' ? 'bg-blue-600 text-white shadow-sm'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-muted text-foreground hover:bg-accent'
}`} }`}
> >
{username} {username}
@@ -272,7 +272,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
</div> </div>
)} )}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="text-sm text-gray-600"> <span className="text-sm text-muted-foreground">
{isAdmin ? ( {isAdmin ? (
<span className="text-amber-600 font-medium"> <span className="text-amber-600 font-medium">
管理员模式：{selectedUsers.length > 0 ? `已选择 ${selectedUsers.length} 个用户` : '显示所有用户记录'} 管理员模式：{selectedUsers.length > 0 ? `已选择 ${selectedUsers.length} 个用户` : '显示所有用户记录'}
@@ -282,7 +282,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
)} )}
</span> </span>
{batches.length > 0 && ( {batches.length > 0 && (
<span className="text-sm text-gray-500">共 {batches.length} 条批次</span> <span className="text-sm text-muted-foreground">共 {batches.length} 条批次</span>
)} )}
</div> </div>
</div> </div>
@@ -307,9 +307,9 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
{/* Batch list */} {/* Batch list */}
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
{loading && batches.length === 0 ? ( {loading && batches.length === 0 ? (
<div className="flex items-center justify-center h-32 text-gray-500">加载中...</div> <div className="flex items-center justify-center h-32 text-muted-foreground">加载中...</div>
) : batches.length === 0 ? ( ) : batches.length === 0 ? (
<div className="flex items-center justify-center h-32 text-gray-500">暂无操作记录</div> <div className="flex items-center justify-center h-32 text-muted-foreground">暂无操作记录</div>
) : ( ) : (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{batches.map((batch) => { {batches.map((batch) => {
@@ -320,33 +320,33 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
return ( return (
<div <div
key={batch.batchId} key={batch.batchId}
className="border border-gray-200 rounded-lg overflow-hidden" className="border border-border rounded-lg overflow-hidden"
> >
{/* Batch summary */} {/* Batch summary */}
<div <div
className={`flex items-center justify-between p-4 cursor-pointer transition-colors ${ className={`flex items-center justify-between p-4 cursor-pointer transition-colors ${
isExpanded ? 'bg-gray-50' : 'hover:bg-gray-50' isExpanded ? 'bg-muted' : 'hover:bg-muted'
}`} }`}
onClick={() => toggleBatchExpansion(batch.batchId)} onClick={() => toggleBatchExpansion(batch.batchId)}
> >
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 flex-1">
<button className="p-1 hover:bg-gray-200 rounded"> <button className="p-1 hover:bg-accent rounded">
{isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />} {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
</button> </button>
<div className="flex-1 grid grid-cols-6 gap-4 text-sm"> <div className="flex-1 grid grid-cols-6 gap-4 text-sm">
<div> <div>
<div className="text-gray-500 text-xs">操作时间</div> <div className="text-muted-foreground text-xs">操作时间</div>
<div className="font-medium text-gray-900"> <div className="font-medium text-foreground">
{formatDateTime(batch.operationTime)} {formatDateTime(batch.operationTime)}
</div> </div>
</div> </div>
<div> <div>
<div className="text-gray-500 text-xs">操作用户</div> <div className="text-muted-foreground text-xs">操作用户</div>
<div className="font-medium text-gray-900">{batch.username}</div> <div className="font-medium text-foreground">{batch.username}</div>
</div> </div>
<div> <div>
<div className="text-gray-500 text-xs">状态</div> <div className="text-muted-foreground text-xs">状态</div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{statusIcons[batch.status] || statusIcons.pending} {statusIcons[batch.status] || statusIcons.pending}
<span <span
@@ -359,16 +359,16 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
</div> </div>
</div> </div>
<div> <div>
<div className="text-gray-500 text-xs">订单数</div> <div className="text-muted-foreground text-xs">订单数</div>
<div className="font-medium text-gray-900">{batch.totalOrders}</div> <div className="font-medium text-foreground">{batch.totalOrders}</div>
</div> </div>
<div> <div>
<div className="text-gray-500 text-xs">记录数</div> <div className="text-muted-foreground text-xs">记录数</div>
<div className="font-medium text-gray-900">{batch.totalRecords}</div> <div className="font-medium text-foreground">{batch.totalRecords}</div>
</div> </div>
<div> <div>
<div className="text-gray-500 text-xs">成功/失败</div> <div className="text-muted-foreground text-xs">成功/失败</div>
<div className="font-medium text-gray-900"> <div className="font-medium text-foreground">
<span className="text-green-600">{batch.successCount}</span> <span className="text-green-600">{batch.successCount}</span>
{batch.failedCount > 0 && ( {batch.failedCount > 0 && (
<> <>
@@ -383,7 +383,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
{isAdmin && ( {isAdmin && (
<button <button
className="p-2 hover:bg-red-50 text-gray-400 hover:text-red-600 rounded transition-colors disabled:opacity-50" className="p-2 hover:bg-red-50 text-muted-foreground hover:text-red-600 rounded transition-colors disabled:opacity-50"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
void handleDeleteBatch(batch.batchId) void handleDeleteBatch(batch.batchId)
@@ -398,16 +398,16 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
{/* Batch details */} {/* Batch details */}
{isExpanded && details.length > 0 && ( {isExpanded && details.length > 0 && (
<div className="border-t border-gray-200 bg-white"> <div className="border-t border-border bg-card">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="bg-gray-50"> <thead className="bg-muted">
<tr> <tr>
<th className="px-4 py-2 text-left font-medium text-gray-600"> <th className="px-4 py-2 text-left font-medium text-muted-foreground">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
总排号 总排号
<button <button
className="p-1 hover:bg-gray-200 rounded transition-colors" className="p-1 hover:bg-accent rounded transition-colors"
onClick={() => onClick={() =>
void handleCopyColumn('productionId', batch.batchId) void handleCopyColumn('productionId', batch.batchId)
} }
@@ -415,16 +415,16 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
> >
<Copy <Copy
size={14} size={14}
className="text-gray-500 hover:text-gray-700" className="text-muted-foreground hover:text-foreground"
/> />
</button> </button>
</div> </div>
</th> </th>
<th className="px-4 py-2 text-left font-medium text-gray-600"> <th className="px-4 py-2 text-left font-medium text-muted-foreground">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
订单号 订单号
<button <button
className="p-1 hover:bg-gray-200 rounded transition-colors" className="p-1 hover:bg-accent rounded transition-colors"
onClick={() => onClick={() =>
void handleCopyColumn('orderNumber', batch.batchId) void handleCopyColumn('orderNumber', batch.batchId)
} }
@@ -432,29 +432,29 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
> >
<Copy <Copy
size={14} size={14}
className="text-gray-500 hover:text-gray-700" className="text-muted-foreground hover:text-foreground"
/> />
</button> </button>
</div> </div>
</th> </th>
<th className="px-4 py-2 text-left font-medium text-gray-600"> <th className="px-4 py-2 text-left font-medium text-muted-foreground">
状态 状态
</th> </th>
<th className="px-4 py-2 text-left font-medium text-gray-600"> <th className="px-4 py-2 text-left font-medium text-muted-foreground">
记录数 记录数
</th> </th>
<th className="px-4 py-2 text-left font-medium text-gray-600"> <th className="px-4 py-2 text-left font-medium text-muted-foreground">
错误信息 错误信息
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-border">
{details.map((detail) => ( {details.map((detail) => (
<tr key={detail.id} className="hover:bg-gray-50"> <tr key={detail.id} className="hover:bg-muted">
<td className="px-4 py-2 text-gray-900"> <td className="px-4 py-2 text-foreground">
{detail.productionId || '-'} {detail.productionId || '-'}
</td> </td>
<td className="px-4 py-2 text-gray-900 font-mono text-xs"> <td className="px-4 py-2 text-foreground font-mono text-xs">
{detail.orderNumber} {detail.orderNumber}
</td> </td>
<td className="px-4 py-2"> <td className="px-4 py-2">
@@ -467,7 +467,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
{statusLabels[detail.status] || detail.status} {statusLabels[detail.status] || detail.status}
</span> </span>
</td> </td>
<td className="px-4 py-2 text-gray-900"> <td className="px-4 py-2 text-foreground">
{detail.recordCount ?? '-'} {detail.recordCount ?? '-'}
</td> </td>
<td className="px-4 py-2 text-red-600 text-xs max-w-xs truncate"> <td className="px-4 py-2 text-red-600 text-xs max-w-xs truncate">
@@ -488,7 +488,7 @@ export const ExtractorOperationHistoryModal: React.FC<ExtractorOperationHistoryM
</div> </div>
{/* Footer */} {/* Footer */}
<div className="pt-4 border-t border-gray-200 flex justify-end"> <div className="pt-4 border-t border-border flex justify-end">
<Button <Button
variant="secondary" variant="secondary"
onClick={onClose} onClick={onClose}

14
src/renderer/src/components/LoginDialog.tsx
View File

@@ -94,14 +94,14 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
)} )}
<div className="space-y-4"> <div className="space-y-4">
<div className="text-sm text-gray-600">当前计算机：{computerName}</div> <div className="text-sm text-muted-foreground">当前计算机：{computerName}</div>
<div> <div>
<label className="block text-sm text-slate-700 mb-1">用户名:</label> <label className="block text-sm text-muted-foreground mb-1">用户名:</label>
<input <input
ref={usernameInputRef} ref={usernameInputRef}
type="text" type="text"
className="border border-slate-300 rounded-md p-2 w-full text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500" className="border border-input rounded-md p-2 w-full text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="请输入用户名" placeholder="请输入用户名"
@@ -110,10 +110,10 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
</div> </div>
<div> <div>
<label className="block text-sm text-slate-700 mb-1">密码:</label> <label className="block text-sm text-muted-foreground mb-1">密码:</label>
<input <input
type="password" type="password"
className="border border-slate-300 rounded-md p-2 w-full text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500" className="border border-input rounded-md p-2 w-full text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="请输入密码" placeholder="请输入密码"
@@ -124,7 +124,7 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
<div className="mt-6 flex justify-end gap-3"> <div className="mt-6 flex justify-end gap-3">
<button <button
className="px-4 py-2 rounded-md bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors" className="px-4 py-2 rounded-md bg-muted hover:bg-accent text-foreground transition-colors"
onClick={onCancel} onClick={onCancel}
disabled={isLoggingIn} disabled={isLoggingIn}
> >
@@ -139,7 +139,7 @@ export const LoginDialog: React.FC<LoginDialogProps> = ({
</button> </button>
</div> </div>
<div className="mt-4 text-xs text-gray-400 text-right">v1.0</div> <div className="mt-4 text-xs text-muted-foreground text-right">v1.0</div>
</div> </div>
</Modal> </Modal>
) )

32
src/renderer/src/components/MaterialTypeManagementDialog.tsx
View File

@@ -343,9 +343,9 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
<div onKeyDown={handleKeyDown}> <div onKeyDown={handleKeyDown}>
{/* Manager filter (admin only) */} {/* Manager filter (admin only) */}
{isAdmin && ( {isAdmin && (
<div className="mb-4 p-3 bg-slate-50 rounded-lg border border-slate-200"> <div className="mb-4 p-3 bg-muted rounded-lg border border-border">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2 text-sm font-medium text-slate-700"> <div className="flex items-center gap-2 text-sm font-medium text-foreground">
<Users size={16} /> <Users size={16} />
按负责人筛选 按负责人筛选
</div> </div>
@@ -358,7 +358,7 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
</button> </button>
<button <button
onClick={() => setSelectedManagers(new Set())} onClick={() => setSelectedManagers(new Set())}
className="text-xs text-slate-500 hover:underline" className="text-xs text-muted-foreground hover:underline"
> >
取消全选 取消全选
</button> </button>
@@ -368,7 +368,7 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
{managers.map((manager) => ( {managers.map((manager) => (
<label <label
key={manager} key={manager}
className="flex items-center gap-1.5 text-xs text-slate-600 cursor-pointer hover:bg-white px-2 py-1 rounded" className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer hover:bg-card px-2 py-1 rounded"
> >
<input <input
type="checkbox" type="checkbox"
@@ -433,23 +433,23 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
</div> </div>
{/* Table */} {/* Table */}
<div className="border border-slate-200 rounded-lg overflow-hidden max-h-[400px] overflow-y-auto"> <div className="border border-border rounded-lg overflow-hidden max-h-[400px] overflow-y-auto">
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12 text-slate-500">加载中...</div> <div className="flex items-center justify-center py-12 text-muted-foreground">加载中...</div>
) : ( ) : (
<table ref={tableRef} className="w-full text-sm"> <table ref={tableRef} className="w-full text-sm">
<thead className="bg-slate-100 sticky top-0"> <thead className="bg-muted sticky top-0">
<tr> <tr>
<th className="px-4 py-2 text-left font-medium text-slate-700 w-64"> <th className="px-4 py-2 text-left font-medium text-foreground w-64">
物料名称关键词 物料名称关键词
</th> </th>
<th className="px-4 py-2 text-left font-medium text-slate-700">负责人</th> <th className="px-4 py-2 text-left font-medium text-foreground">负责人</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100"> <tbody className="divide-y divide-border">
{filteredRows.filter((r) => r.state !== 'deleted').length === 0 ? ( {filteredRows.filter((r) => r.state !== 'deleted').length === 0 ? (
<tr> <tr>
<td colSpan={2} className="px-4 py-8 text-center text-slate-400"> <td colSpan={2} className="px-4 py-8 text-center text-muted-foreground">
暂无数据，点击&quot;新增&quot;按钮添加物料类型关键词 暂无数据，点击&quot;新增&quot;按钮添加物料类型关键词
</td> </td>
</tr> </tr>
@@ -470,10 +470,10 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
<tr <tr
key={index} key={index}
style={getRowStyle(row)} style={getRowStyle(row)}
className={`${isSelected ? 'ring-2 ring-blue-300 ring-inset' : ''} hover:bg-slate-50 cursor-pointer`} className={`${isSelected ? 'ring-2 ring-blue-300 ring-inset' : ''} hover:bg-muted cursor-pointer`}
onClick={() => setSelectedRowIndex(originalIndex)} onClick={() => setSelectedRowIndex(originalIndex)}
> >
<td className="px-4 py-2 border-r border-slate-100"> <td className="px-4 py-2 border-r border-border">
{isEditingMaterial ? ( {isEditingMaterial ? (
<input <input
ref={inputRef} ref={inputRef}
@@ -493,7 +493,7 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
onDoubleClick={() => startEdit(originalIndex, 'materialName')} onDoubleClick={() => startEdit(originalIndex, 'materialName')}
> >
{row.record.materialName || ( {row.record.materialName || (
<span className="text-slate-400 italic">双击编辑</span> <span className="text-muted-foreground italic">双击编辑</span>
)} )}
</div> </div>
)} )}
@@ -539,7 +539,7 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
onDoubleClick={() => startEdit(originalIndex, 'managerName')} onDoubleClick={() => startEdit(originalIndex, 'managerName')}
> >
{row.record.managerName || ( {row.record.managerName || (
<span className="text-slate-400 italic">双击编辑</span> <span className="text-muted-foreground italic">双击编辑</span>
)} )}
</div> </div>
)} )}
@@ -554,7 +554,7 @@ export const MaterialTypeManagementDialog: React.FC<MaterialTypeManagementDialog
</div> </div>
{/* Footer info */} {/* Footer info */}
<div className="mt-3 text-xs text-slate-500 flex justify-between"> <div className="mt-3 text-xs text-muted-foreground flex justify-between">
<span> <span>
双击单元格编辑 | Insert 新增 | Delete 删除 双击单元格编辑 | Insert 新增 | Delete 删除
{isAdmin && ' | 绿色=新增 | 黄色=已修改'} {isAdmin && ' | 绿色=新增 | 黄色=已修改'}

6
src/renderer/src/components/OrderNumberInput.tsx
View File

@@ -75,7 +75,7 @@ const OrderNumberInput: React.FC<OrderNumberInputProps> = ({
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<label className="text-sm font-medium text-slate-700">{label}</label> <label className="text-sm font-medium text-muted-foreground">{label}</label>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<span className="bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full text-xs font-medium"> <span className="bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full text-xs font-medium">
{count} 个 {count} 个
@@ -103,7 +103,7 @@ const OrderNumberInput: React.FC<OrderNumberInputProps> = ({
onChange={handleChange} onChange={handleChange}
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}
className="flex-1 w-full border border-slate-300 rounded-lg p-3 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed" className="flex-1 w-full border border-input rounded-lg p-3 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
style={{ style={{
userSelect: disabled ? 'none' : 'text', userSelect: disabled ? 'none' : 'text',
cursor: disabled ? 'not-allowed' : 'text' cursor: disabled ? 'not-allowed' : 'text'
@@ -115,7 +115,7 @@ const OrderNumberInput: React.FC<OrderNumberInputProps> = ({
<button <button
onClick={onReset} onClick={onReset}
disabled={disabled} disabled={disabled}
className="flex items-center gap-1 px-3 py-1.5 text-xs text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center gap-1 px-3 py-1.5 text-xs text-muted-foreground hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
<X size={14} /> <X size={14} />
清空 清空

38
src/renderer/src/components/PlaywrightDownloadDialog.tsx
View File

@@ -137,10 +137,10 @@ export default function PlaywrightDownloadDialog({
{/* Progress Bar */} {/* Progress Bar */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<span className="text-slate-600">下载进度</span> <span className="text-muted-foreground">下载进度</span>
<span className="font-semibold text-blue-600">{progress?.percent ?? 0}%</span> <span className="font-semibold text-blue-600">{progress?.percent ?? 0}%</span>
</div> </div>
<div className="h-3 w-full overflow-hidden rounded-full bg-slate-200"> <div className="h-3 w-full overflow-hidden rounded-full bg-muted">
<div <div
className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 ease-out" className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 ease-out"
style={{ width: `${progress?.percent ?? 0}%` }} style={{ width: `${progress?.percent ?? 0}%` }}
@@ -150,10 +150,10 @@ export default function PlaywrightDownloadDialog({
{/* Current File */} {/* Current File */}
{progress?.currentFile && ( {progress?.currentFile && (
<div className="rounded-lg bg-slate-50 px-4 py-3"> <div className="rounded-lg bg-muted px-4 py-3">
<div className="text-xs font-medium text-slate-500">当前文件</div> <div className="text-xs font-medium text-muted-foreground">当前文件</div>
<div <div
className="mt-1 truncate text-sm text-slate-700" className="mt-1 truncate text-sm text-foreground"
title={progress.currentFile} title={progress.currentFile}
> >
{progress.currentFile} {progress.currentFile}
@@ -163,31 +163,31 @@ export default function PlaywrightDownloadDialog({
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="rounded-lg border border-slate-200 px-4 py-3"> <div className="rounded-lg border border-border px-4 py-3">
<div className="text-xs text-slate-500">已下载</div> <div className="text-xs text-muted-foreground">已下载</div>
<div className="mt-1 text-lg font-semibold text-slate-900"> <div className="mt-1 text-lg font-semibold text-foreground">
{progress ? formatBytes(progress.downloadedBytes) : '0 B'} {progress ? formatBytes(progress.downloadedBytes) : '0 B'}
</div> </div>
</div> </div>
<div className="rounded-lg border border-slate-200 px-4 py-3"> <div className="rounded-lg border border-border px-4 py-3">
<div className="text-xs text-slate-500">总大小</div> <div className="text-xs text-muted-foreground">总大小</div>
<div className="mt-1 text-lg font-semibold text-slate-900"> <div className="mt-1 text-lg font-semibold text-foreground">
{progress && progress.totalBytes > 0 {progress && progress.totalBytes > 0
? formatBytes(progress.totalBytes) ? formatBytes(progress.totalBytes)
: '计算中...'} : '计算中...'}
</div> </div>
</div> </div>
<div className="rounded-lg border border-slate-200 px-4 py-3"> <div className="rounded-lg border border-border px-4 py-3">
<div className="text-xs text-slate-500">速度</div> <div className="text-xs text-muted-foreground">速度</div>
<div className="mt-1 text-lg font-semibold text-slate-900"> <div className="mt-1 text-lg font-semibold text-foreground">
{progress && progress.speed >= 0 {progress && progress.speed >= 0
? `${formatBytes(progress.speed)}/秒` ? `${formatBytes(progress.speed)}/秒`
: '计算中...'} : '计算中...'}
</div> </div>
</div> </div>
<div className="rounded-lg border border-slate-200 px-4 py-3"> <div className="rounded-lg border border-border px-4 py-3">
<div className="text-xs text-slate-500">剩余时间</div> <div className="text-xs text-muted-foreground">剩余时间</div>
<div className="mt-1 text-lg font-semibold text-slate-900"> <div className="mt-1 text-lg font-semibold text-foreground">
{progress?.eta !== undefined && progress.eta >= 0 {progress?.eta !== undefined && progress.eta >= 0
? formatETA(progress.eta) ? formatETA(progress.eta)
: '计算中...'} : '计算中...'}
@@ -231,7 +231,7 @@ export default function PlaywrightDownloadDialog({
{isDownloading && !progress && ( {isDownloading && !progress && (
<div className="flex flex-col items-center justify-center py-8"> <div className="flex flex-col items-center justify-center py-8">
<LoaderCircle size={48} className="animate-spin text-blue-500" /> <LoaderCircle size={48} className="animate-spin text-blue-500" />
<div className="mt-4 text-sm text-slate-600">正在初始化下载...</div> <div className="mt-4 text-sm text-muted-foreground">正在初始化下载...</div>
</div> </div>
)} )}
</div> </div>
@@ -253,7 +253,7 @@ export default function PlaywrightDownloadDialog({
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button <button
onClick={handleCloseConfirm} onClick={handleCloseConfirm}
className="rounded-md border border-slate-200 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50" className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted"
> >
继续下载 继续下载
</button> </button>

38
src/renderer/src/components/ReportViewerDialog.tsx
View File

@@ -125,10 +125,10 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
return ( return (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200"> <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-white rounded-2xl shadow-2xl w-[900px] max-w-[90vw] h-[80vh] flex flex-col border border-slate-200 overflow-hidden animate-in zoom-in-95 duration-200"> <div className="bg-card rounded-2xl shadow-2xl w-[900px] max-w-[90vw] h-[80vh] flex flex-col border border-border overflow-hidden animate-in zoom-in-95 duration-200">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50 flex-shrink-0"> <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-muted flex-shrink-0">
<div className="flex items-center gap-2 text-slate-800"> <div className="flex items-center gap-2 text-foreground">
<FileText size={20} className="text-blue-600" /> <FileText size={20} className="text-blue-600" />
<h2 className="text-lg font-semibold">执行报告浏览器</h2> <h2 className="text-lg font-semibold">执行报告浏览器</h2>
</div> </div>
@@ -136,7 +136,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
{isAdmin && onOpenAnalysis && ( {isAdmin && onOpenAnalysis && (
<button <button
onClick={onOpenAnalysis} onClick={onOpenAnalysis}
className="text-xs bg-white border border-slate-300 text-slate-700 px-3 py-1.5 rounded shadow-sm hover:bg-slate-50 flex items-center gap-1.5 font-medium transition-colors" className="text-xs bg-card border border-input text-foreground px-3 py-1.5 rounded shadow-sm hover:bg-muted flex items-center gap-1.5 font-medium transition-colors"
> >
<BarChart3 size={14} className="text-blue-600" /> <BarChart3 size={14} className="text-blue-600" />
报告分析 报告分析
@@ -144,7 +144,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
)} )}
<button <button
onClick={onClose} onClick={onClose}
className="text-slate-400 hover:text-slate-600 hover:bg-slate-200/50 p-1.5 rounded-lg transition-colors" className="text-muted-foreground hover:text-muted-foreground hover:bg-muted p-1.5 rounded-lg transition-colors"
> >
<X size={20} /> <X size={20} />
</button> </button>
@@ -152,14 +152,14 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
</div> </div>
{/* Controls */} {/* Controls */}
<div className="px-6 py-4 border-b border-slate-200 bg-white flex-shrink-0"> <div className="px-6 py-4 border-b border-border bg-card flex-shrink-0">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<label className="text-sm font-medium text-slate-700 flex-shrink-0">选择报告:</label> <label className="text-sm font-medium text-foreground flex-shrink-0">选择报告:</label>
<div className="relative flex-1 max-w-2xl"> <div className="relative flex-1 max-w-2xl">
<Combobox value={selectedReport} onChange={handleReportChange} nullable> <Combobox value={selectedReport} onChange={handleReportChange} nullable>
<div className="relative"> <div className="relative">
<Combobox.Input <Combobox.Input
className="w-full bg-slate-50 border border-slate-300 text-slate-700 py-2 pl-3 pr-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 disabled:opacity-50 text-sm" className="w-full bg-muted border border-input text-foreground py-2 pl-3 pr-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 disabled:opacity-50 text-sm"
displayValue={(report: ReportMetadata | null) => { displayValue={(report: ReportMetadata | null) => {
if (!report) return '请选择要查看的报告...' if (!report) return '请选择要查看的报告...'
return `${isAdmin ? `[${report.username}] ` : ''}${report.filename} (${formatDate(report.lastModified)})` return `${isAdmin ? `[${report.username}] ` : ''}${report.filename} (${formatDate(report.lastModified)})`
@@ -168,7 +168,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
placeholder="请选择要查看的报告..." placeholder="请选择要查看的报告..."
disabled={isLoadingList} disabled={isLoadingList}
/> />
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center px-2 text-slate-500 hover:text-slate-700 transition-colors"> <Combobox.Button className="absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground hover:text-foreground transition-colors">
<ChevronDown size={20} className="h-5 w-5" /> <ChevronDown size={20} className="h-5 w-5" />
</Combobox.Button> </Combobox.Button>
</div> </div>
@@ -180,9 +180,9 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
leaveFrom="transform scale-100 opacity-100" leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0" leaveTo="transform scale-95 opacity-0"
> >
<Combobox.Options className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-auto focus:outline-none"> <Combobox.Options className="absolute z-50 w-full mt-1 bg-card border border-border rounded-lg shadow-lg max-h-60 overflow-auto focus:outline-none">
{filteredReports.length === 0 && query ? ( {filteredReports.length === 0 && query ? (
<div className="px-4 py-8 text-center text-slate-400 text-sm"> <div className="px-4 py-8 text-center text-muted-foreground text-sm">
未找到匹配的报告 未找到匹配的报告
</div> </div>
) : ( ) : (
@@ -192,7 +192,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
value={null} value={null}
className={({ active }) => className={({ active }) =>
`px-4 py-2.5 text-sm cursor-pointer ${ `px-4 py-2.5 text-sm cursor-pointer ${
active ? 'bg-slate-100 text-slate-900' : 'text-slate-500 italic' active ? 'bg-muted text-foreground' : 'text-muted-foreground italic'
}` }`
} }
> >
@@ -208,7 +208,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
? 'bg-blue-500 text-white' ? 'bg-blue-500 text-white'
: active : active
? 'bg-blue-50 text-blue-700' ? 'bg-blue-50 text-blue-700'
: 'text-slate-900' : 'text-foreground'
}` }`
} }
> >
@@ -219,7 +219,7 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
{report.filename} {report.filename}
</span> </span>
<span <span
className={`ml-2 text-xs ${selected ? 'text-blue-100' : 'text-slate-400'}`} className={`ml-2 text-xs ${selected ? 'text-blue-100' : 'text-muted-foreground'}`}
> >
{formatDate(report.lastModified)} {formatDate(report.lastModified)}
</span> </span>
@@ -243,15 +243,15 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 bg-slate-50 overflow-hidden relative"> <div className="flex-1 bg-muted overflow-hidden relative">
{isLoadingContent ? ( {isLoadingContent ? (
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-500 bg-white/80 z-10"> <div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground bg-card/80 z-10">
<Loader2 size={32} className="animate-spin text-blue-500 mb-4" /> <Loader2 size={32} className="animate-spin text-blue-500 mb-4" />
<p>正在加载报告内容...</p> <p>正在加载报告内容...</p>
</div> </div>
) : reportContent ? ( ) : reportContent ? (
<div className="h-full overflow-y-auto p-8"> <div className="h-full overflow-y-auto p-8">
<div className="markdown-body bg-white p-8 rounded-xl shadow-sm border border-slate-200"> <div className="markdown-body bg-card p-8 rounded-xl shadow-sm border border-border">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeSlug, rehypeAutolinkHeadings, rehypeHighlight]} rehypePlugins={[rehypeSlug, rehypeAutolinkHeadings, rehypeHighlight]}
@@ -261,8 +261,8 @@ export const ReportViewerDialog: React.FC<ReportViewerDialogProps> = ({
</div> </div>
</div> </div>
) : ( ) : (
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400"> <div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground">
<FileText size={48} className="mb-4 text-slate-300 opacity-50" /> <FileText size={48} className="mb-4 text-muted-foreground opacity-50" />
<p>请在上方选择一个报告进行浏览</p> <p>请在上方选择一个报告进行浏览</p>
</div> </div>
)} )}

44
src/renderer/src/components/UpdateDialog.tsx
View File

@@ -45,7 +45,7 @@ export default function UpdateDialog({
const renderReleaseList = (title: string, releases: UpdateRelease[]) => { const renderReleaseList = (title: string, releases: UpdateRelease[]) => {
if (releases.length === 0) { if (releases.length === 0) {
return ( return (
<div className="rounded-lg border border-dashed border-slate-200 px-3 py-4 text-sm text-slate-500"> <div className="rounded-lg border border-dashed border-border px-3 py-4 text-sm text-muted-foreground">
暂无版本 暂无版本
</div> </div>
) )
@@ -53,7 +53,7 @@ export default function UpdateDialog({
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<div className="text-xs font-semibold uppercase tracking-wide text-slate-500">{title}</div> <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</div>
{releases.map((release) => { {releases.map((release) => {
const selected = isSelectedRelease(release) const selected = isSelectedRelease(release)
return ( return (
@@ -67,18 +67,18 @@ export default function UpdateDialog({
className={`w-full rounded-lg border px-3 py-3 text-left transition ${ className={`w-full rounded-lg border px-3 py-3 text-left transition ${
selected selected
? 'border-blue-500 bg-blue-50 text-blue-900' ? 'border-blue-500 bg-blue-50 text-blue-900'
: 'border-slate-200 bg-white text-slate-700 hover:border-slate-300' : 'border-border bg-card text-foreground hover:border-input'
}`} }`}
> >
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<span className="font-medium">V{release.version}</span> <span className="font-medium">V{release.version}</span>
<span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs uppercase text-slate-600"> <span className="rounded-full bg-muted px-2 py-0.5 text-xs uppercase text-muted-foreground">
{release.channel} {release.channel}
</span> </span>
</div> </div>
<div className="mt-1 text-xs text-slate-500">{release.publishedAt}</div> <div className="mt-1 text-xs text-muted-foreground">{release.publishedAt}</div>
{release.notesSummary && ( {release.notesSummary && (
<div className="mt-2 text-xs text-slate-600">{release.notesSummary}</div> <div className="mt-2 text-xs text-muted-foreground">{release.notesSummary}</div>
)} )}
</button> </button>
) )
@@ -97,10 +97,10 @@ export default function UpdateDialog({
disableEscapeKey={isBusy} disableEscapeKey={isBusy}
> >
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3 text-sm"> <div className="flex items-center justify-between rounded-lg bg-muted px-4 py-3 text-sm">
<div className="text-slate-600"> <div className="text-muted-foreground">
当前版本 <span className="font-semibold text-slate-900">V{status?.currentVersion}</span> 当前版本 <span className="font-semibold text-foreground">V{status?.currentVersion}</span>
<span className="ml-2 rounded-full bg-slate-200 px-2 py-0.5 text-xs uppercase text-slate-700"> <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs uppercase text-foreground">
{status?.currentChannel ?? __APP_CHANNEL__} {status?.currentChannel ?? __APP_CHANNEL__}
</span> </span>
</div> </div>
@@ -121,20 +121,20 @@ export default function UpdateDialog({
{renderReleaseList('Stable', catalog.channels?.stable ?? [])} {renderReleaseList('Stable', catalog.channels?.stable ?? [])}
{renderReleaseList('Preview', catalog.channels?.preview ?? [])} {renderReleaseList('Preview', catalog.channels?.preview ?? [])}
</div> </div>
<div className="rounded-xl border border-slate-200 bg-white"> <div className="rounded-xl border border-border bg-card">
<div className="border-b border-slate-200 px-4 py-3"> <div className="border-b border-border px-4 py-3">
<div className="text-sm font-semibold text-slate-900"> <div className="text-sm font-semibold text-foreground">
{selectedRelease {selectedRelease
? `${selectedRelease.channel.toUpperCase()} V${selectedRelease.version}` ? `${selectedRelease.channel.toUpperCase()} V${selectedRelease.version}`
: '请选择一个版本'} : '请选择一个版本'}
</div> </div>
<div className="mt-1 text-xs text-slate-500"> <div className="mt-1 text-xs text-muted-foreground">
{selectedRelease?.notesSummary ?? '选择版本后可查看详细更新说明。'} {selectedRelease?.notesSummary ?? '选择版本后可查看详细更新说明。'}
</div> </div>
</div> </div>
<div className="max-h-[420px] overflow-auto px-4 py-4 prose prose-slate max-w-none prose-headings:mb-2 prose-p:my-2 prose-li:my-1"> <div className="max-h-[420px] overflow-auto px-4 py-4 prose prose-slate max-w-none prose-headings:mb-2 prose-p:my-2 prose-li:my-1">
{isLoadingChangelog ? ( {isLoadingChangelog ? (
<div className="flex items-center gap-2 text-sm text-slate-500"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<LoaderCircle size={16} className="animate-spin" /> <LoaderCircle size={16} className="animate-spin" />
正在加载更新说明... 正在加载更新说明...
</div> </div>
@@ -147,12 +147,12 @@ export default function UpdateDialog({
</div> </div>
</div> </div>
) : ( ) : (
<div className="rounded-xl border border-slate-200 bg-white"> <div className="rounded-xl border border-border bg-card">
<div className="border-b border-slate-200 px-4 py-3"> <div className="border-b border-border px-4 py-3">
<div className="text-sm font-semibold text-slate-900"> <div className="text-sm font-semibold text-foreground">
{selectedRelease ? `发现稳定版 V${selectedRelease.version}` : '暂无可用更新'} {selectedRelease ? `发现稳定版 V${selectedRelease.version}` : '暂无可用更新'}
</div> </div>
<div className="mt-1 text-xs text-slate-500"> <div className="mt-1 text-xs text-muted-foreground">
{status?.currentChannel === 'preview' {status?.currentChannel === 'preview'
? '当前设备正在运行预览版，普通用户将更新回稳定版。' ? '当前设备正在运行预览版，普通用户将更新回稳定版。'
: '更新包已在后台准备完成，确认后将自动关闭并重启应用。'} : '更新包已在后台准备完成，确认后将自动关闭并重启应用。'}
@@ -160,7 +160,7 @@ export default function UpdateDialog({
</div> </div>
<div className="max-h-[420px] overflow-auto px-4 py-4 prose prose-slate max-w-none prose-headings:mb-2 prose-p:my-2 prose-li:my-1"> <div className="max-h-[420px] overflow-auto px-4 py-4 prose prose-slate max-w-none prose-headings:mb-2 prose-p:my-2 prose-li:my-1">
{isLoadingChangelog ? ( {isLoadingChangelog ? (
<div className="flex items-center gap-2 text-sm text-slate-500"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<LoaderCircle size={16} className="animate-spin" /> <LoaderCircle size={16} className="animate-spin" />
正在加载更新说明... 正在加载更新说明...
</div> </div>
@@ -179,8 +179,8 @@ export default function UpdateDialog({
</div> </div>
)} )}
<div className="flex items-center justify-between border-t border-slate-200 pt-4"> <div className="flex items-center justify-between border-t border-border pt-4">
<div className="text-sm text-slate-500">{status?.message ?? ' '}</div> <div className="text-sm text-muted-foreground">{status?.message ?? ' '}</div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button <Button
variant="outline" variant="outline"

12
src/renderer/src/components/UserSelectionDialog.tsx
View File

@@ -78,7 +78,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
ariaDescribedBy="user-selection-description" ariaDescribedBy="user-selection-description"
> >
<div ref={dialogRef} className="max-h-[60vh] flex flex-col"> <div ref={dialogRef} className="max-h-[60vh] flex flex-col">
<div className="text-sm text-gray-600 mb-4">当前登录：{currentUsername}</div> <div className="text-sm text-muted-foreground mb-4">当前登录：{currentUsername}</div>
<p id="user-selection-description" className="sr-only"> <p id="user-selection-description" className="sr-only">
从列表中选择一个用户，双击可直接确认选择 从列表中选择一个用户，双击可直接确认选择
</p> </p>
@@ -88,7 +88,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
{users.map((user) => ( {users.map((user) => (
<div <div
key={user.id} key={user.id}
className={`user-item p-3 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-green-50 ${ className={`user-item p-3 border border-border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-green-50 ${
selectedUserId === user.id ? 'border-blue-500 bg-blue-50' : '' selectedUserId === user.id ? 'border-blue-500 bg-blue-50' : ''
}`} }`}
onClick={() => setSelectedUserId(user.id)} onClick={() => setSelectedUserId(user.id)}
@@ -101,7 +101,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
}} }}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-medium text-gray-900">{user.username}</span> <span className="text-sm font-medium text-foreground">{user.username}</span>
<span <span
className={`text-xs px-2 py-1 rounded font-medium ${userTypeStyles[user.userType]}`} className={`text-xs px-2 py-1 rounded font-medium ${userTypeStyles[user.userType]}`}
> >
@@ -109,7 +109,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
</span> </span>
</div> </div>
{user.createTime && ( {user.createTime && (
<div className="mt-1 text-xs text-gray-500"> <div className="mt-1 text-xs text-muted-foreground">
创建于：{new Date(user.createTime).toLocaleString('zh-CN')} 创建于：{new Date(user.createTime).toLocaleString('zh-CN')}
</div> </div>
)} )}
@@ -118,7 +118,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
</div> </div>
</div> </div>
<div className="border-t border-gray-200 pt-4"> <div className="border-t border-border pt-4">
<div className="flex justify-center gap-3"> <div className="flex justify-center gap-3">
<Button <Button
variant="primary" variant="primary"
@@ -134,7 +134,7 @@ export const UserSelectionDialog: React.FC<UserSelectionDialogProps> = ({
取消 取消
</Button> </Button>
</div> </div>
<div className="text-center text-xs text-gray-500 mt-3">双击用户可直接选择</div> <div className="text-center text-xs text-muted-foreground mt-3">双击用户可直接选择</div>
</div> </div>
</div> </div>
</Modal> </Modal>

8
src/renderer/src/components/app/AuthenticatedAppShell.tsx
View File

@@ -81,7 +81,7 @@ export function AuthenticatedAppShell({
: '发现新版本' : '发现新版本'
return ( return (
<div className="flex flex-col h-screen bg-slate-50 text-slate-800 font-sans overflow-hidden"> <div className="flex flex-col h-screen bg-background text-foreground font-sans overflow-hidden">
<header <header
className="h-16 bg-slate-900 text-slate-300 flex items-center justify-between px-4 shadow-md z-20 flex-shrink-0" className="h-16 bg-slate-900 text-slate-300 flex items-center justify-between px-4 shadow-md z-20 flex-shrink-0"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties} style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
@@ -173,13 +173,13 @@ export function AuthenticatedAppShell({
</header> </header>
<div className="flex flex-1 overflow-hidden relative"> <div className="flex flex-1 overflow-hidden relative">
<main className="flex-1 overflow-hidden bg-slate-50 p-6 h-full"> <main className="flex-1 overflow-hidden bg-background p-6 h-full">
{currentPage === 'home' && ( {currentPage === 'home' && (
<div className="h-full overflow-auto"> <div className="h-full overflow-auto">
<div className="max-w-4xl mx-auto mt-10 text-center animate-in fade-in slide-in-from-bottom-4 duration-500"> <div className="max-w-4xl mx-auto mt-10 text-center animate-in fade-in slide-in-from-bottom-4 duration-500">
<LayoutDashboard size={48} className="mx-auto text-blue-500 mb-4" /> <LayoutDashboard size={48} className="mx-auto text-blue-500 mb-4" />
<h1 className="text-3xl font-bold text-slate-800 mb-4">欢迎使用 ERP Auto</h1> <h1 className="text-3xl font-bold text-foreground mb-4">欢迎使用 ERP Auto</h1>
<p className="text-slate-500 text-lg max-w-2xl mx-auto"> <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
自动化处理 ERP 系统中的数据提取和清理任务。请使用上方导航栏选择您需要的功能模块。 自动化处理 ERP 系统中的数据提取和清理任务。请使用上方导航栏选择您需要的功能模块。
</p> </p>
</div> </div>

26
src/renderer/src/components/cleaner/CleanerExecutionBar.tsx
View File

@@ -34,9 +34,9 @@ export function CleanerExecutionBar({
executeButtonRef executeButtonRef
}: CleanerExecutionBarProps): React.JSX.Element { }: CleanerExecutionBarProps): React.JSX.Element {
return ( return (
<div className="bg-white border-t border-slate-200 p-4 flex justify-between items-center shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-10 flex-shrink-0"> <div className="bg-card border-t border-border p-4 flex justify-between items-center shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-10 flex-shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="text-sm text-slate-600 font-medium"> <div className="text-sm text-muted-foreground font-medium">
共计 {filteredCount} 条记录 | 已选中{' '} 共计 {filteredCount} 条记录 | 已选中{' '}
<span className="text-blue-600">{selectedCount}</span> 条 <span className="text-blue-600">{selectedCount}</span> 条
</div> </div>
@@ -51,12 +51,12 @@ export function CleanerExecutionBar({
<Settings2 size={16} /> 执行设置 <Settings2 size={16} /> 执行设置
</Button> </Button>
{showSettingsMenu && ( {showSettingsMenu && (
<div className="absolute bottom-full right-0 mb-2 bg-white rounded-lg shadow-lg border border-slate-200 py-3 px-4 min-w-[280px] z-50"> <div className="absolute bottom-full right-0 mb-2 bg-card rounded-lg shadow-lg border border-border py-3 px-4 min-w-[280px] z-50">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="text-sm font-medium text-slate-800">预览模式 (Dry-Run)</div> <div className="text-sm font-medium text-foreground">预览模式 (Dry-Run)</div>
<div className="text-xs text-slate-500 mt-0.5"> <div className="text-xs text-muted-foreground mt-0.5">
仅执行页面操作定位，不保存更改 仅执行页面操作定位，不保存更改
</div> </div>
</div> </div>
@@ -67,11 +67,11 @@ export function CleanerExecutionBar({
{dryRun ? <ToggleRight size={32} /> : <ToggleLeft size={32} />} {dryRun ? <ToggleRight size={32} /> : <ToggleLeft size={32} />}
</button> </button>
</div> </div>
<div className="border-t border-slate-100 pt-3"> <div className="border-t border-border pt-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="text-sm font-medium text-slate-800">后台模式 (Headless)</div> <div className="text-sm font-medium text-foreground">后台模式 (Headless)</div>
<div className="text-xs text-slate-500 mt-0.5"> <div className="text-xs text-muted-foreground mt-0.5">
浏览器在后台运行，不显示界面 浏览器在后台运行，不显示界面
</div> </div>
</div> </div>
@@ -83,10 +83,10 @@ export function CleanerExecutionBar({
</button> </button>
</div> </div>
</div> </div>
<div className="border-t border-slate-100 pt-3 space-y-3"> <div className="border-t border-border pt-3 space-y-3">
<div> <div>
<div className="text-sm font-medium text-slate-800">并行处理数量</div> <div className="text-sm font-medium text-foreground">并行处理数量</div>
<div className="text-xs text-slate-500 mt-0.5"> <div className="text-xs text-muted-foreground mt-0.5">
同时处理详情页数量，范围 1-20 同时处理详情页数量，范围 1-20
</div> </div>
<div className="mt-2 flex items-center gap-3"> <div className="mt-2 flex items-center gap-3">
@@ -96,9 +96,9 @@ export function CleanerExecutionBar({
max={20} max={20}
value={processConcurrency} value={processConcurrency}
onChange={(e) => updateProcessConcurrency(Number(e.target.value))} onChange={(e) => updateProcessConcurrency(Number(e.target.value))}
className="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600" className="flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-blue-600"
/> />
<span className="text-sm font-medium text-slate-700 w-8 text-center"> <span className="text-sm font-medium text-foreground w-8 text-center">
{processConcurrency} {processConcurrency}
</span> </span>
</div> </div>

22
src/renderer/src/components/cleaner/CleanerResultsTable.tsx
View File

@@ -46,7 +46,7 @@ export function CleanerResultsTable({
return ( return (
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<table className="w-full text-left text-sm whitespace-nowrap table-fixed"> <table className="w-full text-left text-sm whitespace-nowrap table-fixed">
<thead className="bg-slate-100 text-slate-600 sticky top-0 shadow-sm z-10 text-xs font-semibold"> <thead className="bg-muted text-muted-foreground sticky top-0 shadow-sm z-10 text-xs font-semibold">
<tr> <tr>
<th className="px-4 py-3 w-16 text-center">选择</th> <th className="px-4 py-3 w-16 text-center">选择</th>
<th className="px-4 py-3 w-64">材料名称</th> <th className="px-4 py-3 w-64">材料名称</th>
@@ -54,14 +54,14 @@ export function CleanerResultsTable({
<th className="px-4 py-3">规格</th> <th className="px-4 py-3">规格</th>
<th className="px-4 py-3">型号</th> <th className="px-4 py-3">型号</th>
<th className="px-4 py-3 w-40"> <th className="px-4 py-3 w-40">
负责人 <span className="text-[10px] font-normal text-slate-400">(双击编辑)</span> 负责人 <span className="text-[10px] font-normal text-muted-foreground">(双击编辑)</span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100"> <tbody className="divide-y divide-border">
{filteredResults.length === 0 ? ( {filteredResults.length === 0 ? (
<tr> <tr>
<td colSpan={6} className="px-4 py-8 text-center text-slate-400 text-sm"> <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground text-sm">
{validationResults.length === 0 {validationResults.length === 0
? '暂无数据，请点击左侧按钮获取并校验物料' ? '暂无数据，请点击左侧按钮获取并校验物料'
: '当前筛选条件下暂无数据'} : '当前筛选条件下暂无数据'}
@@ -73,10 +73,10 @@ export function CleanerResultsTable({
const noManager = !result.managerName?.trim() const noManager = !result.managerName?.trim()
const isEditingManager = const isEditingManager =
editingCell?.rowIndex === rowIndex && editingCell?.field === 'managerName' editingCell?.rowIndex === rowIndex && editingCell?.field === 'managerName'
const rowClassName = `${isChecked ? 'bg-blue-50/30' : 'hover:bg-slate-50'} transition-colors ${noManager && isChecked ? 'bg-amber-50/20' : ''}` const rowClassName = `${isChecked ? 'bg-blue-50/30' : 'hover:bg-muted'} transition-colors ${noManager && isChecked ? 'bg-amber-50/20' : ''}`
const managerCellClassName = noManager const managerCellClassName = noManager
? 'text-amber-500 text-xs italic' ? 'text-amber-500 text-xs italic'
: 'text-slate-700' : 'text-foreground'
return ( return (
<tr key={result.materialCode} className={rowClassName}> <tr key={result.materialCode} className={rowClassName}>
@@ -96,24 +96,24 @@ export function CleanerResultsTable({
)} )}
</td> </td>
<td <td
className="px-4 py-3 font-medium text-slate-800 truncate" className="px-4 py-3 font-medium text-foreground truncate"
title={result.materialName} title={result.materialName}
> >
{result.materialName} {result.materialName}
</td> </td>
<td <td
className="px-4 py-3 font-mono text-xs text-slate-600 truncate" className="px-4 py-3 font-mono text-xs text-muted-foreground truncate"
title={result.materialCode} title={result.materialCode}
> >
{result.materialCode} {result.materialCode}
</td> </td>
<td <td
className="px-4 py-3 text-slate-500 text-xs truncate" className="px-4 py-3 text-muted-foreground text-xs truncate"
title={result.specification} title={result.specification}
> >
{result.specification || '-'} {result.specification || '-'}
</td> </td>
<td className="px-4 py-3 text-slate-500 text-xs truncate" title={result.model}> <td className="px-4 py-3 text-muted-foreground text-xs truncate" title={result.model}>
{result.model || '-'} {result.model || '-'}
</td> </td>
<td <td
@@ -149,7 +149,7 @@ export function CleanerResultsTable({
}} }}
> >
{result.managerName || ( {result.managerName || (
<span className="text-slate-400 italic">双击编辑</span> <span className="text-muted-foreground italic">双击编辑</span>
)} )}
</div> </div>
) : ( ) : (

26
src/renderer/src/components/cleaner/CleanerSidebar.tsx
View File

@@ -18,15 +18,15 @@ export function CleanerSidebar({
}: CleanerSidebarProps): React.JSX.Element { }: CleanerSidebarProps): React.JSX.Element {
return ( return (
<div className="w-full xl:w-[380px] flex-shrink-0 flex flex-col gap-5 xl:self-start overflow-auto"> <div className="w-full xl:w-[380px] flex-shrink-0 flex flex-col gap-5 xl:self-start overflow-auto">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5"> <div className="bg-card rounded-xl shadow-sm border border-border p-5">
<h3 className="text-base font-semibold mb-4 flex items-center gap-2 text-slate-800"> <h3 className="text-base font-semibold mb-4 flex items-center gap-2 text-foreground">
<DatabaseZap size={18} className="text-blue-500" /> <DatabaseZap size={18} className="text-blue-500" />
校验数据来源 校验数据来源
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
<label <label
className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${valMode === 'full' ? 'bg-blue-50 border-blue-200' : 'hover:bg-slate-50 border-slate-200'}`} className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${valMode === 'full' ? 'bg-blue-50 border-blue-200' : 'hover:bg-muted border-border'}`}
> >
<input <input
type="radio" type="radio"
@@ -36,13 +36,13 @@ export function CleanerSidebar({
onChange={() => setValMode('full')} onChange={() => setValMode('full')}
/> />
<div> <div>
<div className="text-sm font-medium text-slate-800">数据库 - 全表校验</div> <div className="text-sm font-medium text-foreground">数据库 - 全表校验</div>
<div className="text-xs text-slate-500 mt-0.5">校验数据库中所有待处理物料</div> <div className="text-xs text-muted-foreground mt-0.5">校验数据库中所有待处理物料</div>
</div> </div>
</label> </label>
<label <label
className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${valMode === 'filtered' ? 'bg-blue-50 border-blue-200' : 'hover:bg-slate-50 border-slate-200'}`} className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${valMode === 'filtered' ? 'bg-blue-50 border-blue-200' : 'hover:bg-muted border-border'}`}
> >
<input <input
type="radio" type="radio"
@@ -52,8 +52,8 @@ export function CleanerSidebar({
onChange={() => setValMode('filtered')} onChange={() => setValMode('filtered')}
/> />
<div className="w-full"> <div className="w-full">
<div className="text-sm font-medium text-slate-800">数据库 - ProductionID 过滤</div> <div className="text-sm font-medium text-foreground">数据库 - ProductionID 过滤</div>
<div className="text-xs text-slate-500 mt-0.5">仅校验指定订单号相关的物料</div> <div className="text-xs text-muted-foreground mt-0.5">仅校验指定订单号相关的物料</div>
{valMode === 'filtered' && ( {valMode === 'filtered' && (
<div className="mt-3 text-xs text-blue-700 bg-blue-100/50 rounded p-2 flex items-start gap-1.5"> <div className="mt-3 text-xs text-blue-700 bg-blue-100/50 rounded p-2 flex items-start gap-1.5">
<Layers size={14} className="mt-0.5 flex-shrink-0" /> <Layers size={14} className="mt-0.5 flex-shrink-0" />
@@ -67,9 +67,9 @@ export function CleanerSidebar({
</div> </div>
</div> </div>
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5"> <div className="bg-card rounded-xl shadow-sm border border-border p-5">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-base font-semibold flex items-center gap-2 text-slate-800"> <h3 className="text-base font-semibold flex items-center gap-2 text-foreground">
<Users size={18} className="text-indigo-500" /> <Users size={18} className="text-indigo-500" />
筛选 (按负责人) 筛选 (按负责人)
</h3> </h3>
@@ -82,7 +82,7 @@ export function CleanerSidebar({
</button> </button>
<button <button
onClick={() => setSelectedManagers(new Set())} onClick={() => setSelectedManagers(new Set())}
className="text-xs text-slate-500 hover:underline" className="text-xs text-muted-foreground hover:underline"
> >
取消全选 取消全选
</button> </button>
@@ -93,7 +93,7 @@ export function CleanerSidebar({
{managers.map((manager) => ( {managers.map((manager) => (
<label <label
key={manager} key={manager}
className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer hover:bg-slate-50 p-1.5 rounded" className="flex items-center gap-2 text-sm text-foreground cursor-pointer hover:bg-muted p-1.5 rounded"
> >
<input <input
type="checkbox" type="checkbox"
@@ -111,7 +111,7 @@ export function CleanerSidebar({
{manager || '未分配'} {manager || '未分配'}
</label> </label>
))} ))}
{managers.length === 0 && <div className="text-sm text-slate-400">暂无负责人数据</div>} {managers.length === 0 && <div className="text-sm text-muted-foreground">暂无负责人数据</div>}
</div> </div>
</div> </div>
</div> </div>

10
src/renderer/src/components/cleaner/CleanerToolbar.tsx
View File

@@ -49,7 +49,7 @@ export function CleanerToolbar({
}: CleanerToolbarProps): React.JSX.Element { }: CleanerToolbarProps): React.JSX.Element {
return ( return (
<> <>
<div className="p-4 border-b border-slate-200 flex-shrink-0"> <div className="p-4 border-b border-border flex-shrink-0">
<Button <Button
onClick={() => void handleValidation()} onClick={() => void handleValidation()}
disabled={isValidationRunning} disabled={isValidationRunning}
@@ -60,7 +60,7 @@ export function CleanerToolbar({
</Button> </Button>
</div> </div>
<div className="bg-slate-50 border-b border-slate-200 px-4 py-3 flex justify-between items-center flex-shrink-0"> <div className="bg-muted border-b border-border px-4 py-3 flex justify-between items-center flex-shrink-0">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button <Button
onClick={() => setSelectedItems(new Set(filteredResults.map((r) => r.materialCode)))} onClick={() => setSelectedItems(new Set(filteredResults.map((r) => r.materialCode)))}
@@ -81,10 +81,10 @@ export function CleanerToolbar({
}} }}
variant="outline" size="sm" variant="outline" size="sm"
> >
<Square size={14} className="text-slate-400" /> 取消 <Square size={14} className="text-muted-foreground" /> 取消
</Button> </Button>
<div className="w-px h-4 bg-slate-300 mx-1"></div> <div className="w-px h-4 bg-border mx-1"></div>
<Button <Button
onClick={() => { onClick={() => {
@@ -106,7 +106,7 @@ export function CleanerToolbar({
<Eye size={14} /> 显示全部 <Eye size={14} /> 显示全部
</Button> </Button>
<div className="w-px h-4 bg-slate-300 mx-1"></div> <div className="w-px h-4 bg-border mx-1"></div>
<Button <Button
onClick={() => void handleConfirmDeletion()} onClick={() => void handleConfirmDeletion()}

8
src/renderer/src/components/report-analysis/components/ComparisonTooltip.tsx
View File

@@ -29,8 +29,8 @@ export const ComparisonTooltip = React.memo(
const firstMetric = Array.from(selectedMetrics)[0] const firstMetric = Array.from(selectedMetrics)[0]
return ( return (
<div className="bg-white p-4 border border-slate-200 shadow-lg rounded-lg max-w-sm"> <div className="bg-card p-4 border border-border shadow-lg rounded-lg max-w-sm">
<p className="font-semibold text-slate-800 mb-2 border-b border-slate-100 pb-2">{label}</p> <p className="font-semibold text-foreground mb-2 border-b border-border pb-2">{label}</p>
<div className="space-y-1.5 text-sm"> <div className="space-y-1.5 text-sm">
{displayUsers.map((user: string) => { {displayUsers.map((user: string) => {
@@ -39,14 +39,14 @@ export const ComparisonTooltip = React.memo(
return ( return (
<div key={user} className="flex justify-between items-center gap-4"> <div key={user} className="flex justify-between items-center gap-4">
<span className="flex items-center gap-1.5 text-slate-600"> <span className="flex items-center gap-1.5 text-muted-foreground">
<span <span
className="w-2.5 h-2.5 rounded-full" className="w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: userEntry.color }} style={{ backgroundColor: userEntry.color }}
/> />
{user || '未分配'}: {user || '未分配'}:
</span> </span>
<span className="font-medium text-slate-900"> <span className="font-medium text-foreground">
{firstMetric === 'executionTimeSecs' ? Number(userEntry.value).toFixed(1) : userEntry.value} {firstMetric === 'executionTimeSecs' ? '秒' : ''} {firstMetric === 'executionTimeSecs' ? Number(userEntry.value).toFixed(1) : userEntry.value} {firstMetric === 'executionTimeSecs' ? '秒' : ''}
</span> </span>
</div> </div>

10
src/renderer/src/components/report-analysis/components/CustomTooltip.tsx
View File

@@ -26,20 +26,20 @@ export const CustomTooltip = React.memo(
const dailyData = chartData.find((d) => d.date === label) const dailyData = chartData.find((d) => d.date === label)
return ( return (
<div className="bg-white p-4 border border-slate-200 shadow-lg rounded-lg max-w-sm"> <div className="bg-card p-4 border border-border shadow-lg rounded-lg max-w-sm">
<p className="font-semibold text-slate-800 mb-2 border-b border-slate-100 pb-2">{label}</p> <p className="font-semibold text-foreground mb-2 border-b border-border pb-2">{label}</p>
<div className="space-y-1.5 text-sm"> <div className="space-y-1.5 text-sm">
{payload.map((entry: any, index: number) => ( {payload.map((entry: any, index: number) => (
<div key={`${entry.name}-${index}`} className="flex justify-between items-center gap-4"> <div key={`${entry.name}-${index}`} className="flex justify-between items-center gap-4">
<span className="flex items-center gap-1.5 text-slate-600"> <span className="flex items-center gap-1.5 text-muted-foreground">
<span <span
className="w-2.5 h-2.5 rounded-full" className="w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: entry.color }} style={{ backgroundColor: entry.color }}
></span> ></span>
{entry.name}: {entry.name}:
</span> </span>
<span className="font-medium text-slate-900"> <span className="font-medium text-foreground">
{entry.dataKey === 'executionTimeSecs' ? Number(entry.value).toFixed(1) : entry.value} {entry.dataKey === 'executionTimeSecs' ? '秒' : ''} {entry.dataKey === 'executionTimeSecs' ? Number(entry.value).toFixed(1) : entry.value} {entry.dataKey === 'executionTimeSecs' ? '秒' : ''}
</span> </span>
</div> </div>
@@ -47,7 +47,7 @@ export const CustomTooltip = React.memo(
</div> </div>
{dailyData && ( {dailyData && (
<div className="mt-3 pt-2 border-t border-slate-100 text-xs text-slate-500"> <div className="mt-3 pt-2 border-t border-border text-xs text-muted-foreground">
<p>操作用户: {dailyData.users.join(', ')}</p> <p>操作用户: {dailyData.users.join(', ')}</p>
<p className="mt-1">报告总数: {dailyData.reportCount}</p> <p className="mt-1">报告总数: {dailyData.reportCount}</p>
</div> </div>

4
src/renderer/src/components/report-analysis/components/MetricSelector.tsx
View File

@@ -24,7 +24,7 @@ export const MetricSelector: React.FC<MetricSelectorProps> = ({
}) => { }) => {
return ( return (
<div className="mb-8"> <div className="mb-8">
<h3 className="text-sm font-medium text-slate-700 mb-3"> <h3 className="text-sm font-medium text-foreground mb-3">
选择呈现内容 ({viewMode === 'comparison' ? '单选' : '多选'}) 选择呈现内容 ({viewMode === 'comparison' ? '单选' : '多选'})
</h3> </h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -37,7 +37,7 @@ export const MetricSelector: React.FC<MetricSelectorProps> = ({
className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-colors flex items-center gap-1.5 ${ className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-colors flex items-center gap-1.5 ${
isSelected isSelected
? 'bg-blue-50 border-blue-200 text-blue-700' ? 'bg-blue-50 border-blue-200 text-blue-700'
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' : 'bg-card border-border text-muted-foreground hover:bg-muted'
}`} }`}
> >
<div <div

10
src/renderer/src/components/report-analysis/components/UserFilter.tsx
View File

@@ -37,12 +37,12 @@ export const UserFilter: React.FC<UserFilterProps> = ({
return ( return (
<div className="mb-6"> <div className="mb-6">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium text-slate-700">筛选用户</h3> <h3 className="text-sm font-medium text-foreground">筛选用户</h3>
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={onSelectAll} className="text-xs text-blue-600 hover:underline"> <button onClick={onSelectAll} className="text-xs text-blue-600 hover:underline">
全选 全选
</button> </button>
<button onClick={onClearAll} className="text-xs text-slate-500 hover:underline"> <button onClick={onClearAll} className="text-xs text-muted-foreground hover:underline">
清空 清空
</button> </button>
</div> </div>
@@ -59,8 +59,8 @@ export const UserFilter: React.FC<UserFilterProps> = ({
onClick={() => onUserToggle(user)} onClick={() => onUserToggle(user)}
className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-colors flex items-center gap-1.5 ${ className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-colors flex items-center gap-1.5 ${
isSelected isSelected
? 'bg-white border-current' ? 'bg-card border-current'
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' : 'bg-card border-border text-muted-foreground hover:bg-muted'
}`} }`}
style={isSelected ? { color, borderColor: color } : {}} style={isSelected ? { color, borderColor: color } : {}}
> >
@@ -75,7 +75,7 @@ export const UserFilter: React.FC<UserFilterProps> = ({
</div> </div>
{selectedUsers.size === 0 && ( {selectedUsers.size === 0 && (
<p className="text-xs text-slate-500 mt-2">未选择用户时将显示所有用户数据</p> <p className="text-xs text-muted-foreground mt-2">未选择用户时将显示所有用户数据</p>
)} )}
</div> </div>
) )

6
src/renderer/src/components/report-analysis/components/ViewModeToggle.tsx
View File

@@ -19,14 +19,14 @@ interface ViewModeToggleProps {
export const ViewModeToggle: React.FC<ViewModeToggleProps> = ({ viewMode, onViewModeChange }) => { export const ViewModeToggle: React.FC<ViewModeToggleProps> = ({ viewMode, onViewModeChange }) => {
return ( return (
<div className="mb-6"> <div className="mb-6">
<h3 className="text-sm font-medium text-slate-700 mb-3">视图模式</h3> <h3 className="text-sm font-medium text-foreground mb-3">视图模式</h3>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={() => onViewModeChange('aggregated')} onClick={() => onViewModeChange('aggregated')}
className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${ className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
viewMode === 'aggregated' viewMode === 'aggregated'
? 'bg-blue-50 border-blue-200 text-blue-700' ? 'bg-blue-50 border-blue-200 text-blue-700'
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' : 'bg-card border-border text-muted-foreground hover:bg-muted'
}`} }`}
> >
按日期聚合 按日期聚合
@@ -36,7 +36,7 @@ export const ViewModeToggle: React.FC<ViewModeToggleProps> = ({ viewMode, onView
className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${ className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
viewMode === 'comparison' viewMode === 'comparison'
? 'bg-blue-50 border-blue-200 text-blue-700' ? 'bg-blue-50 border-blue-200 text-blue-700'
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50' : 'bg-card border-border text-muted-foreground hover:bg-muted'
}`} }`}
> >
用户对比 用户对比

18
src/renderer/src/components/report-analysis/index.tsx
View File

@@ -62,23 +62,23 @@ export const ReportAnalysisDialog: React.FC<ReportAnalysisDialogProps> = ({
return ( return (
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200"> <div className="fixed inset-0 z-[110] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-white rounded-2xl shadow-2xl w-[1000px] max-w-[95vw] h-[85vh] flex flex-col border border-slate-200 overflow-hidden animate-in zoom-in-95 duration-200"> <div className="bg-card rounded-2xl shadow-2xl w-[1000px] max-w-[95vw] h-[85vh] flex flex-col border border-border overflow-hidden animate-in zoom-in-95 duration-200">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-slate-50 flex-shrink-0"> <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-muted flex-shrink-0">
<div className="flex items-center gap-2 text-slate-800"> <div className="flex items-center gap-2 text-foreground">
<BarChart3 size={20} className="text-blue-600" /> <BarChart3 size={20} className="text-blue-600" />
<h2 className="text-lg font-semibold">执行报告分析</h2> <h2 className="text-lg font-semibold">执行报告分析</h2>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="text-slate-400 hover:text-slate-600 hover:bg-slate-200/50 p-1.5 rounded-lg transition-colors" className="text-muted-foreground hover:text-foreground hover:bg-muted p-1.5 rounded-lg transition-colors"
> >
<X size={20} /> <X size={20} />
</button> </button>
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 overflow-hidden flex flex-col bg-white"> <div className="flex-1 overflow-hidden flex flex-col bg-card">
{isLoading ? ( {isLoading ? (
<LoadingState /> <LoadingState />
) : error ? ( ) : error ? (
@@ -111,7 +111,7 @@ export const ReportAnalysisDialog: React.FC<ReportAnalysisDialogProps> = ({
// ============================================================================ // ============================================================================
const LoadingState: React.FC = () => ( const LoadingState: React.FC = () => (
<div className="flex-1 flex flex-col items-center justify-center text-slate-500"> <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
<Loader2 size={32} className="animate-spin text-blue-500 mb-4" /> <Loader2 size={32} className="animate-spin text-blue-500 mb-4" />
<p>正在分析报告数据，可能需要几秒钟...</p> <p>正在分析报告数据，可能需要几秒钟...</p>
</div> </div>
@@ -132,8 +132,8 @@ const ErrorState: React.FC<{ error: string; onRetry: () => void }> = ({ error, o
) )
const EmptyState: React.FC = () => ( const EmptyState: React.FC = () => (
<div className="flex-1 flex flex-col items-center justify-center text-slate-400"> <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
<BarChart3 size={48} className="mb-4 opacity-50 text-slate-300" /> <BarChart3 size={48} className="mb-4 opacity-50 text-muted-foreground" />
<p>暂无报告数据可供分析</p> <p>暂无报告数据可供分析</p>
</div> </div>
) )
@@ -198,7 +198,7 @@ const MainContent: React.FC<MainContentProps> = ({
/> />
{/* Description */} {/* Description */}
<div className="mt-4 text-center text-xs text-slate-400"> <div className="mt-4 text-center text-xs text-muted-foreground">
{viewMode === 'aggregated' {viewMode === 'aggregated'
? '数据以天为单位进行聚合统计。展示的是选定时间段内的总量。' ? '数据以天为单位进行聚合统计。展示的是选定时间段内的总量。'
: selectedUsers.size === 0 : selectedUsers.size === 0

2
src/renderer/src/pages/CleanerPage.tsx
View File

@@ -81,7 +81,7 @@ const CleanerPage: React.FC = () => {
/> />
)} )}
<div className="flex-1 bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden"> <div className="flex-1 bg-card rounded-xl shadow-sm border border-border flex flex-col overflow-hidden">
<CleanerToolbar <CleanerToolbar
validationResults={validationResults} validationResults={validationResults}
filteredResults={filteredResults} filteredResults={filteredResults}

12
src/renderer/src/pages/ExtractorPage.tsx
View File

@@ -59,9 +59,9 @@ const ExtractorPage: React.FC<ExtractorPageProps> = ({ currentUser }) => {
return ( return (
<div className="flex h-full gap-4 relative"> <div className="flex h-full gap-4 relative">
<aside className="w-80 flex-shrink-0 bg-white border border-slate-200 flex flex-col shadow-sm rounded-xl overflow-hidden h-full"> <aside className="w-80 flex-shrink-0 bg-card border border-border flex flex-col shadow-sm rounded-xl overflow-hidden h-full">
<div className="p-4 border-b border-slate-100"> <div className="p-4 border-b border-border">
<h3 className="text-sm font-semibold text-slate-800">订单号输入</h3> <h3 className="text-sm font-semibold text-foreground">订单号输入</h3>
</div> </div>
<div className="flex-1 flex flex-col p-4 min-h-0"> <div className="flex-1 flex flex-col p-4 min-h-0">
<OrderNumberInput <OrderNumberInput
@@ -77,13 +77,13 @@ const ExtractorPage: React.FC<ExtractorPageProps> = ({ currentUser }) => {
</aside> </aside>
<div className="flex-1 min-w-0 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500"> <div className="flex-1 min-w-0 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5 flex items-center justify-between"> <div className="bg-card rounded-xl shadow-sm border border-border p-5 flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<h2 className="text-lg font-semibold flex items-center gap-2 text-slate-800 mb-1"> <h2 className="text-lg font-semibold flex items-center gap-2 text-foreground mb-1">
<Download size={20} className="text-blue-600" /> <Download size={20} className="text-blue-600" />
批量数据提取 批量数据提取
</h2> </h2>
<p className="text-sm text-slate-500">遍历订单列表，自动执行数据导出并保存至数据库</p> <p className="text-sm text-muted-foreground">遍历订单列表，自动执行数据导出并保存至数据库</p>
{error && <p className="text-sm text-red-500 mt-2">{error}</p>} {error && <p className="text-sm text-red-500 mt-2">{error}</p>}
</div> </div>

30
src/renderer/src/pages/SettingsPage.tsx
View File

@@ -74,8 +74,8 @@ const SettingsPage: React.FC = () => {
return ( return (
<div className="flex items-center justify-center min-h-[500px]"> <div className="flex items-center justify-center min-h-[500px]">
<div className="text-center"> <div className="text-center">
<div className="w-10 h-10 border-4 border-slate-200 border-t-blue-500 rounded-full animate-spin mx-auto mb-4"></div> <div className="w-10 h-10 border-4 border-border border-t-blue-500 rounded-full animate-spin mx-auto mb-4"></div>
<p className="text-slate-500">加载中...</p> <p className="text-muted-foreground">加载中...</p>
</div> </div>
</div> </div>
) )
@@ -83,22 +83,22 @@ const SettingsPage: React.FC = () => {
return ( return (
<div className="flex justify-center animate-in fade-in slide-in-from-bottom-4 duration-500 mt-6"> <div className="flex justify-center animate-in fade-in slide-in-from-bottom-4 duration-500 mt-6">
<div className="w-full max-w-xl bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <div className="w-full max-w-xl bg-card rounded-xl shadow-sm border border-border overflow-hidden">
<div className="border-b border-slate-100 bg-slate-50 px-6 py-5"> <div className="border-b border-border bg-muted px-6 py-5">
<h2 className="text-lg font-semibold flex items-center gap-2 text-slate-800"> <h2 className="text-lg font-semibold flex items-center gap-2 text-foreground">
<SettingsIcon size={20} className="text-slate-600" /> <SettingsIcon size={20} className="text-muted-foreground" />
ERP 账号配置 ERP 账号配置
</h2> </h2>
<p className="text-sm text-slate-500 mt-1"> <p className="text-sm text-muted-foreground mt-1">
设置 ERP 系统的登录账号和密码。此配置将存储在数据库中，按用户管理。 设置 ERP 系统的登录账号和密码。此配置将存储在数据库中，按用户管理。
</p> </p>
</div> </div>
<div className="p-6 space-y-6 bg-white"> <div className="p-6 space-y-6 bg-card">
<div className="w-full max-w-md mx-auto"> <div className="w-full max-w-md mx-auto">
<label className="block text-sm font-medium text-slate-700 mb-1.5"> <label className="block text-sm font-medium text-muted-foreground mb-1.5">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<User size={16} className="text-slate-500" /> <User size={16} className="text-muted-foreground" />
ERP 登录账号 ERP 登录账号
</span> </span>
</label> </label>
@@ -110,14 +110,14 @@ const SettingsPage: React.FC = () => {
setCredentials((prev) => ({ ...prev, username: e.target.value })) setCredentials((prev) => ({ ...prev, username: e.target.value }))
setIsModified(true) setIsModified(true)
}} }}
className="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50" className="w-full border border-input rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-muted"
/> />
</div> </div>
<div className="w-full max-w-md mx-auto"> <div className="w-full max-w-md mx-auto">
<label className="block text-sm font-medium text-slate-700 mb-1.5"> <label className="block text-sm font-medium text-muted-foreground mb-1.5">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Key size={16} className="text-slate-500" /> <Key size={16} className="text-muted-foreground" />
ERP 登录密码 ERP 登录密码
</span> </span>
</label> </label>
@@ -129,11 +129,11 @@ const SettingsPage: React.FC = () => {
setCredentials((prev) => ({ ...prev, password: e.target.value })) setCredentials((prev) => ({ ...prev, password: e.target.value }))
setIsModified(true) setIsModified(true)
}} }}
className="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50" className="w-full border border-input rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-muted"
/> />
</div> </div>
<div className="w-full max-w-md mx-auto pt-6 mt-2 border-t border-slate-100 flex justify-center"> <div className="w-full max-w-md mx-auto pt-6 mt-2 border-t border-border flex justify-center">
<Button <Button
variant="primary" variant="primary"
onClick={handleSaveCredentials} onClick={handleSaveCredentials}