From 8a8aa012d7d60a7d0fdf269899f2d0bc9b251dea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Sun, 25 Aug 2024 21:41:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9B=AE=E5=BD=95=E7=BA=A7?= =?UTF-8?q?=E5=88=AB=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/comment.ts | 11 +++ src/app/article/[id]/page.tsx | 2 +- src/app/article/components/Comment/index.tsx | 28 ++++--- .../ContentMd/component/ContentNav/index.scss | 75 +++++++++++++++++++ .../component}/ContentNav/index.tsx | 32 +++++--- src/components/ContentMd/index.scss | 5 +- src/components/ContentMd/index.tsx | 2 +- src/components/ContentNav/index.scss | 45 ----------- src/utils/request.ts | 4 +- 9 files changed, 131 insertions(+), 73 deletions(-) create mode 100644 src/components/ContentMd/component/ContentNav/index.scss rename src/components/{ => ContentMd/component}/ContentNav/index.tsx (68%) delete mode 100644 src/components/ContentNav/index.scss diff --git a/src/api/comment.ts b/src/api/comment.ts index 80ff042..3daac03 100644 --- a/src/api/comment.ts +++ b/src/api/comment.ts @@ -1,6 +1,17 @@ import Request from "@/utils/request"; import { Comment } from "@/types/app/comment"; +// 新增评论 +export const addCommentDataAPI = async (id: number, data: Comment) => { + return await Request(`/comment/${id}`, { + method: "POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); +} + // 获取评论列表 export const getCommentListAPI = async () => { return await Request>("/comment"); diff --git a/src/app/article/[id]/page.tsx b/src/app/article/[id]/page.tsx index b7f20a3..f782cc6 100644 --- a/src/app/article/[id]/page.tsx +++ b/src/app/article/[id]/page.tsx @@ -31,7 +31,7 @@ export default async ({ params }: Props) => { - + diff --git a/src/app/article/components/Comment/index.tsx b/src/app/article/components/Comment/index.tsx index 6e941c7..fe90981 100644 --- a/src/app/article/components/Comment/index.tsx +++ b/src/app/article/components/Comment/index.tsx @@ -1,11 +1,16 @@ "use client" import React, { useState, useEffect } from 'react'; -import { useForm, Controller } from 'react-hook-form'; -// import { addCommentDataAPI } from '@/api/Comment'; +import { useForm } from 'react-hook-form'; +import { Comment } from '@/types/app/comment' +import { addCommentDataAPI } from '@/api/comment'; import "./index.scss" -const CommentForm = () => { +interface Props { + id: number +} + +const CommentForm = ({ id }: Props) => { const [isEmote, setIsEmote] = useState(false); const [placeholder, setPlaceholder] = useState("来发一针见血的评论吧~"); const [cid, setCid] = useState(0); @@ -17,15 +22,10 @@ const CommentForm = () => { name: "", email: "", url: "", - avatar: '', - rid: 0, + avatar: '' } }); - useEffect(() => { - console.log(errors); - }, [errors]) - useEffect(() => { const info = JSON.parse(localStorage.getItem("data") || '{}'); setValue('name', info.name || ''); @@ -39,9 +39,13 @@ const CommentForm = () => { // setPlaceholder(`回复评论给：${data.name}`); // }; - const onSubmit = async () => { - alert("🎉发布评论成功, 请等待审核!"); - setPlaceholder("来发一针见血的评论吧~"); + const onSubmit = async (data: Comment) => { + const { code, message } = await addCommentDataAPI(id, { ...data, createTime: Date.now() + "" }) + console.log(code); + if (code !== 200) return alert("发布评论失败：" + message); + + alert("🎉 发布评论成功, 请等待审核!"); + // setPlaceholder("来发一针见血的评论吧~"); }; // const saveLocally = (formData) => { diff --git a/src/components/ContentMd/component/ContentNav/index.scss b/src/components/ContentMd/component/ContentNav/index.scss new file mode 100644 index 0000000..54e9d4f --- /dev/null +++ b/src/components/ContentMd/component/ContentNav/index.scss @@ -0,0 +1,75 @@ +@import "@/styles/var.scss"; + +/* 添加平滑滚动效果 */ +html { + scroll-behavior: smooth; +} + +:target::before { + content: ""; + display: block; + height: 80px; + /* 调整这个高度来设置偏移量 */ + margin-top: -80px; +} + +.ContentNavComponent { + .navs { + color: #4d4d4d; + font-size: 13px; + + .nav_item { + padding-left: 10px; + margin-bottom: 5px; + transition: all 0.7s; + + &::before { + content: ""; + left: -10px; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 15px; + border-radius: 20px; + background-color: #539dfd; + transition: all 0.7s; + } + } + + .active { + color: #539dfd; + padding-left: 30px; + border-radius: 10px; + background-color: #f7faff; + + &::before { + left: 15px; + } + } + + .h2 { + padding-left: 25px; + + &.active { + padding-left: 35px; + + &::before { + left: 20px; + } + } + } + + .h3 { + padding-left: 45px; + + &.active { + padding-left: 55px; + + &::before { + left: 40px; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/ContentNav/index.tsx b/src/components/ContentMd/component/ContentNav/index.tsx similarity index 68% rename from src/components/ContentNav/index.tsx rename to src/components/ContentMd/component/ContentNav/index.tsx index 6e45352..3ea5947 100644 --- a/src/components/ContentNav/index.tsx +++ b/src/components/ContentMd/component/ContentNav/index.tsx @@ -6,6 +6,7 @@ interface NavItem { href: string; start: number; end?: number; + className: string; } const OFFSET = 200; // 定义距离视口顶部多少像素时高亮导航项 @@ -16,25 +17,38 @@ const App: React.FC = () => { useEffect(() => { // 获取当前容器中所有的标题 - // const list = document.querySelectorAll(".content h1, .content h2, .content h3"); - const list = document.querySelectorAll(".content h2"); - list.forEach((n) => n.setAttribute("id", n.textContent!)); + const list = document.querySelectorAll(".content h1, .content h2, .content h3"); + + list.forEach((nav) => { + nav.setAttribute("id", nav.textContent!) + + switch (nav.tagName) { + case "H1": + nav.setAttribute("class", "h1") + break; + case "H2": + nav.setAttribute("class", "h2") + break; + case "H3": + nav.setAttribute("class", "h3") + break; + } + }); // 给每个标题设置一个视口顶部的距离 const titles = Array.from(list).map(t => { const top = t.getBoundingClientRect().top + window.scrollY; - return { href: t.textContent!, top }; + return { href: t.textContent!, top, className: t.className }; }); // 设置起始距离和结束距离 const titlesList: NavItem[] = titles.map((title, index) => ({ href: title.href, start: title.top, - end: index < titles.length - 1 ? titles[index + 1].top : Infinity + end: index < titles.length - 1 ? titles[index + 1].top : Infinity, + className: title.className })); - console.log(titlesList); - setNavs(titlesList); // 页面滚动到指定位置高亮导航项 @@ -56,12 +70,12 @@ const App: React.FC = () => { 目录 -
+
{navs.map((item, index) => ( = item.start && active < item.end! ? 'active' : ''}`} + className={`nav_item overflow-hidden relative block p-1 hover:text-primary transition duration-700 ${active >= item.start && active < item.end! ? 'active' : ''} ${item.className}`} > {item.href} diff --git a/src/components/ContentMd/index.scss b/src/components/ContentMd/index.scss index 3bb9050..60c8415 100644 --- a/src/components/ContentMd/index.scss +++ b/src/components/ContentMd/index.scss @@ -11,10 +11,9 @@ .nav { overflow: scroll; - width: 25%; + width: 20%; max-height: 500px; - padding-left: 20px; - // margin-left: 5%; + padding-left: 10px; border-left: 1px solid #eee; position: sticky; top: 90px; diff --git a/src/components/ContentMd/index.tsx b/src/components/ContentMd/index.tsx index 90391ad..622d12b 100644 --- a/src/components/ContentMd/index.tsx +++ b/src/components/ContentMd/index.tsx @@ -4,7 +4,7 @@ import React, { useEffect } from "react"; import ReactMarkdown from "react-markdown"; import "github-markdown-css" import "./index.scss"; -import ContentNav from "../ContentNav"; +import ContentNav from "./component/ContentNav"; export default ({ data }: { data: string }) => { useEffect(() => { diff --git a/src/components/ContentNav/index.scss b/src/components/ContentNav/index.scss deleted file mode 100644 index 458216f..0000000 --- a/src/components/ContentNav/index.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "@/styles/var.scss"; - -/* 添加平滑滚动效果 */ -html { - scroll-behavior: smooth; -} - -:target::before { - content: ""; - display: block; - height: 80px; - /* 调整这个高度来设置偏移量 */ - margin-top: -80px; -} - -.ContentNavComponent { - .nav_item { - padding-left: 10px; - transition: padding-left 0.7s; - - &::before { - content: ""; - left: -10px; - position: absolute; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 20px; - border-radius: 20px; - background-color: #539dfd; - transition: all 0.7s; - } - } - - .active { - color: #539dfd; - padding-left: 30px; - border-radius: 10px; - background-color: #f7faff; - - &::before { - left: 15px; - } - } -} \ No newline at end of file diff --git a/src/utils/request.ts b/src/utils/request.ts index 8ab0c17..3f513e9 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,6 +1,6 @@ const url = "http://localhost:9999/api" -export default async (api: string) => { - const res = await fetch(`${url}${api}`) +export default async (api: string, data?: any) => { + const res = await fetch(`${url}${api}`, data) return res.json() as Promise>; } \ No newline at end of file