feat(feedback): 截图上传 + 我的反馈历史 + 后台管理页

后端 - 接入阿里云 OSS（ali-oss SDK），bucket=lnh2etest，目录 /dos/feedback/YYYY-MM-DD/ - POST /api/feedback/upload：单图 multipart 上传，限制 5MB，仅 png/jpeg/webp/gif - bi_user_feedback 增加 screenshots(JSON)、reply_content/reply_user/reply_at、user_id 索引老表通过 try-catch 自动 ALTER 兼容 - POST /api/feedback/submit：增加 screenshots[] 字段 - GET /api/feedback/mine：当前用户自己的反馈历史 - PATCH /api/feedback/:id：更新状态 + 回复 - GET /api/feedback/list：增加 status 过滤前端 - FeedbackFab 改为悬浮按钮 + 弹出菜单：「提个建议」/「我的反馈」 - 弹窗 Step 2 增加截图区：点击选择 / 多张 / 直接 Ctrl+V 粘贴缩略图预览 + 单张移除，最多 6 张，上传中转圈 - FeedbackHistoryDrawer 新组件：底部抽屉展示自己的反馈含状态徽章（待处理/处理中/已完成/已忽略）、截图缩略图、产品同学回复区 - 新增隐藏后台管理页 /admin/feedback（或 #/admin/feedback）状态分类计数 + 列表 + 详情弹窗（改状态 + 写回复，状态选项含徽章色）待处理项有快捷按钮（标记处理中 / 忽略） Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-30 14:06:21 +08:00
parent e8f1604c11
commit 20ebb16e08
8 changed files with 1760 additions and 29 deletions
--- a/src/server/routes/feedback/index.ts
+++ b/src/server/routes/feedback/index.ts
@@ -2,9 +2,13 @@ import { Hono } from 'hono';
 import type { ResultSetHeader, RowDataPacket } from 'mysql2';
 import pool from '../../db.js';
 import type { AuthUser } from '../../auth/types.js';
+import { uploadFeedbackImage } from './oss.js';

 const app = new Hono();

+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
+const ALLOWED_MIME = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif']);
+
 const CREATE_TABLE_SQL = `
 CREATE TABLE IF NOT EXISTS bi_user_feedback (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
@@ -12,14 +16,19 @@ CREATE TABLE IF NOT EXISTS bi_user_feedback (
  module VARCHAR(64) NULL,
  content TEXT NOT NULL,
  contact VARCHAR(200) NULL,
+  screenshots JSON NULL,
  user_id VARCHAR(64) NULL,
  user_name VARCHAR(128) NULL,
  user_agent VARCHAR(512) NULL,
  status ENUM('open','in_progress','done','rejected') NOT NULL DEFAULT 'open',
+  reply_content TEXT NULL,
+  reply_user VARCHAR(128) NULL,
+  reply_at DATETIME NULL,
  created_at DATETIME NOT NULL,
  KEY idx_created_at (created_at),
  KEY idx_type (type),
-  KEY idx_status (status)
+  KEY idx_status (status),
+  KEY idx_user_id (user_id)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
 `;

@@ -27,16 +36,28 @@ let ensured = false;
 async function ensureTable(): Promise<void> {
  if (ensured) return;
  await pool.query(CREATE_TABLE_SQL);
+  // 兼容旧表：补齐缺失列
+  for (const alter of [
+    `ALTER TABLE bi_user_feedback ADD COLUMN screenshots JSON NULL AFTER contact`,
+    `ALTER TABLE bi_user_feedback ADD COLUMN reply_content TEXT NULL AFTER status`,
+    `ALTER TABLE bi_user_feedback ADD COLUMN reply_user VARCHAR(128) NULL AFTER reply_content`,
+    `ALTER TABLE bi_user_feedback ADD COLUMN reply_at DATETIME NULL AFTER reply_user`,
+    `ALTER TABLE bi_user_feedback ADD INDEX idx_user_id (user_id)`,
+  ]) {
+    try { await pool.query(alter); } catch { /* 已存在则忽略 */ }
+  }
  ensured = true;
 }

+const VALID_STATUS = new Set(['open', 'in_progress', 'done', 'rejected']);
+
 const VALID_TYPES = new Set(['dimension', 'bug', 'ux', 'other']);

 app.post('/submit', async (c) => {
  await ensureTable();
  const body = await c.req.json().catch(() => ({})) as {
    type?: string; module?: string | null; content?: string;
-    contact?: string | null; userAgent?: string;
+    contact?: string | null; userAgent?: string; screenshots?: string[];
  };
  const type = (body.type || '').trim();
  const content = (body.content || '').trim();
@@ -51,27 +72,107 @@ app.post('/submit', async (c) => {
  const moduleVal = (body.module || '').slice(0, 64) || null;
  const contact = (body.contact || '').slice(0, 200) || null;
  const userAgent = (body.userAgent || '').slice(0, 512) || null;
+  const screenshots = Array.isArray(body.screenshots)
+    ? body.screenshots.filter(s => typeof s === 'string' && /^https?:\/\//.test(s)).slice(0, 6)
+    : [];

  const [r] = await pool.query<ResultSetHeader>(
-    `INSERT INTO bi_user_feedback (type, module, content, contact, user_id, user_name, user_agent, created_at)
-     VALUES (?, ?, ?, ?, ?, ?, ?, NOW())`,
-    [type, moduleVal, content, contact, user?.userId || null, user?.userName || null, userAgent],
+    `INSERT INTO bi_user_feedback (type, module, content, contact, screenshots, user_id, user_name, user_agent, created_at)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, NOW())`,
+    [type, moduleVal, content, contact, JSON.stringify(screenshots), user?.userId || null, user?.userName || null, userAgent],
  );
  return c.json({ ok: true, id: r.insertId });
 });

-// GET /api/feedback/list — 简易列表（按时间倒序，最多 200 条）
-app.get('/list', async (c) => {
+// =========================================================
+// POST /api/feedback/upload — 单张截图上传（multipart/form-data, field=file）
+// =========================================================
+app.post('/upload', async (c) => {
+  const form = await c.req.formData();
+  const file = form.get('file');
+  if (!(file instanceof File)) {
+    return c.json({ ok: false, message: '未上传文件' }, 400);
+  }
+  const mime = file.type || 'image/png';
+  if (!ALLOWED_MIME.has(mime)) {
+    return c.json({ ok: false, message: `不支持的文件类型：${mime}` }, 400);
+  }
+  if (file.size > MAX_IMAGE_SIZE) {
+    return c.json({ ok: false, message: `图片过大（${(file.size / 1024 / 1024).toFixed(1)}MB）`}, 400);
+  }
+  const buf = Buffer.from(await file.arrayBuffer());
+  try {
+    const url = await uploadFeedbackImage(file.name || 'screenshot.png', buf, mime);
+    return c.json({ ok: true, url });
+  } catch (e) {
+    console.error('feedback upload error:', e);
+    return c.json({ ok: false, message: e instanceof Error ? e.message : '上传失败' }, 500);
+  }
+});
+
+// GET /api/feedback/mine — 当前用户的反馈历史
+app.get('/mine', async (c) => {
  await ensureTable();
-  const limit = Math.min(200, Math.max(1, Number(c.req.query('limit')) || 50));
+  const user = (c as { get?: (k: string) => unknown }).get?.('user') as AuthUser | undefined;
+  if (!user?.userId) return c.json({ items: [] });
  const [rows] = await pool.query<RowDataPacket[]>(
-    `SELECT id, type, module, content, contact, user_name, status, created_at
+    `SELECT id, type, module, content, contact, screenshots, status,
+            reply_content, reply_user, reply_at, created_at
       FROM bi_user_feedback
+       WHERE user_id = ?
       ORDER BY created_at DESC
-       LIMIT ?`,
-    [limit],
+       LIMIT 100`,
+    [user.userId],
  );
  return c.json({ items: rows });
 });

+// GET /api/feedback/list — 管理列表（含全部反馈）
+app.get('/list', async (c) => {
+  await ensureTable();
+  const limit = Math.min(500, Math.max(1, Number(c.req.query('limit')) || 100));
+  const status = c.req.query('status') || '';
+  const where: string[] = ['1=1'];
+  const params: (string | number)[] = [];
+  if (VALID_STATUS.has(status)) {
+    where.push('status = ?');
+    params.push(status);
+  }
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT id, type, module, content, contact, screenshots, user_id, user_name, status,
+            reply_content, reply_user, reply_at, created_at
+       FROM bi_user_feedback
+       WHERE ${where.join(' AND ')}
+       ORDER BY created_at DESC
+       LIMIT ?`,
+    [...params, limit],
+  );
+  return c.json({ items: rows });
+});
+
+// PATCH /api/feedback/:id — 管理：更新状态与回复
+app.patch('/:id', async (c) => {
+  await ensureTable();
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id) || id <= 0) return c.json({ ok: false, message: 'id 不合法' }, 400);
+  const body = await c.req.json().catch(() => ({})) as { status?: string; reply?: string };
+  const fields: string[] = [];
+  const params: (string | number | null)[] = [];
+  if (body.status) {
+    if (!VALID_STATUS.has(body.status)) return c.json({ ok: false, message: '状态不合法' }, 400);
+    fields.push('status = ?');
+    params.push(body.status);
+  }
+  if (typeof body.reply === 'string') {
+    const reply = body.reply.trim().slice(0, 2000);
+    fields.push('reply_content = ?', 'reply_user = ?', 'reply_at = NOW()');
+    const user = (c as { get?: (k: string) => unknown }).get?.('user') as AuthUser | undefined;
+    params.push(reply || null, user?.userName || user?.userId || null);
+  }
+  if (fields.length === 0) return c.json({ ok: false, message: '没有可更新的字段' }, 400);
+  params.push(id);
+  await pool.query(`UPDATE bi_user_feedback SET ${fields.join(', ')} WHERE id = ?`, params);
+  return c.json({ ok: true });
+});
+
 export default app;