Sht

next.config.ts

@@ -1,7 +1,24 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    // 禁用图片优化以避免兼容性问题
+    unoptimized: true,
+
+    // 移除可能导致干扰的远程模式配置
+    remotePatterns: [],
+
+    // 空的域名列表，避免域名验证问题
+    domains: [],
+
+    // 简化配置，专注于本地静态图片
+    formats: [],
+
+    // 设置合适的设备尺寸
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+
   async redirects() {
     return [
       {

next.config.ts.backup

@@ -0,0 +1,33 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  images: {
+    // 对于本地静态图片，不需要远程模式配置
+    // 远程图片配置（如果将来需要的话）
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+    // 本地图片使用默认配置，不需要自定义loader
+    // 移除了loader配置，让Next.js使用默认的静态图片处理
+    domains: [],
+    // 启用图片优化
+    unoptimized: false,
+    // 图片质量设置
+    formats: ["image/webp", "image/avif"],
+  },
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/login",
+        permanent: false,
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package.json

@@ -28,6 +28,7 @@
     "next": "16.1.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-masonry-css": "^1.0.16",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.23",
     "commitizen": "^4.3.1",
     "cz-git": "^1.12.0",
     "eslint": "^9",
@@ -47,6 +49,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
+    "postcss": "^8.5.6",
     "prettier": "^3.8.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "stylelint": "^17.0.0",

postcss.config.mjs → postcss.config.js

@@ -1,7 +1,6 @@
-const config = {
+module.exports = {
   plugins: {
     "@tailwindcss/postcss": {},
+    autoprefixer: {},
   },
 };
-
-export default config;

src/app/dashboard/_components/Card.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useState } from "react";
 
 interface CardProps {
   title: string;
@@ -9,19 +10,65 @@ interface CardProps {
 }
 
 export const Card = ({ title, image, author, likes, content }: CardProps) => {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
+
+  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const target = e.target as HTMLImageElement;
+    console.error(`图片加载失败详情:`, {
+      src: image,
+      naturalWidth: target.naturalWidth,
+      naturalHeight: target.naturalHeight,
+      errorMessage: (target as any).error?.message || "未知错误",
+    });
+    setImageError(true);
+    setImageLoading(false);
+  };
+
+  const handleImageLoad = () => {
+    setImageLoading(false);
+    console.log(`图片加载成功: ${image}`);
+  };
+
   return (
     <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md">
-      {image && (
-        <div className="relative h-64 w-full">
+      {image && !imageError && (
+        <div className="relative w-full">
+          {imageLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
+              <div className="animate-pulse text-sm text-gray-400">加载中...</div>
+            </div>
+          )}
           <Image
             src={image}
             alt={title}
-            fill
-            style={{ objectFit: "cover" }}
-            className="rounded-t-lg"
+            width={400}
+            height={300}
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-auto w-full rounded-t-lg object-cover"
+            onError={handleImageError}
+            onLoad={handleImageLoad}
+            priority={false}
+            quality={85}
+            unoptimized={true}
           />
         </div>
       )}
+      {imageError && (
+        <div className="relative flex h-48 w-full flex-col items-center justify-center bg-gray-100 p-4">
+          <span className="mb-2 text-sm text-gray-400">图片加载失败</span>
+          <span className="text-xs text-gray-500">路径: {image}</span>
+          <button
+            className="mt-2 rounded bg-blue-500 px-3 py-1 text-xs text-white hover:bg-blue-600"
+            onClick={() => {
+              setImageError(false);
+              setImageLoading(true);
+            }}
+          >
+            重试
+          </button>
+        </div>
+      )}
       <div className="p-4">
         <h3 className="mb-2 text-sm leading-tight font-semibold text-gray-900">{title}</h3>
         <p className="mb-3 line-clamp-2 text-xs text-gray-600">{content}</p>

src/app/dashboard/_components/CardList.tsx

@@ -1,37 +1,41 @@
+// import { useEffect, useState } from "react";
+import Masonry from "react-masonry-css";
+
+// import Image from "next/image";
 import { Card } from "./Card";
 
 const mockPosts = [
   {
     title: "上海有没有缺正片后勤/机位二的coser老师",
-    image: "/assets/images/etiwh.jpg",
+    image: "/assets/images/a.jpg",
     author: "一个小方",
     likes: 2,
     content: "是摄影新人和一个路人coser，如果是熟悉的ip可以来当无偿... ",
   },
   {
     title: "冬日，阳光，与JK",
-    image: "/assets/images/white.jpg",
+    image: "/assets/images/0068albMly1hxr5qe9nkvj30j60srac4.jpg",
     author: "JunYee",
     likes: 727,
     content: "冬天的阳光洒在校园里，JK制服随风飘动...",
   },
   {
     title: "某安全大厂前端实习二面",
-    image: null,
+    image: "/assets/images/701D6B7350809E3BD8C53D4AD822C9A8.png",
     author: "好困qst",
     likes: 2,
     content: "面试官问了Vue响应式原理，我答得有点懵...",
   },
   {
     title: "北京扫街小分队！2025下半年扫街结算",
-    image: "/assets/images/etiwh.jpg",
+    image: "/assets/images/5657f0f1f5be44a17c35be830e79df84.jpg",
     author: "玉米玉米",
     likes: 53,
     content: "记录下每个城市的街头角落，拍出不一样的烟火气。",
   },
   {
     title: "成都今天有没有来出差，或者来成都旅游的呀",
-    image: null,
+    image: "/assets/images/c4458f087a48f121be885aa09e996c02.jpg",
     author: "小红薯",
     likes: 3,
     content: "调休了在家呆着太无聊啦，一起出来玩呀，面基，面基，面基",
@@ -40,10 +44,22 @@ const mockPosts = [
 
 export const CardList = () => {
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+    <Masonry
+      breakpointCols={{
+        default: 5,
+        1400: 4,
+        1200: 3,
+        900: 2,
+        600: 1,
+      }}
+      className="my-masonry-grid"
+      columnClassName="my-masonry-grid-column"
+    >
       {mockPosts.map((post, index) => (
-        <Card key={index} {...post} />
+        <div key={index} className="mb-4">
+          <Card {...post} />
+        </div>
       ))}
-    </div>
+    </Masonry>
   );
 };