注解

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@giscus/react": "^2.4.0",
-    "@prisma/client": "^5.6.0",
+    "@prisma/client": "^5.8.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -68,7 +68,7 @@
     "postcss-nesting": "^12.0.2",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
-    "prisma": "^5.6.0",
+    "prisma": "^5.8.1",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.1.6"
   },

prisma/schema.prisma

@@ -20,6 +20,8 @@ model Poem {
     contentPinYin String?
     introduce     String?
     translation   String?
+    // 注解 JSON 字符串 {文字: 解释}
+    annotation    String?
     author        Author    @relation(fields: [authorId], references: [id])
     authorId      Int
     // 内容分类：叙事诗、抒情诗、送别诗、边塞诗、山水田园诗、咏史诗、咏物诗、悼亡诗、讽喻诗

src/app/(.)/poem/[id]/components/PinYinText/index.css

@@ -11,7 +11,7 @@
   }
 
   .char_annotation {
-    @apply cursor-pointer text-blue-900;
+    @apply cursor-pointer text-blue-800 dark:text-blue-400;
   }
 
   &.pinyin_h1 {

src/app/(.)/poem/[id]/components/PinYinText/index.tsx

@@ -20,7 +20,13 @@ interface Props {
 const _pinyinNoShowChar = ["."];
 
 function _getText(text: string, annotation: string[]) {
+  const newAnnotation: string[] = [];
+
   annotation.forEach((item) => {
+    if (text.includes(item)) {
+      newAnnotation.push(item);
+    }
+
     text = text.replace(item, "$");
   });
 
@@ -31,7 +37,7 @@ function _getText(text: string, annotation: string[]) {
   return result.map((item) => {
     if (item === "$") {
       i++;
-      return annotation[i - 1] || "";
+      return newAnnotation[i - 1] || "";
     }
 
     return item;
@@ -124,7 +130,7 @@ const PinYinText = (props: Props) => {
   };
 
   return (
-    <TagName
+    <div
       {...{
         "prose-h1": props.type === "h1" ? "" : undefined,
         "prose-p": props.type === "p" ? "" : undefined,
@@ -148,7 +154,7 @@ const PinYinText = (props: Props) => {
       )}
 
       <Content />
-    </TagName>
+    </div>
   );
 };
 

src/app/(.)/poem/[id]/page.tsx

@@ -64,6 +64,10 @@ export default async function Page({ params, searchParams }: Props) {
 
   const blockArray = poem.content.split("\n\n");
 
+  const annotation = JSON.parse(poem.annotation ?? "{}") as {
+    [key in string]: string;
+  };
+
   return (
     <>
       <HeaderMain>
@@ -108,7 +112,7 @@ export default async function Page({ params, searchParams }: Props) {
           pinyin={showPinYin ? poem.titlePinYin ?? "" : ""}
           type="h1"
         />
-        <h2 prose-h2="" className="mt-6 !border-0">
+        <h2 prose-h2="" className={cn("mt-6 !border-0", showPinYin && "mb-6")}>
           {poem.author.dynasty && (
             <span className="font-light">{poem.author.dynasty} · </span>
           )}
@@ -156,6 +160,7 @@ export default async function Page({ params, searchParams }: Props) {
                   text={line}
                   align={poem.genre === "词" ? "left" : "center"}
                   pinyin={showPinYin ? blockPinYin?.split("\n")[index] : ""}
+                  annotation={annotation}
                 />
               ))}
             </>

src/app/create/layout.tsx

@@ -29,7 +29,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           ))}
         </nav>
       </aside>
-      <main className="m-auto min-h-screen max-w-screen-lg flex-1 py-8">
+      <main className="m-auto min-h-screen max-w-screen-xl flex-1 py-8">
         {children}
       </main>
     </div>