From c3a0efb384afe592262ced7e27fa069136b6b523 Mon Sep 17 00:00:00 2001
From: Ember <197652334@qq.com>
Date: Sat, 1 Nov 2025 23:58:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20Typewriter=20=E6=9B=B4=E7=A8=B3?=
 =?UTF-8?q?=E5=81=A5=E2=80=94charAt=E9=98=B2=E8=B6=8A=E7=95=8C=E3=80=81san?=
 =?UTF-8?q?itizedLines=E9=98=B2=E7=A9=BA=E5=80=BC=E3=80=81pre-wrap?=
 =?UTF-8?q?=E9=98=B2=E6=8D=A2=E8=A1=8C=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Typewriter.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Typewriter.tsx b/web/src/components/Typewriter.tsx
index acab982f..f06895fa 100644
--- a/web/src/components/Typewriter.tsx
+++ b/web/src/components/Typewriter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 interface TypewriterProps {
   lines: string[]
@@ -21,21 +21,23 @@ export default function Typewriter({
   const charIndexRef = useRef(0)
   const timerRef = useRef<number | null>(null)
   const blinkRef = useRef<number | null>(null)
+  const sanitizedLines = useMemo(() => lines.map((l) => String(l ?? '')), [lines])
 
   useEffect(() => {
     function typeNext() {
-      const currentLine = lines[lineIndexRef.current] ?? ''
+      const currentLine = sanitizedLines[lineIndexRef.current] ?? ''
       if (charIndexRef.current < currentLine.length) {
         setTypedLines((prev) => {
           const next = [...prev]
-          next[next.length - 1] = (next[next.length - 1] || '') + currentLine[charIndexRef.current]
+          const ch = currentLine.charAt(charIndexRef.current)
+          next[next.length - 1] = (next[next.length - 1] || '') + ch
           return next
         })
         charIndexRef.current += 1
         timerRef.current = window.setTimeout(typeNext, typingSpeed)
       } else {
         // 行结束
-        if (lineIndexRef.current < lines.length - 1) {
+        if (lineIndexRef.current < sanitizedLines.length - 1) {
           lineIndexRef.current += 1
           charIndexRef.current = 0
           setTypedLines((prev) => [...prev, ''])
@@ -61,7 +63,7 @@ export default function Typewriter({
   }, [lines, typingSpeed, lineDelay])
 
   return (
-    <pre className={className} style={style}>
+    <pre className={className} style={{ whiteSpace: 'pre-wrap', ...style }}>
       {typedLines.join('\n')}
       <span style={{ opacity: showCursor ? 1 : 0 }}> ▍</span>
     </pre>