optimize replay modal style

src/ui/BuildDeck/DeckSelect.tsx

@@ -3,15 +3,15 @@ import {
   DeleteOutlined,
   DownloadOutlined,
   FileAddOutlined,
-  InboxOutlined,
   PlusOutlined,
 } from "@ant-design/icons";
-import { App, Button, Dropdown, MenuProps, Upload, UploadProps } from "antd";
+import { App, Button, Dropdown, MenuProps, UploadProps } from "antd";
 import React, { useRef, useState } from "react";
 import YGOProDeck from "ygopro-deck-encode";
 
 import { deckStore, IDeck } from "@/stores";
 
+import { Uploader } from "../Shared";
 import styles from "./DeckSelect.module.scss";
 
 export const DeckSelect: React.FC<{
@@ -211,18 +211,11 @@ const DeckUploader: React.FC<{ onLoaded: (deck: IDeck) => void }> = ({
   };
 
   return (
-    <div>
-      <Upload.Dragger
-        {...uploadProps}
-        style={{ width: "100%", margin: "20px 0 10px" }}
-      >
-        <p className="ant-upload-drag-icon">
-          <InboxOutlined />
-        </p>
-        <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
-        <p className="ant-upload-hint">仅支持后缀名为ydk的卡组文件。</p>
-      </Upload.Dragger>
-    </div>
+    <Uploader
+      {...uploadProps}
+      text="单击或拖动文件到此区域进行上传"
+      hint="仅支持后缀名为ydk的卡组文件。"
+    />
   );
 };
 

src/ui/Match/ReplayModal.tsx

-import { UploadOutlined } from "@ant-design/icons";
-import { Button, message, Modal, Upload, UploadProps } from "antd";
+import { Button, message, Modal, UploadProps } from "antd";
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
 import { matStore } from "@/stores";
 
+import { Uploader } from "../Shared";
 import { init } from "./util";
 
 const localStore = proxy({
@@ -22,6 +22,7 @@ export const ReplayModal: React.FC = () => {
     onChange(info) {
       info.file.status = "done";
     },
+    accept: ".yrp3d",
     beforeUpload(file, _) {
       const reader = new FileReader();
       reader.readAsArrayBuffer(file);
@@ -78,9 +79,11 @@ export const ReplayModal: React.FC = () => {
       }
       onCancel={() => (localStore.open = false)}
     >
-      <Upload {...uploadProps}>
-        <Button icon={<UploadOutlined />}>点击上传录像文件</Button>
-      </Upload>
+      <Uploader
+        {...uploadProps}
+        text="单击或拖动文件到此区域进行上传"
+        hint="仅支持后缀名为yrp3d的录像文件。"
+      />
     </Modal>
   );
 };

src/ui/Shared/Uploader/index.tsx

+import { InboxOutlined } from "@ant-design/icons";
+import { Upload, UploadProps } from "antd";
+import React from "react";
+
+export const Uploader: React.FC<
+  UploadProps & { text?: string; hint?: string }
+> = ({ text, hint, ...uploadProps }) => (
+  <div>
+    <Upload.Dragger
+      {...uploadProps}
+      style={{ width: "100%", margin: "20px 0 10px" }}
+    >
+      <p className="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p className="ant-upload-text">{text}</p>
+      <p className="ant-upload-hint">{hint}</p>
+    </Upload.Dragger>
+  </div>
+);

src/ui/Shared/index.ts

@@ -6,4 +6,5 @@ export * from "./Loading";
 export * from "./Scrollbar";
 export * from "./Select";
 export * from "./SpecialButton";
+export * from "./Uploader";
 export * from "./YgoCard";