重构留言墙页面，移除颜色映射表，替换为瀑布流布局组件以优化留言展示，提升用户体验和视觉效果。

src/app/wall/[cate]/page.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import Pagination from '@/components/Pagination';
 import AddWallInfo from '../components/AddWallInfo';
+import WallMasonry from '../components/WallMasonry';
 import { getCateListAPI, getCateWallListAPI } from '@/api/wall';
-import dayjs from 'dayjs';
 import { Cate } from '@/types/app/cate';
 import { Wall } from '@/types/app/wall';
 
@@ -11,15 +11,6 @@ interface Props {
   searchParams: Promise<{ page: number }>;
 }
 
-// 颜色映射表，将颜色值映射到对应的 Tailwind 类名
-const colorMap: Record<string, string> = {
-  '#fcafa24d': 'bg-[#fcafa24d]',
-  '#a8ed8a4d': 'bg-[#a8ed8a4d]',
-  '#caa7f74d': 'bg-[#caa7f74d]',
-  '#ffe3944d': 'bg-[#ffe3944d]',
-  '#92e6f54d': 'bg-[#92e6f54d]',
-};
-
 export default async (props: Props) => {
   const searchParams = await props.searchParams;
   const params = await props.params;
@@ -75,55 +66,8 @@ export default async (props: Props) => {
             ))}
           </div>
 
-          {/* 留言卡片网格 */}
-          <div className="w-[90%] xl:w-[1200px] mx-auto mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-5 lg:gap-6 pb-12">
-            {tallList.result?.map((item, index) => {
-              const bgColor = colorMap[item.color] || 'bg-[#ffe3944d]';
-              return (
-                <div
-                  key={item.id}
-                  className={`
-                    group relative flex flex-col p-5 rounded-2xl
-                    ${bgColor}
-                    backdrop-blur-sm
-                    border border-white/30 dark:border-gray-700/30
-                    hover:shadow-md
-                    transition-all duration-300 ease-out
-                    hover:-translate-y-2 hover:scale-[1.02]
-                    cursor-pointer
-                    overflow-hidden
-                    animate-fade-in-up
-                  `}
-                  style={{
-                    animationDelay: `${index * 50}ms`,
-                  }}
-                >
-                  {/* 卡片装饰边框 */}
-                  <div className="absolute inset-0 rounded-2xl border-2 border-white/20 dark:border-gray-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-
-                  {/* 顶部信息 */}
-                  <div className="flex justify-between items-center mb-3 pb-3 border-b border-white/20 dark:border-gray-700/30">
-                    <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">{dayjs(+item.createTime!).format('YYYY-MM-DD HH:mm')}</span>
-                    <span className="px-2.5 py-1 text-xs font-semibold backdrop-blur-sm text-gray-700 dark:text-white bg-white/60 dark:bg-gray-800/60 rounded-full">{item.cate.name}</span>
-                  </div>
-
-                  {/* 留言内容 */}
-                  <div className="flex-1 hide_sliding overflow-auto min-h-[100px] max-h-[140px] text-sm md:text-base leading-relaxed text-gray-800 dark:text-gray-200 my-3 px-1">{item.content}</div>
-
-                  {/* 底部署名 */}
-                  <div className="flex justify-end items-center mt-4 pt-3 border-t border-white/20 dark:border-gray-700/30">
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs text-gray-500 dark:text-gray-400">—</span>
-                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{item.name ? item.name : '匿名'}</span>
-                    </div>
-                  </div>
-
-                  {/* Hover 时的光效 */}
-                  <div className="absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-white/20 dark:from-transparent dark:via-transparent dark:to-white/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
-                </div>
-              );
-            })}
-          </div>
+          {/* 留言卡片瀑布流 */}
+          <div className="w-[90%] xl:w-[1200px] mx-auto mt-8 pb-12">{tallList.result && tallList.result.length > 0 ? <WallMasonry walls={tallList.result} /> : <div className="text-center py-12 text-gray-500 dark:text-gray-400">暂无留言</div>}</div>
 
           {/* 分页 */}
           {tallList.total && (

src/app/wall/components/WallMasonry/index.scss

@@ -0,0 +1,20 @@
+// 留言墙瀑布流样式优化
+.wall-masonry-grid {
+  margin-left: -20px; // 调整左侧间距
+
+  @media (min-width: 640px) {
+    margin-left: -15px;
+  }
+
+  @media (min-width: 768px) {
+    margin-left: -20px;
+  }
+
+  @media (min-width: 1024px) {
+    margin-left: -24px;
+  }
+}
+
+.wall-masonry-grid .masonry-grid_column {
+  padding-left: 12px; // 列间距
+}

src/app/wall/components/WallMasonry/index.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import Masonry from 'react-masonry-css';
+import dayjs from 'dayjs';
+import { Wall } from '@/types/app/wall';
+import '@/components/ArticleLayout/Waterfall/index.scss';
+import './index.scss';
+
+// 颜色映射表，将颜色值映射到对应的 Tailwind 类名
+const colorMap: Record<string, string> = {
+  '#fcafa24d': 'bg-[#fcafa24d]',
+  '#a8ed8a4d': 'bg-[#a8ed8a4d]',
+  '#caa7f74d': 'bg-[#caa7f74d]',
+  '#ffe3944d': 'bg-[#ffe3944d]',
+  '#92e6f54d': 'bg-[#92e6f54d]',
+};
+
+// 瀑布流断点配置
+const breakpointColumnsObj = {
+  default: 4,
+  1024: 3,
+  768: 2,
+  640: 1,
+};
+
+interface WallMasonryProps {
+  walls: Wall[];
+}
+
+export default ({ walls }: WallMasonryProps) => {
+  return (
+    <Masonry breakpointCols={breakpointColumnsObj} className="masonry-grid wall-masonry-grid" columnClassName="masonry-grid_column">
+      {walls.map((item, index) => {
+        const bgColor = colorMap[item.color] || 'bg-[#ffe3944d]';
+        return (
+          <div
+            key={item.id}
+            className={`
+              group relative flex flex-col p-5 rounded-2xl
+              ${bgColor}
+              backdrop-blur-sm
+              border border-white/30 dark:border-gray-700/30
+              transition-all duration-300 ease-out
+              hover:-translate-y-2 hover:scale-125
+              cursor-pointer
+              overflow-hidden
+              mb-3
+              animate-fade-in-up
+            `}
+            style={{
+              animationDelay: `${index * 50}ms`,
+            }}
+          >
+            {/* 卡片装饰边框 */}
+            <div className="absolute inset-0 rounded-2xl border-2 border-white/20 dark:border-gray-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+            {/* 顶部信息 */}
+            <div className="flex justify-between items-center mb-3 pb-3 border-b border-white/20 dark:border-gray-700/30">
+              <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">{dayjs(+item.createTime!).format('YYYY-MM-DD HH:mm')}</span>
+              <span className="px-2.5 py-1 text-xs font-semibold backdrop-blur-sm text-gray-700 dark:text-white bg-white/60 dark:bg-gray-800/60 rounded-full">{item.cate.name}</span>
+            </div>
+
+            {/* 留言内容 */}
+            <div className="flex-1 hide_sliding overflow-auto min-h-[100px] text-sm md:text-base leading-relaxed text-gray-800 dark:text-gray-200 my-3 px-1">{item.content}</div>
+
+            {/* 底部署名 */}
+            <div className="flex justify-end items-center mt-4 pt-3 border-t border-white/20 dark:border-gray-700/30">
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500 dark:text-gray-400">—</span>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{item.name ? item.name : '匿名'}</span>
+              </div>
+            </div>
+
+            {/* Hover 时的光效 */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-white/20 dark:from-transparent dark:via-transparent dark:to-white/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+          </div>
+        );
+      })}
+    </Masonry>
+  );
+};