完善文档预览的效果修改

app/routes/files.upload.tsx

@@ -8,6 +8,7 @@ import { UploadArea, UploadAreaRef } from "~/components/ui/UploadArea";
 import { FileProgress} from "~/components/ui/FileProgress";
 import { ProcessingSteps, Step } from "~/components/ui/ProcessingSteps";
 import uploadStyles from "~/styles/pages/files_upload.css?url";
+import { messageService } from "~/components/ui/MessageModal";
 import { 
   getTodayDocuments, 
   getDocumentTypes, 
@@ -323,6 +324,18 @@ export default function FilesUpload() {
   // 获取action返回的数据
   const actionData = useActionData<ActionData>();
   
+  // 添加一个本地状态来跟踪文件类型错误
+  const [fileTypeError, setFileTypeError] = useState<string | null>(
+    actionData?.errors?.fileType || null
+  );
+  
+  // 监听actionData变化，当有fileType错误时更新fileTypeError状态
+  useEffect(() => {
+    if (actionData?.errors?.fileType) {
+      setFileTypeError(actionData.errors.fileType);
+    }
+  }, [actionData]);
+  
   // 状态检查定时器引用
   const statusCheckIntervalRef = useRef<NodeJS.Timeout | null>(null);
   
@@ -402,6 +415,8 @@ export default function FilesUpload() {
     // 确保只有选择了有效的文件类型才进行设置
     if (value) {
       setFileType(value as FileType);
+      // 立即清除错误状态
+      setFileTypeError(null);
       
       // 如果已经有选中的文件，且选择了文件类型，则开始上传
       if (currentFiles.length > 0) {
@@ -409,6 +424,8 @@ export default function FilesUpload() {
       }
     } else {
       setFileType("");
+      // 如果用户选择了空选项，显示错误信息
+      setFileTypeError("上传文件之前请选择文件类型");
     }
   };
   
@@ -535,6 +552,7 @@ export default function FilesUpload() {
       const errorSteps = [...processingSteps];
       errorSteps[0].status = "error";
       errorSteps[0].description = `上传文件失败: ${error instanceof Error ? error.message : '未知错误'}`;
+
       setProcessingSteps(errorSteps);
       
       // 清除进度定时器
@@ -542,7 +560,13 @@ export default function FilesUpload() {
         clearInterval(progressIntervalRef.current);
       }
       
-      alert(`文件上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
+      // 显示错误提示
+      messageService.error('文件上传失败：只能上传pdf文件。', {
+        title: '文件上传失败',
+        onConfirm: () => {
+          resetUpload();
+        }
+      });
       resetUpload();
     }
   };
@@ -924,7 +948,7 @@ export default function FilesUpload() {
               <select 
                 id="file-type-select"
                 name="fileType"
-                className={`form-select ${actionData?.errors?.fileType ? 'border-red-500' : ''}`} 
+                className={`form-select ${fileTypeError ? 'border-red-500' : ''}`} 
                 value={fileType}
                 onChange={handleFileTypeChange}
                 disabled={uploadStage !== "idle"}
@@ -935,8 +959,8 @@ export default function FilesUpload() {
                 ))}
               </select>
               
-              {actionData?.errors?.fileType && (
-                <div className="text-red-500 text-sm mt-1">{actionData.errors.fileType}</div>
+              {fileTypeError && (
+                <div className="text-red-500 text-sm mt-1">{fileTypeError}</div>
               )}
               
               <div className="form-tip">不同类型的文档将应用不同的审核规则</div>
@@ -1000,8 +1024,9 @@ export default function FilesUpload() {
                 ref={uploadAreaRef}
                 onFilesSelected={handleFilesSelected}
                 multiple={true}
-                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
-                tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
+                // accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
+                accept=".pdf"
+                tipText="支持单个或多个pdf文件上传，文件格式：PDF"
                 shouldPreventFileSelect={!fileType}
               />
 
@@ -1021,17 +1046,28 @@ export default function FilesUpload() {
               {/* 高级上传设置 */}
               { showAdvancedOptions && (
                   <div className="advanced-options">
-                    <div 
+                    <button 
                       className={`advanced-options-toggle ${showAdvancedOptions ? 'open' : ''}`}
                       onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+                      aria-expanded={showAdvancedOptions}
+                      aria-controls="advanced-options-content"
+                      type="button"
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setShowAdvancedOptions(!showAdvancedOptions);
+                        }
+                      }}
                     >
                       <span>高级上传设置</span>
-                      <i className="ri-arrow-down-s-line"></i>
-                    </div>
+                      <i className="ri-arrow-down-s-line" aria-hidden="true"></i>
+                    </button>
                   
                     <div 
+                      id="advanced-options-content"
                       className="advanced-options-content" 
                       style={{ display: showAdvancedOptions ? 'block' : 'none' }}
+                      aria-hidden={!showAdvancedOptions}
                     >
                       <div className="grid grid-cols-2 gap-4">
                         <div className="form-group">