ask.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. 'use strict';
  2. /**
  3. * 智能问数 · 独立页面(副驾式布局:左会话栏 + 右舞台 + 底部大输入卡)
  4. * ----------------------------------------------------------------------------
  5. * 发起运行(POST /api/agent/runs)→ 轮询进度 → 渲染思考 / 工具步骤 / 结论 / 图表。
  6. * 运行异步执行在服务端,本页只做编排与展示;切换页面运行继续,回来自动续显。
  7. * 「应用到报表」经 window.shanReportsApplyQuery 落到数据中台明细 tab(reports.js 提供)。
  8. */
  9. (function () {
  10. const ACCENT = '#ff6b35';
  11. const BLUE = '#2563eb';
  12. const STATUS_WORD = { running: '运行中', done: '已完成', failed: '失败', cancelled: '已取消' };
  13. const state = {
  14. inited: false,
  15. entities: [],
  16. entity: null,
  17. sessions: [],
  18. sessionId: null,
  19. search: '',
  20. mode: 'auto',
  21. skill: '',
  22. skills: [],
  23. busy: false,
  24. pollTimer: null,
  25. activeRunId: null,
  26. charts: [],
  27. columns: [],
  28. };
  29. const $ = (id) => document.getElementById(id);
  30. function esc(value) {
  31. const div = document.createElement('div');
  32. div.textContent = String(value ?? '');
  33. return div.innerHTML;
  34. }
  35. async function jsonFetch(url, opts) {
  36. const r = await fetch(url, opts);
  37. const data = await r.json().catch(() => ({}));
  38. if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`);
  39. return data;
  40. }
  41. function ymdToDash(s) { return /^\d{8}$/.test(String(s)) ? `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}` : String(s || ''); }
  42. function fmtDuration(ms) { return ms == null || ms === '' ? '' : (ms >= 1000 ? (ms / 1000).toFixed(1) + 's' : `${ms}ms`); }
  43. function fmtBytes(n) { return n == null ? '' : (n >= 1024 ? (n / 1024).toFixed(1) + ' KB' : `${n} B`); }
  44. function fmtTokens(n) { return n == null ? '—' : (n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n)); }
  45. function fmtClock(iso) {
  46. const d = iso ? new Date(iso) : null;
  47. return d ? `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}` : '';
  48. }
  49. function entityName(key) {
  50. const e = state.entities.find((x) => x.key === key);
  51. return e ? (e.name || e.key) : (key || '');
  52. }
  53. // ---------- 初始化 ----------
  54. window.shanAskInit = async function () {
  55. if (!state.inited) {
  56. state.inited = true;
  57. bindEvents();
  58. }
  59. if (!state.columns.length) {
  60. try {
  61. const data = await jsonFetch('/api/reports/columns');
  62. state.columns = data.columns || [];
  63. } catch { state.columns = []; }
  64. }
  65. await loadSkills();
  66. await loadEntities();
  67. await loadSessions();
  68. await openLatestSession();
  69. await loadDigest();
  70. };
  71. /** 晨报横幅:最近一次确定性体检+环比结论(每日自动同步后生成,可手动重建) */
  72. async function loadDigest() {
  73. const wrap = $('askDigest');
  74. wrap.hidden = true;
  75. wrap.innerHTML = '';
  76. if (!state.entity) return;
  77. let latest = null;
  78. try {
  79. const data = await jsonFetch(`/api/agent/digests?entity=${encodeURIComponent(state.entity)}`);
  80. latest = (data.digests || [])[0] || null;
  81. } catch { return; }
  82. if (!latest) return;
  83. const at = new Date(latest.at);
  84. const stamp = `${at.getMonth() + 1}/${at.getDate()} ${String(at.getHours()).padStart(2, '0')}:${String(at.getMinutes()).padStart(2, '0')}`;
  85. const dotCls = latest.status === 'fail' ? 'failed' : (latest.status === 'warn' ? 'running' : 'done');
  86. wrap.hidden = false;
  87. wrap.innerHTML = `
  88. <div class="ask-digest-bar" role="button" tabindex="0">
  89. <span class="ask-dot ${dotCls}"></span>
  90. <span class="ask-digest-label">晨报 · ${esc(stamp)}</span>
  91. <span class="ask-digest-headline">${esc(latest.headline)}</span>
  92. <span class="ask-digest-toggle">详情 ▾</span>
  93. </div>
  94. <div class="ask-digest-body" hidden>
  95. <pre class="ask-pre">${esc((latest.sections || []).map((s) => `[${s.ok ? 'ok' : '失败'}] ${s.summary}`).join('\n\n'))}</pre>
  96. ${(latest.verdicts || []).length ? `<div class="ask-verdicts">${latest.verdicts.map((v) => `
  97. <div class="ask-verdict ${v.status}">
  98. <span class="ask-verdict-status">${{ ok: '通过', warn: '警告', fail: '不一致' }[v.status] || esc(v.status)}</span>
  99. <span class="ask-verdict-check">${esc(v.check)}</span>
  100. <span class="ask-verdict-detail">${esc(v.detail || '')}</span>
  101. </div>`).join('')}</div>` : ''}
  102. ${latest.reportUrl ? `<div class="ask-actions"><a class="btn btn-ghost btn-small" href="${esc(latest.reportUrl)}" target="_blank" rel="noopener">查看分析报告</a></div>` : ''}
  103. </div>`;
  104. wrap.querySelector('.ask-digest-bar').addEventListener('click', () => {
  105. const body = wrap.querySelector('.ask-digest-body');
  106. body.hidden = !body.hidden;
  107. wrap.querySelector('.ask-digest-toggle').textContent = body.hidden ? '详情 ▾' : '收起 ▴';
  108. });
  109. }
  110. async function loadSkills() {
  111. const sel = $('askSkill');
  112. try {
  113. const data = await jsonFetch('/api/agent/skills');
  114. state.skills = data.skills || [];
  115. } catch { state.skills = []; }
  116. sel.innerHTML = '<option value="">技能:自动</option>';
  117. for (const s of state.skills) {
  118. const opt = document.createElement('option');
  119. opt.value = s.key;
  120. opt.textContent = `技能:${s.name}`;
  121. opt.title = s.desc || '';
  122. sel.appendChild(opt);
  123. }
  124. sel.value = state.skill || '';
  125. }
  126. async function loadEntities() {
  127. try {
  128. const data = await jsonFetch('/api/reports/entities');
  129. state.entities = data.entities || [];
  130. } catch { state.entities = []; }
  131. const sel = $('askEntity');
  132. sel.innerHTML = '';
  133. if (!state.entities.length) {
  134. const opt = document.createElement('option');
  135. opt.value = '';
  136. opt.textContent = '暂无主体,请先同步数据';
  137. sel.appendChild(opt);
  138. sel.disabled = true;
  139. state.entity = null;
  140. renderStageHead();
  141. return;
  142. }
  143. sel.disabled = false;
  144. for (const e of state.entities) {
  145. const opt = document.createElement('option');
  146. opt.value = e.key;
  147. opt.textContent = e.name || e.key;
  148. sel.appendChild(opt);
  149. }
  150. if (!state.entity || !state.entities.some((e) => e.key === state.entity)) {
  151. state.entity = state.entities[0].key;
  152. }
  153. sel.value = state.entity;
  154. renderStageHead();
  155. }
  156. // ---------- 左侧会话栏 ----------
  157. async function loadSessions() {
  158. if (!state.entity) { state.sessions = []; renderSessions(); return; }
  159. try {
  160. const data = await jsonFetch(`/api/agent/sessions?entity=${encodeURIComponent(state.entity)}`);
  161. state.sessions = data.sessions || [];
  162. } catch { state.sessions = []; }
  163. renderSessions();
  164. }
  165. function renderSessions() {
  166. const wrap = $('askSessions');
  167. if (!state.entity) { wrap.innerHTML = '<div class="ask-sessions-empty">暂无主体</div>'; return; }
  168. const kw = state.search.trim().toLowerCase();
  169. const list = state.sessions.filter((s) => !kw || String(s.title || '').toLowerCase().includes(kw));
  170. if (!list.length) {
  171. wrap.innerHTML = `<div class="ask-sessions-empty">${kw ? '无匹配会话' : '暂无会话'}</div>`;
  172. return;
  173. }
  174. wrap.innerHTML = '';
  175. for (const s of list) {
  176. const item = document.createElement('div');
  177. item.className = 'ask-session-item' + (s.sessionId === state.sessionId ? ' active' : '');
  178. item.innerHTML = `
  179. <span class="ask-session-title"></span>
  180. <span class="ask-session-preview"></span>
  181. <button type="button" class="ask-session-del" title="删除会话">
  182. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M6 6l1 14h10l1-14"/></svg>
  183. </button>`;
  184. item.querySelector('.ask-session-title').textContent = s.title || '新会话';
  185. const preview = s.lastQuestion && s.lastQuestion !== s.title ? s.lastQuestion : (s.lastQuestion || '');
  186. item.querySelector('.ask-session-preview').textContent = preview;
  187. item.addEventListener('click', () => openSession(s.sessionId));
  188. item.querySelector('.ask-session-del').addEventListener('click', (event) => {
  189. event.stopPropagation();
  190. removeSession(s.sessionId);
  191. });
  192. wrap.appendChild(item);
  193. }
  194. }
  195. async function removeSession(sessionId) {
  196. try {
  197. await jsonFetch(`/api/agent/sessions/${encodeURIComponent(sessionId)}?entity=${encodeURIComponent(state.entity)}`, { method: 'DELETE' });
  198. } catch { /* 删除失败不打扰 */ }
  199. if (sessionId === state.sessionId) await newSession();
  200. else await loadSessions();
  201. }
  202. // ---------- 会话与舞台 ----------
  203. function renderStageHead() {
  204. const session = state.sessions.find((s) => s.sessionId === state.sessionId);
  205. $('askStageTitle').textContent = state.sessionId && session ? (session.title || '新对话') : '新对话';
  206. $('askStageBadge').textContent = state.entity ? entityName(state.entity) : '未选择主体';
  207. }
  208. async function openLatestSession() {
  209. await loadSessions();
  210. if (state.sessions.length) await openSession(state.sessions[0].sessionId);
  211. else await openSession(null);
  212. }
  213. async function openSession(sessionId) {
  214. stopPoll();
  215. state.sessionId = sessionId;
  216. state.activeRunId = null;
  217. if (state.busy) { state.busy = false; setComposerBusy(false); } // 切走时运行仍在服务端继续
  218. renderStageHead();
  219. renderSessions();
  220. const stream = $('askStream');
  221. [...stream.querySelectorAll('.ask-run')].forEach((n) => n.remove());
  222. if (!sessionId || !state.entity) { showHero(true); return; }
  223. showHero(false);
  224. try {
  225. const data = await jsonFetch(`/api/agent/runs?entity=${encodeURIComponent(state.entity)}&sessionId=${encodeURIComponent(sessionId)}`);
  226. const runs = (data.runs || []).slice(0, 10);
  227. let runningRun = null;
  228. for (const r of runs.reverse()) {
  229. try {
  230. const detail = await jsonFetch(`/api/agent/runs/${encodeURIComponent(r.runId)}?entity=${encodeURIComponent(state.entity)}`);
  231. appendRun(detail.run);
  232. if (detail.run.status === 'running') runningRun = detail.run;
  233. } catch { /* 单条历史加载失败跳过 */ }
  234. }
  235. // 回到页面时若有运行仍在进行(切页不中断),续接轮询
  236. if (runningRun) {
  237. state.activeRunId = runningRun.runId;
  238. state.busy = true;
  239. setComposerBusy(true);
  240. startPoll(runningRun.runId);
  241. }
  242. } catch { /* 历史加载失败不阻塞新提问 */ }
  243. }
  244. async function newSession() {
  245. stopPoll();
  246. state.sessionId = null;
  247. state.activeRunId = null;
  248. if (state.busy) { state.busy = false; setComposerBusy(false); } // 切走时运行仍在服务端继续
  249. const stream = $('askStream');
  250. [...stream.querySelectorAll('.ask-run')].forEach((n) => n.remove());
  251. renderStageHead();
  252. renderSessions();
  253. showHero(true);
  254. $('askInput').focus();
  255. }
  256. function showHero(show) {
  257. const hero = $('askEmpty');
  258. if (hero) hero.hidden = !show;
  259. }
  260. // ---------- 提问 ----------
  261. async function ask(text) {
  262. const q = String(text || $('askInput').value || '').trim();
  263. if (!q || state.busy || !state.entity) return;
  264. state.busy = true;
  265. $('askInput').value = '';
  266. autoresize();
  267. setComposerBusy(true);
  268. showHero(false);
  269. try {
  270. const data = await jsonFetch('/api/agent/runs', {
  271. method: 'POST',
  272. headers: { 'Content-Type': 'application/json' },
  273. body: JSON.stringify({
  274. entity: state.entity, question: q, mode: state.mode,
  275. skill: state.skill || undefined, sessionId: state.sessionId || undefined,
  276. }),
  277. });
  278. state.sessionId = data.run.sessionId;
  279. state.activeRunId = data.run.runId;
  280. renderStageHead();
  281. appendRun(data.run);
  282. loadSessions(); // 侧栏出现新会话/新预览
  283. startPoll(data.run.runId);
  284. } catch (e) {
  285. state.busy = false;
  286. setComposerBusy(false);
  287. appendLocalError(q, e.message);
  288. }
  289. }
  290. async function cancel() {
  291. if (!state.activeRunId) return;
  292. try {
  293. await jsonFetch(`/api/agent/runs/${encodeURIComponent(state.activeRunId)}/cancel`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
  294. } catch { /* 取消失败不打扰 */ }
  295. }
  296. function startPoll(runId) {
  297. stopPoll();
  298. state.pollTimer = setInterval(async () => {
  299. if (!$('viewAsk').classList.contains('active')) return; // 不在问数页时暂停拉取
  300. try {
  301. const data = await jsonFetch(`/api/agent/runs/${encodeURIComponent(runId)}?entity=${encodeURIComponent(state.entity)}`);
  302. const runEl = document.getElementById(`ask-run-${runId}`);
  303. if (runEl) renderRunInto(runEl, data.run);
  304. if (data.run.status !== 'running') {
  305. stopPoll();
  306. state.busy = false;
  307. setComposerBusy(false);
  308. loadSessions();
  309. }
  310. } catch { /* 单次轮询失败下轮再试 */ }
  311. }, 1000);
  312. }
  313. function stopPoll() {
  314. if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; }
  315. }
  316. function setComposerBusy(busy) {
  317. $('btnAskSend').hidden = busy;
  318. $('btnAskStop').hidden = !busy;
  319. }
  320. function autoresize() {
  321. const el = $('askInput');
  322. el.style.height = 'auto';
  323. el.style.height = Math.min(el.scrollHeight, 120) + 'px';
  324. }
  325. // ---------- 渲染 ----------
  326. function appendLocalError(q, message) {
  327. const stream = $('askStream');
  328. const wrap = document.createElement('div');
  329. wrap.className = 'ask-run';
  330. wrap.innerHTML = `
  331. <div class="ask-q">${esc(q)}</div>
  332. <div class="ask-card ask-card-error">${esc(message)}</div>`;
  333. stream.appendChild(wrap);
  334. stream.scrollTop = stream.scrollHeight;
  335. }
  336. function appendRun(rec) {
  337. const stream = $('askStream');
  338. const wrap = document.createElement('div');
  339. wrap.className = 'ask-run';
  340. wrap.id = `ask-run-${rec.runId}`;
  341. stream.appendChild(wrap);
  342. renderRunInto(wrap, rec);
  343. stream.scrollTop = stream.scrollHeight;
  344. }
  345. /** 把一次运行渲染进容器(轮询时整卡重绘,数据量小无压力)。 */
  346. function renderRunInto(wrap, rec) {
  347. const TOOL_LABEL = {
  348. lake_overview: '湖概览', query_report: '查询报表', compare_periods: '同环比对比',
  349. data_quality: '数据体检', cross_check: '层间核对', raw_inspect: '源侧字段', peer_benchmark: '同行对标',
  350. cross_entity: '跨主体对比', aitable_verify: '湖云比对', build_report: '分析报告', metric_query: '指标查询',
  351. detect_anomalies: '异常检测', attribution: '归因分析',
  352. };
  353. const VERDICT_WORD = { ok: '通过', warn: '警告', fail: '不一致' };
  354. const skillName = rec.skill ? ((state.skills.find((s) => s.key === rec.skill) || {}).name || rec.skill) : '';
  355. // 头部:时间 + 「状态 · 总耗时 · N 个工具」
  356. const totalMs = rec.finishedAt && rec.startedAt ? new Date(rec.finishedAt) - new Date(rec.startedAt) : null;
  357. const toolCount = (rec.steps || []).filter((s) => s.type === 'tool').length;
  358. const dotCls = rec.status === 'running' ? 'running' : (rec.status === 'failed' ? 'failed' : 'done');
  359. const head = [];
  360. head.push(`<div class="ask-meta">问数 · ${esc(fmtClock(rec.startedAt))}</div>`);
  361. const usage = rec.usage || {};
  362. const costBits = [];
  363. if (usage.tokensIn) costBits.push(`${fmtTokens(usage.tokensIn)} in / ${fmtTokens(usage.tokensOut)} out`);
  364. head.push(`<div class="ask-worked"><span class="ask-dot ${dotCls}"></span><span>${STATUS_WORD[rec.status] || esc(rec.status)}`
  365. + `${totalMs != null ? ` · ${fmtDuration(totalMs)}` : ''} · ${toolCount} 个工具`
  366. + (costBits.length ? ` · ${costBits.join(' · ')}` : '')
  367. + `${rec.autoPicked ? ` · 自动→${rec.mode === 'quick' ? '快问' : '深度分析'}` : ''}`
  368. + `${rec.replayFrom ? ' · 复用打法' : ''}`
  369. + `${skillName ? ` · 技能「${esc(skillName)}」` : ''}</span></div>`);
  370. // 步骤时间线:思考 · Turn N(耗时/tokens)、工具(耗时/载荷/行数)
  371. const steps = [];
  372. for (const step of rec.steps || []) {
  373. if (step.type === 'thought') {
  374. const bits = [fmtDuration(step.ms)];
  375. if (step.tokensIn != null) bits.push(`${fmtTokens(step.tokensIn)} in / ${fmtTokens(step.tokensOut)} out`);
  376. steps.push(`<div class="ask-step">
  377. <div class="ask-step-head"><span class="ask-dot done"></span><b>思考${step.turn ? ` · Turn ${step.turn}` : ''}</b></div>
  378. <div class="ask-step-meta">${bits.filter(Boolean).join(' · ')}</div>
  379. ${step.text ? `<div class="ask-step-body">${esc(step.text)}</div>` : ''}
  380. </div>`);
  381. } else if (step.type === 'tool') {
  382. const label = TOOL_LABEL[step.tool] || step.tool;
  383. const bits = [fmtDuration(step.ms), fmtBytes(step.bytes)];
  384. if (step.rows != null) bits.push(`${step.rows} 行`);
  385. steps.push(`<div class="ask-step">
  386. <div class="ask-step-head"><span class="ask-dot ${step.ok ? 'done' : 'failed'}"></span><b>${esc(label)}</b></div>
  387. <div class="ask-step-meta">${bits.filter(Boolean).join(' · ')}</div>
  388. <details class="ask-tool"><summary>参数与结果</summary>
  389. <pre class="ask-pre">参数:${esc(JSON.stringify(step.args || {}))}
  390. ${esc(step.summary || step.error || '')}</pre>
  391. </details>
  392. </div>`);
  393. }
  394. }
  395. const parts = [];
  396. parts.push(`<div class="ask-q">${esc(rec.question)}</div>`);
  397. parts.push('<div class="ask-card">');
  398. parts.push(head.join(''));
  399. if (steps.length) parts.push(`<div class="ask-steps">${steps.join('')}</div>`);
  400. // verdict 卡:数据体检/层间核对/恒等式/完整性等校验结论
  401. const verdicts = rec.verdicts || [];
  402. if (verdicts.length) {
  403. parts.push(`<div class="ask-verdicts">${verdicts.map((v) => `
  404. <div class="ask-verdict ${v.status}">
  405. <span class="ask-verdict-status">${VERDICT_WORD[v.status] || esc(v.status)}</span>
  406. <span class="ask-verdict-check">${esc(v.check)}</span>
  407. <span class="ask-verdict-detail">${esc(v.detail || '')}</span>
  408. </div>`).join('')}</div>`);
  409. }
  410. // 数字溯源警示(不阻断,仅提示)
  411. const prov = rec.provenance;
  412. if (prov && prov.untracedCount > 0) {
  413. parts.push(`<div class="ask-provenance">⚠ ${prov.untracedCount}/${prov.total} 个数字未能在工具结果中溯源(可能为换算或表述),请谨慎采信:${esc(prov.untraced.join('、'))}</div>`);
  414. }
  415. if (rec.status === 'running') parts.push('<div class="ask-typing"><span></span><span></span><span></span></div>');
  416. if (rec.status === 'failed') parts.push(`<div class="ask-error">${esc(rec.error || '运行失败')}</div>`);
  417. if (rec.status === 'cancelled') parts.push('<div class="ask-note">已取消</div>');
  418. const result = rec.result || null;
  419. if (result && result.answer) {
  420. parts.push(`<div class="ask-answer">${esc(result.answer)}</div>`);
  421. const chart = result.chart;
  422. if (chart && chart.type && chart.type !== 'none') {
  423. parts.push(`<div class="ask-chart" data-run="${esc(rec.runId)}"></div>`);
  424. if (chart.title) parts.push(`<div class="ask-chart-title">${esc(chart.title)}</div>`);
  425. }
  426. if (result.appliedFrom) {
  427. parts.push('<div class="ask-actions"><button type="button" class="btn btn-ghost btn-small" data-apply="' + esc(rec.runId) + '">应用到报表</button></div>');
  428. }
  429. if (result.reportUrl) {
  430. parts.push(`<div class="ask-actions"><a class="btn btn-ghost btn-small" href="${esc(result.reportUrl)}" target="_blank" rel="noopener">查看分析报告</a></div>`);
  431. }
  432. // 反馈闭环:采纳 → 打法入语料;纠错 → 反馈日志供评测提炼
  433. if (rec.status === 'done') {
  434. const fb = rec.feedback;
  435. if (fb && fb.kind) {
  436. parts.push(`<div class="ask-note">已反馈${fb.kind === 'up' ? '有帮助' : '纠错'}${fb.note ? ':' + esc(fb.note) : ''}</div>`);
  437. } else {
  438. parts.push(`<div class="ask-actions ask-fb"><button type="button" class="btn btn-ghost btn-small" data-fb="up" data-run="${esc(rec.runId)}">👍 有帮助</button>`
  439. + `<button type="button" class="btn btn-ghost btn-small" data-fb="down" data-run="${esc(rec.runId)}">✍️ 纠错</button></div>`);
  440. }
  441. }
  442. }
  443. parts.push('</div>');
  444. wrap.innerHTML = parts.join('');
  445. // 图表:从产物中找与 chart 维度匹配的行(最后一条优先)
  446. if (result && result.chart && result.chart.type && result.chart.type !== 'none') {
  447. const wrapEl = wrap.querySelector('.ask-chart');
  448. const rows = findChartRows(rec, result.chart);
  449. if (wrapEl && rows && rows.length) renderChart(wrapEl, result.chart, rows);
  450. else if (wrapEl) wrapEl.parentNode.removeChild(wrapEl);
  451. }
  452. const applyBtn = wrap.querySelector('[data-apply]');
  453. if (applyBtn) {
  454. applyBtn.addEventListener('click', () => {
  455. const applied = rec.result && rec.result.appliedFrom;
  456. if (applied && window.shanReportsApplyQuery) window.shanReportsApplyQuery(applied);
  457. });
  458. }
  459. wrap.querySelectorAll('[data-fb]').forEach((btn) => {
  460. btn.addEventListener('click', async () => {
  461. const kind = btn.dataset.fb;
  462. let note = '';
  463. if (kind === 'down') {
  464. note = window.prompt('请描述哪里不对(会进入改进清单,可留空)');
  465. if (note === null) return;
  466. }
  467. try {
  468. const data = await jsonFetch('/api/agent/feedback', {
  469. method: 'POST',
  470. headers: { 'Content-Type': 'application/json' },
  471. body: JSON.stringify({ entity: state.entity, runId: rec.runId, kind, note }),
  472. });
  473. Object.assign(rec, { feedback: data.run.feedback });
  474. renderRunInto(wrap, rec);
  475. } catch { /* 反馈失败不打扰 */ }
  476. });
  477. });
  478. const stream = $('askStream');
  479. stream.scrollTop = stream.scrollHeight;
  480. }
  481. function findChartRows(rec, chart) {
  482. if (rec.result && Array.isArray(rec.result.chartRows) && rec.result.chartRows.length) {
  483. return filterRowsByDimension(rec.result.chartRows, chart);
  484. }
  485. const steps = (rec.steps || []).filter((s) => s.type === 'tool' && s.ok && s.data);
  486. for (const step of steps.reverse()) {
  487. const d = step.data;
  488. const candidates = [d.rows, chart.x === 'date' ? d.curByDate : d.curByShop];
  489. for (const rows of candidates) {
  490. if (Array.isArray(rows) && rows.length) {
  491. const filtered = filterRowsByDimension(rows, chart);
  492. if (filtered.length) return filtered;
  493. }
  494. }
  495. }
  496. return null;
  497. }
  498. function filterRowsByDimension(rows, chart) {
  499. const key = chart.x === 'date' ? 'date' : 'shopName';
  500. const has = rows.filter((r) => r && r[key] != null && chart.y.some((m) => r[m] != null));
  501. if (chart.x === 'date') has.sort((a, b) => (String(a.date) < String(b.date) ? -1 : 1));
  502. return has;
  503. }
  504. function renderChart(wrapEl, chart, rows) {
  505. const prev = echarts.getInstanceByDom(wrapEl);
  506. if (prev) prev.dispose();
  507. const instance = echarts.init(wrapEl);
  508. state.charts.push(instance);
  509. const meta = new Map(state.columns.map((c) => [c.key, c]));
  510. const colOf = (key) => meta.get(key) || { label: key, type: 'num' };
  511. instance.setOption({
  512. tooltip: { trigger: 'axis' },
  513. grid: { left: 56, right: 16, top: 20, bottom: chart.type === 'bar' && chart.x !== 'date' ? 52 : 24 },
  514. xAxis: {
  515. type: 'category',
  516. data: rows.map((r) => (chart.x === 'date' ? ymdToDash(r.date) : (r.shopName || r.shopId || ''))),
  517. axisLabel: { color: '#6b6560', interval: 0, rotate: chart.type === 'bar' && chart.x !== 'date' ? 30 : 0, width: 80, overflow: 'truncate' },
  518. axisLine: { lineStyle: { color: '#e8e4df' } },
  519. },
  520. yAxis: { type: 'value', axisLabel: { color: '#6b6560' }, splitLine: { lineStyle: { color: '#f0ede8' } } },
  521. series: (chart.y || []).map((key, yi) => {
  522. const c = colOf(key);
  523. return {
  524. name: c.label || key,
  525. type: chart.type === 'line' ? 'line' : 'bar',
  526. smooth: true, barMaxWidth: 26,
  527. data: rows.map((r) => {
  528. const n = Number(r[key]);
  529. if (!Number.isFinite(n)) return 0;
  530. return c.type === 'pct' ? +(n * 100).toFixed(2) : n;
  531. }),
  532. itemStyle: { color: yi === 0 ? ACCENT : BLUE },
  533. };
  534. }),
  535. });
  536. setTimeout(() => instance.resize(), 40);
  537. }
  538. // ---------- 事件 ----------
  539. function bindEvents() {
  540. $('askEntity').addEventListener('change', () => {
  541. state.entity = $('askEntity').value || null;
  542. state.sessionId = null;
  543. state.sessions = [];
  544. renderStageHead();
  545. loadDigest();
  546. openLatestSession();
  547. });
  548. $('askMode').addEventListener('click', (event) => {
  549. const btn = event.target.closest('button[data-mode]');
  550. if (!btn) return;
  551. state.mode = ['auto', 'agent', 'quick'].includes(btn.dataset.mode) ? btn.dataset.mode : 'auto';
  552. $('askMode').querySelectorAll('button').forEach((b) => b.classList.toggle('active', b === btn));
  553. });
  554. $('askSkill').addEventListener('change', () => {
  555. state.skill = $('askSkill').value || '';
  556. });
  557. $('btnAskNewSession').addEventListener('click', newSession);
  558. $('askSearch').addEventListener('input', () => {
  559. state.search = $('askSearch').value;
  560. renderSessions();
  561. });
  562. $('btnAskSend').addEventListener('click', () => ask());
  563. $('btnAskStop').addEventListener('click', cancel);
  564. const input = $('askInput');
  565. input.addEventListener('keydown', (event) => {
  566. if (event.key === 'Enter' && !event.shiftKey) {
  567. event.preventDefault();
  568. ask();
  569. }
  570. });
  571. input.addEventListener('input', autoresize);
  572. $('askChips').addEventListener('click', (event) => {
  573. const chip = event.target.closest('[data-q]');
  574. if (chip) ask(chip.dataset.q);
  575. });
  576. window.addEventListener('resize', () => {
  577. state.charts.forEach((c) => { try { c.resize(); } catch { /* ignore */ } });
  578. });
  579. }
  580. })();