| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>清鉴 · Codex 聊天界面重设计 v1</title>
- <style>
- /* ═══════════════════════════════════════════════════════════════
- 设计稿:清鉴 · Codex 聊天界面重设计 v1.0
- 主题对齐项目现有 token:主色 #2a50ec / 画布 #f0f2f5 / 白卡 / 圆角 6·8·12
- ═══════════════════════════════════════════════════════════════ */
- :root{
- --primary:#2a50ec;
- --primary-deep:#1e3fd1;
- --primary-soft:rgba(42,80,236,.07);
- --primary-soft-2:rgba(42,80,236,.13);
- --canvas:#f0f2f5;
- --card:#ffffff;
- --border:#e3e7ef;
- --border-strong:#d0d7de;
- --text-1:#24292f;
- --text-2:#57606a;
- --text-3:#8b919c;
- --ok:#1a7f37;
- --ok-soft:rgba(26,127,55,.09);
- --warn:#b58a05;
- --err:#d93025;
- --err-soft:rgba(217,48,37,.08);
- --r-ctl:6px; --r-block:8px; --r-page:12px;
- --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
- --shadow-pop:0 6px 24px rgba(24,39,88,.10);
- --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
- }
- *{margin:0;padding:0;box-sizing:border-box}
- 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}
- .mono{font-family:var(--mono)}
- svg.i{width:1em;height:1em;fill:currentColor;vertical-align:-0.14em}
- /* ── 稿头说明(非 UI 部分) ── */
- .doc-head{max-width:1480px;margin:28px auto 14px;padding:0 24px;display:flex;align-items:baseline;gap:16px}
- .doc-head h1{font-size:20px;font-weight:700}
- .doc-head .tag{font-size:12px;color:#fff;background:var(--primary);border-radius:99px;padding:2px 12px;font-weight:600}
- .doc-head .sub{color:var(--text-3);font-size:13px}
- /* ── 页面画框 ── */
- .frame{max-width:1480px;margin:0 auto 40px;padding:0 24px}
- .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}
- /* ── 顶栏 ── */
- .topbar{height:52px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 20px;flex:none}
- .topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
- .topbar .title{font-weight:650;font-size:14.5px}
- .topbar .session{color:var(--text-3);font-size:12.5px;display:flex;align-items:center;gap:5px}
- .topbar .session .sep{opacity:.5}
- .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)}
- .chip .mini{width:6px;height:6px;border-radius:50%}
- .chip--model{background:var(--primary-soft);border-color:transparent;color:var(--primary);font-weight:600}
- .chip--model .mini{background:var(--primary)}
- .chip--route{color:var(--text-2)}
- .chip--route .mini{background:var(--warn)}
- .topbar .spacer{flex:1}
- .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}
- .tbtn:hover{background:#f2f4f8}
- .tbtn--primary{background:var(--primary);color:#fff;font-weight:600}
- .tbtn--primary:hover{background:var(--primary-deep)}
- .tbtn .i{font-size:14px}
- /* ── 三栏 ── */
- .body{flex:1;display:flex;min-height:0}
- .sidebar{width:232px;flex:none;background:#f7f8fa;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px}
- .side-sec{font-size:11px;color:var(--text-3);font-weight:600;letter-spacing:.05em;margin:10px 6px 6px}
- .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}
- .side-item:hover{background:#eef0f4}
- .side-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
- .side-item .i{font-size:14px;color:var(--text-3)}
- .side-item.active .i{color:var(--primary)}
- .side-item time{margin-left:auto;font-size:11px;color:var(--text-3)}
- /* 主列 */
- .main{flex:1;min-width:0;display:flex;flex-direction:column}
- .scroll{flex:1;overflow:hidden;padding:26px 28px 10px;background:
- linear-gradient(180deg,rgba(42,80,236,.03),transparent 220px),var(--canvas)}
- .col{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
- /* ── 用户消息:右侧窄气泡 ── */
- .turn--user{display:flex;justify-content:flex-end}
- .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)}
- .user-bubble .meta{margin-top:5px;font-size:11px;color:rgba(255,255,255,.62);text-align:right}
- /* ── 助手回合:头像轨 + 内容列 ── */
- .turn--ai{display:grid;grid-template-columns:30px 1fr;gap:12px}
- .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)}
- .ai-avatar .i{font-size:15px}
- .ai-col{min-width:0;display:flex;flex-direction:column;gap:12px}
- /* ── 思考过程 ── */
- .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}
- .think__head{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;user-select:none}
- .think__head .i-lead{color:#7b46ec;font-size:14px}
- .think__label{font-size:12.5px;font-weight:600;color:#6a3fd8}
- .think__state{font-size:12px;color:var(--text-3)}
- .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}
- @keyframes sh{to{background-position:-200% 0}}
- .think__time{margin-left:auto;font-size:11.5px;color:var(--text-3);font-family:var(--mono)}
- .think__chev{color:var(--text-3);font-size:14px}
- .think__body{padding:2px 14px 12px;border-top:1px dashed rgba(123,70,236,.18)}
- .think__body p{font-size:13px;color:var(--text-2);line-height:1.8;margin-top:8px}
- .think__body p b{color:#6a3fd8}
- /* ── 工具执行步骤栈 ── */
- .steps{border:1px solid var(--border);border-radius:var(--r-block);background:var(--card)}
- .steps__head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
- .steps__head .i-lead{color:var(--primary);font-size:14px}
- .steps__label{font-size:12.5px;font-weight:600;color:var(--text-2)}
- .steps__count{font-size:11.5px;color:var(--text-3)}
- .steps__ok{margin-left:auto;font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:4px}
- .step{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:start;padding:9px 12px 9px 4px}
- .step+.step{border-top:1px dashed var(--border)}
- .step .rail{display:flex;flex-direction:column;align-items:center;gap:2px}
- .step .node{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:#fff}
- .step .node--shell{background:#0e7c86}.step .node--sql{background:#2a50ec}.step .node--chart{background:#7b46ec}.step .node--file{background:#b58a05}
- .step .rail .line{width:2px;flex:1;min-height:14px;background:var(--border);border-radius:2px}
- .step:last-child .rail .line{display:none}
- .step__title{font-size:13px;color:var(--text-1);font-weight:550}
- .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)}
- .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}
- .step__side{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);padding-top:2px}
- .step__side .ok{color:var(--ok);font-size:13px}
- .step__expand{grid-column:2 / 4;margin-top:8px;border-top:1px dashed var(--border);padding-top:8px}
- .step__expand .cap{font-size:11px;color:var(--text-3);margin-bottom:4px;letter-spacing:.04em}
- .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}
- /* ── 正文 markdown ── */
- .md{font-size:14.5px;line-height:1.8;color:var(--text-1)}
- .md p{margin:0 0 10px}
- .md h4{font-size:15.5px;margin:4px 0 8px;font-weight:650}
- .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}
- .md strong{color:var(--primary-deep)}
- .md .hl{background:linear-gradient(transparent 62%,rgba(42,80,236,.16) 0)}
- /* 结论洞察条 */
- .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}
- .insight .i{font-size:15px;color:var(--primary);margin-top:2px}
- .insight b{color:var(--primary-deep)}
- /* ── 通用块卡(图表/表格/报告) ── */
- .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)}
- .bc__head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);background:#fafbfd}
- .bc__head .i-lead{font-size:14px}
- .bc__title{font-size:13px;font-weight:650;color:var(--text-1)}
- .bc__chip{font-size:10.5px;padding:1px 7px;border-radius:99px;font-weight:600}
- .bc__chip--chart{color:#7b46ec;background:rgba(123,70,236,.09)}
- .bc__chip--table{color:#0e7c86;background:rgba(14,124,134,.09)}
- .bc__chip--report{color:#fff;background:var(--primary)}
- .bc__spacer{flex:1}
- .bc__act{display:flex;gap:2px}
- .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}
- .bc__act .ab:hover{background:#eef0f4;color:var(--primary)}
- .bc__act .ab .i{font-size:14px}
- /* 图表 */
- .chart-body{padding:14px 16px 6px}
- .chart-body svg{width:100%;height:auto;display:block}
- .legend{display:flex;gap:16px;padding:0 16px 10px;font-size:11.5px;color:var(--text-2)}
- .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
- /* 表格 */
- .table-body{padding:0}
- table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
- 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}
- table.grid td{padding:7px 12px;border-bottom:1px solid #eef1f5}
- table.grid tr:last-child td{border-bottom:none}
- table.grid tr:hover td{background:#f7f9ff}
- .up{color:var(--err);font-weight:600}.down{color:var(--ok);font-weight:600}
- /* 报告 */
- .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}
- .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}
- .report-cover .t1{font-size:15px;font-weight:700}
- .report-cover .t2{font-size:11.5px;color:var(--text-3);margin-top:1px}
- .report-body{padding:14px 18px 6px;font-size:13.5px;line-height:1.85}
- .report-body h5{font-size:13.5px;font-weight:700;margin:10px 0 6px;color:var(--text-1)}
- .report-body ol{margin:6px 0 10px 18px}
- .report-body li{margin-bottom:5px}
- .report-body li b{color:var(--primary-deep)}
- .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}
- .report-foot{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:#fafbfd}
- .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}
- .rf-btn:hover{border-color:var(--primary);color:var(--primary)}
- .rf-btn .i{font-size:13px}
- /* ── 回合脚注(元信息 + 操作) ── */
- .turnfoot{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--text-3);padding:2px 2px 0}
- .turnfoot .sep{width:1px;height:10px;background:var(--border)}
- .turnfoot .st{display:inline-flex;align-items:center;gap:5px}
- .turnfoot .st .i{font-size:12px;color:var(--ok)}
- .turnfoot .acts{margin-left:auto;display:flex;gap:2px}
- .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}
- .turnfoot .acts .ab:hover{background:#eef0f4;color:var(--primary)}
- /* ── 出错形态 ── */
- .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}
- /* ── 输入区 ── */
- .composer-wrap{flex:none;padding:10px 28px 18px;background:linear-gradient(180deg,transparent,var(--canvas))}
- .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}
- .composer textarea{width:100%;border:none;outline:none;resize:none;font:inherit;font-size:14px;color:var(--text-1);background:transparent;min-height:44px}
- .composer textarea::placeholder{color:var(--text-3)}
- .composer__bar{display:flex;align-items:center;gap:8px;margin-top:6px}
- .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}
- .cchip:hover{border-color:var(--primary);color:var(--primary)}
- .cchip .i{font-size:13px;color:var(--text-3)}
- .composer__bar .sp{flex:1}
- .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)}
- .send:hover{background:var(--primary-deep)}
- .send .i{font-size:16px}
- /* 追问建议 */
- .sugs{max-width:900px;margin:0 auto 10px;display:flex;gap:8px}
- .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}
- .sug:hover{border-color:var(--primary);color:var(--primary);background:#fff}
- /* ── 右栏:看板 + 产物 ── */
- .aside{width:340px;flex:none;border-left:1px solid var(--border);background:#f7f8fa;display:flex;flex-direction:column;gap:14px;padding:14px;overflow:hidden}
- .aside .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-block)}
- .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)}
- .aside .panel__head .i{color:var(--primary);font-size:14px}
- .aside .panel__head .n{margin-left:auto;font-size:11px;color:var(--text-3)}
- .pin{margin:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
- .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)}
- .pin .pin__t .i{color:#7b46ec;font-size:12px}
- .pin .thumb{height:86px;background:linear-gradient(180deg,#fbfcff,#f3f5fb);display:flex;align-items:flex-end;gap:5px;padding:10px 14px}
- .pin .thumb b{flex:1;background:linear-gradient(180deg,#5c78f2,#2a50ec);border-radius:3px 3px 0 0;opacity:.85}
- .file{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12.5px;color:var(--text-2);border-bottom:1px solid #f1f3f7}
- .file:last-child{border-bottom:none}
- .file .i{color:var(--text-3);font-size:14px}
- .file .sz{margin-left:auto;font-size:11px;color:var(--text-3);font-family:var(--mono)}
- .file--new .i{color:var(--ok)}
- /* ── 设计说明区 ── */
- .notes{max-width:1480px;margin:0 auto 60px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
- .note{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
- .note h3{font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
- .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}
- .note p{font-size:12.5px;color:var(--text-2);line-height:1.75}
- .note code{font-family:var(--mono);font-size:11.5px;background:#f2f4f8;border-radius:4px;padding:1px 5px;color:#1f3a8f}
- /* ══════════ 内联审批(替代弹框) ══════════ */
- @keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
- .apv{background:#fffcf3;border:1px solid rgba(181,138,5,.32);border-left:3px solid var(--warn);border-radius:var(--r-block);overflow:hidden}
- .apv__head{display:flex;align-items:center;gap:9px;padding:10px 14px 8px}
- .apv__pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none}
- .apv__pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--warn);animation:ring 1.4s ease-out infinite}
- .apv__title{font-size:13.5px;font-weight:700;color:#8a6a00}
- .apv__state{font-size:12px;color:var(--text-2)}
- .apv__cd{margin-left:auto;font-size:11.5px;color:var(--warn);font-family:var(--mono)}
- .apv__body{padding:0 14px 4px}
- .apv__cap{font-size:11px;color:var(--text-3);letter-spacing:.04em;margin:6px 0 4px}
- .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}
- .apv__cmd .p{color:var(--ok);user-select:none;margin-right:6px}
- .apv__meta{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
- .mchip{font-size:11px;color:var(--text-2);background:#f2f4f8;border-radius:4px;padding:2px 7px}
- .mchip b{color:var(--text-1);font-weight:600}
- .apv__diff{font-family:var(--mono);font-size:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden;line-height:1.7}
- .apv__diff .dl{padding:1px 10px;white-space:pre-wrap;word-break:break-all}
- .apv__diff .add{background:#e6f6ec;color:#116329}
- .apv__diff .del{background:#fdecea;color:#a32620;text-decoration:line-through;text-decoration-color:rgba(163,38,32,.4)}
- .apv__diff .ctx{background:#fbfcfe;color:var(--text-2)}
- .apv__diff .fh{background:#eef2fb;color:#1f3a8f}
- .apv__acts{display:flex;align-items:center;gap:8px;padding:11px 14px 13px}
- .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}
- .a-allow:hover{background:var(--primary-deep)}
- .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}
- .a-session:hover{border-color:var(--primary);color:var(--primary)}
- .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}
- .a-deny:hover{background:var(--err-soft)}
- 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)}
- .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)}
- .apv-done .i{font-size:14px}
- .apv-done--ok{border-left:3px solid var(--ok)}
- .apv-done--ok .i{color:var(--ok)}
- .apv-done--deny{border-left:3px solid var(--err)}
- .apv-done--deny .i{color:var(--err)}
- .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}
- .apv-done time{margin-left:auto;font-size:11px;color:var(--text-3)}
- /* input 提问卡 */
- .qst{background:var(--card);border:1px solid var(--primary-soft-2);border-left:3px solid var(--primary);border-radius:var(--r-block);overflow:hidden}
- .qst__head{display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
- .qst__head .i-lead{color:var(--primary);font-size:14px}
- .qst__title{font-size:13.5px;font-weight:700}
- .qst__body{padding:6px 14px 2px}
- .qst__q{font-size:13px;color:var(--text-1);margin:8px 0 7px}
- .qst__q .req{color:var(--err);margin-left:3px}
- .opts{display:flex;flex-wrap:wrap;gap:7px}
- .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}
- .opt:hover{border-color:var(--primary)}
- .opt.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
- .opt .d{font-size:11px;color:var(--text-3)}
- .opt.on .d{color:var(--primary);opacity:.75}
- .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}
- .qst input:focus{border-color:var(--primary)}
- .apv__queue{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--text-3);padding:0 14px 10px}
- .apv__queue .qtab{border:1px dashed var(--border);border-radius:5px;padding:2px 8px;color:var(--text-3)}
- /* 等待态输入区 */
- .composer.waiting{border-color:rgba(181,138,5,.45)}
- .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}
- .waitstrip .apv__pulse{width:8px;height:8px}
- .waitstrip a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
- .waitstrip .esc{margin-left:auto;color:var(--text-3)}
- textarea:disabled{color:var(--text-3);cursor:not-allowed}
- /* ══════════ 权限设置下拉 ══════════ */
- .perm{position:relative}
- .perm .cchip.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}
- .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}
- .pm__cap{font-size:10.5px;color:var(--text-3);letter-spacing:.05em;padding:5px 10px 4px;font-weight:600}
- .pm__opt{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px;border-radius:8px;cursor:pointer}
- .pm__opt:hover{background:#f2f4f8}
- .pm__opt b{font-size:13px;color:var(--text-1);font-weight:650}
- .pm__opt span{grid-column:1 / 2;font-size:11.5px;color:var(--text-3);line-height:1.5}
- .pm__opt .ck{grid-column:2;grid-row:1 / 3;align-self:center;color:var(--primary);font-size:15px}
- .pm__opt.on{background:var(--primary-soft)}
- .pm__opt.on b{color:var(--primary)}
- .pm__opt.danger:hover{background:var(--err-soft)}
- .pm__opt.danger b{color:var(--err)}
- .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}
- .pm__foot b{color:var(--warn)}
- </style>
- </head>
- <body>
- <!-- ══════════ SVG 图标库(mdi 风格,与项目 Iconify mdi 一致) ══════════ -->
- <svg style="display:none" xmlns="http://www.w3.org/2000/svg">
- <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>
- <symbol id="i-send" viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2z"/></symbol>
- <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>
- <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>
- <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>
- <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>
- <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>
- <symbol id="i-chart" viewBox="0 0 24 24"><path d="M3 3h2v16h16v2H3zm4 12v-6h3v6zm5 0V7h3v8zm5 0V4h3v11z"/></symbol>
- <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>
- <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>
- <symbol id="i-table" viewBox="0 0 24 24"><path d="M3 3h18v18H3zm2 4v4h6V7zm8 0v4h6V7zM5 15v4h6v-4zm8 0v4h6v-4z"/></symbol>
- <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>
- <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>
- <symbol id="i-full" viewBox="0 0 24 24"><path d="M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM4 14h2v4h4v2H4zm14 0h2v6h-6v-2h4z"/></symbol>
- <symbol id="i-copy" viewBox="0 0 24 24"><path d="M8 3h12v14h-2V5H8zm-4 4h12v14H4zm2 2v10h8V9z"/></symbol>
- <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>
- <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>
- <symbol id="i-board" viewBox="0 0 24 24"><path d="M3 3h8v10H3zm10 0h8v6h-8zM3 15h8v6H3zm10-4h8v10h-8z"/></symbol>
- <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>
- <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>
- <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>
- <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>
- <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>
- </svg>
- <!-- 稿头 -->
- <div class="doc-head">
- <h1>清鉴 · Codex 聊天界面重设计</h1>
- <span class="tag">设计稿 v1.0</span>
- <span class="sub">主题 #2a50ec · 亮色(暗色走 token 自动派生)· 示例数据:客户投诉激增分析</span>
- </div>
- <!-- ══════════ 页面画框 ══════════ -->
- <div class="frame">
- <div class="window">
- <!-- 顶栏 -->
- <div class="topbar">
- <span class="dot"></span>
- <span class="title">Codex 数据分析</span>
- <span class="session">客户投诉分析 <span class="sep">/</span> 就绪</span>
- <span class="spacer"></span>
- <span class="chip chip--route"><span class="mini"></span>路由层 · 10.66.66.66:8080</span>
- <span class="chip chip--model"><span class="mini"></span>qwen · 本地模型</span>
- <button class="tbtn"><svg class="i"><use href="#i-download"/></svg>导出</button>
- <button class="tbtn"><svg class="i"><use href="#i-slug"/></svg>诊断</button>
- </div>
- <div class="body">
- <!-- 会话栏 -->
- <div class="sidebar">
- <div class="side-sec">进行中</div>
- <div class="side-item active"><svg class="i"><use href="#i-robot"/></svg>客户投诉激增分析<time>2m</time></div>
- <div class="side-sec">今天</div>
- <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>留存率周报数据核对<time>14:02</time></div>
- <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>渠道 ROI 对比图表<time>11:37</time></div>
- <div class="side-sec">更早</div>
- <div class="side-item"><svg class="i"><use href="#i-robot"/></svg>工单关键词聚类<time>周三</time></div>
- </div>
- <!-- 主列 -->
- <div class="main">
- <div class="scroll">
- <div class="col">
- <!-- ── 用户消息 ── -->
- <div class="turn--user">
- <div class="user-bubble">
- 分析近 30 天客户投诉数据,找出投诉激增的原因,生成一份分析报告,并画出趋势图。
- <div class="meta">14:02</div>
- </div>
- </div>
- <!-- ── 助手回合 ── -->
- <div class="turn--ai">
- <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
- <div class="ai-col">
- <!-- ① 思考过程 -->
- <div class="think">
- <div class="think__head">
- <svg class="i i-lead"><use href="#i-brain"/></svg>
- <span class="think__label">思考过程</span>
- <span class="think__state">已完成 · 制定分析路径</span>
- <span class="think__time">8.2s</span>
- <svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- <div class="think__body">
- <p>先确认数据源在 <b>complaints_202608.csv</b>,按天聚合投诉量观察拐点;再按「渠道 × 工单类型」下钻定位激增来源;异常集中在 9/03–9/12,重点排查该窗口的版本发布与退费政策变更。</p>
- </div>
- </div>
- <!-- ② 工具执行步骤栈 -->
- <div class="steps">
- <div class="steps__head">
- <svg class="i i-lead"><use href="#i-terminal"/></svg>
- <span class="steps__label">执行过程</span>
- <span class="steps__count">4 个步骤 · 全部成功</span>
- <span class="steps__ok"><svg class="i"><use href="#i-check"/></svg>已完成</span>
- <svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--file"><svg class="i"><use href="#i-file"/></svg></span><span class="line"></span></div>
- <div>
- <div class="step__title"><span class="tool">read_file</span>读取投诉明细数据</div>
- <div class="step__preview">complaints_202608.csv · 18,432 行 · UTF-8</div>
- </div>
- <div class="step__side">0.8s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--sql"><svg class="i"><use href="#i-database"/></svg></span><span class="line"></span></div>
- <div>
- <div class="step__title"><span class="tool">sql</span>按日聚合投诉量并对比前周</div>
- <div class="step__preview">SELECT date, count(*) FROM complaints GROUP BY date …</div>
- </div>
- <div class="step__side">2.6s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- <div class="step__expand">
- <div class="cap">输出(18 行,已截断)</div>
- <pre>date cnt wow
- 2026-09-02 42 +2.4%
- 2026-09-03 187 +345% ← 拐点
- 2026-09-04 214 +409%
- ...</pre>
- </div>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--shell"><svg class="i"><use href="#i-terminal"/></svg></span><span class="line"></span></div>
- <div>
- <div class="step__title"><span class="tool">shell</span>关联版本发布与退费政策变更记录</div>
- <div class="step__preview">grep -E "refund|v2.6" releases.log policy.log</div>
- </div>
- <div class="step__side">1.1s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--chart"><svg class="i"><use href="#i-chart"/></svg></span><span class="line"></span></div>
- <div>
- <div class="step__title"><span class="tool">echarts</span>生成 30 天投诉量趋势图</div>
- <div class="step__preview">bar + line 组合图 · 已钉到看板</div>
- </div>
- <div class="step__side">0.4s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- </div>
- </div>
- <!-- ③ 结果正文 -->
- <div class="md">
- <p>已完成分析。<span class="hl"><strong>投诉激增的直接原因:9 月 3 日 v2.6 版本上线后,退费流程出现批量超时</strong></span>,占新增投诉的 <code>62.4%</code>。</p>
- <div class="insight">
- <svg class="i"><use href="#i-idea"/></svg>
- <span><b>关键结论</b>:拐点出现在 9/03(+345%),与 v2.6 发版时间完全吻合;退费类工单平均处理时长由 6h 升至 41h。建议优先回滚退费网关并补发安抚券。</span>
- </div>
- </div>
- <!-- ④ 图表卡 -->
- <div class="blockcard">
- <div class="bc__head">
- <svg class="i i-lead" style="color:#7b46ec"><use href="#i-chart"/></svg>
- <span class="bc__title">近 30 天投诉量趋势(含拐点标注)</span>
- <span class="bc__chip bc__chip--chart">echarts</span>
- <span class="bc__spacer"></span>
- <span class="bc__act">
- <button class="ab" title="钉到看板"><svg class="i"><use href="#i-pin"/></svg></button>
- <button class="ab" title="导出 PNG"><svg class="i"><use href="#i-download"/></svg></button>
- <button class="ab" title="全屏"><svg class="i"><use href="#i-full"/></svg></button>
- </span>
- </div>
- <div class="chart-body">
- <svg viewBox="0 0 640 190">
- <line x1="34" y1="20" x2="34" y2="160" stroke="#e3e7ef"/>
- <line x1="34" y1="160" x2="628" y2="160" stroke="#e3e7ef"/>
- <g fill="#8b919c" font-size="9" font-family="Consolas,monospace">
- <text x="6" y="24">250</text><text x="10" y="70">150</text><text x="10" y="118">50</text>
- <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>
- </g>
- <g>
- <rect x="46" y="140" width="13" height="20" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="63" y="136" width="13" height="24" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="80" y="132" width="13" height="28" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="114" y="34" width="13" height="126" rx="2" fill="#2a50ec"/>
- <rect x="131" y="28" width="13" height="132" rx="2" fill="#2a50ec"/>
- <rect x="148" y="42" width="13" height="118" rx="2" fill="#2a50ec"/>
- <rect x="165" y="58" width="13" height="102" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="199" y="80" width="13" height="80" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="250" y="96" width="13" height="64" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="318" y="108" width="13" height="52" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="402" y="116" width="13" height="44" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="487" y="126" width="13" height="34" rx="2" fill="#5c78f2" opacity=".8"/>
- <rect x="570" y="134" width="13" height="26" rx="2" fill="#5c78f2" opacity=".8"/>
- </g>
- <polyline points="52,150 137,38 302,102 574,140" fill="none" stroke="#7b46ec" stroke-width="2" stroke-dasharray="5 3"/>
- <g>
- <line x1="126" y1="22" x2="126" y2="160" stroke="#d93025" stroke-dasharray="4 4" opacity=".55"/>
- <rect x="76" y="8" rx="4" width="100" height="17" fill="rgba(217,48,37,.08)"/>
- <text x="82" y="20" font-size="10" fill="#d93025" font-family="PingFang SC,Microsoft YaHei">9/03 v2.6 发版 · 拐点</text>
- </g>
- </svg>
- </div>
- <div class="legend">
- <span><i style="background:#2a50ec"></i>投诉量</span>
- <span><i style="background:#7b46ec"></i>7 日均值</span>
- </div>
- </div>
- <!-- ⑤ 表格卡 -->
- <div class="blockcard">
- <div class="bc__head">
- <svg class="i i-lead" style="color:#0e7c86"><use href="#i-table"/></svg>
- <span class="bc__title">投诉类型 TOP 5(9/03–9/12)</span>
- <span class="bc__chip bc__chip--table">table</span>
- <span class="bc__spacer"></span>
- <span class="bc__act">
- <button class="ab" title="钉到看板"><svg class="i"><use href="#i-pin"/></svg></button>
- <button class="ab" title="导出 CSV"><svg class="i"><use href="#i-download"/></svg></button>
- </span>
- </div>
- <div class="table-body">
- <table class="grid">
- <thead><tr><th>投诉类型</th><th>工单数</th><th>环比</th><th>平均处理时长</th></tr></thead>
- <tbody>
- <tr><td>退费超时</td><td>1,862</td><td class="up">+412%</td><td>41h 12m</td></tr>
- <tr><td>App 闪退</td><td>517</td><td class="up">+96%</td><td>3h 45m</td></tr>
- <tr><td>账户锁定</td><td>284</td><td class="up">+41%</td><td>2h 08m</td></tr>
- <tr><td>发票开具</td><td>196</td><td class="down">-8%</td><td>5h 30m</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- ⑥ 报告卡 -->
- <div class="blockcard">
- <div class="report-cover">
- <div class="badge"><svg class="i"><use href="#i-doc"/></svg></div>
- <div>
- <div class="t1">客户投诉激增分析报告(9/01–9/27)</div>
- <div class="t2">生成于 14:05 · 数据源 complaints_202608.csv · 可导出</div>
- </div>
- </div>
- <div class="report-body">
- <h5>核心发现</h5>
- <ol>
- <li><i class="num">1</i><b>版本相关性强</b>:投诉拐点与 v2.6 发版(9/03 10:20)时间完全吻合,退费超时类占比 <b>62.4%</b>;</li>
- <li><i class="num">2</i><b>影响面收敛</b>:84% 超时工单来自 Android 端 v2.6.0–v2.6.2,iOS 无明显波动;</li>
- <li><i class="num">3</i><b>恢复趋势明确</b>:9/12 热修复后日均投诉回落至基线 +9%,预计 9/30 完全恢复。</li>
- </ol>
- </div>
- <div class="report-foot">
- <button class="rf-btn"><svg class="i"><use href="#i-download"/></svg>导出 Markdown</button>
- <button class="rf-btn"><svg class="i"><use href="#i-download"/></svg>导出 HTML 报告</button>
- <button class="rf-btn"><svg class="i"><use href="#i-copy"/></svg>复制</button>
- </div>
- </div>
- <!-- ⑦ 回合脚注 -->
- <div class="turnfoot">
- <span class="st"><svg class="i"><use href="#i-check"/></svg>已完成</span>
- <span class="sep"></span>
- <span class="st"><svg class="i"><use href="#i-clock"/></svg>耗时 2m 14s</span>
- <span class="st"><svg class="i"><use href="#i-token"/></svg>输入 48.2k · 输出 1.9k</span>
- <span class="acts">
- <button class="ab" title="复制回复"><svg class="i"><use href="#i-copy"/></svg></button>
- <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
- </span>
- </div>
- </div>
- </div>
- <!-- ── 第二轮:用户 ── -->
- <div class="turn--user">
- <div class="user-bubble">
- 那把退费超时的工单按渠道拆一下,我要看哪个渠道最严重。
- <div class="meta">14:06</div>
- </div>
- </div>
- <!-- ── 第二轮:助手(已完成,思考折叠态) ── -->
- <div class="turn--ai">
- <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
- <div class="ai-col">
- <div class="think">
- <div class="think__head">
- <svg class="i i-lead"><use href="#i-brain"/></svg>
- <span class="think__label">思考过程</span>
- <span class="think__state">已完成</span>
- <span class="think__time">3.4s</span>
- <svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- </div>
- <div class="md">
- <p>按渠道拆解完成:<strong>小程序端最严重</strong>,占比 47.3%,且处理时长最长(52h),与小程序退费入口的重试缺陷一致。App 端次之,Web 端基本正常。</p>
- </div>
- <div class="steps">
- <div class="steps__head">
- <svg class="i i-lead"><use href="#i-terminal"/></svg>
- <span class="steps__label">执行过程</span>
- <span class="steps__count">1 个步骤 · 成功</span>
- <span class="steps__ok"><svg class="i"><use href="#i-check"/></svg></span>
- <svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--sql"><svg class="i"><use href="#i-database"/></svg></span><span class="line"></span></div>
- <div>
- <div class="step__title"><span class="tool">sql</span>按渠道统计退费超时工单分布</div>
- <div class="step__preview">SELECT channel, count(*) … GROUP BY channel</div>
- </div>
- <div class="step__side">1.9s <span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- </div>
- </div>
- <div class="turnfoot">
- <span class="st"><svg class="i"><use href="#i-check"/></svg>已完成</span>
- <span class="sep"></span>
- <span class="st"><svg class="i"><use href="#i-clock"/></svg>耗时 6.2s</span>
- <span class="st"><svg class="i"><use href="#i-token"/></svg>输入 52.7k · 输出 0.3k</span>
- <span class="acts">
- <button class="ab" title="复制回复"><svg class="i"><use href="#i-copy"/></svg></button>
- <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
- </span>
- </div>
- </div>
- </div>
- <!-- 出错形态示例(第三回合,运行中失败) -->
- <div class="turn--ai">
- <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
- <div class="ai-col">
- <div class="errstrip">
- <svg class="i" style="color:#d93025;font-size:15px;margin-top:2px"><use href="#i-idea"/></svg>
- <span>回合中断:上游 HTTP 502(退费网关查询超时)。已重试 2 次仍失败,可点击「重新生成」重试,或改用 <b>只统计 App 端</b>缩小范围。</span>
- </div>
- <div class="turnfoot">
- <span class="st" style="color:var(--err)">失败 · 上游 502</span>
- <span class="acts">
- <button class="ab" title="重新生成"><svg class="i"><use href="#i-refresh"/></svg></button>
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 追问建议 + 输入区 -->
- <div class="composer-wrap">
- <div class="sugs">
- <span class="sug">按赔付金额再排一遍 TOP 渠道</span>
- <span class="sug">生成给管理层的简要版(5 页内)</span>
- <span class="sug">对比 v2.5 同期基线</span>
- </div>
- <div class="composer">
- <textarea placeholder="继续追问,或描述新的分析任务…(Shift+Enter 换行)"></textarea>
- <div class="composer__bar">
- <span class="cchip"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
- <span class="perm">
- <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>
- <div class="perm-menu">
- <div class="pm__cap">审批与沙箱</div>
- <div class="pm__opt"><b>只读</b><span>只能读取与分析,任何改动都逐条确认</span></div>
- <div class="pm__opt on"><b>默认</b><span>工作区内可写;工作区外命令 / 文件修改逐条确认</span><svg class="i ck"><use href="#i-check"/></svg></div>
- <div class="pm__opt danger"><b>完全访问</b><span>全盘读写、任意命令、免确认 —— 仅建议在可信环境使用</span></div>
- <div class="pm__foot">切换对本会话立即生效;<b>完全访问</b> 下所有操作不再弹出确认。</div>
- </div>
- </span>
- <span class="cchip"><svg class="i"><use href="#i-board"/></svg>看板 2</span>
- <span class="cchip"><svg class="i"><use href="#i-folder"/></svg>模板</span>
- <span class="sp"></span>
- <button class="send"><svg class="i"><use href="#i-send"/></svg></button>
- </div>
- </div>
- </div>
- </div>
- <!-- 右栏:看板 + 产物 -->
- <div class="aside">
- <div class="panel">
- <div class="panel__head"><svg class="i"><use href="#i-board"/></svg>看板<span class="n">已钉 2 / 6</span></div>
- <div class="pin">
- <div class="pin__t"><svg class="i"><use href="#i-chart"/></svg>近 30 天投诉量趋势</div>
- <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>
- </div>
- <div class="pin">
- <div class="pin__t"><svg class="i"><use href="#i-table"/></svg>投诉类型 TOP 5</div>
- <div class="thumb" style="align-items:center;display:flex;padding:0">
- <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>
- </div>
- </div>
- </div>
- <div class="panel">
- <div class="panel__head"><svg class="i"><use href="#i-folder"/></svg>本会话产物<span class="n">本轮变更 2</span></div>
- <div class="file file--new"><svg class="i"><use href="#i-doc"/></svg>投诉激增分析报告.md<span class="sz">18 KB</span></div>
- <div class="file file--new"><svg class="i"><use href="#i-chart"/></svg>trend_30d.echarts.json<span class="sz">4 KB</span></div>
- <div class="file"><svg class="i"><use href="#i-file"/></svg>complaints_202608.csv<span class="sz">2.1 MB</span></div>
- <div class="file"><svg class="i"><use href="#i-file"/></svg>releases.log<span class="sz">96 KB</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ══════════ 内联审批设计(替代弹框) ══════════ -->
- <div class="doc-head" style="margin-top:36px">
- <h1>用户确认 · 内联审批设计</h1>
- <span class="tag">不再弹框</span>
- <span class="sub">审批卡长在聊天流里 · 四类审批 + 等待态 + 已决留痕 · Enter 允许 / Esc 拒绝</span>
- </div>
- <div class="frame">
- <div class="window" style="height:1120px">
- <div class="topbar">
- <span class="dot" style="background:var(--warn);box-shadow:0 0 0 3px rgba(181,138,5,.15)"></span>
- <span class="title">Codex 数据分析</span>
- <span class="session">客户投诉分析 <span class="sep">/</span> 等待确认</span>
- <span class="spacer"></span>
- <span class="chip chip--model"><span class="mini"></span>qwen · 本地模型</span>
- </div>
- <div class="body">
- <div class="main">
- <div class="scroll">
- <div class="col">
- <div class="turn--user">
- <div class="user-bubble">帮我把 v2.6 的退费网关回滚到 v2.5,然后重启网关服务。<div class="meta">14:08</div></div>
- </div>
- <div class="turn--ai">
- <div class="ai-avatar"><svg class="i"><use href="#i-robot"/></svg></div>
- <div class="ai-col">
- <div class="think">
- <div class="think__head">
- <svg class="i i-lead"><use href="#i-brain"/></svg>
- <span class="think__label">思考过程</span><span class="think__state">已完成</span>
- <span class="think__time">2.1s</span><svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- </div>
- <div class="steps">
- <div class="steps__head">
- <svg class="i i-lead"><use href="#i-terminal"/></svg>
- <span class="steps__label">执行过程</span><span class="steps__count">2 个步骤 · 1 个等待确认</span>
- <svg class="i think__chev"><use href="#i-chev"/></svg>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--file"><svg class="i"><use href="#i-file"/></svg></span><span class="line"></span></div>
- <div><div class="step__title"><span class="tool">apply_patch</span>回滚退费网关版本</div>
- <div class="step__preview">gateway/pom.xml · 1 处修改</div></div>
- <div class="step__side"><span class="ok"><svg class="i"><use href="#i-check"/></svg></span></div>
- </div>
- <div class="step">
- <div class="rail"><span class="node node--shell"><svg class="i"><use href="#i-terminal"/></svg></span><span class="line"></span></div>
- <div><div class="step__title" style="color:#8a6a00">重启网关服务(等待确认)</div>
- <div class="step__preview">systemctl restart refund-gateway…</div></div>
- <div class="step__side" style="color:var(--warn)">待确认</div>
- </div>
- </div>
- <!-- ① command 审批卡:聊天流内、待确认 -->
- <div class="apv">
- <div class="apv__head">
- <span class="apv__pulse"></span>
- <span class="apv__title">允许执行命令?</span>
- <span class="apv__state">Codex 请求在服务器上执行以下命令</span>
- <span class="apv__cd">89s 后自动拒绝</span>
- </div>
- <div class="apv__body">
- <div class="apv__cap">命令</div>
- <div class="apv__cmd"><span class="p">$</span>systemctl restart refund-gateway && journalctl -u refund-gateway -n 20 --no-pager</div>
- <div class="apv__meta">
- <span class="mchip">工作目录 <b>/opt/gateway</b></span>
- <span class="mchip">影响 <b>生产网关进程</b></span>
- <span class="mchip">审批策略 <b>on-request</b></span>
- </div>
- </div>
- <div class="apv__acts">
- <button class="a-allow">允许 <kbd>Enter</kbd></button>
- <button class="a-session">本会话内允许</button>
- <button class="a-deny">拒绝 <kbd>Esc</kbd></button>
- </div>
- <div class="apv__queue">队列中还有 1 条待确认:<span class="qtab">2/2 · 允许写入 report/ 目录</span></div>
- </div>
- <!-- ② file 审批卡:diff 预览 -->
- <div class="apv">
- <div class="apv__head">
- <span class="apv__pulse"></span>
- <span class="apv__title">允许修改文件?</span>
- <span class="apv__state">1 个文件 · +2 −2</span>
- <span class="apv__cd">112s 后自动拒绝</span>
- </div>
- <div class="apv__body">
- <div class="apv__cap">gateway/pom.xml</div>
- <div class="apv__diff">
- <div class="fh">@@ -18,7 +18,7 @@ gateway</div>
- <div class="ctx"> <artifactId>refund-gateway</artifactId></div>
- <div class="del">- <version>2.6.2</version></div>
- <div class="add">+ <version>2.5.9</version></div>
- <div class="ctx"> </dependency></div>
- </div>
- </div>
- <div class="apv__acts">
- <button class="a-allow">允许 <kbd>Enter</kbd></button>
- <button class="a-session">本会话内允许</button>
- <button class="a-deny">拒绝 <kbd>Esc</kbd></button>
- </div>
- </div>
- <!-- ③ input 提问卡:模型向用户要信息 -->
- <div class="qst">
- <div class="qst__head">
- <svg class="i i-lead"><use href="#i-idea"/></svg>
- <span class="qst__title">Codex 需要你补充信息</span>
- </div>
- <div class="qst__body">
- <div class="qst__q">回滚窗口选哪个?<span class="req">*</span></div>
- <div class="opts">
- <span class="opt on">立即回滚 <span class="d">约 2 分钟停机</span></span>
- <span class="opt">灰度切换 <span class="d">按渠道 10% 流量</span></span>
- <span class="opt">低峰执行 <span class="d">今晚 23:00</span></span>
- </div>
- <div class="qst__q" style="margin-top:12px">需要同时保留 v2.6 的配置吗?</div>
- <div class="opts">
- <span class="opt on">保留</span>
- <span class="opt">不保留</span>
- <span class="opt">不确定,听你建议</span>
- </div>
- <div class="qst__q" style="margin-top:12px">其他说明(可留空)</div>
- <input placeholder="补充给 Codex 的说明…">
- </div>
- <div class="apv__acts">
- <button class="a-allow">提交回答 <kbd>Enter</kbd></button>
- <button class="a-deny">跳过 <kbd>Esc</kbd></button>
- </div>
- </div>
- <!-- ④ 已决留痕:细条历史 -->
- <div class="apv-done apv-done--ok">
- <svg class="i"><use href="#i-check"/></svg>
- <span>已允许执行命令</span>
- <span class="what">systemctl restart refund-gateway</span>
- <time>14:09</time>
- </div>
- <div class="apv-done apv-done--deny">
- <svg class="i"><use href="#i-close"/></svg>
- <span>已拒绝修改文件</span>
- <span class="what">gateway/pom.xml</span>
- <time>14:09</time>
- </div>
- <div class="turnfoot">
- <span class="st" style="color:var(--warn)">等待确认 · 2 条</span>
- <span class="sep"></span>
- <span class="st"><svg class="i"><use href="#i-clock"/></svg>已进行 3m 02s</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="composer-wrap">
- <div class="composer waiting">
- <div class="waitstrip">
- <span class="apv__pulse"></span>
- Codex 正在等待你的确认,输入已暂停 —— <a>回到确认卡 ↑</a>
- <span class="esc"><kbd>Enter</kbd> 允许 · <kbd>Esc</kbd> 拒绝</span>
- </div>
- <textarea placeholder="确认后才能继续输入…" disabled style="min-height:36px"></textarea>
- <div class="composer__bar">
- <span class="cchip"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
- <span class="cchip"><svg class="i"><use href="#i-slug"/></svg>权限:默认</span>
- <span class="sp"></span>
- <button class="send" style="background:#e3e7ef;box-shadow:none;color:var(--text-3)"><svg class="i"><use href="#i-send"/></svg></button>
- </div>
- </div>
- </div>
- </div>
- <div class="aside">
- <div class="panel">
- <div class="panel__head"><svg class="i"><use href="#i-slug"/></svg>待确认队列<span class="n">2 条</span></div>
- <div class="file" style="color:#8a6a00;background:#fffcf3"><span class="apv__pulse" style="width:7px;height:7px"></span>重启网关服务<span class="sz">89s</span></div>
- <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>
- </div>
- <div class="panel">
- <div class="panel__head"><svg class="i"><use href="#i-folder"/></svg>本会话审批记录<span class="n">今日 5 次</span></div>
- <div class="file"><svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg>读取投诉明细数据<span class="sz">14:05</span></div>
- <div class="file"><svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg>执行 SQL 聚合<span class="sz">14:05</span></div>
- <div class="file"><svg class="i" style="color:var(--err)"><use href="#i-close"/></svg>删除临时目录<span class="sz">14:03</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ══════════ 设计说明 ══════════ -->
- <div class="notes">
- <div class="note">
- <h3><span class="n">1</span>回合化排版,告别"大盖帽"</h3>
- <p>助手回复改为 <code>头像轨 + 内容列</code> 的 grid 结构,去掉沉重的「Codex + 状态徽标」头行;角色间靠 26px 间距成组、不画分隔线。状态/耗时/token 下沉到<code>回合脚注</code>,视线更聚焦内容。</p>
- </div>
- <div class="note">
- <h3><span class="n">2</span>思考过程:紫色渐隐卡</h3>
- <p>与正文/工具明确区分的<code>思考过程</code>卡:流式时标题 shimmer 流光,完成后显示 <code>已完成 · 摘要 + 耗时</code>,默认折叠,点击展开全文。对应 <code>kind:'thought'</code>。</p>
- </div>
- <div class="note">
- <h3><span class="n">3</span>工具执行:步骤栈</h3>
- <p>散落的工具卡升级为<code>执行过程步骤栈</code>:节点轨 + 工具类型彩色图标(shell/SQL/文件/图表)+ 单行参数预览 + 右侧状态与耗时,点击展开完整命令与输出(等宽字体、限高滚动)。对应 <code>kind:'tool'|'file'</code>。</p>
- </div>
- <div class="note">
- <h3><span class="n">4</span>结果正文排版升级</h3>
- <p>正文 14.5px/1.8,强调色加<code>荧光划线</code>;关键结论用「洞察条」(主色左边框 + 灯泡图标)承接。后续把 codex 侧 markdown 换成 streamdown-vue(Shiki 高亮 + 流式渲染),与 ai 模块对齐。</p>
- </div>
- <div class="note">
- <h3><span class="n">5</span>图表 / 表格 / 报告三大卡</h3>
- <p>三类富块统一为<code>标题栏 + 内容 + 操作区</code>的块卡:图表带类型 chip 与钉看板/导出 PNG/全屏;表格带导出;报告卡有渐变封面与导出 MD/HTML——围栏协议(```echarts/```table/```report)不动,只换皮。</p>
- </div>
- <div class="note">
- <h3><span class="n">6</span>输入区与追问</h3>
- <p>输入区升级为浮动圆角卡(12px 圆角 + 投影),模型/看板/模板收进底部 chip;上方新增<code>追问建议 chips</code>。顶栏新增模型 chip 与路由层状态 chip(桥接时显示上游地址)。</p>
- </div>
- <div class="note">
- <h3><span class="n">7</span>审批确认:弹框 → 内联卡</h3>
- <p>四类审批(command / file / permissions / input)全部内联到聊天流:<code>琥珀色待确认卡</code>带脉冲呼吸、命令/diff 预览、<code>允许 / 本会话允许 / 拒绝</code>三键与 <code>Enter/Esc</code> 快捷键、倒计时自动拒绝。<code>acceptForSession</code> 对应「本会话内允许」。</p>
- </div>
- <div class="note">
- <h3><span class="n">8</span>权限设置下拉</h3>
- <p>输入区新增<code>权限:默认</code>下拉,三档:<b>只读</b>(改动逐条确认)/<b>默认</b>(工作区可写,区外逐条确认)/<b style="color:var(--err)">完全访问</b>(全盘读写免确认,红色警示)。映射沙箱 read-only / workspace-write / danger-full-access + 审批策略,切换会话内即时生效,与内联审批卡联动。</p>
- </div>
- <div class="note">
- <h3><span class="n">9</span>等待态联动与留痕</h3>
- <p>等待确认时输入区变琥珀色并暂停输入(<code>回到确认卡</code> 链接可滚动定位),右栏出现<code>待确认队列</code>与<code>审批记录</code>;已决的审批收成绿/红细条留在对话流里。input 类提问卡用选项 chips + 自由输入,全答完才能提交。</p>
- </div>
- </div>
- </body>
- </html>
|