feat: 图片上传优化及审核状态交互改进

app/api/upload/route.ts

@@ -1,8 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server';
 import fs from 'fs/promises';
 import path from 'path';
+import sharp from 'sharp';
 
 const UPLOAD_DIR = path.join(process.cwd(), 'public/uploads');
+const MAX_SIZE = 5 * 1024 * 1024; // 5MB
 
 export async function POST(request: NextRequest) {
   try {
@@ -18,16 +20,54 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: '仅支持 JPG、PNG、GIF、WebP 格式' }, { status: 400 });
     }
 
-    const ext = file.name.split('.').pop() || 'jpg';
+    const ext = 'jpg';
     const filename = `${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`;
     const filepath = path.join(UPLOAD_DIR, filename);
 
     const buffer = await file.arrayBuffer();
-    await fs.writeFile(filepath, Buffer.from(buffer));
+    let imageBuffer = Buffer.from(buffer);
 
-    const host = request.headers.get('host') || 'localhost:3000';
+    // 获取图片尺寸
-    const protocol = request.headers.get('x-forwarded-proto') || 'http';
+    const image = sharp(imageBuffer);
-    const url = `${protocol}://${host}/uploads/${filename}`;
+    const metadata = await image.metadata();
+
+    // 如果超过5MB，进行压缩
+    if (imageBuffer.length > MAX_SIZE) {
+      let quality = 85;
+
+      // 先尝试缩小尺寸
+      if (metadata.width && metadata.width > 1920) {
+        imageBuffer = await image
+          .resize(1920, null, { withoutEnlargement: true })
+          .toBuffer() as any;
+      }
+
+      // 循环压缩直到小于5MB
+      while (imageBuffer.length > MAX_SIZE && quality > 30) {
+        imageBuffer = await sharp(imageBuffer)
+          .jpeg({ quality, progressive: true })
+          .toBuffer() as any;
+        quality -= 10;
+      }
+
+      // 如果还是太大，继续缩小尺寸
+      if (imageBuffer.length > MAX_SIZE && metadata.width && metadata.width > 800) {
+        imageBuffer = await sharp(imageBuffer)
+          .resize(800, null, { withoutEnlargement: true })
+          .jpeg({ quality: 70, progressive: true })
+          .toBuffer() as any;
+      }
+    } else {
+      // 转换为jpeg并优化
+      imageBuffer = await sharp(imageBuffer)
+        .jpeg({ quality: 85, progressive: true })
+        .toBuffer() as any;
+    }
+
+    await fs.writeFile(filepath, imageBuffer);
+
+    // 返回相对路径
+    const url = `/uploads/${filename}`;
     return NextResponse.json({ url });
   } catch (error) {
     console.error('Upload error:', error);

app/owner/dashboard/page.tsx

@@ -252,8 +252,37 @@ export default function OwnerDashboard() {
           <div className="space-y-4">
             {houses.map((house) => (
               <div key={house.id} className="bg-white rounded-xl overflow-hidden shadow-sm">
+                {house.status === 'approved' ? (
                   <Link href={`/house/${house.id}`}>
                     <div className="flex">
+                      {house.images && house.images.length > 0 ? (
+                        <img
+                          src={house.images[0]}
+                          alt={house.title}
+                          className="w-28 h-28 object-cover flex-shrink-0"
+                        />
+                      ) : (
+                        <div className="w-28 h-28 bg-gradient-to-br from-orange-100 to-orange-200 flex items-center justify-center text-3xl flex-shrink-0">
+                          🏠
+                        </div>
+                      )}
+                      <div className="flex-1 p-3 min-w-0">
+                        <h3 className="font-semibold text-gray-900 truncate">{house.title}</h3>
+                        <p className="text-gray-500 text-sm truncate">{house.address}</p>
+                        <div className="flex items-center justify-between mt-2">
+                          <span className="text-orange-500 font-bold">
+                            ¥{house.price}/月
+                          </span>
+                          <span className="text-gray-400 text-xs">{house.district}</span>
+                        </div>
+                        <div className="mt-2">
+                          <span className="inline-block bg-green-100 text-green-700 text-xs px-2 py-1 rounded">审核通过</span>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                ) : (
+                  <div className="flex opacity-60">
                     {house.images && house.images.length > 0 ? (
                       <img
                         src={house.images[0]}
@@ -278,9 +307,6 @@ export default function OwnerDashboard() {
                         {house.status === 'pending' && (
                           <span className="inline-block bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded">审核中</span>
                         )}
-                        {house.status === 'approved' && (
-                          <span className="inline-block bg-green-100 text-green-700 text-xs px-2 py-1 rounded">审核通过</span>
-                        )}
                         {house.status === 'rejected' && (
                           <span className="inline-block bg-red-100 text-red-700 text-xs px-2 py-1 rounded">审核驳回</span>
                         )}
@@ -290,7 +316,7 @@ export default function OwnerDashboard() {
                       )}
                     </div>
                   </div>
-                </Link>
+                )}
                 <div className="border-t border-gray-100 flex">
                   <button
                     onClick={() => openForm(house)}