Merge pull request #36 from meetqy/31-支持打印-整个页面打印有点浪费纸张-能打印古诗译文更多-就足够…

…用了正好1-2张a4纸 31 支持打印整个页面打印有点浪费纸张能打印古诗译文更多就足够用了正好1 2张a4纸
meetqy · Mar 10, 2024 · 38ddca6 · 38ddca6
2 parents 9c04819 + c13957a
commit 38ddca6
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 148 deletions.
diff --git a/src/app/[lang]/poem/[id]/page.tsx b/src/app/[lang]/poem/[id]/page.tsx
@@ -4,6 +4,7 @@ import {
   BookAIcon,
   ChevronRight,
   InfoIcon,
+  Printer,
   TwitterIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -219,20 +220,27 @@ export default async function Page({ params, searchParams }: Props) {
           ),
         )}
 
-        <h2 id={"#" + dict.poem.share} prose-h2="">
-          {dict.poem.share}
+        <h2 id={"#" + dict.poem.tools} prose-h2="">
+          {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">
+          <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>
+
+          <Button asChild variant={"outline"} className="mb-2 mr-2 md:mb-0">
             <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-blue-500" /> 分享到
+              <TwitterIcon className="mr-2 h-6 w-6 text-primary" /> 分享到
               Twitter
             </Link>
           </Button>
@@ -241,7 +249,7 @@ export default async function Page({ params, searchParams }: Props) {
             scale={2}
             title={
               <>
-                <BookAIcon className="mr-2 h-6 w-6" />
+                <BookAIcon className="mr-2 h-6 w-6  text-primary" />
                 默认分享卡片
               </>
             }
@@ -254,7 +262,7 @@ export default async function Page({ params, searchParams }: Props) {
               scale={2}
               title={
                 <>
-                  <Baby className="mr-2 h-6 w-6 text-destructive" />
+                  <Baby className="mr-2 h-6 w-6 text-primary" />
                   适合绝句
                 </>
               }

diff --git a/src/app/demo/layout.tsx b/src/app/demo/layout.tsx
@@ -13,5 +13,9 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <Root lang="zh-Hant">{children}</Root>;
+  return (
+    <Root lang="zh-Hans" languageComponent={false}>
+      {children}
+    </Root>
+  );
 }
diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx
diff --git a/src/app/demo/print/index.css b/src/app/demo/print/index.css
diff --git a/src/app/demo/print/page.tsx b/src/app/demo/print/page.tsx
diff --git a/src/app/demo/share/page.tsx b/src/app/demo/share/page.tsx
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -21,10 +21,12 @@ export default function Root({
   children,
   lang,
   head,
+  languageComponent = true,
 }: {
   children: React.ReactNode;
   lang: Locale;
   head?: React.ReactNode;
+  languageComponent?: boolean;
 }) {
   return (
     <html lang={lang}>
@@ -44,7 +46,7 @@ export default function Root({
         <GoogleAnalytics id={process.env.NEXT_PUBLIC_GA_ID!} />
         <MicrosoftClarity id={process.env.NEXT_PUBLIC_MC_ID!} />
         <LoadFont />
-        <Language />
+        {languageComponent && <Language />}
       </body>
     </html>
   );

diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
@@ -0,0 +1,13 @@
+import Root from "../root";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Root lang="zh-Hans" languageComponent={false}>
+      {children}
+    </Root>
+  );
+}
diff --git a/src/app/tools/print/page.tsx b/src/app/tools/print/page.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useRef } from "react";
+import { useReactToPrint } from "react-to-print";
+
+import { Button } from "~/components/ui/button";
+import { type Locale } from "~/dictionaries";
+import { api } from "~/trpc/react";
+import { cn } from "~/utils";
+
+const Row = ({
+  text,
+  right,
+  className,
+}: {
+  text: string;
+  right?: boolean;
+  className?: string;
+}) => {
+  const num = 11;
+  const left = Math.floor((num - text.length) / 2) + text.length;
+
+  let data = text.padStart(left).padEnd(num).split("");
+  if (right) {
+    data = text.padStart(num).split("");
+  }
+
+  return (
+    <div className="grid w-full grid-cols-11 border-y">
+      {data.map((item, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex aspect-square items-center justify-center border-r",
+            index === 0 && "border-l",
+            className,
+          )}
+        >
+          {item}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default function PrintPage({
+  searchParams,
+}: {
+  searchParams: { id: string; lang: Locale };
+}) {
+  const { data: poem } = api.poem.findById.useQuery({
+    id: Number(searchParams.id),
+    lang: searchParams.lang,
+  });
+
+  const componentRef = useRef<HTMLDivElement>(null);
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+  });
+
+  if (!poem) return null;
+
+  const title = poem.title;
+  const author = `${poem.author.dynasty}·${poem.author.name}`;
+
+  const content = poem.content
+    .replaceAll("\n", "")
+    .match(/[^。|！|？|，|；]+[。|！|？|，|；]+/g);
+
+  if (!content) return null;
+
+  let arr = [title, author, ...content];
+  arr = [...arr, ...(new Array(12).fill("") as string[])].slice(0, 12);
+
+  return (
+    <div className="flex">
+      <aside className="fixed top-0 flex h-full w-72 flex-col space-y-4 bg-muted p-4">
+        <Button onClick={handlePrint}>打印</Button>
+      </aside>
+      <aside className="w-72"></aside>
+      <div className="relative m-auto min-h-[1754px] w-[1240px] origin-top-left scale-75 border border-t-0">
+        <div
+          className="w-full space-y-4 p-12 font-cursive text-5xl"
+          ref={componentRef}
+        >
+          {arr.map((item, index) => (
+            <Row
+              key={index}
+              text={item}
+              right={index === 1}
+              className={cn(index === 1 && "text-neutral-500")}
+            />
+          ))}
+
+          <p className="absolute bottom-0 left-0 flex w-full items-center justify-end p-4 text-2xl text-neutral-400">
+            aspoem.com | 现代化诗词学习网站
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/dictionaries/zh-Hans.json b/src/dictionaries/zh-Hans.json
@@ -45,7 +45,7 @@
     "pinyin_show": "显示拼音",
     "pinyin_hide": "隐藏拼音",
     "translation": "译文",
-    "share": "分享",
+    "tools": "工具",
     "more": "更多探索",
     "comment": "畅所欲言",
     "comment_desc1": "不同的年龄、成长环境、经历，都会有不同的看法。",

diff --git a/src/dictionaries/zh-Hant.json b/src/dictionaries/zh-Hant.json
@@ -45,7 +45,7 @@
     "pinyin_show": "顯示拼音",
     "pinyin_hide": "隱藏拼音",
     "translation": "譯文",
-    "share": "分享",
+    "tools": "工具",
     "more": "更多探索",
     "comment": "暢所欲言",
     "comment_desc1": "不同的年齡、成長環境、經歷，都會有不同的看法。",

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -35,7 +35,7 @@ export function middleware(request: NextRequest) {
 export const config = {
   matcher: [
     // Skip all internal paths (_next)
-    "/((?!_next|favicon|fonts|demo|create|robots|sitemap|share-card-bg).*)",
+    "/((?!_next|favicon|fonts|tools|demo|create|robots|sitemap|share-card-bg).*)",
     // Optional: only run on root (/) URL
     // '/'
   ],