node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/FeedbackReportModal.tsx

@@ -0,0 +1,479 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Alert, App, Button, Modal, Space, Spin } from 'antd';
+import {
+  CloseOutlined,
+  FileTextOutlined,
+  ReloadOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import dayjs from 'dayjs';
+import Markdown from '@/components/Markdown';
+import { formatElapsed, useElapsed } from '@/components/feedback';
+import { fs, MILITARY } from '@/lib/theme';
+
+/**
+ * 智能反馈分析报告弹窗。
+ *
+ * 只由超管从反馈页的「智能生成报告」进入；打开即自动请求一次，
+ * 之后可以「重新生成」。报告内容由后端调用本地模型生成，
+ * 这里只负责把结果排成一份像样的「档案」：
+ *   深军绿封面 + 统计条 + 白纸正文 + 底部操作栏。
+ *
+ * 为什么不用普通 Modal 直接塞一段文字：
+ *   这是比赛演示的亮点功能，评委第一眼看到的是排版。
+ *   封面、统计卡、纸张层次能把「AI 真的读了数据」这件事讲清楚。
+ */
+
+export interface FeedbackReportStats {
+  total: number;
+  pending: number;
+  doing: number;
+  resolved: number;
+  closed: number;
+  bug: number;
+  suggest: number;
+  data: number;
+  other: number;
+  last7: number;
+  users: number;
+}
+
+interface ReportPayload {
+  report: string;
+  stats: FeedbackReportStats;
+  total: number;
+  analyzed: number;
+  truncated: boolean;
+  model: string;
+  generatedAt: string;
+}
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** 封面小徽标：卡其描边的半透明胶囊 */
+function MetaPill({ children }: { children: ReactNode }) {
+  return (
+    <span
+      style={{
+        fontSize: fs(11.5),
+        padding: '3px 10px',
+        borderRadius: 999,
+        border: '1px solid var(--wb-brand-line)',
+        background: 'var(--wb-brand-glass)',
+        color: 'var(--wb-brand-text)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/** 封面四角的定位角标（纯边框，呼应全站的军绿档案风格） */
+function CornerBrackets() {
+  const base: React.CSSProperties = {
+    position: 'absolute',
+    width: 14,
+    height: 14,
+    borderColor: 'var(--wb-brand-tint)',
+    borderStyle: 'solid',
+    borderWidth: 0,
+  };
+  return (
+    <>
+      <span style={{ ...base, left: 10, top: 10, borderLeftWidth: 1, borderTopWidth: 1 }} />
+      <span style={{ ...base, right: 10, top: 10, borderRightWidth: 1, borderTopWidth: 1 }} />
+      <span style={{ ...base, left: 10, bottom: 10, borderLeftWidth: 1, borderBottomWidth: 1 }} />
+      <span style={{ ...base, right: 10, bottom: 10, borderRightWidth: 1, borderBottomWidth: 1 }} />
+    </>
+  );
+}
+
+function StatTile({
+  label,
+  value,
+  suffix,
+  hint,
+  color,
+}: {
+  label: string;
+  value: number;
+  suffix: string;
+  hint: string;
+  color: string;
+}) {
+  return (
+    <div
+      style={{
+        background: MILITARY.card,
+        border: `1px solid ${MILITARY.borderSoft}`,
+        borderLeft: `3px solid ${color}`,
+        borderRadius: 10,
+        padding: '10px 14px',
+        boxShadow: '0 2px 8px rgba(43,55,33,.04)',
+      }}
+    >
+      <div style={{ fontSize: fs(11), color: MILITARY.textMuted, letterSpacing: 0.5 }}>{label}</div>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 1 }}>
+        <span
+          style={{
+            fontSize: fs(24),
+            fontWeight: 700,
+            color,
+            lineHeight: 1.25,
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {value}
+        </span>
+        <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>{suffix}</span>
+      </div>
+      <div style={{ fontSize: fs(11), color: MILITARY.textMuted, marginTop: 1 }}>{hint}</div>
+    </div>
+  );
+}
+
+export default function FeedbackReportModal({ open, onClose }: Props) {
+  const { message } = App.useApp();
+  const [data, setData] = useState<ReportPayload | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const pendingRef = useRef(false);
+  const autoStartedRef = useRef(false);
+  const elapsed = useElapsed(loading);
+
+  const generate = useCallback(async () => {
+    if (pendingRef.current) return;
+    pendingRef.current = true;
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch('/api/feedback/report', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: '{}',
+      });
+      const j = (await res.json()) as {
+        code: number;
+        data?: ReportPayload;
+        message?: string;
+      };
+      // 注意：脚手架 ok() 的成功码是 0，不是 200
+      if (j.code !== 0 || !j.data) {
+        setError(j.message || '生成失败，请稍后重试');
+        return;
+      }
+      setData(j.data);
+      message.success(`已分析 ${j.data.analyzed} 条反馈并生成报告`);
+    } catch (e) {
+      setError(`生成失败：${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      pendingRef.current = false;
+      setLoading(false);
+    }
+  }, [message]);
+
+  // 首次打开自动生成；关闭再打开时保留上一次结果，避免重复消耗模型
+  useEffect(() => {
+    if (!open || autoStartedRef.current) return;
+    autoStartedRef.current = true;
+    void generate();
+  }, [open, generate]);
+
+  const stage =
+    elapsed >= 20_000
+      ? '模型仍在深入分析，请再稍等…'
+      : elapsed >= 8_000
+        ? '正在归纳用户诉求、排出改进优先级…'
+        : '正在读取全部反馈并交给本地模型…';
+
+  const tiles: { label: string; value: number; suffix: string; hint: string; color: string }[] =
+    data
+      ? [
+          {
+            label: '反馈总数',
+            value: data.stats.total,
+            suffix: '条',
+            hint: `近 7 天新增 ${data.stats.last7} 条`,
+            color: MILITARY.primary,
+          },
+          {
+            label: '待处理',
+            value: data.stats.pending,
+            suffix: '条',
+            hint: `处理中 ${data.stats.doing} 条`,
+            color: MILITARY.warning,
+          },
+          {
+            label: '已解决',
+            value: data.stats.resolved,
+            suffix: '条',
+            hint: `已关闭 ${data.stats.closed} 条`,
+            color: MILITARY.success,
+          },
+          {
+            label: '体验建议',
+            value: data.stats.suggest,
+            suffix: '条',
+            hint: `功能诉求主要来源`,
+            color: MILITARY.accent,
+          },
+        ]
+      : [];
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={920}
+      centered
+      closable={false}
+      styles={{
+        body: {
+          padding: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: '86vh',
+          overflow: 'hidden',
+        },
+      }}
+    >
+      {/* ---------------- 封面 ---------------- */}
+      <div
+        style={{
+          position: 'relative',
+          flexShrink: 0,
+          overflow: 'hidden',
+          padding: '22px 26px 20px',
+          borderRadius: '8px 8px 0 0',
+          borderBottom: '2px solid var(--wb-brand-tint)',
+          backgroundImage: 'var(--wb-brand-panel)',
+        }}
+      >
+        <CornerBrackets />
+        <Button
+          type="text"
+          shape="circle"
+          aria-label="关闭"
+          icon={<CloseOutlined />}
+          onClick={onClose}
+          style={{ position: 'absolute', right: 12, top: 12, color: 'var(--wb-brand-text-soft)' }}
+        />
+
+        <div style={{ position: 'relative' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ width: 6, height: 6, background: MILITARY.accent, display: 'inline-block' }} />
+            <span
+              style={{
+                fontSize: fs(10.5),
+                letterSpacing: 3,
+                color: 'var(--wb-brand-kicker)',
+                fontWeight: 600,
+              }}
+            >
+              FEEDBACK INTELLIGENCE · AI ANALYSIS
+            </span>
+          </div>
+
+          <div
+            style={{
+              fontSize: fs(23),
+              fontWeight: 700,
+              color: 'var(--wb-brand-text)',
+              marginTop: 8,
+              letterSpacing: 0.5,
+            }}
+          >
+            用户反馈分析报告
+          </div>
+          <div style={{ fontSize: fs(12.5), color: 'var(--wb-brand-text-soft)', marginTop: 6 }}>
+            基于全部真实反馈，自动归纳呼声最高的功能、主要问题与改进优先级
+          </div>
+
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
+            {data ? (
+              <>
+                <MetaPill>生成于 {dayjs(data.generatedAt).format('YYYY-MM-DD HH:mm')}</MetaPill>
+                <MetaPill>
+                  分析 {data.analyzed} 条{data.truncated ? ` / 共 ${data.total} 条` : ''}
+                </MetaPill>
+                <MetaPill>{data.model}</MetaPill>
+              </>
+            ) : (
+              <MetaPill>{loading ? 'AI 正在分析全部反馈' : '等待生成'}</MetaPill>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ---------------- 统计条 ---------------- */}
+      {data && (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+            gap: 10,
+            padding: '14px 22px 4px',
+            background: MILITARY.paper,
+            flexShrink: 0,
+          }}
+        >
+          {tiles.map((t) => (
+            <StatTile key={t.label} {...t} />
+          ))}
+        </div>
+      )}
+
+      {/* ---------------- 报告正文 ---------------- */}
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflowY: 'auto',
+          padding: '12px 22px 18px',
+          background: MILITARY.paper,
+        }}
+      >
+        {loading ? (
+          <div
+            style={{
+              minHeight: 240,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              textAlign: 'center',
+              color: MILITARY.textMuted,
+              fontSize: fs(13),
+            }}
+          >
+            <div
+              style={{
+                width: 60,
+                height: 60,
+                borderRadius: '50%',
+                display: 'grid',
+                placeItems: 'center',
+                background: MILITARY.soft,
+                border: `1px solid ${MILITARY.softStrong}`,
+                marginBottom: 16,
+              }}
+            >
+              <Spin />
+            </div>
+            <div style={{ color: MILITARY.text, fontWeight: 600, fontSize: fs(14) }}>{stage}</div>
+            <div style={{ marginTop: 6, fontSize: fs(12) }}>已等待 {formatElapsed(elapsed)}</div>
+            <div style={{ marginTop: 10, fontSize: fs(11.5), color: MILITARY.textMuted }}>
+              本地模型分析全部反馈通常需要 10~60 秒，请勿关闭
+            </div>
+          </div>
+        ) : error ? (
+          <div style={{ paddingTop: 8 }}>
+            <Alert
+              type="error"
+              showIcon
+              title="报告生成失败"
+              description={error}
+              action={
+                <Button size="small" icon={<ReloadOutlined />} onClick={() => void generate()}>
+                  重试
+                </Button>
+              }
+            />
+          </div>
+        ) : data ? (
+          <>
+            <div
+              style={{
+                background: MILITARY.card,
+                border: `1px solid ${MILITARY.borderSoft}`,
+                borderRadius: 12,
+                padding: '18px 22px 20px',
+                boxShadow: '0 10px 28px rgba(43,55,33,.06)',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  paddingBottom: 10,
+                  marginBottom: 10,
+                  borderBottom: `1px dashed ${MILITARY.border}`,
+                }}
+              >
+                <span
+                  style={{
+                    width: 26,
+                    height: 26,
+                    borderRadius: 7,
+                    display: 'grid',
+                    placeItems: 'center',
+                    background: MILITARY.soft,
+                    border: `1px solid ${MILITARY.softStrong}`,
+                    color: MILITARY.primary,
+                    fontSize: fs(13),
+                  }}
+                >
+                  <FileTextOutlined />
+                </span>
+                <span style={{ fontSize: fs(13), fontWeight: 600, color: MILITARY.text }}>AI 分析正文</span>
+                <span style={{ marginLeft: 'auto', fontSize: fs(11), color: MILITARY.textMuted }}>
+                  {data.truncated
+                    ? `样本：最近 ${data.analyzed} / ${data.total} 条`
+                    : `样本：全部 ${data.total} 条`}
+                </span>
+              </div>
+              <Markdown text={data.report} style={{ fontSize: fs(13.5) }} />
+            </div>
+            <div
+              style={{
+                marginTop: 10,
+                textAlign: 'right',
+                fontSize: fs(11),
+                color: MILITARY.textMuted,
+              }}
+            >
+              报告由本地大模型生成 · 数据不出内网 · 参与用户 {data.stats.users} 人
+            </div>
+          </>
+        ) : null}
+      </div>
+
+      {/* ---------------- 底部操作 ---------------- */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          padding: '12px 22px',
+          borderTop: `1px solid ${MILITARY.borderSoft}`,
+          background: MILITARY.card,
+          flexShrink: 0,
+        }}
+      >
+        <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>
+          AI 结论仅供参考，重要决策请结合原始反馈复核
+        </span>
+        <Space>
+          <Button onClick={onClose}>关闭</Button>
+          <Button
+            type="primary"
+            icon={<ThunderboltOutlined />}
+            loading={loading}
+            onClick={() => void generate()}
+          >
+            {data ? '重新生成' : error ? '重试' : '生成报告'}
+          </Button>
+        </Space>
+      </div>
+    </Modal>
+  );
+}