diff --git a/src/components/ImageUploader/index.jsx b/src/components/ImageUploader/index.jsx index 0b7bfdd..a72fa54 100644 --- a/src/components/ImageUploader/index.jsx +++ b/src/components/ImageUploader/index.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { uploadImage } from "../../utils/upload"; -const ImageUploader = ({ setIds }) => { +const ImageUploader = ({ setIds, uploadOne }) => { const [selectedImages, setSelectedImages] = useState([]); const [uploading, setUploading] = useState(false); @@ -86,40 +86,42 @@ const ImageUploader = ({ setIds }) => { )} ))} - + > + + {uploading ? "正在上传..." : "添加图片"} + + + + )} ); diff --git a/src/components/PagesManage/index.js b/src/components/PagesManage/index.js new file mode 100644 index 0000000..88ee036 --- /dev/null +++ b/src/components/PagesManage/index.js @@ -0,0 +1,93 @@ +import React, { useState, useRef, useEffect, useMemo } from "react"; +import { + List, + Input, + Button, + message, + // Spin, +} from "antd"; +import baseRequest from "../../utils/baseRequest"; +export default function PagesManage() { + const [pages, setPages] = useState([ + { title: "主播空间", name: "streamerSpace", params: "name=text" }, + { title: "主播主页", name: "streamerProfile", params: "" }, + { title: "充值页面", name: "payCenter", params: "" }, + { title: "主播空间", name: "streamerSpace", params: "" }, + { title: "主播空间", name: "streamerSpace", params: "" }, + { title: "主播空间", name: "streamerSpace", params: "" }, + ]); + //创建页面路由 + const handleCreate = async ({ id, route_path, action, desc }) => { + try { + const base = baseRequest(); + const response = await fetch("/op/frontend_route/create", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id, + route_path, + action, + desc, + ...base, + }), + }); + const _data = await response.json(); + if (_data.ret === -1) { + alert(_data.msg); + return; + } + message.success("创建成功"); + } catch (error) { + console.error(error); + } + }; + return ( +
+ +
+
+ + + +
+ +
+ {pages.map((it) => ( +
+ +
+
+

+ {it.title} + | + {it.name} +

+
+ + 编辑 + + + 删除 + +
+
+
+ {it.params && ( +
+ 参数： + {`?${it.params}`} +
+ )} +
+
+ +
+ ))} + +
+ ); +} diff --git a/src/components/UploadImgs/index.js b/src/components/UploadImgs/index.js new file mode 100644 index 0000000..4d5ed0b --- /dev/null +++ b/src/components/UploadImgs/index.js @@ -0,0 +1,141 @@ +import React, { useEffect, useState } from "react"; +import { Spin, Image, ImageViewer } from "antd"; +import { uploadImage } from "../../utils/upload"; +// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import { faAdd, faClose } from "@fortawesome/free-solid-svg-icons"; +import { FileAddFilled, CloseCircleFilled } from "@ant-design/icons"; +export default function UploadImgs({ assets, getImgs, multiple }) { + const maxCount = 6; + const [fileList, setFileList] = useState([]); + const [loading, setLoading] = useState(false); + // useEffect(() => { + // if (!assets) { + // setFileList([]); + // } + // }, assets); + const handleUploadImage = async (e) => { + let file = e.target.files[0]; + if (!file) return; + setLoading(true); + if (file.type.indexOf("image/") != -1) { + // const image = await uploadImage(file); + // getImgs((old) => [...old, image.id]); + const newFiles = [file]; + const newAssets = newFiles.map((item) => ({ + type: "img", + src: URL.createObjectURL(item), + })); + const uploadPromise = uploadImage(file); + const uploadResult = await Promise.race([ + uploadPromise, + new Promise((_, reject) => + setTimeout(() => reject(new Error("Upload timeout")), 30000) + ), + ]); + console.log("uploadResult", uploadResult); + setFileList(newAssets); + getImgs(uploadResult); + } else if (file.type.indexOf("video/") != -1) { + if (typeof window == "undefined") return; + const videoD = document.getElementById("videoD"); + const videoC = document.getElementById("videoC"); + // console.log("videoC", videoC); + const ctx = videoC?.getContext("2d"); + // 设置Canvas的宽度和高度与视频一致 + videoC.width = videoD.videoWidth; + videoC.height = videoD.videoHeight; + // 在Canvas上绘制当前视频帧 + ctx.drawImage(videoD, 0, 0, videoC.width, videoC.height); + // 将Canvas转换为图片URL + const frameImageUrl = videoC.toDataURL(); + + // 输出图片URL + // console.log(frameImageUrl); + // console.log("ddddd", file, { + // type: "video", + // src: frameImageUrl, + // }); + // const video = await uploadVideo(file); + // getImgs((old) => [...old, video.id]); + // setFileList((old) => [...old, video]); + const newFiles = [...assets, file]; + const newAssets = newFiles.map((item) => ({ + type: "video", + src: URL.createObjectURL(item), + })); + setFileList(newAssets); + } + + setLoading(false); + }; + const handleRemoveItem = (index) => { + // console.log(index); + let newArr = [...fileList]; + newArr.splice(index, 1); + setFileList(newArr); + getImgs(newArr); + }; + return ( +
+
+ {fileList.map((item, index) => { + return ( +
+ +
handleRemoveItem(index)} + > + +
+
+ ); + })} + {loading && ( +
+ +

上传中

+
+ )} + {(multiple || (!multiple && !fileList.length)) && !loading && ( + + )} + +
+
+ + +
+
+ ); +} +// export async function mockUpload(file) { +// await sleep(3000) +// return { +// url: URL.createObjectURL(file), +// } +// } diff --git a/src/components/VideoPlayer/index.js b/src/components/VideoPlayer/index.js index bac9773..fece0a3 100644 --- a/src/components/VideoPlayer/index.js +++ b/src/components/VideoPlayer/index.js @@ -1,11 +1,18 @@ import React, { useState } from "react"; import { Select } from "antd"; import ReactPlayer from "react-player"; -export default function VideoPlayer({url,key,style}) { +export default function VideoPlayer({ url, key, style }) { const [rate, setRate] = useState(1); return ( -
- +
+