Explorar el Código

💄 style(vod): improve upload button styles and behavior

- add type="button" to prevent default form submission behavior
- add max-w and truncate classes to prevent button text overflow
- ensure long file names are properly truncated in upload buttons
yourname hace 6 meses
padre
commit
07295dbc33
Se han modificado 1 ficheros con 4 adiciones y 0 borrados
  1. 4 0
      src/client/admin/components/vod/VodUpload.tsx

+ 4 - 0
src/client/admin/components/vod/VodUpload.tsx

@@ -206,8 +206,10 @@ export const VodUpload: React.FC<VodUploadProps> = ({
             className="hidden"
             className="hidden"
           />
           />
           <Button
           <Button
+            type="button"
             onClick={() => videoInputRef.current?.click()}
             onClick={() => videoInputRef.current?.click()}
             variant="default"
             variant="default"
+            className="max-w-[200px] truncate"
           >
           >
             {selectedVideo ? selectedVideo.name : "选择视频文件"}
             {selectedVideo ? selectedVideo.name : "选择视频文件"}
           </Button>
           </Button>
@@ -220,8 +222,10 @@ export const VodUpload: React.FC<VodUploadProps> = ({
             className="hidden"
             className="hidden"
           />
           />
           <Button
           <Button
+            type="button"
             onClick={() => coverInputRef.current?.click()}
             onClick={() => coverInputRef.current?.click()}
             variant="outline"
             variant="outline"
+            className="max-w-[180px] truncate"
           >
           >
             {selectedCover ? selectedCover.name : "选择封面(可选)"}
             {selectedCover ? selectedCover.name : "选择封面(可选)"}
           </Button>
           </Button>