add

2025-01-25 23:19:03 +08:00 · 2025-01-25 23:19:03 +08:00 · 741ff22489
parent 7e1942fa07
commit 741ff22489
6 changed files with 144 additions and 120 deletions
--- a/apps/web/src/components/common/uploader/TusUploader.tsx
+++ b/apps/web/src/components/common/uploader/TusUploader.tsx
@ -12,22 +12,22 @@ export interface TusUploaderProps {
 	value?: string[];
 	onChange?: (value: string[]) => void;
 }
-
 interface UploadingFile {
 	name: string;
 	progress: number;
 	status: "uploading" | "done" | "error";
 	fileId?: string;
+	fileKey?: string;
 }

 export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
-	const { handleFileUpload } = useTusUpload();
+	const { handleFileUpload, uploadProgress } = useTusUpload();
 	const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
 	const [completedFiles, setCompletedFiles] = useState<UploadingFile[]>(
 		() =>
 			value?.map((fileId) => ({
-				name: `文件 ${fileId}`, // 可以根据需要获取实际文件名
-				progress: 1,
+				name: `文件 ${fileId}`,
+				progress: 100,
 				status: "done" as const,
 				fileId,
 			})) || []
@ -60,7 +60,9 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 				name: f.name,
 				progress: 0,
 				status: "uploading" as const,
+				fileKey: `${f.name}-${Date.now()}`, // 为每个文件创建唯一标识
 			}));
+
 			setUploadingFiles((prev) => [...prev, ...newFiles]);

 			const newUploadResults: string[] = [];
@ -69,6 +71,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 					if (!f) {
 						throw new Error(`文件 ${f.name} 无效`);
 					}
+					const fileKey = newFiles[index].fileKey!;
 					const fileId = await new Promise<string>(
 						(resolve, reject) => {
 							handleFileUpload(
@ -77,7 +80,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 									console.log("上传成功:", result);
 									const completedFile = {
 										name: f.name,
-										progress: 1,
+										progress: 100,
 										status: "done" as const,
 										fileId: result.fileId,
 									};
@ -86,14 +89,17 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 										completedFile,
 									]);
 									setUploadingFiles((prev) =>
-										prev.filter((_, i) => i !== index)
+										prev.filter(
+											(file) => file.fileKey !== fileKey
+										)
 									);
 									resolve(result.fileId);
 								},
 								(error) => {
 									console.error("上传错误:", error);
 									reject(error);
-								}
+								},
+								fileKey
 							);
 						}
 					);
@ -126,7 +132,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 				name="files"
 				multiple
 				showUploadList={false}
-				style={{ background: "white" }}
+				style={{ background: "white", borderStyle: "solid" }}
 				beforeUpload={handleChange}>
 				<p className="ant-upload-drag-icon">
 					<UploadOutlined />
@ -138,20 +144,25 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 				{/* 正在上传的文件 */}
 				{(uploadingFiles.length > 0 || completedFiles.length > 0) && (
 					<div className=" p-2 border rounded bg-white mt-1">
-						{uploadingFiles.length > 0 &&
-							uploadingFiles.map((file, index) => (
+						{uploadingFiles.map((file) => (
 							<div
-									key={index}
+								key={file.fileKey}
 								className="flex flex-col gap-1">
 								<div className="flex items-center gap-2">
-										<div className="text-sm">
-											{file.name}
-										</div>
+									<div className="text-sm">{file.name}</div>
 								</div>
+
 								<Progress
-										percent={Math.round(
-											file.progress * 100
-										)}
+									className="flex-1 w-full"
+									percent={
+										file.status === "done"
+											? 100
+											: Math.round(
+													uploadProgress?.[
+														file?.fileKey
+													] || 0
+												)
+									}
 									status={
 										file.status === "error"
 											? "exception"
--- a/apps/web/src/components/models/post/detail/PostCommentEditor.tsx
+++ b/apps/web/src/components/models/post/detail/PostCommentEditor.tsx
@ -95,6 +95,7 @@ export default function PostCommentEditor() {
 					</TabPane>
 				</Tabs>

+				{!isContentEmpty(content) && (
 					<div className="flex items-center justify-end">
 						<div>
 							<Button
@ -107,6 +108,7 @@ export default function PostCommentEditor() {
 							</Button>
 						</div>
 					</div>
+				)}
 			</form>
 		</div>
 	);
--- a/apps/web/src/components/models/post/detail/PostHeader/Content.tsx
+++ b/apps/web/src/components/models/post/detail/PostHeader/Content.tsx
@ -10,23 +10,23 @@ export default function Content() {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const contentWrapperRef = useRef(null);
 	const [shouldCollapse, setShouldCollapse] = useState(false);
-
+	const maxHeight = 125;
 	useEffect(() => {
 		if (contentWrapperRef.current) {
-			const shouldCollapse = contentWrapperRef.current.scrollHeight > 100;
+			const shouldCollapse = contentWrapperRef.current.scrollHeight > 150;
 			setShouldCollapse(shouldCollapse);
 		}
 	}, [post?.content]);

 	return (
-		<div className="relative bg-white rounded-b-xl p-4 pt-2 shadow-lg border border-[#97A9C4]/30">
+		<div className="relative bg-white rounded-b-xl p-4 pt-2  border border-[#97A9C4]/30">
 			<div className="text-secondary-700">
 				{/* 包装整个内容区域的容器 */}
 				<div
 					ref={contentWrapperRef}
 					className={`duration-300 ${
 						shouldCollapse && !isExpanded
-							? "max-h-[100px] overflow-hidden relative"
+							? `max-h-[150px] overflow-hidden relative`
 							: ""
 					}`}>
 					{/* 内容区域 */}
--- a/apps/web/src/components/models/post/detail/PostHeader/Header.tsx
+++ b/apps/web/src/components/models/post/detail/PostHeader/Header.tsx
@ -13,6 +13,7 @@ import {
 } from "@ant-design/icons";
 import dayjs from "dayjs";
 import { CornerBadge } from "../badge/CornerBadeg";
+import { LetterBadge } from "../../LetterBadge";
 const { Title, Paragraph, Text } = Typography;
 export default function Header() {
 	const { post, user } = useContext(PostDetailContext);
@ -88,22 +89,23 @@ export default function Header() {
 						<div className="flex flex-wrap gap-1">
 							{/* Tags Badges */}

-							<Space>
-								<PostBadge type="state" value={post?.state} />
-							</Space>
-							<Space>
-								<PostBadge
+							<LetterBadge type="state" value={post?.state} />
+							{(post?.terms || [])?.map((term, index) => {
+								return (
+									<LetterBadge
+										key={`${term.name}-${index}`}
 										type="category"
-									value={post?.term?.name}
+										value={term.name}
 									/>
-							</Space>
+								);
+							})}
 							{post.meta.tags.length > 0 &&
 								post.meta.tags.map((tag, index) => (
-									<Space key={index}>
-										<PostBadge
+									<LetterBadge
+										key={`${tag}-${index}`}
 										type="tag"
-											value={`${tag}`}></PostBadge>
-									</Space>
+										value={tag}
+									/>
 								))}
 						</div>
 					)}
--- a/apps/web/src/components/models/post/detail/PostHeader/StatsSection.tsx
+++ b/apps/web/src/components/models/post/detail/PostHeader/StatsSection.tsx
@ -12,8 +12,7 @@ import { useVisitor } from "@nice/client";
 import { VisitType } from "packages/common/dist";
 import PostLikeButton from "./PostLikeButton";
 export function StatsSection() {
-	const { post, user } = useContext(PostDetailContext);
-	const { like, unLike } = useVisitor();
+	const { post } = useContext(PostDetailContext);

 	return (
 		<motion.div
@ -22,14 +21,12 @@ export function StatsSection() {
 			transition={{ delay: 0.7 }}
 			className="mt-6 flex flex-wrap gap-4 justify-between items-center">
 			<div className=" flex gap-2">
-				<div className="flex items-center gap-1 text-gray-500">
-					<EyeOutlined className="text-lg" />
-					<span className="text-sm">{post?.views}</span>
-				</div>
-				<div className="flex items-center gap-1 text-gray-500">
-					<CommentOutlined className="text-lg" />
-					<span className="text-sm">{post?.commentsCount}</span>
-				</div>
+				<Button type="default" shape="round" icon={<EyeOutlined />}>
+					{post?.views}
+				</Button>
+				<Button type="default" shape="round" icon={<CommentOutlined />}>
+					{post?.commentsCount}
+				</Button>
 			</div>
 			<PostLikeButton post={post}></PostLikeButton>
 		</motion.div>
--- a/apps/web/src/hooks/useTusUpload.ts
+++ b/apps/web/src/hooks/useTusUpload.ts
@ -1,40 +1,48 @@
 import { useState } from "react";
 import * as tus from "tus-js-client";

+// useTusUpload.ts
+interface UploadProgress {
+	fileId: string;
+	progress: number;
+}
+
 interface UploadResult {
 	url: string;
 	fileId: string;
-	// resource: any;
 }

 export function useTusUpload() {
-	const [progress, setProgress] = useState(0);
+	const [uploadProgress, setUploadProgress] = useState<
+		Record<string, number>
+	>({});
 	const [isUploading, setIsUploading] = useState(false);
 	const [uploadError, setUploadError] = useState<string | null>(null);
+
 	const getFileId = (url: string) => {
 		const parts = url.split("/");
-		// Find the index of the 'upload' segment
 		const uploadIndex = parts.findIndex((part) => part === "upload");
 		if (uploadIndex === -1 || uploadIndex + 4 >= parts.length) {
 			throw new Error("Invalid upload URL format");
 		}
-		// Get the date parts and file ID (4 segments after 'upload')
 		return parts.slice(uploadIndex + 1, uploadIndex + 5).join("/");
 	};
+
 	const handleFileUpload = async (
 		file: File,
 		onSuccess: (result: UploadResult) => void,
-		onError: (error: Error) => void
+		onError: (error: Error) => void,
+		fileKey: string // 添加文件唯一标识
 	) => {
 		if (!file || !file.name || !file.type) {
-			const error = new Error('Invalid file provided');
+			const error = new Error("不可上传该类型文件");
 			setUploadError(error.message);
 			onError(error);
 			return;
 		}

 		setIsUploading(true);
-		setProgress(0);
+		setUploadProgress((prev) => ({ ...prev, [fileKey]: 0 }));
 		setUploadError(null);

 		try {
@ -46,23 +54,26 @@ export function useTusUpload() {
 					filetype: file.type,
 				},
 				onProgress: (bytesUploaded, bytesTotal) => {
-				const uploadProgress = (
-					(bytesUploaded / bytesTotal) *
-					100
-				).toFixed(2);
-				setProgress(Number(uploadProgress));
+					const progress = Number(
+						((bytesUploaded / bytesTotal) * 100).toFixed(2)
+					);
+					setUploadProgress((prev) => ({
+						...prev,
+						[fileKey]: progress,
+					}));
 				},
 				onSuccess: async () => {
 					try {
 						if (upload.url) {
 							const fileId = getFileId(upload.url);
-						// const resource = await pollResourceStatus(fileId);
 							setIsUploading(false);
-						setProgress(100);
+							setUploadProgress((prev) => ({
+								...prev,
+								[fileKey]: 100,
+							}));
 							onSuccess({
 								url: upload.url,
 								fileId,
-							// resource,
 							});
 						}
 					} catch (error) {
@ -83,7 +94,8 @@ export function useTusUpload() {
 			});
 			upload.start();
 		} catch (error) {
-			const err = error instanceof Error ? error : new Error("Upload failed");
+			const err =
+				error instanceof Error ? error : new Error("Upload failed");
 			setIsUploading(false);
 			setUploadError(err.message);
 			onError(err);
@ -91,7 +103,7 @@ export function useTusUpload() {
 	};

 	return {
-		progress,
+		uploadProgress,
 		isUploading,
 		uploadError,
 		handleFileUpload,