node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/app/(admin)/feedback/page.tsx

@@ -0,0 +1,573 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  App, Alert, Badge, Button, Card, Col, Descriptions, Form, Input, Modal, Popconfirm, Row, Select,
+  Space, Table, Tag, Typography,
+} from 'antd';
+import { usePathname } from 'next/navigation';
+import {
+  KeyOutlined,
+  MessageOutlined,
+  SendOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import type { ColumnsType } from 'antd/es/table';
+import FeedbackAiModal from '@/components/FeedbackAiModal';
+import FeedbackReportModal from '@/components/FeedbackReportModal';
+import { useAuth } from '@/components/AuthContext';
+import { fmtDateTime } from '@/lib/format';
+import { fs, MILITARY } from '@/lib/theme';
+import { formRules } from '@/lib/formRules';
+
+/**
+ * 问题反馈页（骨架内置）。
+ *
+ * ★ 为什么必须有这个模块：
+ *   比赛演示时评委最常问的一句是「如果有问题怎么反馈」。
+ *   有一个能提交、能跟踪状态、管理员能回复的反馈闭环，
+ *   比任何功能都更能体现"这是个能上线的系统"。
+ *
+ * 权限设计：
+ *   - 任何登录用户都能提交（不需要额外权限码）
+ *   - 普通用户只看自己的反馈
+ *   - 管理员看全部，并能改状态、回复
+ */
+
+const TYPE_OPTIONS = [
+  { label: '功能异常', value: 'bug', color: 'red' },
+  { label: '体验建议', value: 'suggest', color: 'blue' },
+  { label: '数据问题', value: 'data', color: 'orange' },
+  { label: '其他', value: 'other', color: 'default' },
+  // 账号申诉由「忘记密码 → 人工申诉」在未登录状态下提交，普通反馈弹窗不提供该类型
+  { label: '账号申诉', value: 'account', color: 'purple' },
+];
+const SUBMIT_TYPES = TYPE_OPTIONS.filter((t) => t.value !== 'account');
+const STATUS_OPTIONS = [
+  { label: '待处理', value: 'pending', color: 'red' },
+  { label: '处理中', value: 'doing', color: 'blue' },
+  { label: '已解决', value: 'resolved', color: 'green' },
+  { label: '已关闭', value: 'closed', color: 'default' },
+];
+
+interface Row {
+  id: string;
+  type: string;
+  title: string;
+  detail: string;
+  pagePath: string | null;
+  contact: string | null;
+  attachments: string | null;
+  status: string;
+  reply: string | null;
+  username: string;
+  createdAt: string;
+}
+
+type Attachment = { name: string; url: string; size?: number };
+
+/** 附件字段是 JSON 字符串；坏数据一律当没有附件，不能因此打不开详情 */
+function parseAttachments(raw: string | null | undefined): Attachment[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (a): a is Attachment =>
+        Boolean(a) && typeof (a as Attachment).url === 'string' && typeof (a as Attachment).name === 'string'
+    );
+  } catch {
+    return [];
+  }
+}
+
+const typeMeta = (t: string) => TYPE_OPTIONS.find((x) => x.value === t) ?? TYPE_OPTIONS[3];
+const statusMeta = (s: string) => STATUS_OPTIONS.find((x) => x.value === s) ?? STATUS_OPTIONS[0];
+
+export default function FeedbackPage() {
+  const { message } = App.useApp();
+  const { user } = useAuth();
+  const isSuper = Boolean(user?.isSuper);
+  const pathname = usePathname();
+  const [list, setList] = useState<Row[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [canManage, setCanManage] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [open, setOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [detail, setDetail] = useState<Row | null>(null);
+  const [aiTarget, setAiTarget] = useState<Row | null>(null);
+  const [reportOpen, setReportOpen] = useState(false);
+  const [approving, setApproving] = useState(false);
+  const [form] = Form.useForm();
+
+  const load = useCallback(
+    async (p = page) => {
+      setLoading(true);
+      try {
+        const qs = new URLSearchParams({ page: String(p), pageSize: '10' });
+        if (statusFilter) qs.set('status', statusFilter);
+        const r = await fetch(`/api/feedback?${qs.toString()}`);
+        const j = (await r.json()) as {
+          code: number;
+          data?: { list: Row[]; total: number; canManage: boolean };
+          message?: string;
+        };
+        // 注意：脚手架 ok() 的成功码是 0
+        if (j.code === 0 && j.data) {
+          setList(j.data.list);
+          setTotal(j.data.total);
+          setCanManage(j.data.canManage);
+        } else {
+          message.error(j.message || '加载失败');
+        }
+      } catch (e) {
+        message.error(`加载失败：${String(e)}`);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [page, statusFilter, message]
+  );
+
+  useEffect(() => {
+    void load(page);
+  }, [load, page]);
+
+  /**
+   * 单条深链：待办/消息里的 link 是 `/feedback?id=xxx`
+   * （管理员那条还会带 `&status=pending`，进去就是待处理那一屏）。
+   *
+   * 用 window.location 读参数而不是 useSearchParams —— 页面已 'use client'，
+   * 但 useSearchParams 会让整页在构建期要求 Suspense 边界，没必要。
+   * 只认第一次：详情里改完状态会 load 重排列表，此时 URL 里的 id 还在，
+   * 不拦一下就会把刚关掉的弹窗又弹回来。
+   */
+  const linkedOnce = useRef(false);
+  const openById = useCallback(
+    async (id: string) => {
+      try {
+        const r = await fetch(`/api/feedback?id=${encodeURIComponent(id)}`);
+        const j = (await r.json()) as {
+          code: number;
+          data?: { list: Row[]; canManage?: boolean };
+          message?: string;
+        };
+        const row = j.code === 0 ? j.data?.list?.[0] : undefined;
+        if (!row) {
+          message.error(j.message || '反馈不存在或已被删除');
+          return;
+        }
+        if (typeof j.data?.canManage === 'boolean') setCanManage(j.data.canManage);
+        setDetail(row);
+      } catch (e) {
+        message.error(`加载失败：${String(e)}`);
+      }
+    },
+    [message]
+  );
+
+  useEffect(() => {
+    if (linkedOnce.current) return;
+    linkedOnce.current = true;
+    const sp = new URLSearchParams(window.location.search);
+    const status = sp.get('status');
+    // 管理员从待办点进来带 status=pending：先把列表筛成待处理，
+    // 关掉详情看到的就是他要处理的那一屏，而不是全部历史。
+    // 注意这里只能 setState，真正的请求交给上面 load 的依赖变化触发。
+    if (status && STATUS_OPTIONS.some((s) => s.value === status)) {
+      setStatusFilter(status);
+      setPage(1);
+    }
+    const id = sp.get('id');
+    if (id) void openById(id);
+  }, [openById]);
+
+  const submit = async (v: { type: string; title: string; detail: string; contact?: string }) => {
+    setSubmitting(true);
+    try {
+      const r = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...v, pagePath: pathname }),
+      });
+      const j = (await r.json()) as { code: number; message?: string };
+      if (j.code === 0) {
+        message.success('反馈已提交，感谢你的反馈');
+        setOpen(false);
+        form.resetFields();
+        setPage(1);
+        await load(1);
+      } else {
+        message.error(j.message || '提交失败');
+      }
+    } catch (e) {
+      message.error(`提交失败：${String(e)}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const updateFeedback = async (id: string, patch: { status?: string; reply?: string }) => {
+    try {
+      const r = await fetch('/api/feedback', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, ...patch }),
+      });
+      const j = (await r.json()) as { code: number; message?: string };
+      if (j.code === 0) {
+        message.success('已更新');
+        await load(page);
+        setDetail(null);
+      } else {
+        message.error(j.message || '更新失败');
+      }
+    } catch (e) {
+      message.error(`更新失败：${String(e)}`);
+    }
+  };
+
+  /** 超管通过账号申诉：密码重置为 123456，并标记首次登录改密 */
+  const approveRecovery = async (id: string) => {
+    setApproving(true);
+    try {
+      const r = await fetch('/api/feedback/approve', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+      const j = (await r.json()) as { code: number; message?: string };
+      if (j.code === 0) {
+        message.success('已通过申诉，密码已重置为 123456');
+        await load(page);
+        setDetail(null);
+      } else {
+        message.error(j.message || '处理失败');
+      }
+    } catch (e) {
+      message.error(`处理失败：${String(e)}`);
+    } finally {
+      setApproving(false);
+    }
+  };
+
+  const detailAttachments = detail ? parseAttachments(detail.attachments) : [];
+
+  const columns: ColumnsType<Row> = [
+    {
+      title: '类型',
+      dataIndex: 'type',
+      width: 96,
+      render: (v: string) => {
+        const m = typeMeta(v);
+        return <Tag color={m.color}>{m.label}</Tag>;
+      },
+    },
+    { title: '标题', dataIndex: 'title', ellipsis: true },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 96,
+      render: (v: string) => {
+        const m = statusMeta(v);
+        return <Badge status={v === 'resolved' ? 'success' : v === 'pending' ? 'error' : v === 'doing' ? 'processing' : 'default'} text={m.label} />;
+      },
+    },
+    ...(canManage ? [{ title: '提交人', dataIndex: 'username', width: 110 }] : []),
+    {
+      title: '提交时间',
+      dataIndex: 'createdAt',
+      width: 160,
+      render: (v: string) => fmtDateTime(v),
+    },
+    {
+      title: '操作',
+      width: 176,
+      render: (_: unknown, r: Row) => (
+        <Space size={0}>
+          <Button type="link" size="small" onClick={() => setDetail(r)}>
+            查看
+          </Button>
+          {/* 智能处理会按白名单执行"账号/员工"类操作，没有处理权限的普通用户点了
+              只会得到"没有权限"。按钮就该只给能处理的人看，别制造假失败。 */}
+          {canManage && (
+            <Button
+              type="link"
+              size="small"
+              icon={<ThunderboltOutlined />}
+              onClick={() => setAiTarget(r)}
+              style={{ color: MILITARY.primary, fontWeight: 600 }}
+            >
+              智能处理
+            </Button>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ padding: 16 }}>
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 6, height: 6, background: MILITARY.accent, display: 'inline-block' }} />
+          <span style={{ fontSize: fs(10.5), letterSpacing: 3, color: MILITARY.textMuted, fontWeight: 600 }}>
+            FEEDBACK
+          </span>
+        </div>
+        <div style={{ fontSize: fs(20), fontWeight: 700, color: MILITARY.text, marginTop: 4 }}>
+          <MessageOutlined style={{ color: MILITARY.primary, marginRight: 8, fontSize: fs(18) }} />
+          问题反馈
+        </div>
+        <div style={{ fontSize: fs(12.5), color: MILITARY.textMuted, marginTop: 4 }}>
+          使用中遇到问题或有改进建议，都可以在这里提交。管理员会跟进处理并在下方回复。
+        </div>
+      </div>
+
+      <Card
+        title={canManage ? '全部反馈' : '我的反馈'}
+        extra={
+          <Space wrap>
+            {isSuper && (
+              <Button
+                icon={<ThunderboltOutlined />}
+                onClick={() => setReportOpen(true)}
+                style={{
+                  borderColor: MILITARY.accent,
+                  color: MILITARY.primary,
+                  background: MILITARY.accentSoft,
+                  fontWeight: 600,
+                }}
+              >
+                智能生成报告
+              </Button>
+            )}
+            <Select
+              allowClear
+              size="small"
+              style={{ width: 120 }}
+              placeholder="全部状态"
+              value={statusFilter || undefined}
+              onChange={(v) => {
+                setStatusFilter(v ?? '');
+                setPage(1);
+              }}
+              options={STATUS_OPTIONS.map((s) => ({ label: s.label, value: s.value }))}
+            />
+            <Button type="primary" icon={<SendOutlined />} onClick={() => setOpen(true)}>
+              提交反馈
+            </Button>
+          </Space>
+        }
+      >
+        <Table
+          rowKey="id"
+          size="small"
+          loading={loading}
+          columns={columns}
+          dataSource={list}
+          pagination={{
+            current: page,
+            pageSize: 10,
+            total,
+            onChange: setPage,
+            showTotal: (t) => `共 ${t} 条`,
+          }}
+          locale={{ emptyText: '还没有反馈，遇到问题随时告诉我们' }}
+        />
+      </Card>
+
+      {/* 提交弹窗 */}
+      <Modal
+        title="提交反馈"
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={() => form.submit()}
+        okText="提交"
+        cancelText="取消"
+        confirmLoading={submitting}
+      >
+        <Form form={form} layout="vertical" initialValues={{ type: 'bug' }} onFinish={submit}>
+          <Form.Item name="type" label="反馈类型" rules={[{ required: true }]}>
+            <Select options={SUBMIT_TYPES.map((t) => ({ label: t.label, value: t.value }))} />
+          </Form.Item>
+          <Form.Item
+            name="title"
+            label="标题"
+            rules={[{ required: true, message: '请简单概括问题（至少 2 个字）' }]}
+          >
+            <Input maxLength={80} showCount placeholder="一句话说明问题，例如：点击保存后列表没有更新" />
+          </Form.Item>
+          <Form.Item
+            name="detail"
+            label="详细描述"
+            rules={[{ required: true, message: '请把问题描述清楚（至少 5 个字）' }]}
+          >
+            <Input.TextArea
+              rows={5}
+              maxLength={2000}
+              showCount
+              placeholder="可以写：在哪个页面、做了什么操作、期望看到什么、实际看到什么"
+            />
+          </Form.Item>
+          <Form.Item
+            name="contact"
+            label="联系方式（可选）"
+            rules={formRules('contact', { label: '联系方式' })}
+          >
+            <Input maxLength={254} placeholder="手机或邮箱，方便管理员回访" />
+          </Form.Item>
+          <Alert
+            type="info"
+            showIcon
+            title="提交时会自动记录当前页面路径，便于定位问题。"
+          />
+        </Form>
+      </Modal>
+
+      {/* 详情 / 处理弹窗 */}
+      <Modal
+        title="反馈详情"
+        open={!!detail}
+        onCancel={() => setDetail(null)}
+        footer={null}
+        width={640}
+      >
+        {detail && (
+          <>
+            <Descriptions column={1} size="small" bordered>
+              <Descriptions.Item label="类型">
+                <Tag color={typeMeta(detail.type).color}>{typeMeta(detail.type).label}</Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="标题">{detail.title}</Descriptions.Item>
+              <Descriptions.Item label="状态">
+                <Tag color={statusMeta(detail.status).color}>{statusMeta(detail.status).label}</Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="提交人">{detail.username}</Descriptions.Item>
+              <Descriptions.Item label="提交时间">{fmtDateTime(detail.createdAt)}</Descriptions.Item>
+              {detail.pagePath && (
+                <Descriptions.Item label="所在页面">
+                  <Typography.Text code>{detail.pagePath}</Typography.Text>
+                </Descriptions.Item>
+              )}
+              {detail.contact && (
+                <Descriptions.Item label="联系方式">{detail.contact}</Descriptions.Item>
+              )}
+              <Descriptions.Item label="详细描述">
+                <div style={{ whiteSpace: 'pre-wrap' }}>{detail.detail}</div>
+              </Descriptions.Item>
+              {detailAttachments.length > 0 && (
+                <Descriptions.Item label="证明材料">
+                  <Space direction="vertical" size={2}>
+                    {detailAttachments.map((a) => (
+                      <a key={a.url} href={a.url} target="_blank" rel="noreferrer">
+                        {a.name}
+                      </a>
+                    ))}
+                  </Space>
+                </Descriptions.Item>
+              )}
+              {detail.reply && (
+                <Descriptions.Item label="管理员回复">
+                  <div style={{ whiteSpace: 'pre-wrap' }}>{detail.reply}</div>
+                </Descriptions.Item>
+              )}
+            </Descriptions>
+
+            {canManage && (
+              <Card size="small" title="处理" style={{ marginTop: 16 }}>
+                {isSuper &&
+                  detail.type === 'account' &&
+                  detail.status !== 'resolved' &&
+                  detail.status !== 'closed' && (
+                  <Alert
+                    type="warning"
+                    showIcon
+                    style={{ marginBottom: 12 }}
+                    title="通过申诉会将密码重置为 123456"
+                    description="用户下次登录会被强制要求修改密码。请先核对账号信息与证明材料。"
+                  />
+                )}
+                <Row gutter={12}>
+                  {isSuper &&
+                    detail.type === 'account' &&
+                    detail.status !== 'resolved' &&
+                    detail.status !== 'closed' && (
+                    <Col span={24}>
+                      <Popconfirm
+                        title="确认通过该账号申诉？"
+                        description="通过后密码将重置为 123456，用户首次登录需要修改密码。"
+                        okText="通过并重置"
+                        cancelText="取消"
+                        onConfirm={() => void approveRecovery(detail.id)}
+                      >
+                        <Button
+                          type="primary"
+                          danger
+                          icon={<KeyOutlined />}
+                          loading={approving}
+                          style={{ marginBottom: 12 }}
+                        >
+                          通过申诉并重置密码
+                        </Button>
+                      </Popconfirm>
+                    </Col>
+                  )}
+                  <Col span={24}>
+                    <Space wrap style={{ marginBottom: 12 }}>
+                      {STATUS_OPTIONS.map((s) => (
+                        <Button
+                          key={s.value}
+                          size="small"
+                          type={detail.status === s.value ? 'primary' : 'default'}
+                          onClick={() => void updateFeedback(detail.id, { status: s.value })}
+                        >
+                          {s.label}
+                        </Button>
+                      ))}
+                    </Space>
+                  </Col>
+                  <Col span={24}>
+                    <Input.TextArea
+                      rows={3}
+                      placeholder="给用户的回复（可选）"
+                      defaultValue={detail.reply ?? ''}
+                      id="fb-reply"
+                    />
+                    <div style={{ marginTop: 8, textAlign: 'right' }}>
+                      <Button
+                        type="primary"
+                        onClick={() => {
+                          const el = document.getElementById('fb-reply') as HTMLTextAreaElement | null;
+                          void updateFeedback(detail.id, { reply: el?.value ?? '' });
+                        }}
+                      >
+                        保存回复
+                      </Button>
+                    </div>
+                  </Col>
+                </Row>
+              </Card>
+            )}
+          </>
+        )}
+      </Modal>
+
+      {/* 单条反馈智能处理：模型识别意图 + 服务端校验执行 + 自动写回复 */}
+      <FeedbackAiModal
+        open={!!aiTarget}
+        feedback={aiTarget ? { id: aiTarget.id, title: aiTarget.title } : null}
+        onClose={() => setAiTarget(null)}
+        onApplied={() => void load(page)}
+      />
+
+      {/* 智能分析报告（仅超管） */}
+      {isSuper && (
+        <FeedbackReportModal open={reportOpen} onClose={() => setReportOpen(false)} />
+      )}
+    </div>
+  );
+}