From d03532b91f120f0ff32c60ee09c3d122c09f284f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?= Date: Thu, 11 Jul 2024 23:49:43 +0800 Subject: [PATCH] Feat: Note & Gallery Details MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 日记列表增加点赞和精选效果，日记详情增加点赞等功能（尚未完善交互），相册列表增加精选和描述内容 --- app/components/common/icons.tsx | 19 +++++++++++ app/root.tsx | 2 +- app/routes/gallery.$/route.tsx | 17 ++++++++-- app/routes/gallery.$/styles.module.less | 9 ++++-- app/routes/note.$year.$id.tsx | 43 +++++++++++++++++++++++-- app/routes/note._index.tsx | 19 ++++++++--- app/types/api.media.d.ts | 2 +- 7 files changed, 97 insertions(+), 14 deletions(-) create mode 100644 app/components/common/icons.tsx diff --git a/app/components/common/icons.tsx b/app/components/common/icons.tsx new file mode 100644 index 0000000..2672858 --- /dev/null +++ b/app/components/common/icons.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +type IconProps = SVGProps; + +export const StarFill = (props: IconProps) => ( + +); + +export const ThumbUpFill = (props: IconProps) => ( + +); + +export const ShareFill = (props: IconProps) => ( + +); + +export const CupFill = (props: IconProps) => ( + +); diff --git a/app/root.tsx b/app/root.tsx index 3611388..edf7b99 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -56,7 +56,7 @@ export function ErrorBoundary() { } export const links: LinksFunction = () => [ - { rel: "icon", href: "icon.png" }, + { rel: "icon", href: "/icon.png" }, { rel: "stylesheet", href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap" }, ]; diff --git a/app/routes/gallery.$/route.tsx b/app/routes/gallery.$/route.tsx index 7723723..fb34fb8 100644 --- a/app/routes/gallery.$/route.tsx +++ b/app/routes/gallery.$/route.tsx @@ -2,6 +2,7 @@ import { NavLink, useLoaderData, useNavigate } from "@remix-run/react"; import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node"; import Pagination from "~/components/common/pagination"; import { clsn, siteTitle } from "~/utils"; +import { StarFill } from "~/components/common/icons"; import styles from "./styles.module.less"; @@ -65,11 +66,21 @@ export default function Gallery() {
{media.data.map((item) => ( -
+
{item.title} -
+ {item.content && ( +
+ {item.content} +
+ )} +
{item.take_time.substring(0, 10)} -

{item.title}

+

+ {item.title} + {item.starred && ( + + )} +

))} diff --git a/app/routes/gallery.$/styles.module.less b/app/routes/gallery.$/styles.module.less index 8223182..42e7a20 100644 --- a/app/routes/gallery.$/styles.module.less +++ b/app/routes/gallery.$/styles.module.less @@ -1,6 +1,9 @@ -.image { - width: 100%; +.image, .desc { aspect-ratio: 1 / 1; - background-color: #999; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%); } + +.image { + width: 100%; + background-color: #999; +} diff --git a/app/routes/note.$year.$id.tsx b/app/routes/note.$year.$id.tsx index 7fae027..126c11c 100644 --- a/app/routes/note.$year.$id.tsx +++ b/app/routes/note.$year.$id.tsx @@ -1,6 +1,8 @@ import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; +import { useState } from "react"; import Article from "~/components/common/article"; +import { CupFill, ShareFill, ThumbUpFill } from "~/components/common/icons"; import { siteTitle } from "~/utils"; export const meta: MetaFunction = ({ data }) => { @@ -27,15 +29,52 @@ export async function loader({ params }: LoaderFunctionArgs) { export default function Detail() { const note = useLoaderData(); + const [likes, setLikes] = useState(note.data.likes); + + const onLike = () => { + setLikes((prevLike) => prevLike + 1); + } + + const onShare = () => { + const shareData = { + title: note.data.title, + text: note.data.except, + url: `${location.protocol}//${location.host}${location.pathname}`, + }; + + if ("share" in navigator) { + navigator.share(shareData); + } + else { + alert("当前操作系统尚未实现此 API"); + } + } + return (
-

{note.data.title}

+

+ {note.data.title} +

{note.data.date}

-
+
+
+ + + +
); }; diff --git a/app/routes/note._index.tsx b/app/routes/note._index.tsx index 9b4ff46..bdcb7b7 100644 --- a/app/routes/note._index.tsx +++ b/app/routes/note._index.tsx @@ -1,9 +1,10 @@ -import { ChangeEvent, useEffect } from "react"; -import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react"; +import { ChangeEvent, useEffect, useState } from "react"; +import { Link, unstable_useViewTransitionState, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react"; import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node"; import Pagination from "~/components/common/pagination"; import { clsn, siteTitle } from "~/utils"; import { getFirstImage, years } from "~/utils/note"; +import { StarFill, ThumbUpFill } from "~/components/common/icons"; export const meta: MetaFunction = () => { return [ @@ -61,11 +62,21 @@ export default function Note() { key={item.id} className="block group relative overflow-hidden p-5 bg-white rounded-xl mb-8 last:mb-0 border-4 border-transparent hover:border-pink-400 transition-colors border-b-cyan-200" to={`/note/${year}/${item.id}`} + unstable_viewTransition > -

{item.title}

-

{item.except}

+ {item.starred && ( + + )} +

+ {item.title} +

+

{item.except}

{item.date}

+ + + {item.likes} +
{cover && (