From c09b3ea0cf2d091bf7ae93fdb4f829eb7a43142b Mon Sep 17 00:00:00 2001 From: wfc <2146706290@qq.com> Date: Wed, 26 Feb 2025 08:50:18 +0800 Subject: [PATCH 1/3] m --- apps/web/src/app/admin/base-setting/page.tsx | 8 +- .../common/uploader/AvatarUploader.tsx | 12 +- .../common/uploader/MultiAvatarUploader.tsx | 68 +++++++ .../common/uploader/MultiImageUploader.tsx | 173 ------------------ .../common/uploader/TestUploader.tsx | 18 -- 5 files changed, 80 insertions(+), 199 deletions(-) create mode 100644 apps/web/src/components/common/uploader/MultiAvatarUploader.tsx delete mode 100644 apps/web/src/components/common/uploader/MultiImageUploader.tsx delete mode 100644 apps/web/src/components/common/uploader/TestUploader.tsx diff --git a/apps/web/src/app/admin/base-setting/page.tsx b/apps/web/src/app/admin/base-setting/page.tsx index c0aed70..aaed815 100755 --- a/apps/web/src/app/admin/base-setting/page.tsx +++ b/apps/web/src/app/admin/base-setting/page.tsx @@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react"; import { Button, Form, Input, message, theme } from "antd"; import { useAppConfig } from "@nice/client"; import { useAuth } from "@web/src/providers/auth-provider"; -import MultiImageUploader from "@web/src/components/common/uploader/MultiImageUploader"; +import MultiAvatarUploader from "@web/src/components/common/uploader/MultiAvatarUploader"; import FixedHeader from "@web/src/components/layout/fix-header"; import { useForm } from "antd/es/form/Form"; @@ -129,9 +129,9 @@ export default function BaseSettingPage() {
- +
{/*
+ ghost> 清除行模型缓存
diff --git a/apps/web/src/components/common/uploader/AvatarUploader.tsx b/apps/web/src/components/common/uploader/AvatarUploader.tsx index abbb355..33246c8 100755 --- a/apps/web/src/components/common/uploader/AvatarUploader.tsx +++ b/apps/web/src/components/common/uploader/AvatarUploader.tsx @@ -12,6 +12,8 @@ export interface AvatarUploaderProps { onChange?: (value: string) => void; compressed?: boolean; style?: React.CSSProperties; // 添加style属性 + successText?: string; + showCover?: boolean; } interface UploadingFile { @@ -31,6 +33,8 @@ const AvatarUploader: React.FC = ({ className, placeholder = "点击上传", style, // 解构style属性 + successText = "上传成功", + showCover = true, }) => { const { handleFileUpload, uploadProgress } = useTusUpload(); const [file, setFile] = useState(null); @@ -92,12 +96,12 @@ const AvatarUploader: React.FC = ({ // 使用 resolved 的最新值调用 onChange // 强制刷新 Avatar 组件 setAvatarKey((prev) => prev + 1); // 修改 key 强制重新挂载 - onChange?.(uploadedUrl); console.log(uploadedUrl); - toast.success("头像上传成功"); + onChange?.(uploadedUrl); + toast.success(successText); } catch (error) { console.error("上传错误:", error); - toast.error("头像上传失败"); + toast.error("上传失败"); setFile((prev) => ({ ...prev!, status: "error" })); } finally { setUploading(false); @@ -124,7 +128,7 @@ const AvatarUploader: React.FC = ({ accept="image/*" style={{ display: "none" }} /> - {previewUrl ? ( + {(previewUrl && showCover) ? ( void; +} + +export function MultiAvatarUploader({ + value, + onChange, +}: MultiAvatarUploaderProps) { + const [imageList, setImageList] = useState(value || []) + const [previewImage, setPreviewImage] = useState(""); + useEffect(() => { + if (!isEqual(value, imageList)) { + setImageList(value || []); + } + }, [value]); + useEffect(() => { + onChange?.(imageList) + }, [imageList]) + return <> +
+ {imageList.map((image, index) => { + return ( +
+ + setPreviewImage(visible ? image || "" : "") + }} > + +
+ ) + })} +
+
+ { + console.log(value); + setImageList([...imageList, value]) + }}> +
+ + ; +} +export default MultiAvatarUploader; \ No newline at end of file diff --git a/apps/web/src/components/common/uploader/MultiImageUploader.tsx b/apps/web/src/components/common/uploader/MultiImageUploader.tsx deleted file mode 100644 index 5f6d026..0000000 --- a/apps/web/src/components/common/uploader/MultiImageUploader.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React, { useState } from 'react'; -import { Upload, Modal, message } from 'antd'; -import { PlusOutlined } from '@ant-design/icons'; -import { useTusUpload } from "@web/src/hooks/useTusUpload"; -import toast from "react-hot-toast"; - - -export interface MultiImageUploadProps { - value?: string; - placeholder?: string; - className?: string; - onChange?: (value: string) => void; - compressed?: boolean; - style?: React.CSSProperties; // 添加style属性 -} - -interface UploadFile { - name: string; - progress: number; - status: "uploading" | "done" | "error"; - url?: string; - fileKey?: string; - uid: string; -} -const MultiImageUpload: React.FC = ({ - value, - onChange, - compressed = false, - className, - placeholder = "点击上传", - style, // 解构style属性 -}) => { - const [fileList, setFileList] = useState(null); // 存储已上传的文件列表 - const [previewVisible, setPreviewVisible] = useState(false); // 控制预览模态框的显示 - const [previewImage, setPreviewImage] = useState(''); // 当前预览的图片URL - const { handleFileUpload, uploadProgress } = useTusUpload(); - const [compressedUrl, setCompressedUrl] = useState(value || ""); - const [url, setUrl] = useState(value || ""); - const [uploading, setUploading] = useState(false); - - // 处理文件上传前的校验 - const beforeUpload = (file) => { - const isImage = file.type.startsWith('image/'); - if (!isImage) { - message.error('只能上传图片文件！'); - } - const isLt10M = file.size / 1024 / 1024 < 10; - if (!isLt10M) { - message.error('图片大小不能超过10MB！'); - } - return isImage && isLt10M; - }; - - // 处理文件列表变化 - const handleChange = async ({ fileList }) => { - //setFileList(fileList); - console.log(fileList); - const imageUrls = fileList.map(file => { - return URL.createObjectURL(file.originFileObj) - }); - console.log("imageUrls", imageUrls); - - const newFileList = fileList.map(file => { - return { - name: file.name, - progress: 0, - status: "uploading", - //uid: file.uid, - fileKey: `${file.name}-${Date.now()}`, - //url: file.url, - } - }); - console.log("newFileList", newFileList); - setUploading(true); - - try { - const resFileList = newFileList.map(async (file, index) => { - const uploadedUrl = await new Promise((resolve, reject) => { - handleFileUpload( - fileList[index].originFileObj, - (result) => { - () => { - return { - ...newFileList[index], - progress: 100, - status: "done", - fileId: result.fileId, - url: result.url, - compressedUrl: result.compressedUrl, - } - } - // setFile((prev) => ({ - // ...prev!, - // progress: 100, - // status: "done", - // fileId: result.fileId, - // url: result.url, - // compressedUrl: result.compressedUrl, - // })); - setUrl(result.url); - setCompressedUrl(result.compressedUrl); - // 直接使用 result 中的最新值 - resolve(compressed ? result.compressedUrl : result.url); - }, - (error) => { - reject(error); - }, - newFileList[index]?.fileKey - ); - }); - }) - // await new Promise((resolve) => setTimeout(resolve,4999)); // 方法1：使用 await 暂停执行 - // 使用 resolved 的最新值调用 onChange - // 强制刷新 Avatar 组件 - // setAvatarKey((prev) => prev + 1); // 修改 key 强制重新挂载 - onChange?.(resFileList); - console.log(resFileList); - toast.success("图片上传成功"); - } catch (error) { - console.error("上传错误:", error); - toast.error("图片上传失败"); - // setFile((prev) => ({ ...prev!, status: "error" })); - } finally { - setUploading(false); - } - };uploadProgress - - // 处理预览 - const handlePreview = async (file) => { - if (!file.url && !file.preview) { - file.preview = await getBase64(file.originFileObj); - } - setPreviewImage(file.url || file.preview); - setPreviewVisible(true); - }; - - // 关闭预览模态框 - const handleCancel = () => setPreviewVisible(false); - - // 将文件转换为Base64格式（用于预览） - const getBase64 = (file) => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => resolve(reader.result); - reader.onerror = (error) => reject(error); - }); - }; - - return ( -
- -

-

-

点击或拖拽文件到此区域上传

-

支持单个或批量上传

- - - 预览 - -
- ); -}; - -export default MultiImageUpload; diff --git a/apps/web/src/components/common/uploader/TestUploader.tsx b/apps/web/src/components/common/uploader/TestUploader.tsx deleted file mode 100644 index d4c196e..0000000 --- a/apps/web/src/components/common/uploader/TestUploader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import AvatarUploader from "./AvatarUploader" - - - -interface TestUploaderProps { - value?: string[], - onChange?: (value: string[]) => void -} - -export function TestUploader({ - value, - onChange, -}: TestUploaderProps) { - - return <> - - -} \ No newline at end of file From c7748946e47e44071949c5db3f726bbe500937c4 Mon Sep 17 00:00:00 2001 From: Li1304553726 <1304553726@qq.com> Date: Wed, 26 Feb 2025 08:57:41 +0800 Subject: [PATCH 2/3] add . --- apps/web/src/app/main/home/components/HeroSection.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/web/src/app/main/home/components/HeroSection.tsx b/apps/web/src/app/main/home/components/HeroSection.tsx index 10ecbfe..404ea27 100755 --- a/apps/web/src/app/main/home/components/HeroSection.tsx +++ b/apps/web/src/app/main/home/components/HeroSection.tsx @@ -63,9 +63,8 @@ const HeroSection = () => { }, []); const { slides } = useAppConfig() useEffect(() => { - //slides.push(('https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50')) - //console.log(slides) - }, []) + console.log(statistics) + }, [statistics]) return (
From cf8c2e31f81d154f8936a57221782f7b9ede91a4 Mon Sep 17 00:00:00 2001 From: wfc <2146706290@qq.com> Date: Wed, 26 Feb 2025 09:01:34 +0800 Subject: [PATCH 3/3] upate --- apps/web/src/app/admin/base-setting/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/app/admin/base-setting/page.tsx b/apps/web/src/app/admin/base-setting/page.tsx index aaed815..b4a6b0b 100755 --- a/apps/web/src/app/admin/base-setting/page.tsx +++ b/apps/web/src/app/admin/base-setting/page.tsx @@ -40,7 +40,7 @@ export default function BaseSettingPage() { form.setFieldsValue(baseSetting); } setIsFormChanged(false); - } + } function onSaveClick() { if (form) form.submit(); }