chat-redesign-v1.html 62 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>清鉴 · Codex 聊天界面重设计 v1</title>
  7. <style>
  8. /* ═══════════════════════════════════════════════════════════════
  9. 设计稿:清鉴 · Codex 聊天界面重设计 v1.0
  10. 主题对齐项目现有 token:主色 #2a50ec / 画布 #f0f2f5 / 白卡 / 圆角 6·8·12
  11. ═══════════════════════════════════════════════════════════════ */
  12. :root{
  13. --primary:#2a50ec;
  14. --primary-deep:#1e3fd1;
  15. --primary-soft:rgba(42,80,236,.07);
  16. --primary-soft-2:rgba(42,80,236,.13);
  17. --canvas:#f0f2f5;
  18. --card:#ffffff;
  19. --border:#e3e7ef;
  20. --border-strong:#d0d7de;
  21. --text-1:#24292f;
  22. --text-2:#57606a;
  23. --text-3:#8b919c;
  24. --ok:#1a7f37;
  25. --ok-soft:rgba(26,127,55,.09);
  26. --warn:#b58a05;
  27. --err:#d93025;
  28. --err-soft:rgba(217,48,37,.08);
  29. --r-ctl:6px; --r-block:8px; --r-page:12px;
  30. --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  31. --shadow-pop:0 6px 24px rgba(24,39,88,.10);
  32. --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  33. }
  34. *{margin:0;padding:0;box-sizing:border-box}
  35. body{background:#dde1e8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Roboto,sans-serif;color:var(--text-1);font-size:14px;line-height:1.6}
  36. .mono{font-family:var(--mono)}
  37. svg.i{width:1em;height:1em;fill:currentColor;vertical-align:-0.14em}
  38. /* ── 稿头说明(非 UI 部分) ── */
  39. .doc-head{max-width:1480px;margin:28px auto 14px;padding:0 24px;display:flex;align-items:baseline;gap:16px}
  40. .doc-head h1{font-size:20px;font-weight:700}
  41. .doc-head .tag{font-size:12px;color:#fff;background:var(--primary);border-radius:99px;padding:2px 12px;font-weight:600}
  42. .doc-head .sub{color:var(--text-3);font-size:13px}
  43. /* ── 页面画框 ── */
  44. .frame{max-width:1480px;margin:0 auto 40px;padding:0 24px}
  45. .window{background:var(--canvas);border-radius:var(--r-page);border:1px solid var(--border-strong);overflow:hidden;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;height:1180px}
  46. /* ── 顶栏 ── */
  47. .topbar{height:52px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 20px;flex:none}
  48. .topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
  49. .topbar .title{font-weight:650;font-size:14.5px}
  50. .topbar .session{color:var(--text-3);font-size:12.5px;display:flex;align-items:center;gap:5px}
  51. .topbar .session .sep{opacity:.5}
  52. .chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;border:1px solid var(--border);background:var(--card);font-size:12px;color:var(--text-2)}
  53. .chip .mini{width:6px;height:6px;border-radius:50%}
  54. .chip--model{background:var(--primary-soft);border-color:transparent;color:var(--primary);font-weight:600}
  55. .chip--model .mini{background:var(--primary)}
  56. .chip--route{color:var(--text-2)}
  57. .chip--route .mini{background:var(--warn)}
  58. .topbar .spacer{flex:1}
  59. .tbtn{height:28px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--text-2);font-size:12.5px;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  60. .tbtn:hover{background:#f2f4f8}
  61. .tbtn--primary{background:var(--primary);color:#fff;font-weight:600}
  62. .tbtn--primary:hover{background:var(--primary-deep)}
  63. .tbtn .i{font-size:14px}
  64. /* ── 三栏 ── */
  65. .body{flex:1;display:flex;min-height:0}
  66. .sidebar{width:232px;flex:none;background:#f7f8fa;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px}
  67. .side-sec{font-size:11px;color:var(--text-3);font-weight:600;letter-spacing:.05em;margin:10px 6px 6px}
  68. .side-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-ctl);font-size:13px;color:var(--text-2);cursor:default}
  69. .side-item:hover{background:#eef0f4}
  70. .side-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
  71. .side-item .i{font-size:14px;color:var(--text-3)}
  72. .side-item.active .i{color:var(--primary)}
  73. .side-item time{margin-left:auto;font-size:11px;color:var(--text-3)}
  74. /* 主列 */
  75. .main{flex:1;min-width:0;display:flex;flex-direction:column}
  76. .scroll{flex:1;overflow:hidden;padding:26px 28px 10px;background:
  77. linear-gradient(180deg,rgba(42,80,236,.03),transparent 220px),var(--canvas)}
  78. .col{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
  79. /* ── 用户消息:右侧窄气泡 ── */
  80. .turn--user{display:flex;justify-content:flex-end}
  81. .user-bubble{max-width:76%;background:var(--primary);color:#fff;border-radius:12px 12px 3px 12px;padding:10px 14px;font-size:14px;line-height:1.65;box-shadow:0 2px 8px rgba(42,80,236,.22)}
  82. .user-bubble .meta{margin-top:5px;font-size:11px;color:rgba(255,255,255,.62);text-align:right}
  83. /* ── 助手回合:头像轨 + 内容列 ── */
  84. .turn--ai{display:grid;grid-template-columns:30px 1fr;gap:12px}
  85. .ai-avatar{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#2a50ec,#7b46ec);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;margin-top:2px;box-shadow:0 2px 6px rgba(42,80,236,.35)}
  86. .ai-avatar .i{font-size:15px}
  87. .ai-col{min-width:0;display:flex;flex-direction:column;gap:12px}
  88. /* ── 思考过程 ── */
  89. .think{background:linear-gradient(180deg,rgba(123,70,236,.055),rgba(42,80,236,.03));border:1px solid rgba(123,70,236,.14);border-radius:var(--r-block);overflow:hidden}
  90. .think__head{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;user-select:none}
  91. .think__head .i-lead{color:#7b46ec;font-size:14px}
  92. .think__label{font-size:12.5px;font-weight:600;color:#6a3fd8}
  93. .think__state{font-size:12px;color:var(--text-3)}
  94. .think__state.shimmer{background:linear-gradient(90deg,#8b919c 25%,#b9a6ee 45%,#8b919c 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 1.6s linear infinite}
  95. @keyframes sh{to{background-position:-200% 0}}
  96. .think__time{margin-left:auto;font-size:11.5px;color:var(--text-3);font-family:var(--mono)}
  97. .think__chev{color:var(--text-3);font-size:14px}
  98. .think__body{padding:2px 14px 12px;border-top:1px dashed rgba(123,70,236,.18)}
  99. .think__body p{font-size:13px;color:var(--text-2);line-height:1.8;margin-top:8px}
  100. .think__body p b{color:#6a3fd8}
  101. /* ── 工具执行步骤栈 ── */
  102. .steps{border:1px solid var(--border);border-radius:var(--r-block);background:var(--card)}
  103. .steps__head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
  104. .steps__head .i-lead{color:var(--primary);font-size:14px}
  105. .steps__label{font-size:12.5px;font-weight:600;color:var(--text-2)}
  106. .steps__count{font-size:11.5px;color:var(--text-3)}
  107. .steps__ok{margin-left:auto;font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:4px}
  108. .step{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:start;padding:9px 12px 9px 4px}
  109. .step+.step{border-top:1px dashed var(--border)}
  110. .step .rail{display:flex;flex-direction:column;align-items:center;gap:2px}
  111. .step .node{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:#fff}
  112. .step .node--shell{background:#0e7c86}.step .node--sql{background:#2a50ec}.step .node--chart{background:#7b46ec}.step .node--file{background:#b58a05}
  113. .step .rail .line{width:2px;flex:1;min-height:14px;background:var(--border);border-radius:2px}
  114. .step:last-child .rail .line{display:none}
  115. .step__title{font-size:13px;color:var(--text-1);font-weight:550}
  116. .step__title .tool{font-family:var(--mono);font-size:12px;background:#f2f4f8;border-radius:4px;padding:1px 6px;margin-right:6px;color:var(--text-2)}
  117. .step__preview{font-size:12px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px;margin-top:2px}
  118. .step__side{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);padding-top:2px}
  119. .step__side .ok{color:var(--ok);font-size:13px}
  120. .step__expand{grid-column:2 / 4;margin-top:8px;border-top:1px dashed var(--border);padding-top:8px}
  121. .step__expand .cap{font-size:11px;color:var(--text-3);margin-bottom:4px;letter-spacing:.04em}
  122. .step__expand pre{font-family:var(--mono);font-size:12px;background:#f6f8fa;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:#333c4a;max-height:120px;overflow:hidden;line-height:1.55}
  123. /* ── 正文 markdown ── */
  124. .md{font-size:14.5px;line-height:1.8;color:var(--text-1)}
  125. .md p{margin:0 0 10px}
  126. .md h4{font-size:15.5px;margin:4px 0 8px;font-weight:650}
  127. .md code{font-family:var(--mono);font-size:12.5px;background:#f2f4f8;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:#1f3a8f}
  128. .md strong{color:var(--primary-deep)}
  129. .md .hl{background:linear-gradient(transparent 62%,rgba(42,80,236,.16) 0)}
  130. /* 结论洞察条 */
  131. .insight{display:flex;gap:10px;align-items:flex-start;background:var(--primary-soft);border:1px solid var(--primary-soft-2);border-left:3px solid var(--primary);border-radius:var(--r-block);padding:10px 14px;font-size:13.5px}
  132. .insight .i{font-size:15px;color:var(--primary);margin-top:2px}
  133. .insight b{color:var(--primary-deep)}
  134. /* ── 通用块卡(图表/表格/报告) ── */
  135. .blockcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r-block);overflow:hidden;box-shadow:0 1px 3px rgba(24,39,88,.05)}
  136. .bc__head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);background:#fafbfd}
  137. .bc__head .i-lead{font-size:14px}
  138. .bc__title{font-size:13px;font-weight:650;color:var(--text-1)}
  139. .bc__chip{font-size:10.5px;padding:1px 7px;border-radius:99px;font-weight:600}
  140. .bc__chip--chart{color:#7b46ec;background:rgba(123,70,236,.09)}
  141. .bc__chip--table{color:#0e7c86;background:rgba(14,124,134,.09)}
  142. .bc__chip--report{color:#fff;background:var(--primary)}
  143. .bc__spacer{flex:1}
  144. .bc__act{display:flex;gap:2px}
  145. .bc__act .ab{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;border:none;background:transparent}
  146. .bc__act .ab:hover{background:#eef0f4;color:var(--primary)}
  147. .bc__act .ab .i{font-size:14px}
  148. /* 图表 */
  149. .chart-body{padding:14px 16px 6px}
  150. .chart-body svg{width:100%;height:auto;display:block}
  151. .legend{display:flex;gap:16px;padding:0 16px 10px;font-size:11.5px;color:var(--text-2)}
  152. .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
  153. /* 表格 */
  154. .table-body{padding:0}
  155. table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
  156. table.grid th{background:#f6f8fa;text-align:left;padding:7px 12px;font-weight:600;color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap}
  157. table.grid td{padding:7px 12px;border-bottom:1px solid #eef1f5}
  158. table.grid tr:last-child td{border-bottom:none}
  159. table.grid tr:hover td{background:#f7f9ff}
  160. .up{color:var(--err);font-weight:600}.down{color:var(--ok);font-weight:600}
  161. /* 报告 */
  162. .report-cover{background:linear-gradient(135deg,rgba(42,80,236,.10),rgba(123,70,236,.08));border-bottom:1px solid var(--border);padding:12px 16px;display:flex;gap:12px;align-items:center}
  163. .report-cover .badge{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2a50ec,#7b46ec);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
  164. .report-cover .t1{font-size:15px;font-weight:700}
  165. .report-cover .t2{font-size:11.5px;color:var(--text-3);margin-top:1px}
  166. .report-body{padding:14px 18px 6px;font-size:13.5px;line-height:1.85}
  167. .report-body h5{font-size:13.5px;font-weight:700;margin:10px 0 6px;color:var(--text-1)}
  168. .report-body ol{margin:6px 0 10px 18px}
  169. .report-body li{margin-bottom:5px}
  170. .report-body li b{color:var(--primary-deep)}
  171. .report-body .num{display:inline-flex;width:17px;height:17px;border-radius:5px;background:var(--primary-soft-2);color:var(--primary);font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-right:7px;font-style:normal}
  172. .report-foot{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:#fafbfd}
  173. .rf-btn{height:26px;padding:0 11px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:12px;color:var(--text-2);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  174. .rf-btn:hover{border-color:var(--primary);color:var(--primary)}
  175. .rf-btn .i{font-size:13px}
  176. /* ── 回合脚注(元信息 + 操作) ── */
  177. .turnfoot{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--text-3);padding:2px 2px 0}
  178. .turnfoot .sep{width:1px;height:10px;background:var(--border)}
  179. .turnfoot .st{display:inline-flex;align-items:center;gap:5px}
  180. .turnfoot .st .i{font-size:12px;color:var(--ok)}
  181. .turnfoot .acts{margin-left:auto;display:flex;gap:2px}
  182. .turnfoot .acts .ab{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;border:none;background:transparent}
  183. .turnfoot .acts .ab:hover{background:#eef0f4;color:var(--primary)}
  184. /* ── 出错形态 ── */
  185. .errstrip{display:flex;gap:10px;align-items:flex-start;background:var(--err-soft);border:1px solid rgba(217,48,37,.18);border-radius:var(--r-block);padding:10px 14px;font-size:13px;color:#a32620}
  186. /* ── 输入区 ── */
  187. .composer-wrap{flex:none;padding:10px 28px 18px;background:linear-gradient(180deg,transparent,var(--canvas))}
  188. .composer{max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-page);box-shadow:var(--shadow-pop);padding:12px 14px 10px}
  189. .composer textarea{width:100%;border:none;outline:none;resize:none;font:inherit;font-size:14px;color:var(--text-1);background:transparent;min-height:44px}
  190. .composer textarea::placeholder{color:var(--text-3)}
  191. .composer__bar{display:flex;align-items:center;gap:8px;margin-top:6px}
  192. .cchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:12px;color:var(--text-2);cursor:pointer;background:#fff}
  193. .cchip:hover{border-color:var(--primary);color:var(--primary)}
  194. .cchip .i{font-size:13px;color:var(--text-3)}
  195. .composer__bar .sp{flex:1}
  196. .send{width:32px;height:32px;border-radius:9px;border:none;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(42,80,236,.35)}
  197. .send:hover{background:var(--primary-deep)}
  198. .send .i{font-size:16px}
  199. /* 追问建议 */
  200. .sugs{max-width:900px;margin:0 auto 10px;display:flex;gap:8px}
  201. .sug{height:28px;padding:0 12px;border-radius:99px;border:1px solid var(--border);background:rgba(255,255,255,.75);font-size:12px;color:var(--text-2);display:inline-flex;align-items:center;cursor:pointer}
  202. .sug:hover{border-color:var(--primary);color:var(--primary);background:#fff}
  203. /* ── 右栏:看板 + 产物 ── */
  204. .aside{width:340px;flex:none;border-left:1px solid var(--border);background:#f7f8fa;display:flex;flex-direction:column;gap:14px;padding:14px;overflow:hidden}
  205. .aside .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-block)}
  206. .aside .panel__head{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:650;color:var(--text-2)}
  207. .aside .panel__head .i{color:var(--primary);font-size:14px}
  208. .aside .panel__head .n{margin-left:auto;font-size:11px;color:var(--text-3)}
  209. .pin{margin:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
  210. .pin .pin__t{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11.5px;color:var(--text-2);background:#fafbfd;border-bottom:1px solid var(--border)}
  211. .pin .pin__t .i{color:#7b46ec;font-size:12px}
  212. .pin .thumb{height:86px;background:linear-gradient(180deg,#fbfcff,#f3f5fb);display:flex;align-items:flex-end;gap:5px;padding:10px 14px}
  213. .pin .thumb b{flex:1;background:linear-gradient(180deg,#5c78f2,#2a50ec);border-radius:3px 3px 0 0;opacity:.85}
  214. .file{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12.5px;color:var(--text-2);border-bottom:1px solid #f1f3f7}
  215. .file:last-child{border-bottom:none}
  216. .file .i{color:var(--text-3);font-size:14px}
  217. .file .sz{margin-left:auto;font-size:11px;color:var(--text-3);font-family:var(--mono)}
  218. .file--new .i{color:var(--ok)}
  219. /* ── 设计说明区 ── */
  220. .notes{max-width:1480px;margin:0 auto 60px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  221. .note{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
  222. .note h3{font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
  223. .note h3 .n{width:18px;height:18px;border-radius:5px;background:var(--primary);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
  224. .note p{font-size:12.5px;color:var(--text-2);line-height:1.75}
  225. .note code{font-family:var(--mono);font-size:11.5px;background:#f2f4f8;border-radius:4px;padding:1px 5px;color:#1f3a8f}
  226. /* ══════════ 内联审批(替代弹框) ══════════ */
  227. @keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
  228. .apv{background:#fffcf3;border:1px solid rgba(181,138,5,.32);border-left:3px solid var(--warn);border-radius:var(--r-block);overflow:hidden}
  229. .apv__head{display:flex;align-items:center;gap:9px;padding:10px 14px 8px}
  230. .apv__pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none}
  231. .apv__pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--warn);animation:ring 1.4s ease-out infinite}
  232. .apv__title{font-size:13.5px;font-weight:700;color:#8a6a00}
  233. .apv__state{font-size:12px;color:var(--text-2)}
  234. .apv__cd{margin-left:auto;font-size:11.5px;color:var(--warn);font-family:var(--mono)}
  235. .apv__body{padding:0 14px 4px}
  236. .apv__cap{font-size:11px;color:var(--text-3);letter-spacing:.04em;margin:6px 0 4px}
  237. .apv__cmd{font-family:var(--mono);font-size:12.5px;background:#f6f8fa;border:1px solid var(--border);border-radius:6px;padding:9px 11px;color:#1f2937;line-height:1.6;word-break:break-all}
  238. .apv__cmd .p{color:var(--ok);user-select:none;margin-right:6px}
  239. .apv__meta{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
  240. .mchip{font-size:11px;color:var(--text-2);background:#f2f4f8;border-radius:4px;padding:2px 7px}
  241. .mchip b{color:var(--text-1);font-weight:600}
  242. .apv__diff{font-family:var(--mono);font-size:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden;line-height:1.7}
  243. .apv__diff .dl{padding:1px 10px;white-space:pre-wrap;word-break:break-all}
  244. .apv__diff .add{background:#e6f6ec;color:#116329}
  245. .apv__diff .del{background:#fdecea;color:#a32620;text-decoration:line-through;text-decoration-color:rgba(163,38,32,.4)}
  246. .apv__diff .ctx{background:#fbfcfe;color:var(--text-2)}
  247. .apv__diff .fh{background:#eef2fb;color:#1f3a8f}
  248. .apv__acts{display:flex;align-items:center;gap:8px;padding:11px 14px 13px}
  249. .a-allow{height:30px;padding:0 16px;border-radius:7px;border:none;background:var(--primary);color:#fff;font-size:13px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  250. .a-allow:hover{background:var(--primary-deep)}
  251. .a-session{height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--text-2);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  252. .a-session:hover{border-color:var(--primary);color:var(--primary)}
  253. .a-deny{height:30px;padding:0 12px;border-radius:7px;border:1px solid rgba(217,48,37,.35);background:#fff;color:var(--err);font-size:12.5px;cursor:pointer;margin-left:auto}
  254. .a-deny:hover{background:var(--err-soft)}
  255. kbd{font-family:var(--mono);font-size:10px;background:#eef0f4;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--text-2)}
  256. .apv-done{display:flex;align-items:center;gap:8px;border-radius:var(--r-ctl);padding:7px 12px;font-size:12.5px;background:#f6f8fa;border:1px solid var(--border);color:var(--text-2)}
  257. .apv-done .i{font-size:14px}
  258. .apv-done--ok{border-left:3px solid var(--ok)}
  259. .apv-done--ok .i{color:var(--ok)}
  260. .apv-done--deny{border-left:3px solid var(--err)}
  261. .apv-done--deny .i{color:var(--err)}
  262. .apv-done .what{font-family:var(--mono);font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
  263. .apv-done time{margin-left:auto;font-size:11px;color:var(--text-3)}
  264. /* input 提问卡 */
  265. .qst{background:var(--card);border:1px solid var(--primary-soft-2);border-left:3px solid var(--primary);border-radius:var(--r-block);overflow:hidden}
  266. .qst__head{display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
  267. .qst__head .i-lead{color:var(--primary);font-size:14px}
  268. .qst__title{font-size:13.5px;font-weight:700}
  269. .qst__body{padding:6px 14px 2px}
  270. .qst__q{font-size:13px;color:var(--text-1);margin:8px 0 7px}
  271. .qst__q .req{color:var(--err);margin-left:3px}
  272. .opts{display:flex;flex-wrap:wrap;gap:7px}
  273. .opt{height:30px;padding:0 13px;border-radius:99px;border:1.5px solid var(--border);background:#fff;font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
  274. .opt:hover{border-color:var(--primary)}
  275. .opt.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
  276. .opt .d{font-size:11px;color:var(--text-3)}
  277. .opt.on .d{color:var(--primary);opacity:.75}
  278. .qst input{width:100%;height:32px;border:1px solid var(--border);border-radius:6px;padding:0 10px;font:inherit;font-size:13px;outline:none;margin-top:4px}
  279. .qst input:focus{border-color:var(--primary)}
  280. .apv__queue{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--text-3);padding:0 14px 10px}
  281. .apv__queue .qtab{border:1px dashed var(--border);border-radius:5px;padding:2px 8px;color:var(--text-3)}
  282. /* 等待态输入区 */
  283. .composer.waiting{border-color:rgba(181,138,5,.45)}
  284. .waitstrip{display:flex;align-items:center;gap:9px;background:#fffcf3;border-bottom:1px solid rgba(181,138,5,.25);border-radius:var(--r-page) var(--r-page) 0 0;padding:8px 14px;font-size:12.5px;color:#8a6a00}
  285. .waitstrip .apv__pulse{width:8px;height:8px}
  286. .waitstrip a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
  287. .waitstrip .esc{margin-left:auto;color:var(--text-3)}
  288. textarea:disabled{color:var(--text-3);cursor:not-allowed}
  289. /* ══════════ 权限设置下拉 ══════════ */
  290. .perm{position:relative}
  291. .perm .cchip.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}
  292. .perm-menu{position:absolute;bottom:36px;left:0;width:300px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);padding:6px;z-index:9}
  293. .pm__cap{font-size:10.5px;color:var(--text-3);letter-spacing:.05em;padding:5px 10px 4px;font-weight:600}
  294. .pm__opt{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px;border-radius:8px;cursor:pointer}
  295. .pm__opt:hover{background:#f2f4f8}
  296. .pm__opt b{font-size:13px;color:var(--text-1);font-weight:650}
  297. .pm__opt span{grid-column:1 / 2;font-size:11.5px;color:var(--text-3);line-height:1.5}
  298. .pm__opt .ck{grid-column:2;grid-row:1 / 3;align-self:center;color:var(--primary);font-size:15px}
  299. .pm__opt.on{background:var(--primary-soft)}
  300. .pm__opt.on b{color:var(--primary)}
  301. .pm__opt.danger:hover{background:var(--err-soft)}
  302. .pm__opt.danger b{color:var(--err)}
  303. .pm__foot{border-top:1px solid var(--border);margin-top:5px;padding:7px 10px 3px;font-size:11px;color:var(--text-3);line-height:1.6}
  304. .pm__foot b{color:var(--warn)}
  305. </style>
  306. </head>
  307. <body>
  308. <!-- ══════════ SVG 图标库(mdi 风格,与项目 Iconify mdi 一致) ══════════ -->
  309. <svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  310. <symbol id="i-robot" viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2 2 2 0 0 1-1 1.73V7h3a4 4 0 0 1 4 4v1h1v4h-1v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2H2v-4h1v-1a4 4 0 0 1 4-4h3V5.73A2 2 0 0 1 12 2m-4 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4m8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/></symbol>
  311. <symbol id="i-send" viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2z"/></symbol>
  312. <symbol id="i-check" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.4-1.4L9 16.2 19.6 5.6z"/></symbol>
  313. <symbol id="i-chev" viewBox="0 0 24 24"><path d="M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z"/></symbol>
  314. <symbol id="i-brain" viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 1 3 3v.34A4.5 4.5 0 0 1 18.5 9c1.3.5 2.5 1.7 2.5 3.5 0 1.6-.9 3-2.3 3.7.2.4.3.9.3 1.3a3.5 3.5 0 0 1-3.5 3.5c-.7 0-1.4-.2-2-.6-.6.9-1.6 1.6-3 1.6s-2.4-.7-3-1.6c-.6.4-1.3.6-2 .6A3.5 3.5 0 0 1 2 17.5c0-.4.1-.9.3-1.3A4.1 4.1 0 0 1 0 12.5C0 10.7 1.2 9.5 2.5 9A4.5 4.5 0 0 1 6 5.34V5a3 3 0 0 1 3-3c1.2 0 2.3.7 3 1.7z"/></symbol>
  315. <symbol id="i-terminal" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6.6 16.4 5.2 15l3-3-3-3 1.4-1.4L10.8 12zm7.4 1.6h-4v-2h4z"/></symbol>
  316. <symbol id="i-database" viewBox="0 0 24 24"><path d="M12 3C7.6 3 4 4.8 4 7s3.6 4 8 4 8-1.8 8-4-3.6-4-8-4M4 9v4c0 2.2 3.6 4 8 4s8-1.8 8-4V9c-1.8 1.3-4.6 2-8 2s-6.2-.7-8-2m0 6v4c0 2.2 3.6 4 8 4s8-1.8 8-4v-4c-1.8 1.3-4.6 2-8 2s-6.2-.7-8-2"/></symbol>
  317. <symbol id="i-chart" viewBox="0 0 24 24"><path d="M3 3h2v16h16v2H3zm4 12v-6h3v6zm5 0V7h3v8zm5 0V4h3v11z"/></symbol>
  318. <symbol id="i-file" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 7V3.5L18.5 9z"/></symbol>
  319. <symbol id="i-doc" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 7V3.5L18.5 9zM8 12h8v2H8zm0 4h8v2H8z"/></symbol>
  320. <symbol id="i-table" viewBox="0 0 24 24"><path d="M3 3h18v18H3zm2 4v4h6V7zm8 0v4h6V7zM5 15v4h6v-4zm8 0v4h6v-4z"/></symbol>
  321. <symbol id="i-pin" viewBox="0 0 24 24"><path d="M16 3v2l-1 1v5l3 2v2h-5v6l-1 1-1-1v-6H6v-2l3-2V6L8 5V3z"/></symbol>
  322. <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 3v10l4-4 1.4 1.4L12 16.8 6.6 10.4 8 9l4 4V3zM5 19h14v2H5z"/></symbol>
  323. <symbol id="i-full" viewBox="0 0 24 24"><path d="M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM4 14h2v4h4v2H4zm14 0h2v6h-6v-2h4z"/></symbol>
  324. <symbol id="i-copy" viewBox="0 0 24 24"><path d="M8 3h12v14h-2V5H8zm-4 4h12v14H4zm2 2v10h8V9z"/></symbol>
  325. <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M12 4a8 8 0 0 1 8 8h-2a6 6 0 0 0-9.5-4.9L11 9H4V2l2.6 2.6A8 8 0 0 1 12 4m8 8-2.6-2.6A8 8 0 0 1 12 20a8 8 0 0 1-8-8h2a6 6 0 0 0 9.5 4.9L13 15h7z"/></symbol>
  326. <symbol id="i-folder" viewBox="0 0 24 24"><path d="M10 4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></symbol>
  327. <symbol id="i-board" viewBox="0 0 24 24"><path d="M3 3h8v10H3zm10 0h8v6h-8zM3 15h8v6H3zm10-4h8v10h-8z"/></symbol>
  328. <symbol id="i-slug" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 4 6 4-6 4z"/></symbol>
  329. <symbol id="i-idea" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 4 12.7c-.6.5-1 1.2-1 2V18H9v-1.3c0-.8-.4-1.5-1-2A7 7 0 0 1 12 2m-3 18h6v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z"/></symbol>
  330. <symbol id="i-clock" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 5h-2v6l5 3 1-1.7-4-2.3z"/></symbol>
  331. <symbol id="i-token" viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m3 5v2h3v6h2v-6h3V8z"/></symbol>
  332. <symbol id="i-model" viewBox="0 0 24 24"><path d="M7 2h10l5 10-5 10H7L2 12zm1.6 2L4.6 12l4 8h8.8l4-8-4-8z"/></symbol>
  333. </svg>
  334. <!-- 稿头 -->
  335. <div class="doc-head">
  336. <h1>清鉴 · Codex 聊天界面重设计</h1>
  337. <span class="tag">设计稿 v1.0</span>
  338. <span class="sub">主题 #2a50ec · 亮色(暗色走 token 自动派生)· 示例数据:客户投诉激增分析</span>
  339. </div>
  340. <!-- ══════════ 页面画框 ══════════ -->
  341. <div class="frame">
  342. <div class="window">
  343. <!-- 顶栏 -->
  344. <div class="topbar">
  345. <span class="dot"></span>
  346. <span class="title">Codex 数据分析</span>
  347. <span class="session">客户投诉分析 <span class="sep">/</span> 就绪</span>
  348. <span class="spacer"></span>
  349. <span class="chip chip--route"><span class="mini"></span>路由层 · 10.66.66.66:8080</span>
  350. <span class="chip chip--model"><span class="mini"></span>qwen · 本地模型</span>
  351. <button class="tbtn"><svg class="i"><use href="#i-download"/></svg>导出</button>
  352. <button class="tbtn"><svg class="i"><use href="#i-slug"/></svg>诊断</button>
  353. </div>
  354. <div class="body">
  355. <!-- 会话栏 -->
  356. <div class="sidebar">
  357. <div class="side-sec">进行中</div>
  358. <div class="side-item active"><svg class="i"><use href="#i-robot"/></svg>客户投诉激增分析<time>2m</time></div>
  359. <div class="side-sec">今天</div>
  360. <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>留存率周报数据核对<time>14:02</time></div>
  361. <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>渠道 ROI 对比图表<time>11:37</time></div>
  362. <div class="side-sec">更早</div>
  363. <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>工单关键词聚类<time>周三</time></div>
  364. </div>
  365. <!-- 主列 -->
  366. <div class="main">
  367. <div class="scroll">
  368. <div class="col">
  369. <!-- ── 用户消息 ── -->
  370. <div class="turn--user">
  371. <div class="user-bubble">
  372. 分析近 30 天客户投诉数据,找出投诉激增的原因,生成一份分析报告,并画出趋势图。
  373. <div class="meta">14:02</div>
  374. </div>
  375. </div>
  376. <!-- ── 助手回合 ── -->
  377. <div class="turn--ai">
  378. <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
  379. <div class="ai-col">
  380. <!-- ① 思考过程 -->
  381. <div class="think">
  382. <div class="think__head">
  383. <svg class="i i-lead"><use href="#i-brain"/></svg>
  384. <span class="think__label">思考过程</span>
  385. <span class="think__state">已完成 · 制定分析路径</span>
  386. <span class="think__time">8.2s</span>
  387. <svg class="i think__chev"><use href="#i-chev"/></svg>
  388. </div>
  389. <div class="think__body">
  390. <p>先确认数据源在 <b>complaints_202608.csv</b>,按天聚合投诉量观察拐点;再按「渠道 × 工单类型」下钻定位激增来源;异常集中在 9/03–9/12,重点排查该窗口的版本发布与退费政策变更。</p>
  391. </div>
  392. </div>
  393. <!-- ② 工具执行步骤栈 -->
  394. <div class="steps">
  395. <div class="steps__head">
  396. <svg class="i i-lead"><use href="#i-terminal"/></svg>
  397. <span class="steps__label">执行过程</span>
  398. <span class="steps__count">4 个步骤 · 全部成功</span>
  399. <span class="steps__ok"><svg class="i"><use href="#i-check"/></svg>已完成</span>
  400. <svg class="i think__chev"><use href="#i-chev"/></svg>
  401. </div>
  402. <div class="step">
  403. <div class="rail"><span class="node node--file"><svg class="i"><use href="#i-file"/></svg></span><span class="line"></span></div>
  404. <div>
  405. <div class="step__title"><span class="tool">read_file</span>读取投诉明细数据</div>
  406. <div class="step__preview">complaints_202608.csv · 18,432 行 · UTF-8</div>
  407. </div>
  408. <div class="step__side">0.8s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  409. </div>
  410. <div class="step">
  411. <div class="rail"><span class="node node--sql"><svg class="i"><use href="#i-database"/></svg></span><span class="line"></span></div>
  412. <div>
  413. <div class="step__title"><span class="tool">sql</span>按日聚合投诉量并对比前周</div>
  414. <div class="step__preview">SELECT date, count(*) FROM complaints GROUP BY date …</div>
  415. </div>
  416. <div class="step__side">2.6s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  417. <div class="step__expand">
  418. <div class="cap">输出(18 行,已截断)</div>
  419. <pre>date cnt wow
  420. 2026-09-02 42 +2.4%
  421. 2026-09-03 187 +345% ← 拐点
  422. 2026-09-04 214 +409%
  423. ...</pre>
  424. </div>
  425. </div>
  426. <div class="step">
  427. <div class="rail"><span class="node node--shell"><svg class="i"><use href="#i-terminal"/></svg></span><span class="line"></span></div>
  428. <div>
  429. <div class="step__title"><span class="tool">shell</span>关联版本发布与退费政策变更记录</div>
  430. <div class="step__preview">grep -E "refund|v2.6" releases.log policy.log</div>
  431. </div>
  432. <div class="step__side">1.1s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  433. </div>
  434. <div class="step">
  435. <div class="rail"><span class="node node--chart"><svg class="i"><use href="#i-chart"/></svg></span><span class="line"></span></div>
  436. <div>
  437. <div class="step__title"><span class="tool">echarts</span>生成 30 天投诉量趋势图</div>
  438. <div class="step__preview">bar + line 组合图 · 已钉到看板</div>
  439. </div>
  440. <div class="step__side">0.4s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  441. </div>
  442. </div>
  443. <!-- ③ 结果正文 -->
  444. <div class="md">
  445. <p>已完成分析。<span class="hl"><strong>投诉激增的直接原因:9 月 3 日 v2.6 版本上线后,退费流程出现批量超时</strong></span>,占新增投诉的 <code>62.4%</code>。</p>
  446. <div class="insight">
  447. <svg class="i"><use href="#i-idea"/></svg>
  448. <span><b>关键结论</b>:拐点出现在 9/03(+345%),与 v2.6 发版时间完全吻合;退费类工单平均处理时长由 6h 升至 41h。建议优先回滚退费网关并补发安抚券。</span>
  449. </div>
  450. </div>
  451. <!-- ④ 图表卡 -->
  452. <div class="blockcard">
  453. <div class="bc__head">
  454. <svg class="i i-lead" style="color:#7b46ec"><use href="#i-chart"/></svg>
  455. <span class="bc__title">近 30 天投诉量趋势(含拐点标注)</span>
  456. <span class="bc__chip bc__chip--chart">echarts</span>
  457. <span class="bc__spacer"></span>
  458. <span class="bc__act">
  459. <button class="ab" title="钉到看板"><svg class="i"><use href="#i-pin"/></svg></button>
  460. <button class="ab" title="导出 PNG"><svg class="i"><use href="#i-download"/></svg></button>
  461. <button class="ab" title="全屏"><svg class="i"><use href="#i-full"/></svg></button>
  462. </span>
  463. </div>
  464. <div class="chart-body">
  465. <svg viewBox="0 0 640 190">
  466. <line x1="34" y1="20" x2="34" y2="160" stroke="#e3e7ef"/>
  467. <line x1="34" y1="160" x2="628" y2="160" stroke="#e3e7ef"/>
  468. <g fill="#8b919c" font-size="9" font-family="Consolas,monospace">
  469. <text x="6" y="24">250</text><text x="10" y="70">150</text><text x="10" y="118">50</text>
  470. <text x="34" y="174">09-01</text><text x="150" y="174">09-07</text><text x="300" y="174">09-13</text><text x="452" y="174">09-20</text><text x="598" y="174">09-27</text>
  471. </g>
  472. <g>
  473. <rect x="46" y="140" width="13" height="20" rx="2" fill="#5c78f2" opacity=".8"/>
  474. <rect x="63" y="136" width="13" height="24" rx="2" fill="#5c78f2" opacity=".8"/>
  475. <rect x="80" y="132" width="13" height="28" rx="2" fill="#5c78f2" opacity=".8"/>
  476. <rect x="114" y="34" width="13" height="126" rx="2" fill="#2a50ec"/>
  477. <rect x="131" y="28" width="13" height="132" rx="2" fill="#2a50ec"/>
  478. <rect x="148" y="42" width="13" height="118" rx="2" fill="#2a50ec"/>
  479. <rect x="165" y="58" width="13" height="102" rx="2" fill="#5c78f2" opacity=".8"/>
  480. <rect x="199" y="80" width="13" height="80" rx="2" fill="#5c78f2" opacity=".8"/>
  481. <rect x="250" y="96" width="13" height="64" rx="2" fill="#5c78f2" opacity=".8"/>
  482. <rect x="318" y="108" width="13" height="52" rx="2" fill="#5c78f2" opacity=".8"/>
  483. <rect x="402" y="116" width="13" height="44" rx="2" fill="#5c78f2" opacity=".8"/>
  484. <rect x="487" y="126" width="13" height="34" rx="2" fill="#5c78f2" opacity=".8"/>
  485. <rect x="570" y="134" width="13" height="26" rx="2" fill="#5c78f2" opacity=".8"/>
  486. </g>
  487. <polyline points="52,150 137,38 302,102 574,140" fill="none" stroke="#7b46ec" stroke-width="2" stroke-dasharray="5 3"/>
  488. <g>
  489. <line x1="126" y1="22" x2="126" y2="160" stroke="#d93025" stroke-dasharray="4 4" opacity=".55"/>
  490. <rect x="76" y="8" rx="4" width="100" height="17" fill="rgba(217,48,37,.08)"/>
  491. <text x="82" y="20" font-size="10" fill="#d93025" font-family="PingFang SC,Microsoft YaHei">9/03 v2.6 发版 · 拐点</text>
  492. </g>
  493. </svg>
  494. </div>
  495. <div class="legend">
  496. <span><i style="background:#2a50ec"></i>投诉量</span>
  497. <span><i style="background:#7b46ec"></i>7 日均值</span>
  498. </div>
  499. </div>
  500. <!-- ⑤ 表格卡 -->
  501. <div class="blockcard">
  502. <div class="bc__head">
  503. <svg class="i i-lead" style="color:#0e7c86"><use href="#i-table"/></svg>
  504. <span class="bc__title">投诉类型 TOP 5(9/03–9/12)</span>
  505. <span class="bc__chip bc__chip--table">table</span>
  506. <span class="bc__spacer"></span>
  507. <span class="bc__act">
  508. <button class="ab" title="钉到看板"><svg class="i"><use href="#i-pin"/></svg></button>
  509. <button class="ab" title="导出 CSV"><svg class="i"><use href="#i-download"/></svg></button>
  510. </span>
  511. </div>
  512. <div class="table-body">
  513. <table class="grid">
  514. <thead><tr><th>投诉类型</th><th>工单数</th><th>环比</th><th>平均处理时长</th></tr></thead>
  515. <tbody>
  516. <tr><td>退费超时</td><td>1,862</td><td class="up">+412%</td><td>41h 12m</td></tr>
  517. <tr><td>App 闪退</td><td>517</td><td class="up">+96%</td><td>3h 45m</td></tr>
  518. <tr><td>账户锁定</td><td>284</td><td class="up">+41%</td><td>2h 08m</td></tr>
  519. <tr><td>发票开具</td><td>196</td><td class="down">-8%</td><td>5h 30m</td></tr>
  520. </tbody>
  521. </table>
  522. </div>
  523. </div>
  524. <!-- ⑥ 报告卡 -->
  525. <div class="blockcard">
  526. <div class="report-cover">
  527. <div class="badge"><svg class="i"><use href="#i-doc"/></svg></div>
  528. <div>
  529. <div class="t1">客户投诉激增分析报告(9/01–9/27)</div>
  530. <div class="t2">生成于 14:05 · 数据源 complaints_202608.csv · 可导出</div>
  531. </div>
  532. </div>
  533. <div class="report-body">
  534. <h5>核心发现</h5>
  535. <ol>
  536. <li><i class="num">1</i><b>版本相关性强</b>:投诉拐点与 v2.6 发版(9/03 10:20)时间完全吻合,退费超时类占比 <b>62.4%</b>;</li>
  537. <li><i class="num">2</i><b>影响面收敛</b>:84% 超时工单来自 Android 端 v2.6.0–v2.6.2,iOS 无明显波动;</li>
  538. <li><i class="num">3</i><b>恢复趋势明确</b>:9/12 热修复后日均投诉回落至基线 +9%,预计 9/30 完全恢复。</li>
  539. </ol>
  540. </div>
  541. <div class="report-foot">
  542. <button class="rf-btn"><svg class="i"><use href="#i-download"/></svg>导出 Markdown</button>
  543. <button class="rf-btn"><svg class="i"><use href="#i-download"/></svg>导出 HTML 报告</button>
  544. <button class="rf-btn"><svg class="i"><use href="#i-copy"/></svg>复制</button>
  545. </div>
  546. </div>
  547. <!-- ⑦ 回合脚注 -->
  548. <div class="turnfoot">
  549. <span class="st"><svg class="i"><use href="#i-check"/></svg>已完成</span>
  550. <span class="sep"></span>
  551. <span class="st"><svg class="i"><use href="#i-clock"/></svg>耗时 2m 14s</span>
  552. <span class="st"><svg class="i"><use href="#i-token"/></svg>输入 48.2k · 输出 1.9k</span>
  553. <span class="acts">
  554. <button class="ab" title="复制回复"><svg class="i"><use href="#i-copy"/></svg></button>
  555. <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
  556. </span>
  557. </div>
  558. </div>
  559. </div>
  560. <!-- ── 第二轮:用户 ── -->
  561. <div class="turn--user">
  562. <div class="user-bubble">
  563. 那把退费超时的工单按渠道拆一下,我要看哪个渠道最严重。
  564. <div class="meta">14:06</div>
  565. </div>
  566. </div>
  567. <!-- ── 第二轮:助手(已完成,思考折叠态) ── -->
  568. <div class="turn--ai">
  569. <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
  570. <div class="ai-col">
  571. <div class="think">
  572. <div class="think__head">
  573. <svg class="i i-lead"><use href="#i-brain"/></svg>
  574. <span class="think__label">思考过程</span>
  575. <span class="think__state">已完成</span>
  576. <span class="think__time">3.4s</span>
  577. <svg class="i think__chev"><use href="#i-chev"/></svg>
  578. </div>
  579. </div>
  580. <div class="md">
  581. <p>按渠道拆解完成:<strong>小程序端最严重</strong>,占比 47.3%,且处理时长最长(52h),与小程序退费入口的重试缺陷一致。App 端次之,Web 端基本正常。</p>
  582. </div>
  583. <div class="steps">
  584. <div class="steps__head">
  585. <svg class="i i-lead"><use href="#i-terminal"/></svg>
  586. <span class="steps__label">执行过程</span>
  587. <span class="steps__count">1 个步骤 · 成功</span>
  588. <span class="steps__ok"><svg class="i"><use href="#i-check"/></svg></span>
  589. <svg class="i think__chev"><use href="#i-chev"/></svg>
  590. </div>
  591. <div class="step">
  592. <div class="rail"><span class="node node--sql"><svg class="i"><use href="#i-database"/></svg></span><span class="line"></span></div>
  593. <div>
  594. <div class="step__title"><span class="tool">sql</span>按渠道统计退费超时工单分布</div>
  595. <div class="step__preview">SELECT channel, count(*) … GROUP BY channel</div>
  596. </div>
  597. <div class="step__side">1.9s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  598. </div>
  599. </div>
  600. <div class="turnfoot">
  601. <span class="st"><svg class="i"><use href="#i-check"/></svg>已完成</span>
  602. <span class="sep"></span>
  603. <span class="st"><svg class="i"><use href="#i-clock"/></svg>耗时 6.2s</span>
  604. <span class="st"><svg class="i"><use href="#i-token"/></svg>输入 52.7k · 输出 0.3k</span>
  605. <span class="acts">
  606. <button class="ab" title="复制回复"><svg class="i"><use href="#i-copy"/></svg></button>
  607. <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
  608. </span>
  609. </div>
  610. </div>
  611. </div>
  612. <!-- 出错形态示例(第三回合,运行中失败) -->
  613. <div class="turn--ai">
  614. <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
  615. <div class="ai-col">
  616. <div class="errstrip">
  617. <svg class="i" style="color:#d93025;font-size:15px;margin-top:2px"><use href="#i-idea"/></svg>
  618. <span>回合中断:上游 HTTP 502(退费网关查询超时)。已重试 2 次仍失败,可点击「重新生成」重试,或改用 <b>只统计 App 端</b>缩小范围。</span>
  619. </div>
  620. <div class="turnfoot">
  621. <span class="st" style="color:var(--err)">失败 · 上游 502</span>
  622. <span class="acts">
  623. <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
  624. </span>
  625. </div>
  626. </div>
  627. </div>
  628. </div>
  629. </div>
  630. <!-- 追问建议 + 输入区 -->
  631. <div class="composer-wrap">
  632. <div class="sugs">
  633. <span class="sug">按赔付金额再排一遍 TOP 渠道</span>
  634. <span class="sug">生成给管理层的简要版(5 页内)</span>
  635. <span class="sug">对比 v2.5 同期基线</span>
  636. </div>
  637. <div class="composer">
  638. <textarea placeholder="继续追问,或描述新的分析任务…(Shift+Enter 换行)"></textarea>
  639. <div class="composer__bar">
  640. <span class="cchip"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
  641. <span class="perm">
  642. <span class="cchip on"><svg class="i"><use href="#i-slug"/></svg>权限:默认<svg class="i"><use href="#i-chev" style="transform:rotate(180deg)"/></svg></span>
  643. <div class="perm-menu">
  644. <div class="pm__cap">审批与沙箱</div>
  645. <div class="pm__opt"><b>只读</b><span>只能读取与分析,任何改动都逐条确认</span></div>
  646. <div class="pm__opt on"><b>默认</b><span>工作区内可写;工作区外命令 / 文件修改逐条确认</span><svg class="i ck"><use href="#i-check"/></svg></div>
  647. <div class="pm__opt danger"><b>完全访问</b><span>全盘读写、任意命令、免确认 —— 仅建议在可信环境使用</span></div>
  648. <div class="pm__foot">切换对本会话立即生效;<b>完全访问</b> 下所有操作不再弹出确认。</div>
  649. </div>
  650. </span>
  651. <span class="cchip"><svg class="i"><use href="#i-board"/></svg>看板 2</span>
  652. <span class="cchip"><svg class="i"><use href="#i-folder"/></svg>模板</span>
  653. <span class="sp"></span>
  654. <button class="send"><svg class="i"><use href="#i-send"/></svg></button>
  655. </div>
  656. </div>
  657. </div>
  658. </div>
  659. <!-- 右栏:看板 + 产物 -->
  660. <div class="aside">
  661. <div class="panel">
  662. <div class="panel__head"><svg class="i"><use href="#i-board"/></svg>看板<span class="n">已钉 2 / 6</span></div>
  663. <div class="pin">
  664. <div class="pin__t"><svg class="i"><use href="#i-chart"/></svg>近 30 天投诉量趋势</div>
  665. <div class="thumb"><b style="height:22%"></b><b style="height:24%"></b><b style="height:92%"></b><b style="height:70%"></b><b style="height:48%"></b><b style="height:34%"></b><b style="height:28%"></b></div>
  666. </div>
  667. <div class="pin">
  668. <div class="pin__t"><svg class="i"><use href="#i-table"/></svg>投诉类型 TOP 5</div>
  669. <div class="thumb" style="align-items:center;display:flex;padding:0">
  670. <svg viewBox="0 0 300 86" style="width:100%"><g fill="#2a50ec" opacity=".85"><rect x="30" y="14" width="52" height="14" rx="3"/><rect x="30" y="36" width="30" height="14" rx="3" opacity=".7"/><rect x="30" y="58" width="20" height="14" rx="3" opacity=".5"/></g></svg>
  671. </div>
  672. </div>
  673. </div>
  674. <div class="panel">
  675. <div class="panel__head"><svg class="i"><use href="#i-folder"/></svg>本会话产物<span class="n">本轮变更 2</span></div>
  676. <div class="file file--new"><svg class="i"><use href="#i-doc"/></svg>投诉激增分析报告.md<span class="sz">18 KB</span></div>
  677. <div class="file file--new"><svg class="i"><use href="#i-chart"/></svg>trend_30d.echarts.json<span class="sz">4 KB</span></div>
  678. <div class="file"><svg class="i"><use href="#i-file"/></svg>complaints_202608.csv<span class="sz">2.1 MB</span></div>
  679. <div class="file"><svg class="i"><use href="#i-file"/></svg>releases.log<span class="sz">96 KB</span></div>
  680. </div>
  681. </div>
  682. </div>
  683. </div>
  684. </div>
  685. <!-- ══════════ 内联审批设计(替代弹框) ══════════ -->
  686. <div class="doc-head" style="margin-top:36px">
  687. <h1>用户确认 · 内联审批设计</h1>
  688. <span class="tag">不再弹框</span>
  689. <span class="sub">审批卡长在聊天流里 · 四类审批 + 等待态 + 已决留痕 · Enter 允许 / Esc 拒绝</span>
  690. </div>
  691. <div class="frame">
  692. <div class="window" style="height:1120px">
  693. <div class="topbar">
  694. <span class="dot" style="background:var(--warn);box-shadow:0 0 0 3px rgba(181,138,5,.15)"></span>
  695. <span class="title">Codex 数据分析</span>
  696. <span class="session">客户投诉分析 <span class="sep">/</span> 等待确认</span>
  697. <span class="spacer"></span>
  698. <span class="chip chip--model"><span class="mini"></span>qwen · 本地模型</span>
  699. </div>
  700. <div class="body">
  701. <div class="main">
  702. <div class="scroll">
  703. <div class="col">
  704. <div class="turn--user">
  705. <div class="user-bubble">帮我把 v2.6 的退费网关回滚到 v2.5,然后重启网关服务。<div class="meta">14:08</div></div>
  706. </div>
  707. <div class="turn--ai">
  708. <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
  709. <div class="ai-col">
  710. <div class="think">
  711. <div class="think__head">
  712. <svg class="i i-lead"><use href="#i-brain"/></svg>
  713. <span class="think__label">思考过程</span><span class="think__state">已完成</span>
  714. <span class="think__time">2.1s</span><svg class="i think__chev"><use href="#i-chev"/></svg>
  715. </div>
  716. </div>
  717. <div class="steps">
  718. <div class="steps__head">
  719. <svg class="i i-lead"><use href="#i-terminal"/></svg>
  720. <span class="steps__label">执行过程</span><span class="steps__count">2 个步骤 · 1 个等待确认</span>
  721. <svg class="i think__chev"><use href="#i-chev"/></svg>
  722. </div>
  723. <div class="step">
  724. <div class="rail"><span class="node node--file"><svg class="i"><use href="#i-file"/></svg></span><span class="line"></span></div>
  725. <div><div class="step__title"><span class="tool">apply_patch</span>回滚退费网关版本</div>
  726. <div class="step__preview">gateway/pom.xml · 1 处修改</div></div>
  727. <div class="step__side"><span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
  728. </div>
  729. <div class="step">
  730. <div class="rail"><span class="node node--shell"><svg class="i"><use href="#i-terminal"/></svg></span><span class="line"></span></div>
  731. <div><div class="step__title" style="color:#8a6a00">重启网关服务(等待确认)</div>
  732. <div class="step__preview">systemctl restart refund-gateway…</div></div>
  733. <div class="step__side" style="color:var(--warn)">待确认</div>
  734. </div>
  735. </div>
  736. <!-- ① command 审批卡:聊天流内、待确认 -->
  737. <div class="apv">
  738. <div class="apv__head">
  739. <span class="apv__pulse"></span>
  740. <span class="apv__title">允许执行命令?</span>
  741. <span class="apv__state">Codex 请求在服务器上执行以下命令</span>
  742. <span class="apv__cd">89s 后自动拒绝</span>
  743. </div>
  744. <div class="apv__body">
  745. <div class="apv__cap">命令</div>
  746. <div class="apv__cmd"><span class="p">$</span>systemctl restart refund-gateway &amp;&amp; journalctl -u refund-gateway -n 20 --no-pager</div>
  747. <div class="apv__meta">
  748. <span class="mchip">工作目录 <b>/opt/gateway</b></span>
  749. <span class="mchip">影响 <b>生产网关进程</b></span>
  750. <span class="mchip">审批策略 <b>on-request</b></span>
  751. </div>
  752. </div>
  753. <div class="apv__acts">
  754. <button class="a-allow">允许 <kbd>Enter</kbd></button>
  755. <button class="a-session">本会话内允许</button>
  756. <button class="a-deny">拒绝 <kbd>Esc</kbd></button>
  757. </div>
  758. <div class="apv__queue">队列中还有 1 条待确认:<span class="qtab">2/2 · 允许写入 report/ 目录</span></div>
  759. </div>
  760. <!-- ② file 审批卡:diff 预览 -->
  761. <div class="apv">
  762. <div class="apv__head">
  763. <span class="apv__pulse"></span>
  764. <span class="apv__title">允许修改文件?</span>
  765. <span class="apv__state">1 个文件 · +2 −2</span>
  766. <span class="apv__cd">112s 后自动拒绝</span>
  767. </div>
  768. <div class="apv__body">
  769. <div class="apv__cap">gateway/pom.xml</div>
  770. <div class="apv__diff">
  771. <div class="fh">@@ -18,7 +18,7 @@ gateway</div>
  772. <div class="ctx"> &lt;artifactId&gt;refund-gateway&lt;/artifactId&gt;</div>
  773. <div class="del">- &lt;version&gt;2.6.2&lt;/version&gt;</div>
  774. <div class="add">+ &lt;version&gt;2.5.9&lt;/version&gt;</div>
  775. <div class="ctx"> &lt;/dependency&gt;</div>
  776. </div>
  777. </div>
  778. <div class="apv__acts">
  779. <button class="a-allow">允许 <kbd>Enter</kbd></button>
  780. <button class="a-session">本会话内允许</button>
  781. <button class="a-deny">拒绝 <kbd>Esc</kbd></button>
  782. </div>
  783. </div>
  784. <!-- ③ input 提问卡:模型向用户要信息 -->
  785. <div class="qst">
  786. <div class="qst__head">
  787. <svg class="i i-lead"><use href="#i-idea"/></svg>
  788. <span class="qst__title">Codex 需要你补充信息</span>
  789. </div>
  790. <div class="qst__body">
  791. <div class="qst__q">回滚窗口选哪个?<span class="req">*</span></div>
  792. <div class="opts">
  793. <span class="opt on">立即回滚 <span class="d">约 2 分钟停机</span></span>
  794. <span class="opt">灰度切换 <span class="d">按渠道 10% 流量</span></span>
  795. <span class="opt">低峰执行 <span class="d">今晚 23:00</span></span>
  796. </div>
  797. <div class="qst__q" style="margin-top:12px">需要同时保留 v2.6 的配置吗?</div>
  798. <div class="opts">
  799. <span class="opt on">保留</span>
  800. <span class="opt">不保留</span>
  801. <span class="opt">不确定,听你建议</span>
  802. </div>
  803. <div class="qst__q" style="margin-top:12px">其他说明(可留空)</div>
  804. <input placeholder="补充给 Codex 的说明…">
  805. </div>
  806. <div class="apv__acts">
  807. <button class="a-allow">提交回答 <kbd>Enter</kbd></button>
  808. <button class="a-deny">跳过 <kbd>Esc</kbd></button>
  809. </div>
  810. </div>
  811. <!-- ④ 已决留痕:细条历史 -->
  812. <div class="apv-done apv-done--ok">
  813. <svg class="i"><use href="#i-check"/></svg>
  814. <span>已允许执行命令</span>
  815. <span class="what">systemctl restart refund-gateway</span>
  816. <time>14:09</time>
  817. </div>
  818. <div class="apv-done apv-done--deny">
  819. <svg class="i"><use href="#i-close"/></svg>
  820. <span>已拒绝修改文件</span>
  821. <span class="what">gateway/pom.xml</span>
  822. <time>14:09</time>
  823. </div>
  824. <div class="turnfoot">
  825. <span class="st" style="color:var(--warn)">等待确认 · 2 条</span>
  826. <span class="sep"></span>
  827. <span class="st"><svg class="i"><use href="#i-clock"/></svg>已进行 3m 02s</span>
  828. </div>
  829. </div>
  830. </div>
  831. </div>
  832. </div>
  833. <div class="composer-wrap">
  834. <div class="composer waiting">
  835. <div class="waitstrip">
  836. <span class="apv__pulse"></span>
  837. Codex 正在等待你的确认,输入已暂停 —— <a>回到确认卡 ↑</a>
  838. <span class="esc"><kbd>Enter</kbd> 允许 · <kbd>Esc</kbd> 拒绝</span>
  839. </div>
  840. <textarea placeholder="确认后才能继续输入…" disabled style="min-height:36px"></textarea>
  841. <div class="composer__bar">
  842. <span class="cchip"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
  843. <span class="cchip"><svg class="i"><use href="#i-slug"/></svg>权限:默认</span>
  844. <span class="sp"></span>
  845. <button class="send" style="background:#e3e7ef;box-shadow:none;color:var(--text-3)"><svg class="i"><use href="#i-send"/></svg></button>
  846. </div>
  847. </div>
  848. </div>
  849. </div>
  850. <div class="aside">
  851. <div class="panel">
  852. <div class="panel__head"><svg class="i"><use href="#i-slug"/></svg>待确认队列<span class="n">2 条</span></div>
  853. <div class="file" style="color:#8a6a00;background:#fffcf3"><span class="apv__pulse" style="width:7px;height:7px"></span>重启网关服务<span class="sz">89s</span></div>
  854. <div class="file" style="color:#8a6a00;background:#fffcf3"><span class="apv__pulse" style="width:7px;height:7px"></span>写入 report/ 目录<span class="sz">112s</span></div>
  855. </div>
  856. <div class="panel">
  857. <div class="panel__head"><svg class="i"><use href="#i-folder"/></svg>本会话审批记录<span class="n">今日 5 次</span></div>
  858. <div class="file"><svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg>读取投诉明细数据<span class="sz">14:05</span></div>
  859. <div class="file"><svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg>执行 SQL 聚合<span class="sz">14:05</span></div>
  860. <div class="file"><svg class="i" style="color:var(--err)"><use href="#i-close"/></svg>删除临时目录<span class="sz">14:03</span></div>
  861. </div>
  862. </div>
  863. </div>
  864. </div>
  865. </div>
  866. <!-- ══════════ 设计说明 ══════════ -->
  867. <div class="notes">
  868. <div class="note">
  869. <h3><span class="n">1</span>回合化排版,告别"大盖帽"</h3>
  870. <p>助手回复改为 <code>头像轨 + 内容列</code> 的 grid 结构,去掉沉重的「Codex + 状态徽标」头行;角色间靠 26px 间距成组、不画分隔线。状态/耗时/token 下沉到<code>回合脚注</code>,视线更聚焦内容。</p>
  871. </div>
  872. <div class="note">
  873. <h3><span class="n">2</span>思考过程:紫色渐隐卡</h3>
  874. <p>与正文/工具明确区分的<code>思考过程</code>卡:流式时标题 shimmer 流光,完成后显示 <code>已完成 · 摘要 + 耗时</code>,默认折叠,点击展开全文。对应 <code>kind:'thought'</code>。</p>
  875. </div>
  876. <div class="note">
  877. <h3><span class="n">3</span>工具执行:步骤栈</h3>
  878. <p>散落的工具卡升级为<code>执行过程步骤栈</code>:节点轨 + 工具类型彩色图标(shell/SQL/文件/图表)+ 单行参数预览 + 右侧状态与耗时,点击展开完整命令与输出(等宽字体、限高滚动)。对应 <code>kind:'tool'|'file'</code>。</p>
  879. </div>
  880. <div class="note">
  881. <h3><span class="n">4</span>结果正文排版升级</h3>
  882. <p>正文 14.5px/1.8,强调色加<code>荧光划线</code>;关键结论用「洞察条」(主色左边框 + 灯泡图标)承接。后续把 codex 侧 markdown 换成 streamdown-vue(Shiki 高亮 + 流式渲染),与 ai 模块对齐。</p>
  883. </div>
  884. <div class="note">
  885. <h3><span class="n">5</span>图表 / 表格 / 报告三大卡</h3>
  886. <p>三类富块统一为<code>标题栏 + 内容 + 操作区</code>的块卡:图表带类型 chip 与钉看板/导出 PNG/全屏;表格带导出;报告卡有渐变封面与导出 MD/HTML——围栏协议(```echarts/```table/```report)不动,只换皮。</p>
  887. </div>
  888. <div class="note">
  889. <h3><span class="n">6</span>输入区与追问</h3>
  890. <p>输入区升级为浮动圆角卡(12px 圆角 + 投影),模型/看板/模板收进底部 chip;上方新增<code>追问建议 chips</code>。顶栏新增模型 chip 与路由层状态 chip(桥接时显示上游地址)。</p>
  891. </div>
  892. <div class="note">
  893. <h3><span class="n">7</span>审批确认:弹框 → 内联卡</h3>
  894. <p>四类审批(command / file / permissions / input)全部内联到聊天流:<code>琥珀色待确认卡</code>带脉冲呼吸、命令/diff 预览、<code>允许 / 本会话允许 / 拒绝</code>三键与 <code>Enter/Esc</code> 快捷键、倒计时自动拒绝。<code>acceptForSession</code> 对应「本会话内允许」。</p>
  895. </div>
  896. <div class="note">
  897. <h3><span class="n">8</span>权限设置下拉</h3>
  898. <p>输入区新增<code>权限:默认</code>下拉,三档:<b>只读</b>(改动逐条确认)/<b>默认</b>(工作区可写,区外逐条确认)/<b style="color:var(--err)">完全访问</b>(全盘读写免确认,红色警示)。映射沙箱 read-only / workspace-write / danger-full-access + 审批策略,切换会话内即时生效,与内联审批卡联动。</p>
  899. </div>
  900. <div class="note">
  901. <h3><span class="n">9</span>等待态联动与留痕</h3>
  902. <p>等待确认时输入区变琥珀色并暂停输入(<code>回到确认卡</code> 链接可滚动定位),右栏出现<code>待确认队列</code>与<code>审批记录</code>;已决的审批收成绿/红细条留在对话流里。input 类提问卡用选项 chips + 自由输入,全答完才能提交。</p>
  903. </div>
  904. </div>
  905. </body>
  906. </html>