liaohui
/
doctor-mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-01-24 11:39:51 +08:00
parent 20e9d43c48
commit bb2aa599ba
7 changed files with 178 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/web/src/components/models/post/LetterEditor/context/LetterEditorContext.tsx
View File

@ -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>
);
}

280
apps/web/src/components/models/post/LetterEditor/form/LetterBasicForm.tsx
View File

@ -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>
);
}

9
apps/web/src/components/models/post/detail/PostCommentCard.tsx
View File

@ -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

2
apps/web/src/components/models/post/detail/PostCommentEditor.tsx
View File

@ -54,7 +54,7 @@ export default function PostCommentEditor() {
placeholder="写下你的回复..."
className="bg-transparent"
theme="snow"
minRows={3}
minRows={6}
maxRows={12}
modules={{
toolbar: [

5
apps/web/src/components/models/post/detail/context/PostDetailContext.tsx
View File

@ -30,10 +30,7 @@ export function PostDetailProvider({
},
{ enabled: Boolean(editId) }
);
// const {}:{} =(
// api.post.fin as any
// )
return (
<PostDetailContext.Provider
value={{

2
packages/common/prisma/schema.prisma
View File

@ -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
// 复合索引

1
packages/common/src/select.ts
View File

@ -7,6 +7,7 @@ export const postDetailSelect: Prisma.PostSelect = {
content: true,
views: true,
likes: true,
isPublic: true,
resources: true,
createdAt: true,
updatedAt: true,