完成了前端功能。

src/App.tsx

@@ -205,27 +205,38 @@ function App() {
     }
   }
 
+  const useFetchComments = () => {
+  const [fetchComments] = useState(() => fetchCommentsPage);
+  return fetchComments;
+};
+  const fetchCommentsImpl = useFetchComments();
+
   useEffect(() => {
     // 初始加载评论
-    fetchComments()
+    const loadComments = () => {
+      console.log("page = ", page);
+      fetchCommentsImpl(page);
+    };
+
+    loadComments()
 
     // 设置定时器，每20秒获取一次评论
     const interval = setInterval(() => {
-      fetchComments()
+      loadComments()
     }, 20000) // 20秒
 
     // 组件卸载时清除定时器
     return () => {
       clearInterval(interval)
     }
-  }, [])
+  }, [page, fetchCommentsImpl])
 
 
   return(
     <>
       <div className="submit-container">
-        <h3>user name</h3>
         <form id="todoForm" onSubmit={handleSubmit}>
+          <h3>用户名称</h3>
           <input 
             type="text" 
             id="username" 
@@ -234,7 +245,7 @@ function App() {
             onChange={(e) => setUsername(e.target.value)} 
             required
           ></input>
-          <h3>comment content</h3>
+          <h3>评论内容</h3>
           <input 
             type="text" 
             id="comment" 
@@ -248,38 +259,43 @@ function App() {
           </div>
         </form>
       </div>
+      <h2>评论列表</h2>
       <div className="refresh-button">
+        <p>共{commentCount}条评论</p>
         <button type="button" onClick={fetchComments} disabled={loading}>
           {loading ? '↻...' : '↻'}
         </button>
       </div>
       <div className="comments-container">
-        <h3>评论列表</h3>
-        <p>共{commentCount}条评论</p>
         {!loading && error && <p className="error">{error}</p>}
         {!loading && comments.length === 0 && <p>暂无评论</p>}
         <ul>
           {comments.map((comment) => (
               <li key={comment.id}>
-                <p>
+                <div className = "comment-name">
                   <strong>{comment.name}</strong>
-                  <button type="button" onClick={() => deleteComment(comment.id)}>
+                </div>
+                <div className = "comment-content">{comment.content}</div>
+                <div className = "comment-delete">
+                  <button 
+                    type="button" 
+                    onClick={() => deleteComment(comment.id)}
+                  >
                       删除
                     </button>
-                </p>
-                <p>{comment.content}</p>
+                </div>
               </li>
             ))}
         </ul>
-        {
-          UsePages && comments.length !== 0 &&
-          <div className="page-controls">
-          <button onClick={prevPage} disabled={page <= 1}>上一页</button>
-          <span>第 {page}/{totalPage} 页</span>
-          <button onClick={nextPage} disabled={page >= totalPage}>下一页</button>
-          </div>
-        }
       </div>
+      {
+        UsePages && comments.length !== 0 &&
+        <div className="page-controls">
+        <button onClick={prevPage} disabled={page <= 1}>上一页</button>
+        <span>第 {page}/{totalPage} 页</span>
+        <button onClick={nextPage} disabled={page >= totalPage}>下一页</button>
+        </div>
+      }
     </>
   )
 }

src/index.css

@@ -23,46 +23,151 @@ a:hover {
 }
 
 body {
+  background-color: #f7f7f7; 
+  font-family: Arial, sans-serif; 
+  padding: 0; 
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
+  min-width: 100%;
+  max-width: 100%;
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
+    p { 
+    text-align: center; 
+    margin-bottom: 1.5rem; 
+    color: #111;
+    } 
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
+/* 标题样式 */ 
+    h1 { 
+    text-align: center; 
+    margin-bottom: 1.5rem; 
+    color: #111;
+    } 
+
+    h2 { 
+    text-align: center; 
+    margin-bottom: 1.5rem; 
+    color: #333;
+    } 
+
+    h3 { 
+    text-align: center; 
+    margin-bottom: 1rem; 
+    color: #111;
+    } 
+     
+    /* 表单样式 */ 
+    form { 
+    justify-content: space-between; 
+    
+    background-color: #eeeeee;
+    border: 1px solid #ccc;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem; 
+    padding: 1rem 4rem;
+    } 
+     
+    input[type="text"] { 
+    flex: 1; 
+    padding: 0.5rem; 
+    font-size: 1rem; 
+    border: 1px solid #ddd; 
+    border-radius: 4px; 
+    background-color: #fff; 
+    color: #111;
+    } 
+     
+    button { 
+    padding: 0.5rem 1rem; 
+    margin-top: 0.5rem; 
+    margin-bottom: 1rem;
+    border: none; 
+    background-color: #10c266; 
+    color: #fff; 
+    border-radius: 4px; 
+    cursor: pointer; 
+    font-size: 1rem; 
+    transition: background-color 0.3s;
+    }
+
+    button:hover { 
+    background-color: #00FF7B; 
+    }
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.refresh-button { 
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+    padding: 0; 
+} 
+
+
+.comments-container ul{ 
+    list-style: none; 
+    padding: 0; 
+} 
+ 
+.comments-container ul li { 
+  align-items: center; 
+  justify-content: space-between;
+  padding: 1px 1.5rem; 
+  color: #111; 
+  border-left: #242424 5px solid;
+  margin-bottom: 2rem;
+} 
+
+.comments-container ul li .comment-name { 
+  display: flex; 
+  align-items: left;  
+  padding: 1px 0.5rem; 
+  border-bottom: 1px solid #eee; 
+  color: #666; 
+} 
+
+.comments-container ul li .comment-delete {
+  display: flex;
+  justify-content: flex-end;
+  padding: 1px;
+}
+
+.comments-container ul li .comment-delete button {
+  background-color: #cf311f;
+  color: white;
+  align-items: right; 
+  border: none;
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
 }
+
+.comments-container ul li .comment-delete button:hover {
+  background-color: #fd270f;
+}
+
+.comments-container ul li .comment-content { 
+  display: flex; 
+  align-items: left; 
+  text-align: left;
+  margin-top: 0.5rem;
+  padding: 1px 1.5rem;
+  color: #666; 
+} 
+
+.page-controls { 
+    text-align: center; 
+    margin-bottom: 1.5rem; 
+    color: #111;
+} 
+
+.page-controls span {
+  padding: 1rem 0.5rem;
+  color: #111;
+}
\ No newline at end of file