BPOS-MVP/activities/quote-intake/src/views/report.ts

/**
 * A1 视图模版 —— 视图区呈现的 HTML(AM 07)。
 *
 * 「模版是**内容**不是代码」:这里没有脚本、没有事件处理器、没有外链;
 * 槽位 `data-slot` 由基座按任务视图填数,行模版 `data-rows` 逐条展开。
 * 容器是沙箱 iframe(无脚本执行权),所以样式必须内联自带 —— 页面不继承工作台的 CSS。
 *
 * 三张模版对应三种局面(事态全景 / 进展 / 成果预览),按步序位置推送。
 */

/** 共用外壳:一套克制的排版,深浅色都能看 */
const SHELL = (title: string, kicker: string, accent: string, body: string): string => `
<style>
  :root { color-scheme: light; }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 18px;
    font: 13px/1.6 -apple-system, "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
    color: #1f2933; background: #f7f8fa;
  }
  .wrap { max-width: 720px; margin: 0 auto; }
  .hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .hd .bar { width: 4px; align-self: stretch; border-radius: 2px; background: ${accent}; }
  .hd .kick { font-size: 11px; letter-spacing: .08em; color: #6a7686; text-transform: uppercase; }
  .hd h1 { margin: 2px 0 0; font-size: 17px; font-weight: 650; letter-spacing: .01em; }
  .card { background: #fff; border: 1px solid #e6e9ee; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
  .card h2 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #6a7686; letter-spacing: .04em; }
  .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
  .kv div { min-width: 0; }
  .kv em { display: block; font-style: normal; font-size: 11px; color: #8b95a3; margin-bottom: 2px; }
  .kv b { font-size: 14px; font-weight: 600; word-break: break-all; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th { text-align: left; font-weight: 600; color: #6a7686; padding: 6px 8px; border-bottom: 1px solid #e6e9ee; white-space: nowrap; }
  td { padding: 7px 8px; border-bottom: 1px solid #f0f2f5; }
  tr:last-child td { border-bottom: 0; }
  .mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
  .tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
         background: ${accent}1a; color: ${accent}; }
  .note { font-size: 11px; color: #8b95a3; margin-top: 10px; line-height: 1.7; }
  .empty { color: #a8b0bb; font-size: 12px; padding: 6px 0; }
</style>
<div class="wrap">
  <div class="hd"><span class="bar"></span><div><div class="kick">${kicker}</div><h1>${title}</h1></div></div>
  ${body}
</div>`;

/** ① 事态全景:受理刚开始,先把「这一单是什么」摆清楚 */
export const INTAKE_OVERVIEW = SHELL(
  'RFQ 受理全景',
  'A1 · 统一受理',
  '#3370ff',
  `<div class="card">
     <h2>询价来源</h2>
     <div class="kv">
       <div><em>客户编码</em><b class="mono" data-slot="customer_code"></b></div>
       <div><em>询价单号</em><b class="mono" data-slot="rfqRef"></b></div>
       <div><em>主题</em><b data-slot="subject"></b></div>
     </div>
   </div>
   <div class="card">
     <h2>归一结果</h2>
     <div class="kv">
       <div><em>型号 PN</em><b class="mono" data-slot="pn"></b></div>
       <div><em>厂牌</em><b data-slot="brand"></b></div>
       <div><em>年用量 EAU</em><b data-slot="eau"></b></div>
       <div><em>目标价</em><b data-slot="target_price"></b></div>
       <div><em>交期</em><b data-slot="lead_time"></b></div>
       <div><em>缺关键字段</em><b data-slot="missing_key_fields"></b></div>
     </div>
     <p class="note">归一由模型从询价原文抽取,逐条落任务级草稿层;放行前不入正式版。</p>
   </div>`,
);

/** ② 进展:打标之后,把判据摊开 —— 人要在数据上作判断,数据就得摆出来 */
export const INTAKE_CLASSIFIED = SHELL(
  '料号分类与判据',
  'A1 · 三分类 P-03',
  '#0aa294',
  `<div class="card">
     <h2>分类结论</h2>
     <div class="kv">
       <div><em>型号 PN</em><b class="mono" data-slot="pn"></b></div>
       <div><em>Type 标</em><b class="tag" data-slot="type_tag"></b></div>
       <div><em>分级依据</em><b data-slot="basis"></b></div>
     </div>
   </div>
   <div class="card">
     <h2>打标判据(DMN 入参)</h2>
     <div class="kv">
       <div><em>距上次报价</em><b data-slot="history_days"></b></div>
       <div><em>行情稳定</em><b data-slot="market_stable"></b></div>
       <div><em>生命周期</em><b data-slot="lifecycle"></b></div>
       <div><em>历史价命中</em><b data-slot="history_hit"></b></div>
     </div>
     <p class="note">
       三分类规则 P-03 是确定性决策表:同样的判据必得同样的结论,零方差零 token。
       A = 直接快答;B = 重估后报(转寻源);C = 转案处理(转替代选型)。
     </p>
   </div>`,
);

/** ③ 成果预览:验收放行前的最后一屏 —— 要放行的到底是什么,一眼看全 */
export const INTAKE_RELEASE = SHELL(
  '统一受理记录 · 待放行',
  'A1 · 成果预览',
  '#7f3bf5',
  `<div class="card">
     <h2>本单交付</h2>
     <table>
       <thead><tr><th>型号</th><th>厂牌</th><th>年用量</th><th>目标价</th><th>交期</th></tr></thead>
       <tbody data-rows="mine:quote_intake.record">
         <tr>
           <td class="mono" data-slot="pn"></td>
           <td data-slot="brand"></td>
           <td data-slot="eau"></td>
           <td data-slot="target_price"></td>
           <td data-slot="lead_time"></td>
         </tr>
       </tbody>
     </table>
   </div>
   <div class="card">
     <h2>分流去向</h2>
     <div class="kv">
       <div><em>Type 标</em><b class="tag" data-slot="type_tag"></b></div>
       <div><em>依据</em><b data-slot="basis"></b></div>
     </div>
     <p class="note">
       放行通过即刻落地:草稿层合并入正式版、数据事件此刻才发射,G2 网关按 Type 分流。
       放行是草稿态与事实态之间的那道门 —— 门前的一切都还改得动,门后的都算数了。
     </p>
   </div>`,
);