修复 R124 企业微信移动入口与部署迁移门禁

client/src/pages/MobileCapturePage.tsx

@@ -196,26 +196,73 @@ export function MobileCapturePage() {
           </span>
         </div>
 
-        <label
-          htmlFor="mobile-capture-file"
-          className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-center transition-colors hover:border-zinc-400 hover:bg-white"
-        >
-          <span className="material-symbols-outlined text-[32px] text-zinc-700">add_photo_alternate</span>
-          <span className="mt-2 text-sm font-semibold text-zinc-900">拍照或选择文件</span>
-          <span className="mt-1 text-xs leading-5 text-zinc-500">JPG、PNG、PDF 均可上传</span>
-        </label>
-        <input
-          id="mobile-capture-file"
-          accept="image/*,application/pdf"
-          capture="environment"
-          className="sr-only"
-          data-testid="mobile-capture-file"
-          onChange={(event) => {
-            setSelectedFiles(Array.from(event.target.files ?? []));
-          }}
-          multiple
-          type="file"
-        />
+        <div className="grid gap-2" data-testid="mobile-capture-file">
+          <label
+            htmlFor="mobile-capture-camera-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
+          >
+            <span className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-[22px] text-blue-700">photo_camera</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">拍照上传</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">打开摄像头拍摄发票</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-camera-file"
+            accept="image/*"
+            capture="environment"
+            className="sr-only"
+            data-testid="mobile-capture-camera-file"
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+
+          <label
+            htmlFor="mobile-capture-image-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
+          >
+            <span className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-lg bg-cyan-50 text-[22px] text-cyan-700">image</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">选择图片</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">JPG、PNG、WEBP</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-image-file"
+            accept="image/jpeg,image/png,image/webp"
+            className="sr-only"
+            data-testid="mobile-capture-image-file"
+            multiple
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+
+          <label
+            htmlFor="mobile-capture-pdf-file"
+            className="flex min-h-16 cursor-pointer items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left shadow-sm transition-colors hover:bg-zinc-50"
+          >
+            <span className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-[22px] text-emerald-700">picture_as_pdf</span>
+            <span className="min-w-0">
+              <span className="block text-sm font-semibold text-zinc-900">选择 PDF</span>
+              <span className="mt-0.5 block text-xs leading-5 text-zinc-500">数电票和扫描件 PDF</span>
+            </span>
+          </label>
+          <input
+            id="mobile-capture-pdf-file"
+            accept="application/pdf"
+            className="sr-only"
+            data-testid="mobile-capture-pdf-file"
+            multiple
+            onChange={(event) => {
+              setSelectedFiles(Array.from(event.target.files ?? []));
+            }}
+            type="file"
+          />
+        </div>
 
         <div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
           <span className="font-medium text-zinc-800">当前文件：</span>