node-resource-utils 0.0.0-stage → 1.1.8

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

@@ -0,0 +1,469 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  App, Button, Card, Col, DatePicker, Grid, Input, Row, Segmented, Space, Spin,
+} from 'antd';
+import { FileTextOutlined, RobotOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import dayjs, { type Dayjs } from 'dayjs';
+import AiPanel from '@/components/AiPanel';
+import Markdown from '@/components/Markdown';
+import { fs, MILITARY } from '@/lib/theme';
+import { formatElapsed, useElapsed } from '@/components/feedback';
+
+const { RangePicker } = DatePicker;
+
+/**
+ * AI 中心 —— 系统内置的大模型能力。
+ *
+ * 设计语言（军绿）：
+ *   - 顶部一条深军绿指挥带：页头 + 三个信息徽标，给页面一个"主视觉"
+ *   - 两张等高卡片浮在暖白画布上，标题用「图标底 + 主标题 + 副标题」三段式
+ *   - 强调色只用军绿与卡其，不再出现 antd 默认蓝
+ *
+ * 功能没变：左边生成报告，右边一个统一助手（数据问答 + 使用答疑）。
+ */
+
+/** 助手空白态的引导问题。接业务时换成题目里的真实问题（数据类 / 使用类 / 办事类各一条） */
+const ASK_SAMPLES = [
+  '这个月新增了哪些数据？分别是什么类型',
+  '当前数据里有哪些明显的问题或风险？',
+  '这个系统有哪些功能？给我一份快速上手指南',
+  '帮我新增一条员工记录',
+];
+
+const REPORT_TABLES = [
+  { label: '员工（示例）', value: 'Employee', title: '人员情况月报' },
+  { label: '操作日志', value: 'OperationLog', title: '系统操作审计报告' },
+];
+
+const CARD_STYLE: React.CSSProperties = {
+  height: 'calc(100vh - 310px)',
+  minHeight: 520,
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const BODY_STYLE: React.CSSProperties = {
+  flex: 1,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+};
+
+/** 卡片标题：左侧卡其定位条 + 图标底 + 主标题 + 副标题 */
+function CardHeading({
+  icon,
+  title,
+  desc,
+  accent = MILITARY.accent,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  desc: string;
+  accent?: string;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '2px 0 2px 10px',
+        borderLeft: `3px solid ${accent}`,
+      }}
+    >
+      <span
+        style={{
+          width: 30,
+          height: 30,
+          flex: '0 0 30px',
+          borderRadius: 8,
+          display: 'grid',
+          placeItems: 'center',
+          background: MILITARY.soft,
+          border: `1px solid ${MILITARY.softStrong}`,
+          color: MILITARY.primary,
+          fontSize: fs(15),
+        }}
+      >
+        {icon}
+      </span>
+      <span style={{ minWidth: 0 }}>
+        <span style={{ display: 'block', fontSize: fs(15), fontWeight: 600, color: MILITARY.text, lineHeight: 1.35 }}>
+          {title}
+        </span>
+        <span style={{ display: 'block', fontSize: fs(11.5), color: MILITARY.textMuted, marginTop: 1 }}>
+          {desc}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+/** 小徽标（卡其描边胶囊） */
+function Pill({ children, muted = false }: { children: React.ReactNode; muted?: boolean }) {
+  return (
+    <span
+      style={{
+        fontSize: fs(11.5),
+        padding: '2px 9px',
+        borderRadius: 999,
+        border: `1px solid ${muted ? MILITARY.borderSoft : MILITARY.border}`,
+        background: muted ? 'transparent' : MILITARY.paper,
+        color: muted ? MILITARY.textMuted : MILITARY.textSecondary,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+export default function AiCenterPage() {
+  const { message } = App.useApp();
+  const screens = Grid.useBreakpoint();
+  const tall = !!screens.lg;
+
+  const [range, setRange] = useState<[Dayjs, Dayjs]>([dayjs().startOf('month'), dayjs()]);
+  const [table, setTable] = useState(REPORT_TABLES[0]);
+  const [focus, setFocus] = useState('');
+  const [report, setReport] = useState('');
+  const [meta, setMeta] = useState<{ rows: number; model: string; generatedAt: string } | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  /**
+   * 报告是**非流式**生成（服务端一次性返回），本地模型可能要几十秒。
+   * 所以这里的等待文案必须随耗时会变，否则用户看着同一句话 40 秒会以为卡死。
+   */
+  const reportElapsed = useElapsed(busy);
+  const reportStage =
+    reportElapsed >= 8000
+      ? '本地模型较慢，仍在生成，请勿重复点击…'
+      : reportElapsed >= 3000
+        ? '正在通读数据并组织结论…'
+        : `正在把 ${table.label} 的真实数据交给本地模型…`;
+
+  const generate = async () => {
+    setBusy(true);
+    setReport('');
+    setMeta(null);
+    try {
+      const res = await fetch('/api/ai/report', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          table: table.value,
+          title: table.title,
+          from: range[0].format('YYYY-MM-DD'),
+          to: range[1].format('YYYY-MM-DD'),
+          focus: focus || undefined,
+          limit: 300,
+        }),
+      });
+      const j = (await res.json()) as {
+        code: number;
+        data?: { report: string; rows: number; model: string; generatedAt: string };
+        message?: string;
+      };
+      // 注意：脚手架 ok() 的成功码是 0，不是 200
+      if (j.code !== 0 || !j.data) {
+        message.error(j.message || '生成失败');
+        return;
+      }
+      setReport(j.data.report);
+      setMeta({ rows: j.data.rows, model: j.data.model, generatedAt: j.data.generatedAt });
+      message.success(`已根据 ${j.data.rows} 条真实数据生成报告`);
+    } catch (e) {
+      message.error(`生成失败：${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div style={{ padding: 16 }}>
+      {/* ---------------- 指挥带：页面主视觉 ---------------- */}
+      <div
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          borderRadius: 14,
+          padding: '18px 22px',
+          marginBottom: 16,
+          border: '1px solid var(--wb-brand-line)',
+          backgroundImage:
+            'var(--wb-brand-panel)',
+        }}
+      >
+        {/* 四角定位角标 + 底部卡其线：档案/作战图的视觉暗示，纯边框实现 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 8,
+            top: 8,
+            width: 14,
+            height: 14,
+            borderLeft: '1px solid var(--wb-brand-tint)',
+            borderTop: '1px solid var(--wb-brand-tint)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            width: 14,
+            height: 14,
+            borderRight: '1px solid var(--wb-brand-tint)',
+            borderTop: '1px solid var(--wb-brand-tint)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: 2,
+            background: `linear-gradient(90deg, ${MILITARY.accent} 0%, transparent 100%)`,
+          }}
+        />
+        <div
+          style={{
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 16,
+            flexWrap: 'wrap',
+          }}
+        >
+          <div>
+            <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 }}>
+                LOCAL INFERENCE · OFFLINE
+              </span>
+            </div>
+            <div style={{ fontSize: fs(22), fontWeight: 700, color: 'var(--wb-brand-text)', marginTop: 8, letterSpacing: 0.5 }}>
+              AI 中心
+            </div>
+            <div style={{ fontSize: fs(12.5), color: 'var(--wb-brand-text-soft)', marginTop: 6 }}>
+              报告由本地大模型实时生成；问答与新增操作都基于系统里的真实数据
+            </div>
+          </div>
+
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            {[
+              { k: '推理', v: '本地部署' },
+              { k: '数据', v: '不出内网' },
+              { k: '日期', v: dayjs().format('YYYY-MM-DD') },
+            ].map((c) => (
+              <div
+                key={c.k}
+                style={{
+                  padding: '7px 12px',
+                  borderRadius: 10,
+                  background: 'var(--wb-brand-glass)',
+                  border: '1px solid var(--wb-brand-line)',
+                  minWidth: 92,
+                }}
+              >
+                <div style={{ fontSize: fs(10), letterSpacing: 2, color: 'var(--wb-brand-text-muted)' }}>{c.k}</div>
+                <div style={{ fontSize: fs(13), color: 'var(--wb-brand-text)', marginTop: 2 }}>{c.v}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <Row gutter={[16, 16]}>
+        {/* ---------------- 左：一键生成报告 ---------------- */}
+        <Col xs={24} lg={12} style={{ display: 'flex' }}>
+          <Card
+            title={
+              <CardHeading
+                icon={<FileTextOutlined />}
+                title="一键生成业务报告"
+                desc="选表 + 区间，生成带表格的分析报告"
+              />
+            }
+            extra={meta ? <Pill>已生成 · {meta.rows} 条</Pill> : null}
+            style={{ ...(tall ? CARD_STYLE : { display: 'flex', flexDirection: 'column' }), width: '100%' }}
+            styles={{ body: tall ? BODY_STYLE : { display: 'flex', flexDirection: 'column', gap: 12 } }}
+          >
+            <Space wrap size={8}>
+              <Segmented
+                options={REPORT_TABLES.map((t) => ({ label: t.label, value: t.value }))}
+                value={table.value}
+                onChange={(v) => {
+                  const t = REPORT_TABLES.find((x) => x.value === v);
+                  if (t) setTable(t);
+                }}
+              />
+              <RangePicker
+                value={range}
+                allowClear={false}
+                onChange={(v) => {
+                  if (v?.[0] && v?.[1]) setRange([v[0], v[1]]);
+                }}
+              />
+            </Space>
+
+            <Space.Compact style={{ width: '100%' }}>
+              <Input
+                value={focus}
+                onChange={(e) => setFocus(e.target.value)}
+                placeholder="不填则按数据客观汇总"
+                allowClear
+                prefix={
+                  <span
+                    style={{
+                      color: MILITARY.textMuted,
+                      fontSize: fs(12),
+                      paddingRight: 8,
+                      marginRight: 2,
+                      borderRight: `1px solid ${MILITARY.borderSoft}`,
+                    }}
+                  >
+                    重点
+                  </span>
+                }
+              />
+              <Button
+                type="primary"
+                icon={<ThunderboltOutlined />}
+                loading={busy}
+                onClick={() => void generate()}
+              >
+                {busy ? '生成中…' : '生成报告'}
+              </Button>
+            </Space.Compact>
+
+            {meta && (
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                <Pill muted>数据 {meta.rows} 条</Pill>
+                <Pill muted>{meta.model}</Pill>
+                <Pill muted>{dayjs(meta.generatedAt).format('MM-DD HH:mm')}</Pill>
+              </div>
+            )}
+
+            {/* 报告区自己滚动：卡片高度固定，不随报告变长 */}
+            <div
+              style={{
+                ...(tall ? { flex: 1, minHeight: 0 } : { minHeight: 240 }),
+                overflow: 'auto',
+                borderRadius: 10,
+                border: `1px solid ${MILITARY.borderSoft}`,
+                background: MILITARY.paper,
+                padding: report ? 14 : 0,
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              {report ? (
+                <Markdown text={report} />
+              ) : busy ? (
+                <div style={{ margin: 'auto', textAlign: 'center', color: MILITARY.textMuted, fontSize: fs(13) }}>
+                  <Spin />
+                  <div style={{ marginTop: 12 }}>{reportStage}</div>
+                  <div style={{ marginTop: 6, fontSize: fs(11.5), color: MILITARY.textMuted }}>
+                    已等待 {formatElapsed(reportElapsed)}
+                  </div>
+                </div>
+              ) : (
+                <div style={{ margin: 'auto', textAlign: 'center', maxWidth: 340, padding: 16 }}>
+                  <div
+                    style={{
+                      width: 54,
+                      height: 54,
+                      borderRadius: '50%',
+                      margin: '0 auto 14px',
+                      display: 'grid',
+                      placeItems: 'center',
+                      background: MILITARY.soft,
+                      border: `1px solid ${MILITARY.softStrong}`,
+                      color: MILITARY.primary,
+                      fontSize: fs(22),
+                    }}
+                  >
+                    <FileTextOutlined />
+                  </div>
+                  <div style={{ fontSize: fs(14), fontWeight: 600, color: MILITARY.text }}>报告从这里开始</div>
+                  <div style={{ fontSize: fs(12.5), color: MILITARY.textMuted, lineHeight: 1.9, marginTop: 6 }}>
+                    选择数据表与时间范围，点击「生成报告」
+                    <br />
+                    报告会显示在这里，可直接复制
+                  </div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      gap: 16,
+                      marginTop: 16,
+                      flexWrap: 'wrap',
+                    }}
+                  >
+                    {[
+                      ['01', '选数据表'],
+                      ['02', '定区间'],
+                      ['03', '生成'],
+                    ].map(([n, t]) => (
+                      <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <span
+                          style={{
+                            width: 20,
+                            height: 20,
+                            borderRadius: 10,
+                            border: `1px solid ${MILITARY.softStrong}`,
+                            background: MILITARY.card,
+                            color: MILITARY.primary,
+                            fontSize: fs(10),
+                            display: 'grid',
+                            placeItems: 'center',
+                          }}
+                        >
+                          {n}
+                        </span>
+                        <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>{t}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        </Col>
+
+        {/* ---------------- 右：统一 AI 助手 ---------------- */}
+        <Col xs={24} lg={12} style={{ display: 'flex' }}>
+          <Card
+            title={
+              <CardHeading
+                icon={<RobotOutlined />}
+                title="AI 助手"
+                desc="数据问答 · 使用答疑 · 直接新增记录"
+                accent={MILITARY.primary}
+              />
+            }
+            extra={<Pill>实时接入业务数据</Pill>}
+            style={{ ...(tall ? CARD_STYLE : { display: 'flex', flexDirection: 'column' }), width: '100%' }}
+            styles={{ body: tall ? BODY_STYLE : { display: 'flex', flexDirection: 'column', gap: 12 } }}
+          >
+            <AiPanel
+              showHeader={false}
+              height={tall ? '100%' : 500}
+              suggestions={ASK_SAMPLES}
+              system={
+                '回答业务问题时优先引用系统里的真实数据；' +
+                '问系统怎么用时，按模块给出可执行的操作步骤。'
+              }
+            />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}