const express = require('express'); const router = express.Router(); const multer = require('multer'); const crypto = require('crypto'); const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');

const allowedMimes = ['image/jpeg', 'image/png', 'image/webp']; const maxSize = 5 * 1024 * 1024;

const storage = multer.memoryStorage(); const upload = multer({ storage, limits: { fileSize: maxSize, files: 1 }, fileFilter: (req, file, cb) => { if (allowedMimes.includes(file.mimetype)) { cb(null, true); } else { const err = new Error('INVALID_FILE_TYPE'); err.code = 'INVALID_FILE_TYPE'; cb(err); } }, });

const s3 = new S3Client({ region: process.env.AWS_REGION, credentials: { accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, }, }); const BUCKET = process.env.AWS_S3_BUCKET;

function logError(err, ctx) { console.error([upload] ${ctx || ''}, err && err.stack ? err.stack : err); }

router.post('/upload', (req, res) => { upload.single('file')(req, res, async (err) => { if (err) { if (err instanceof multer.MulterError && err.code === 'LIMIT_FILE_SIZE') { return res.status(400).json({ error: 'File too large. Max 5MB.' }); } if (err.code === 'INVALID_FILE_TYPE') { return res.status(400).json({ error: 'Unsupported file type. Only jpg, png, webp.' }); } logError(err, 'multer'); return res.status(400).json({ error: 'Invalid upload.' }); }

try {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }
  if (!allowedMimes.includes(file.mimetype)) {
    return res.status(400).json({ error: 'Unsupported file type. Only jpg, png, webp.' });
  }
  if (file.size > maxSize) {
    return res.status(400).json({ error: 'File too large. Max 5MB.' });
  }

  const ext =
    file.mimetype === 'image/jpeg' ? '.jpg' :
    file.mimetype === 'image/png' ? '.png' :
    file.mimetype === 'image/webp' ? '.webp' : '';

  const key = `${Date.now()}-${crypto.randomBytes(8).toString('hex')}${ext}`;

  await s3.send(new PutObjectCommand({
    Bucket: BUCKET,
    Key: key,
    Body: file.buffer,
    ContentType: file.mimetype,
    ACL: 'public-read',
  }));

  const url = `https://${BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;

  res.json({ url, filename: key, size: file.size, mime: file.mimetype });
} catch (e) {
  logError(e, 's3 upload');
  res.status(500).json({ error: 'Upload failed' });
}

}); });

module.exports = router;

import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';

type Item = { id: string; title: string };

// 可复用的搜索组件支持自定义占位符与防抖时长 type SearchBoxProps = { placeholder?: string; debounceMs?: number; // 防抖时长，默认 300ms };

export default function SearchBox({ placeholder = '搜索文章', debounceMs = 300 }: SearchBoxProps) { const [query, setQuery] = useState(''); const [items, setItems] = useState<Item[]>([]); const [loading, setLoading] = useState(false); const [page, setPage] = useState(1);

// 追踪当前请求的 AbortController，用于取消前次请求 const abortRef = useRef<AbortController | null>(null);

/**

• 实际发起请求的函数：
• • 每次请求前取消旧请求
• • 空查询时清空结果并不发请求
• • 使用 AbortController 取消快速连续输入导致的过期请求
• • 在 finally 中仅在当前控制器仍为最新时清除 loading */ const runSearch = useCallback(async (q: string, p: number) => { const trimmed = q.trim();

// 取消前一次请求
abortRef.current?.abort();

// 空查询：清空结果并退出
if (!trimmed) {
  setItems([]);
  setLoading(false);
  return;
}

const controller = new AbortController();
abortRef.current = controller;
setLoading(true);

try {
  const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}&page=${p}`, {
    signal: controller.signal,
  });

  if (!res.ok) {
    throw new Error(`Request failed with status ${res.status}`);
  }

  // 兼容两种返回格式：[{...}] 或 { items: [{...}] }
  const data = (await res.json()) as { items?: Item[] } | Item[];
  const list: Item[] = Array.isArray(data) ? data : data.items ?? [];

  // 仅在该请求仍为最新时更新结果
  if (abortRef.current === controller) {
    setItems(list);
  }
} catch (err: unknown) {
  // 被取消的请求不报错；其他错误清空结果或可在此上报
  if ((err as any)?.name !== 'AbortError') {
    setItems([]);
  }
} finally {
  // 仅在该请求仍为最新时清除 loading
  if (abortRef.current === controller) {
    setLoading(false);
  }
}

}, []);

/**

• 使用 useMemo 创建 300ms 防抖的查询函数：
• • 多次快速调用会重置定时器，仅最后一次在 delay 后执行
• • 提供 cancel 方法，分页点击时可取消防抖以立即请求 */ type DebouncedFn = ((q: string, p: number) => void) & { cancel: () => void }; const debouncedSearch = useMemo(() => { let timer: ReturnType | null = null;

const fn = (q: string, p: number) => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => runSearch(q, p), debounceMs);
};

fn.cancel = () => {
  if (timer) clearTimeout(timer);
  timer = null;
};

return fn;

}, [runSearch, debounceMs]);

// 组件卸载时取消定时器与未完成的请求，避免泄漏与越界更新 useEffect(() => { return () => { debouncedSearch.cancel(); abortRef.current?.abort(); }; }, [debouncedSearch]);

// 输入变更：重置到第 1 页并触发防抖查询 const onInputChange = (e: React.ChangeEvent) => { const nextQuery = e.target.value; setQuery(nextQuery); setPage(1); debouncedSearch(nextQuery, 1); };

// 分页跳转：取消防抖并立即请求当前查询的指定页 const goToPage = (nextPage: number) => { setPage(nextPage); debouncedSearch.cancel(); runSearch(query, nextPage); };

return (

  {/* 加载指示与结果渲染 */}
  {loading && <div>正在加载...</div>}

  {!loading && query.trim() && items.length === 0 && (
    <div>没有找到结果</div>
  )}

  {!loading && items.length > 0 && (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  )}

  {/* 分页按钮与当前页显示 */}
  <div>
    <button
      onClick={() => goToPage(Math.max(1, page - 1))}
      disabled={loading || page <= 1}
    >
      上一页
    </button>

    <span style={{ margin: '0 8px' }}>第 {page} 页</span>

    <button
      onClick={() => goToPage(page + 1)}
      disabled={loading || !query.trim()}
    >
      下一页
    </button>
  </div>
</div>