From bb2aa599ba3342420ce39f143f2cffc06c9de6a7 Mon Sep 17 00:00:00 2001
From: ditiqi <ditiqi@163.com>
Date: Fri, 24 Jan 2025 11:39:51 +0800
Subject: [PATCH] add

---
 .../context/LetterEditorContext.tsx           |  81 +++--
 .../LetterEditor/form/LetterBasicForm.tsx     | 280 +++++++++---------
 .../models/post/detail/PostCommentCard.tsx    |   9 +-
 .../models/post/detail/PostCommentEditor.tsx  |   2 +-
 .../post/detail/context/PostDetailContext.tsx |   5 +-
 packages/common/prisma/schema.prisma          |   2 +-
 packages/common/src/select.ts                 |   1 +
 7 files changed, 178 insertions(+), 202 deletions(-)

diff --git a/apps/web/src/components/models/post/LetterEditor/context/LetterEditorContext.tsx b/apps/web/src/components/models/post/LetterEditor/context/LetterEditorContext.tsx
index 5c6dcd4..b02520a 100644
--- a/apps/web/src/components/models/post/LetterEditor/context/LetterEditorContext.tsx
+++ b/apps/web/src/components/models/post/LetterEditor/context/LetterEditorContext.tsx
@@ -1,69 +1,48 @@
-import { createContext, useContext, ReactNode, useEffect } from "react";
-import { useForm, FormProvider, SubmitHandler } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
+import { createContext, useContext, ReactNode } from "react";
+import { Form, FormInstance } from "antd";
 import { api, usePost } from "@nice/client";
-// import { PostDto, PostLevel, PostStatus } from "@nice/common";
-// import { api, usePost } from "@nice/client";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
-import { Post, PostType } from "@nice/common";
-// 定义帖子表单验证 Schema
+import { PostType } from "@nice/common";
 
-const letterSchema = z.object({
-	title: z.string().min(1, "标题不能为空"),
-	content: z.string().min(1, "内容不能为空"),
-	resources: z.array(z.string()).nullish(),
-	isPublic: z.boolean().nullish(),
-	signature: z.string().nullish(),
-	meta: z
-		.object({
-			tags: z.array(z.string()).default([]),
-			signature: z.string().nullish(),
-		})
-		.default({
-			tags: [],
-			signature: null,
-		}),
-});
-// 定义课程表单验证 Schema
-
-export type LetterFormData = z.infer<typeof letterSchema>;
+export interface LetterFormData {
+	title: string;
+	content: string;
+	resources?: string[];
+	isPublic?: boolean;
+	signature?: string;
+	meta: {
+		tags: string[];
+		signature?: string;
+	};
+}
 interface LetterEditorContextType {
-	onSubmit: SubmitHandler<LetterFormData>;
+	onSubmit: (values: LetterFormData) => Promise<void>;
 	receiverId?: string;
 	termId?: string;
-	part?: string;
-	// course?: PostDto;
+	form: FormInstance<LetterFormData>;
 }
+
 interface LetterFormProviderProps {
 	children: ReactNode;
 	receiverId?: string;
 	termId?: string;
-	part?: string;
 }
+
 const LetterEditorContext = createContext<LetterEditorContextType | null>(null);
+
 export function LetterFormProvider({
 	children,
 	receiverId,
 	termId,
-	// editId,
 }: LetterFormProviderProps) {
 	const { create } = usePost();
 	const navigate = useNavigate();
-	const methods = useForm<LetterFormData>({
-		resolver: zodResolver(letterSchema),
-		defaultValues: {
-			resources: [],
-			meta: {
-				tags: [],
-			},
-		},
-	});
-	const onSubmit: SubmitHandler<LetterFormData> = async (
-		data: LetterFormData
-	) => {
+	const [form] = Form.useForm<LetterFormData>();
+
+	const onSubmit = async (data: LetterFormData) => {
 		try {
+			console.log("data", data);
 			const result = await create.mutateAsync({
 				data: {
 					type: PostType.POST,
@@ -73,6 +52,7 @@ export function LetterFormProvider({
 							id,
 						})),
 					},
+					isPublic: data?.isPublic,
 					...data,
 					resources: data.resources?.length
 						? {
@@ -83,23 +63,28 @@ export function LetterFormProvider({
 						: undefined,
 				},
 			});
-			navigate(`/course/${result.id}/detail`, { replace: true });
+			navigate(`/${result.id}/detail`, { replace: true });
 			toast.success("发送成功！");
-
-			methods.reset(data);
+			form.resetFields();
 		} catch (error) {
 			console.error("Error submitting form:", error);
 			toast.error("操作失败，请重试！");
 		}
 	};
+
 	return (
 		<LetterEditorContext.Provider
 			value={{
 				onSubmit,
 				receiverId,
 				termId,
+				form,
 			}}>
-			<FormProvider {...methods}>{children}</FormProvider>
+			<Form<LetterFormData>
+				form={form}
+				initialValues={{ meta: { tags: [] } }}>
+				{children}
+			</Form>
 		</LetterEditorContext.Provider>
 	);
 }
diff --git a/apps/web/src/components/models/post/LetterEditor/form/LetterBasicForm.tsx b/apps/web/src/components/models/post/LetterEditor/form/LetterBasicForm.tsx
index 513d686..d6fc1c0 100644
--- a/apps/web/src/components/models/post/LetterEditor/form/LetterBasicForm.tsx
+++ b/apps/web/src/components/models/post/LetterEditor/form/LetterBasicForm.tsx
@@ -1,29 +1,18 @@
-import { useFormContext } from "react-hook-form";
-import { motion } from "framer-motion";
-import {
-	LetterFormData,
-	useLetterEditor,
-} from "../context/LetterEditorContext";
-import { FormQuillInput } from "@web/src/components/common/form/FormQuillInput";
+import { Form, Input, Button, Checkbox, Select } from "antd";
+import { useState } from "react";
+import { useLetterEditor } from "../context/LetterEditorContext";
 import { api } from "@nice/client";
 import {
-	UserIcon,
-	FolderIcon,
-	HashtagIcon,
-	DocumentTextIcon,
-} from "@heroicons/react/24/outline";
+	UserOutlined,
+	FolderOutlined,
+	TagOutlined,
+	FileTextOutlined,
+} from "@ant-design/icons";
 import FileUploader from "@web/src/components/common/uploader/FileUploader";
-import { FormTags } from "@web/src/components/common/form/FormTags";
-import { FormSignature } from "@web/src/components/common/form/FormSignature";
-import { FormCheckbox } from "@web/src/components/common/form/FormCheckbox";
+import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
 
 export function LetterBasicForm() {
-	const {
-		handleSubmit,
-		getValues,
-		formState: { errors },
-	} = useFormContext<LetterFormData>();
-	const { onSubmit, receiverId, termId } = useLetterEditor();
+	const { onSubmit, receiverId, termId, form } = useLetterEditor();
 	const { data: receiver } = api.staff.findFirst.useQuery(
 		{
 			where: {
@@ -41,134 +30,137 @@ export function LetterBasicForm() {
 		{ enabled: !!termId }
 	);
 
-	const formControls = {
-		hidden: { opacity: 0, y: 20 },
-		visible: (i: number) => ({
-			opacity: 1,
-			y: 0,
-			transition: {
-				delay: i * 0.2,
-				duration: 0.5,
-			},
-		}),
+	const handleFinish = async (values: any) => {
+		await onSubmit(values);
 	};
 
 	return (
-		<motion.form
-			className="w-full space-y-6 p-8 "
-			initial={{ opacity: 0, scale: 0.95 }}
-			animate={{ opacity: 1, scale: 1 }}
-			transition={{ duration: 0.5 }}>
-			{/* 收件人和板块信息行 */}
-			<div className="flex justify-start items-center gap-8">
-				<motion.div
-					custom={0}
-					initial="hidden"
-					animate="visible"
-					variants={formControls}
-					className="flex items-center text-lg font-semibold text-[#00308F]">
-					<UserIcon className="w-5 h-5 mr-2 text-[#00308F]" />
-					<div>收件人：{receiver?.showname}</div>
-				</motion.div>
+		<div className="w-full space-y-6 p-8">
+			<Form
+				form={form}
+				onFinish={handleFinish}
+				initialValues={{ meta: { tags: [] }, isPublic: true }}>
+				{/* 收件人和板块信息行 */}
+				<div className="flex justify-start items-center gap-8 ">
+					<div className="flex items-center  font-semibold text-[#00308F]">
+						<UserOutlined className="w-5 h-5 mr-2 text-[#00308F]" />
+						<div>收件人：{receiver?.showname}</div>
+					</div>
 
-				<motion.div
-					custom={1}
-					initial="hidden"
-					animate="visible"
-					variants={formControls}
-					className="flex items-center text-lg font-semibold text-[#00308F]">
-					<FolderIcon className="w-5 h-5 mr-2 text-[#00308F]" />
-					<div>板块：{term?.name}</div>
-				</motion.div>
-			</div>
-			{/* 主题输入框 */}
-			<motion.div
-				custom={2}
-				initial="hidden"
-				animate="visible"
-				variants={formControls}>
-				<label className="block text-sm font-medium text-gray-700 mb-2">
-					<HashtagIcon className="w-5 h-5 inline mr-2 text-[#00308F]" />
-					主题
-				</label>
-				{/* <FormInput
-					maxLength={20}
-					name="title"
-					placeholder="请输入主题"
-				/> */}
-			</motion.div>
-			{/* 标签输入 */}
-			<motion.div
-				custom={4}
-				initial="hidden"
-				animate="visible"
-				variants={formControls}
-				className="space-y-2">
-				<label className="block text-sm font-medium text-gray-700 mb-2">
-					<HashtagIcon className="w-5 h-5 inline mr-2 text-[#00308F]" />
-					标签
-				</label>
-				<FormTags
-					name="meta.tags"
-					placeholder="输入标签后按回车添加"
-					maxTags={20}
-				/>
-			</motion.div>
-			{/* 内容输入框 */}
-			<motion.div
-				custom={3}
-				initial="hidden"
-				animate="visible"
-				variants={formControls}>
-				<label className="block text-sm font-medium text-gray-700 mb-2">
-					<DocumentTextIcon className="w-5 h-5 inline mr-2 text-[#00308F]" />
-					内容
-				</label>
-				<FormQuillInput
-					maxLength={400}
-					name="content"
-					placeholder="请输入内容"
-				/>
-			</motion.div>
-			<FileUploader></FileUploader>
-			<motion.div className="flex items-center justify-end gap-8 border-t border-gray-100 pt-2">
-				<motion.div
-					custom={3}
-					initial="hidden"
-					animate="visible"
-					variants={formControls}
-					className="flex justify-end">
-					<FormCheckbox
+					<div className="flex items-center  font-semibold text-[#00308F]">
+						<FolderOutlined className="w-5 h-5 mr-2 text-[#00308F]" />
+						<div>板块：{term?.name}</div>
+					</div>
+				</div>
+
+				{/* 主题输入框 */}
+				<div className="space-y-2 mt-4">
+					<Form.Item
+						required={false} //不显示星号
+						label={
+							<span className="block mb-1">
+								<TagOutlined className="w-5 h-5 inline mr-2 text-[#00308F]" />
+								标题
+								<span className="text-gray-400">（必选）</span>
+							</span>
+						}
+						name="title"
+						rules={[{ required: true, message: "请输入标题" }]}
+						labelCol={{ span: 24 }}
+						wrapperCol={{ span: 24 }}>
+						<Input maxLength={20} placeholder="请输入标题" />
+					</Form.Item>
+				</div>
+
+				{/* 标签输入 */}
+				<div className="space-y-2">
+					<Form.Item
+						label={
+							<span className="block mb-1">
+								<TagOutlined className="w-5 h-5 inline mr-2 text-[#00308F]" />
+								标签
+							</span>
+						}
+						name={["meta", "tags"]}
+						labelCol={{ span: 24 }}
+						wrapperCol={{ span: 24 }}>
+						<Select
+							mode="tags"
+							placeholder="输入标签后按回车添加"
+							value={form.getFieldValue(["meta", "tags"]) || []}
+							onChange={(value) => {
+								form.setFieldValue(["meta", "tags"], value);
+							}}
+							tokenSeparators={[",", " "]}
+							className="w-full"
+							dropdownStyle={{ display: "none" }}
+							style={{
+								backgroundColor: "#f0f4ff",
+								borderColor: "#00308F",
+								borderRadius: "6px",
+							}}
+						/>
+					</Form.Item>
+				</div>
+
+				{/* 内容输入框 */}
+				<div className="space-y-2">
+					<Form.Item
+						label={
+							<span className="block mb-1">
+								<FileTextOutlined className="w-5 h-5 inline mr-2 text-[#00308F]" />
+								内容
+								<span className="text-gray-400">（必选）</span>
+							</span>
+						}
+						name="content"
+						rules={[{ required: true, message: "请输入内容" }]}
+						required={false} //不显示星号
+						labelCol={{ span: 24 }}
+						wrapperCol={{ span: 24 }}>
+						<div className="relative rounded-lg border border-slate-200 bg-white shadow-sm">
+							<QuillEditor
+								maxLength={400}
+								placeholder="请输入内容"
+								minRows={6}
+								maxRows={12}
+								onChange={(content) =>
+									form.setFieldValue("content", content)
+								}
+							/>
+						</div>
+					</Form.Item>
+				</div>
+
+				{/* <FileUploader /> */}
+
+				<div className="flex flex-col sm:flex-row items-start sm:items-center justify-end gap-4 border-t border-gray-100 pt-4">
+					<Form.Item
 						name="isPublic"
-						label="是否公开"
-						defaultChecked
-					/>
-				</motion.div>
-{/* 
-				<motion.div
-					custom={5}
-					initial="hidden"
-					animate="visible"
-					variants={formControls}
-					className="flex justify-end">
-					<FormSignature
-						name="meta.signature"
-						width="w-32"
-						placeholder="添加个性签名"
-						maxLength={20}
-						viewMode={false}
-					/>
-				</motion.div> */}
+						valuePropName="checked"
+						className="mb-0"
+						initialValue={true}>
+						<Checkbox>是否公开</Checkbox>
+					</Form.Item>
 
-				<motion.button
-					onClick={handleSubmit(onSubmit)}
-					className="px-4 py-2 bg-[#00308F] hover:bg-[#041E42] text-white font-bold rounded-lg 
-              transform transition-all duration-200 hover:scale-105 focus:ring-2 focus:ring-[#00308F]/50"
-					whileHover={{ scale: 1.02 }}
-					whileTap={{ scale: 0.98 }}>
-					提交
-				</motion.button>
-			</motion.div>
-		</motion.form>
+					<Button
+						type="primary"
+						onClick={() => form.submit()}
+						className="bg-[#00308F] hover:bg-[#041E42] w-full sm:w-auto"
+						style={{
+							transform: "scale(1)",
+							transition: "all 0.2s",
+						}}
+						onMouseEnter={(e) => {
+							e.currentTarget.style.transform = "scale(1.02)";
+						}}
+						onMouseLeave={(e) => {
+							e.currentTarget.style.transform = "scale(1)";
+						}}>
+						提交
+					</Button>
+				</div>
+			</Form>
+		</div>
 	);
 }
diff --git a/apps/web/src/components/models/post/detail/PostCommentCard.tsx b/apps/web/src/components/models/post/detail/PostCommentCard.tsx
index c3d8c27..3aabaa4 100644
--- a/apps/web/src/components/models/post/detail/PostCommentCard.tsx
+++ b/apps/web/src/components/models/post/detail/PostCommentCard.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import dayjs from "dayjs";
 import { ChatBubbleLeftIcon, HeartIcon } from "@heroicons/react/24/outline";
 import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
-import { Avatar } from "@web/src/components/presentation/user/Avatar";
+import { Avatar } from "antd";
 import { useVisitor } from "@nice/client";
 import { useContext } from "react";
 import { PostDetailContext } from "./context/PostDetailContext";
@@ -29,7 +29,7 @@ export default function PostCommentCard({
 					},
 				});
 			} catch (error) {
-				console.error('Failed to like post:', error);
+				console.error("Failed to like post:", error);
 			}
 		}
 	}
@@ -41,9 +41,10 @@ export default function PostCommentCard({
 				<div className="flex-shrink-0">
 					<Avatar
 						src={post.author?.avatar}
-						name={post.author?.showname || "匿名用户"}
 						size={40}
-					/>
+					>
+						{!post.author?.avatar && (post.author?.showname || "匿名用户")}
+					</Avatar>
 				</div>
 				<div className="flex-1 min-w-0">
 					<div
diff --git a/apps/web/src/components/models/post/detail/PostCommentEditor.tsx b/apps/web/src/components/models/post/detail/PostCommentEditor.tsx
index 7f957e2..0361702 100644
--- a/apps/web/src/components/models/post/detail/PostCommentEditor.tsx
+++ b/apps/web/src/components/models/post/detail/PostCommentEditor.tsx
@@ -54,7 +54,7 @@ export default function PostCommentEditor() {
 							placeholder="写下你的回复..."
 							className="bg-transparent"
 							theme="snow"
-							minRows={3}
+							minRows={6}
 							maxRows={12}
 							modules={{
 								toolbar: [
diff --git a/apps/web/src/components/models/post/detail/context/PostDetailContext.tsx b/apps/web/src/components/models/post/detail/context/PostDetailContext.tsx
index 8de8f9c..87c944b 100644
--- a/apps/web/src/components/models/post/detail/context/PostDetailContext.tsx
+++ b/apps/web/src/components/models/post/detail/context/PostDetailContext.tsx
@@ -30,10 +30,7 @@ export function PostDetailProvider({
 		},
 		{ enabled: Boolean(editId) }
 	);
-	// const {}:{} =(
-	// 	api.post.fin as any
-	// )
-
+	
 	return (
 		<PostDetailContext.Provider
 			value={{
diff --git a/packages/common/prisma/schema.prisma b/packages/common/prisma/schema.prisma
index 69454ab..c5c68e0 100644
--- a/packages/common/prisma/schema.prisma
+++ b/packages/common/prisma/schema.prisma
@@ -209,7 +209,7 @@ model Post {
     parent   Post?   @relation("PostChildren", fields: [parentId], references: [id]) // 父级帖子，关联 Post 模型
     children Post[]  @relation("PostChildren") // 子级帖子列表，关联 Post 模型
     resources Resource[] // 附件列表
-    isPublic  Boolean?   @default(false) @map("is_public")
+    isPublic  Boolean?   @default(true) @map("is_public")
     meta      Json?  // 签名 和 IP 和 tags
 
     // 复合索引
diff --git a/packages/common/src/select.ts b/packages/common/src/select.ts
index a82eb9f..6a0692e 100644
--- a/packages/common/src/select.ts
+++ b/packages/common/src/select.ts
@@ -7,6 +7,7 @@ export const postDetailSelect: Prisma.PostSelect = {
 	content: true,
 	views: true,
 	likes: true,
+	isPublic: true,
 	resources: true,
 	createdAt: true,
 	updatedAt: true,