Merge pull request #38 from meetqy/37-诗词详情显示优化直接通过内容判断使用哪一种展示方式

37 诗词详情显示优化直接通过内容判断使用哪一种展示方式
meetqy · Mar 10, 2024 · 7edfb30 · 7edfb30
2 parents 38ddca6 + 8628bcc
commit 7edfb30
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 69 deletions.
diff --git a/src/app/[lang]/poem/[id]/components/body.tsx b/src/app/[lang]/poem/[id]/components/body.tsx
@@ -1,7 +1,6 @@
 import { type Author, type Poem } from "@prisma/client";
 import { Verse } from "~/components/verse";
 import { cn } from "~/utils";
-import CopyButton from "./copy";
 import Link from "next/link";
 import { type Locale, getLangUrl } from "~/dictionaries";
 
@@ -68,11 +67,6 @@ export const Body = (props: {
           />
         ))}
       </div>
-
-      <CopyButton
-        data={poem}
-        className="absolute right-1 top-1 transition-all group-hover:opacity-100 md:opacity-0"
-      />
     </article>
   );
 };
diff --git a/src/app/[lang]/poem/[id]/components/copy.tsx b/src/app/[lang]/poem/[id]/components/copy.tsx
@@ -1,67 +1,67 @@
 "use client";
 
 import { type Poem, type Author } from "@prisma/client";
-import { Check, ClipboardCopy } from "lucide-react";
+import { ClipboardIcon } from "lucide-react";
+import { useState } from "react";
 import { Button } from "~/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
+import { type Locale } from "~/dictionaries";
 import { MyHost, cn } from "~/utils";
 
 interface Props {
   data: Poem & { author: Author };
   className?: string;
+  lang: Locale;
 }
 
 const CopyButton = (props: Props) => {
   const { data: poem } = props;
 
+  const [copy, setCopy] = useState(false);
+
   return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"secondary"}
-          size={"icon"}
-          aria-label="一键复制诗词和译文"
-          className={cn(props.className)}
-          onClick={() => {
-            const originText = `${poem.content} \n—— 《${poem.title}》${poem.author.dynasty}·${poem.author.name}\n【译文】\n${poem.translation}`;
+    <Button
+      variant={"outline"}
+      className={cn(props.className)}
+      onClick={() => {
+        if (copy) {
+          return;
+        }
+        setCopy(true);
+        const originText = `${poem.content} \n—— 《${poem.title}》${poem.author.dynasty}·${poem.author.name}\n\n【译文】\n${poem.translation} \n\n #aspoem #诗词学习网站`;
+
+        const text = `<p>${poem.content.replaceAll(
+          "\n",
+          "<br/>",
+        )}</p> <p>—— 《<a href="${MyHost}/poem/${poem.id}"><b>${
+          poem.title
+        }</b></a>》${poem.author.dynasty} · <a href="${MyHost}/author/${
+          poem.author.id
+        }"><b>${
+          poem.author.name
+        }</b></a></p><p><b>译文</b></p><p>${poem.translation?.replaceAll(
+          "\n",
+          "<br/>",
+        )}</p><p> #aspoem #诗词学习网站</p>`;
 
-            const text = `<p>${poem.content.replaceAll(
-              "\n",
-              "<br/>",
-            )}</p> <p>—— 《<a href="${MyHost}/poem/${poem.id}"><b>${
-              poem.title
-            }</b></a>》${poem.author.dynasty} · <a href="${MyHost}/author/${
-              poem.author.id
-            }"><b>${poem.author.name}</b></a></p><p><b>译文</b></p><p>${
-              poem.translation
-            }</p>`;
+        const blobHtml = new Blob([text], { type: "text/html" });
+        const blobText = new Blob([originText], { type: "text/plain" });
+        const data = [
+          new ClipboardItem({
+            ["text/html"]: blobHtml,
+            ["text/plain"]: blobText,
+          }),
+        ];
 
-            const blobHtml = new Blob([text], { type: "text/html" });
-            const blobText = new Blob([originText], { type: "text/plain" });
-            const data = [
-              new ClipboardItem({
-                ["text/html"]: blobHtml,
-                ["text/plain"]: blobText,
-              }),
-            ];
+        void navigator.clipboard.write(data);
 
-            void navigator.clipboard.write(data);
-          }}
-        >
-          <ClipboardCopy className="h-4 w-4" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="flex items-center space-x-2">
-          <Check className="h-4 w-4 text-primary" />
-          <span>已复制</span>
-        </div>
-      </PopoverContent>
-    </Popover>
+        setTimeout(() => {
+          setCopy(false);
+        }, 2000);
+      }}
+    >
+      <ClipboardIcon className="mr-2 h-5 w-5 text-primary" />
+      {copy ? "已复制" : "复制诗词译文"}
+    </Button>
   );
 };
 

diff --git a/src/app/[lang]/poem/[id]/page.tsx b/src/app/[lang]/poem/[id]/page.tsx
@@ -4,7 +4,7 @@ import {
   BookAIcon,
   ChevronRight,
   InfoIcon,
-  Printer,
+  PrinterIcon,
   TwitterIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -30,6 +30,10 @@ const SaveShareButton = dynamic(() => import("./components/share"), {
   ssr: false,
 });
 
+const CopyButton = dynamic(() => import("./components/copy"), {
+  ssr: false,
+});
+
 const DrawDefaultPreview = dynamic(
   () => import("./components/share/draw/default"),
   { ssr: false },
@@ -224,45 +228,46 @@ export default async function Page({ params, searchParams }: Props) {
           {dict.poem.tools}
         </h2>
 
-        <div
-          prose-p=""
-          className="flex flex-wrap items-start justify-start md:flex-row md:items-center md:space-x-4"
-        >
-          <Button asChild variant={"outline"} className="mb-2 mr-2 md:mb-0">
-            <Link href={`/tools/print?id=${poem.id}&lang=${params.lang}`}>
-              <Printer className="mr-2 h-6 w-6 text-primary" />
-              打印（适合绝句律诗）
-            </Link>
-          </Button>
+        <div prose-p="" className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {poem.content.split(/，|？|。|！/).length <= 9 && (
+            <Button asChild variant={"outline"}>
+              <Link href={`/tools/print?id=${poem.id}&lang=${params.lang}`}>
+                <PrinterIcon className="mr-2 h-5 w-5 text-primary" />
+                打印绝句律诗
+              </Link>
+            </Button>
+          )}
+
+          <CopyButton data={poem} lang={params.lang} />
 
-          <Button asChild variant={"outline"} className="mb-2 mr-2 md:mb-0">
+          <Button asChild variant={"outline"}>
             <Link
               href={`https://twitter.com/intent/tweet?text=${title} ${MyHost}/${params.lang}/poem/${poem.id}`}
               target="_blank"
             >
-              <TwitterIcon className="mr-2 h-6 w-6 text-primary" /> 分享到
-              Twitter
+              <TwitterIcon className="mr-2 h-5 w-5 text-primary" />
+              分享到 Twitter
             </Link>
           </Button>
 
           <SaveShareButton
             scale={2}
             title={
               <>
-                <BookAIcon className="mr-2 h-6 w-6  text-primary" />
+                <BookAIcon className="mr-2 h-5 w-5 text-primary" />
                 默认分享卡片
               </>
             }
           >
             <DrawDefaultPreview data={poem} />
           </SaveShareButton>
 
-          {poem.content.split(/，|？|。|！/).length === 5 && (
+          {poem.content.split(/，|？|。|！/).length <= 5 && (
             <SaveShareButton
               scale={2}
               title={
                 <>
-                  <Baby className="mr-2 h-6 w-6 text-primary" />
+                  <Baby className="mr-2 h-5 w-5 text-primary" />
                   适合绝句
                 </>
               }