node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/components/FeedbackAiModal.tsx

@@ -0,0 +1,476 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Alert, App, Button, Descriptions, Modal, Space, Spin, Tag, Typography } from 'antd';
+import {
+  CheckCircleFilled,
+  CloseCircleFilled,
+  InfoCircleFilled,
+  ReloadOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import { formatElapsed, useElapsed } from '@/components/feedback';
+import { fs, MILITARY } from '@/lib/theme';
+
+/**
+ * 反馈智能处理弹窗。
+ *
+ * 打开即请求 /api/feedback/ai：模型先识别意图，服务端再按白名单执行，
+ * 最后把「执行轨迹 + 变更明细 + 给用户的回复」原样返回。
+ *
+ * 这里刻意不弹 message.error：
+ *   智能处理失败也是一次「有内容的分析」，用弹窗里的 Alert 展示，
+ *   比右下角一个红条更能让用户知道下一步该做什么。
+ */
+
+interface AiResult {
+  feedbackId: string;
+  intent: string;
+  intentLabel: string;
+  confidence: number;
+  outcome: 'done' | 'need_info' | 'unsupported' | 'failed';
+  outcomeLabel: string;
+  status: string;
+  statusLabel: string;
+  analysis: string;
+  reply: string;
+  steps: { label: string; detail: string; ok: boolean }[];
+  changes: { label: string; from: string; to: string }[];
+  model: string;
+  elapsedMs: number;
+  fallback: boolean;
+}
+
+interface Props {
+  open: boolean;
+  feedback: { id: string; title: string } | null;
+  onClose: () => void;
+  onApplied: () => void;
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  pending: 'red',
+  doing: 'blue',
+  resolved: 'green',
+  closed: 'default',
+};
+
+const OUTCOME_TONE: Record<
+  AiResult['outcome'],
+  { color: string; bg: string; border: string; icon: ReactNode }
+> = {
+  done: {
+    color: MILITARY.success,
+    // 底色走皮肤变量：写死浅绿在炫酷（深色）皮肤上会变成"浅底浅字"
+    bg: MILITARY.successBg,
+    border: MILITARY.borderSoft,
+    icon: <CheckCircleFilled />,
+  },
+  need_info: {
+    color: MILITARY.warning,
+    bg: MILITARY.warningBg,
+    border: MILITARY.borderSoft,
+    icon: <InfoCircleFilled />,
+  },
+  unsupported: {
+    color: MILITARY.textSecondary,
+    bg: MILITARY.paper,
+    border: MILITARY.borderSoft,
+    icon: <InfoCircleFilled />,
+  },
+  failed: {
+    color: MILITARY.warning,
+    bg: MILITARY.warningBg,
+    border: MILITARY.borderSoft,
+    icon: <InfoCircleFilled />,
+  },
+};
+
+function stageText(ms: number): string {
+  if (ms >= 20_000) return '模型仍在深入分析这条反馈，请再稍等…';
+  if (ms >= 8_000) return '正在核对账号、员工与部门数据…';
+  return '正在理解反馈内容、识别可执行诉求…';
+}
+
+export default function FeedbackAiModal({ open, feedback, onClose, onApplied }: Props) {
+  const { message } = App.useApp();
+  const [data, setData] = useState<AiResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [pendingTitle, setPendingTitle] = useState('');
+  const seqRef = useRef(0);
+  const elapsed = useElapsed(loading);
+
+  const run = useCallback(async () => {
+    if (!feedback) return;
+    const seq = ++seqRef.current;
+    setLoading(true);
+    setError('');
+    setData(null);
+    setPendingTitle(feedback.title);
+    try {
+      const res = await fetch('/api/feedback/ai', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: feedback.id }),
+      });
+      const j = (await res.json().catch(() => null)) as
+        | { code: number; data?: AiResult; message?: string }
+        | null;
+      if (seq !== seqRef.current) return;
+      // 脚手架 ok() 的成功码是 0
+      if (!j || j.code !== 0 || !j.data) {
+        setError(j?.message || '智能处理暂时不可用，请稍后重试');
+        return;
+      }
+      setData(j.data);
+      onApplied();
+      if (j.data.outcome === 'done') {
+        message.success(j.data.outcomeLabel);
+      }
+    } catch (e) {
+      if (seq !== seqRef.current) return;
+      setError(`智能处理请求没有完成：${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      if (seq === seqRef.current) setLoading(false);
+    }
+  }, [feedback, message, onApplied]);
+
+  useEffect(() => {
+    if (!open || !feedback) {
+      seqRef.current++;
+      return;
+    }
+    void run();
+    // 只在打开的对象变化时触发，run 内部依赖的都是同一份 feedback
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, feedback?.id]);
+
+  const close = () => {
+    seqRef.current++;
+    setLoading(false);
+    onClose();
+  };
+
+  const tone = data ? OUTCOME_TONE[data.outcome] : OUTCOME_TONE.unsupported;
+
+  return (
+    <Modal
+      open={open}
+      onCancel={close}
+      footer={null}
+      width={760}
+      centered
+      styles={{
+        body: {
+          padding: 0,
+          maxHeight: '86vh',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      }}
+      title={null}
+    >
+      {/* ---------------- 头部 ---------------- */}
+      <div
+        style={{
+          flexShrink: 0,
+          padding: '18px 22px 16px',
+          borderBottom: `1px solid ${MILITARY.borderSoft}`,
+          background: 'var(--wb-brand-panel)',
+          color: 'var(--wb-brand-text)',
+        }}
+      >
+        <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 HANDLER
+          </span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+          <RobotOutlined style={{ color: MILITARY.accent, fontSize: fs(18) }} />
+          <span style={{ fontSize: fs(19), fontWeight: 700, letterSpacing: 0.3 }}>反馈智能处理</span>
+          {data && (
+            <Tag
+              style={{
+                marginLeft: 6,
+                color: tone.color,
+                background: tone.bg,
+                borderColor: tone.border,
+                fontWeight: 600,
+              }}
+            >
+              {data.outcomeLabel}
+            </Tag>
+          )}
+        </div>
+        <div
+          style={{
+            fontSize: fs(12.5),
+            color: 'var(--wb-brand-text-soft)',
+            marginTop: 6,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: '92%',
+          }}
+        >
+          {pendingTitle || feedback?.title}
+        </div>
+      </div>
+
+      {/* ---------------- 正文 ---------------- */}
+      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '16px 22px', background: MILITARY.paper }}>
+        {loading ? (
+          <div
+            style={{
+              minHeight: 260,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              textAlign: 'center',
+              color: MILITARY.textMuted,
+            }}
+          >
+            <div
+              style={{
+                width: 62,
+                height: 62,
+                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) }}>{stageText(elapsed)}</div>
+            <div style={{ marginTop: 6, fontSize: fs(12) }}>已等待 {formatElapsed(elapsed)}</div>
+            <div style={{ marginTop: 10, fontSize: fs(11.5) }}>
+              AI 会先判断诉求，再核对账号/员工数据；信息不完整时不会修改任何数据
+            </div>
+          </div>
+        ) : error ? (
+          <Alert
+            type="warning"
+            showIcon
+            title="这次没有拿到智能处理结果"
+            description={error}
+            action={
+              <Button size="small" icon={<ReloadOutlined />} onClick={() => void run()}>
+                重试
+              </Button>
+            }
+          />
+        ) : data ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div
+              style={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 8,
+                alignItems: 'center',
+                background: MILITARY.card,
+                border: `1px solid ${MILITARY.borderSoft}`,
+                borderRadius: 10,
+                padding: '10px 14px',
+              }}
+            >
+              <Tag color="success" style={{ margin: 0 }}>
+                {data.intentLabel}
+              </Tag>
+              <Tag style={{ margin: 0, background: MILITARY.soft, color: MILITARY.primary, borderColor: MILITARY.softStrong }}>
+                置信度 {Math.round(data.confidence * 100)}%
+              </Tag>
+              <Tag color={STATUS_COLOR[data.status] ?? 'default'} style={{ margin: 0 }}>
+                反馈状态：{data.statusLabel}
+              </Tag>
+              {data.fallback && (
+                <Tag style={{ margin: 0 }} color="warning">
+                  规则兜底
+                </Tag>
+              )}
+              <span style={{ marginLeft: 'auto', fontSize: fs(11.5), color: MILITARY.textMuted }}>
+                耗时 {(data.elapsedMs / 1000).toFixed(1)} 秒 · {data.model}
+              </span>
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                gap: 10,
+                alignItems: 'flex-start',
+                background: tone.bg,
+                border: `1px solid ${tone.border}`,
+                borderRadius: 10,
+                padding: '12px 14px',
+              }}
+            >
+              <span style={{ color: tone.color, fontSize: fs(16), lineHeight: '22px' }}>{tone.icon}</span>
+              <div>
+                <div style={{ fontSize: fs(13.5), fontWeight: 700, color: tone.color }}>
+                  {data.outcomeLabel}
+                </div>
+                <div style={{ fontSize: fs(12.5), color: MILITARY.textSecondary, marginTop: 3 }}>
+                  {data.steps.length
+                    ? data.steps[data.steps.length - 1].detail
+                    : data.analysis || '已完成分析'}
+                </div>
+              </div>
+            </div>
+
+            {data.steps.length > 0 && (
+              <section
+                style={{
+                  background: MILITARY.card,
+                  border: `1px solid ${MILITARY.borderSoft}`,
+                  borderRadius: 10,
+                  padding: '12px 16px',
+                }}
+              >
+                <div style={{ fontSize: fs(12.5), fontWeight: 700, color: MILITARY.text, marginBottom: 8 }}>
+                  AI 处理轨迹
+                </div>
+                <Space direction="vertical" size={6} style={{ width: '100%' }}>
+                  {data.steps.map((s, i) => (
+                    <div key={`${s.label}-${i}`} style={{ display: 'flex', gap: 8, fontSize: fs(12.5) }}>
+                      <span
+                        style={{
+                          color: s.ok ? MILITARY.success : MILITARY.warning,
+                          marginTop: 2,
+                          flexShrink: 0,
+                        }}
+                      >
+                        {s.ok ? <CheckCircleFilled /> : <CloseCircleFilled />}
+                      </span>
+                      <span style={{ color: MILITARY.textSecondary, fontWeight: 600, flexShrink: 0 }}>
+                        {s.label}
+                      </span>
+                      <span style={{ color: MILITARY.textMuted, wordBreak: 'break-all' }}>{s.detail}</span>
+                    </div>
+                  ))}
+                </Space>
+              </section>
+            )}
+
+            {data.changes.length > 0 && (
+              <section
+                style={{
+                  background: MILITARY.card,
+                  border: `1px solid ${MILITARY.borderSoft}`,
+                  borderRadius: 10,
+                  padding: '12px 16px',
+                }}
+              >
+                <div style={{ fontSize: fs(12.5), fontWeight: 700, color: MILITARY.text, marginBottom: 4 }}>
+                  变更明细
+                </div>
+                <Descriptions column={1} size="small" colon={false}>
+                  {data.changes.map((c) => (
+                    <Descriptions.Item key={c.label} label={<span style={{ color: MILITARY.textMuted }}>{c.label}</span>}>
+                      <span style={{ color: MILITARY.textMuted }}>{c.from}</span>
+                      <span style={{ margin: '0 8px', color: MILITARY.accent }}>→</span>
+                      <span style={{ color: MILITARY.success, fontWeight: 600 }}>{c.to}</span>
+                    </Descriptions.Item>
+                  ))}
+                </Descriptions>
+              </section>
+            )}
+
+            <section
+              style={{
+                background: MILITARY.card,
+                border: `1px solid ${MILITARY.borderSoft}`,
+                borderRadius: 10,
+                padding: '12px 16px',
+              }}
+            >
+              <div
+                style={{
+                  fontSize: fs(12.5),
+                  fontWeight: 700,
+                  color: MILITARY.text,
+                  marginBottom: 8,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 6,
+                }}
+              >
+                <ThunderboltOutlined style={{ color: MILITARY.accent }} />
+                已写入反馈的回复
+              </div>
+              <div
+                style={{
+                  whiteSpace: 'pre-wrap',
+                  fontSize: fs(13),
+                  lineHeight: 1.75,
+                  color: MILITARY.textSecondary,
+                  background: MILITARY.paper,
+                  border: `1px dashed ${MILITARY.border}`,
+                  borderRadius: 8,
+                  padding: '10px 12px',
+                }}
+              >
+                {data.reply}
+              </div>
+            </section>
+
+            {data.analysis && (
+              <section
+                style={{
+                  background: MILITARY.card,
+                  border: `1px solid ${MILITARY.borderSoft}`,
+                  borderRadius: 10,
+                  padding: '12px 16px',
+                }}
+              >
+                <div style={{ fontSize: fs(12.5), fontWeight: 700, color: MILITARY.text, marginBottom: 6 }}>
+                  AI 分析与提示
+                </div>
+                <Typography.Paragraph
+                  style={{ margin: 0, fontSize: fs(12.5), color: MILITARY.textSecondary, lineHeight: 1.75 }}
+                >
+                  {data.analysis}
+                </Typography.Paragraph>
+              </section>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      {/* ---------------- 底部 ---------------- */}
+      <div
+        style={{
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          padding: '12px 22px',
+          borderTop: `1px solid ${MILITARY.borderSoft}`,
+          background: MILITARY.card,
+        }}
+      >
+        <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>
+          AI 自动办理全程留痕；信息不足时不会修改任何数据
+        </span>
+        <Space>
+          <Button onClick={close}>关闭</Button>
+          <Button
+            type="primary"
+            icon={<ReloadOutlined />}
+            loading={loading}
+            onClick={() => void run()}
+          >
+            {data ? '重新处理' : '重新尝试'}
+          </Button>
+        </Space>
+      </div>
+    </Modal>
+  );
+}