ui-modes-v1.html 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  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>清鉴 · 主界面双模式设计 v1(传统 / 智能)</title>
  7. <style>
  8. :root{
  9. --primary:#2a50ec; --primary-deep:#1e3fd1; --primary-soft:rgba(42,80,236,.07);
  10. --canvas:#f0f2f5; --card:#fff; --border:#e3e7ef; --border-strong:#d0d7de;
  11. --text-1:#24292f; --text-2:#57606a; --text-3:#8b919c;
  12. --ok:#1a7f37; --warn:#b58a05; --err:#d93025;
  13. --sider:#273352; --sider-2:#1f2942;
  14. --r-ctl:6px; --r-block:8px; --r-page:12px;
  15. --mono:'SFMono-Regular',Consolas,Menlo,monospace;
  16. --shadow-pop:0 6px 24px rgba(24,39,88,.10);
  17. }
  18. *{margin:0;padding:0;box-sizing:border-box}
  19. 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}
  20. svg.i{width:1em;height:1em;fill:currentColor;vertical-align:-0.14em}
  21. .mono{font-family:var(--mono)}
  22. .doc-head{max-width:1500px;margin:28px auto 14px;padding:0 24px;display:flex;align-items:baseline;gap:16px}
  23. .doc-head h1{font-size:20px;font-weight:700}
  24. .doc-head .tag{font-size:12px;color:#fff;background:var(--primary);border-radius:99px;padding:2px 12px;font-weight:600}
  25. .doc-head .sub{color:var(--text-3);font-size:13px}
  26. .doc-head .num{width:22px;height:22px;border-radius:6px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;align-self:center}
  27. .frame{max-width:1500px;margin:0 auto 16px;padding:0 24px}
  28. .window{position:relative;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}
  29. /* ── 传统模式壳 ── */
  30. .shell-top{height:46px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:14px}
  31. .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
  32. .logo .mark{width:24px;height:24px;border-radius:6px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
  33. .top-menu{display:flex;gap:2px}
  34. .top-menu span{padding:5px 12px;border-radius:6px;font-size:13px;color:#d8def5;cursor:default;white-space:nowrap}
  35. .top-menu span.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
  36. .case-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);background:#f2f4f8;border-radius:99px;padding:3px 11px}
  37. .case-chip b{color:var(--text-1);font-weight:600}
  38. .shell-body{display:flex;height:560px}
  39. .mix-sider{width:210px;flex:none;background:var(--sider);padding:10px 8px;display:flex;flex-direction:column;gap:2px}
  40. .ms-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:#aeb7d6;font-size:13px;cursor:default}
  41. .ms-item .i{font-size:14px;opacity:.85}
  42. .ms-item.on{background:var(--primary);color:#fff;font-weight:600}
  43. .ms-item.disabled{opacity:.32;text-decoration:line-through}
  44. .ms-sec{font-size:10.5px;color:#6b7899;letter-spacing:.06em;margin:10px 8px 4px;font-weight:600}
  45. .tabs{height:34px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 12px}
  46. .tab{height:24px;padding:0 12px;border-radius:6px;font-size:12px;color:var(--text-2);display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border)}
  47. .tab.on{color:var(--primary);border-color:var(--primary);background:var(--primary-soft);font-weight:600}
  48. .shell-content{flex:1;display:flex;align-items:center;justify-content:center;background:var(--canvas);position:relative}
  49. .content-hint{color:var(--text-3);font-size:13px;text-align:center}
  50. .content-hint b{color:var(--text-2)}
  51. /* 顶栏右侧 action */
  52. .actions{margin-left:auto;display:flex;align-items:center;gap:10px}
  53. /* 模式切换(核心设计件) */
  54. .mode-switch{display:inline-flex;background:#eef0f4;border-radius:99px;padding:2px;gap:2px;border:1px solid var(--border)}
  55. .mode-switch button{height:26px;padding:0 12px;border:none;background:transparent;border-radius:99px;font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  56. .mode-switch button.on{background:#fff;color:var(--primary);font-weight:650;box-shadow:0 1px 4px rgba(24,39,88,.14)}
  57. .mode-switch button .i{font-size:13px}
  58. .avatar{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
  59. .iconbtn{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  60. .iconbtn:hover{background:#f2f4f8}
  61. .callout{position:absolute;background:var(--primary);color:#fff;font-size:11.5px;padding:5px 10px;border-radius:7px;box-shadow:var(--shadow-pop);max-width:210px;line-height:1.5;z-index:5}
  62. .callout::after{content:'';position:absolute;border:6px solid transparent}
  63. .callout.tr::after{border-bottom-color:var(--primary);right:24px;top:-12px}
  64. /* ── 智能模式工作台 ── */
  65. .wb{height:760px}
  66. .wb-top{height:50px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 16px}
  67. .wb-body{display:flex;height:calc(100% - 50px)}
  68. .rail{width:264px;flex:none;background:#f7f8fa;border-right:1px solid var(--border);display:flex;flex-direction:column}
  69. .rail__menu{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-bottom:1px solid var(--border)}
  70. .rm{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:var(--text-2);font-size:13px;cursor:pointer;border:none;background:transparent;text-align:left}
  71. .rm:hover{background:#eef0f4;color:var(--primary)}
  72. .rm.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
  73. .rm .i{font-size:15px;flex:none}
  74. .rail__new{margin:12px 12px 4px;height:36px;border-radius:9px;border:none;background:var(--primary);color:#fff;font-size:13.5px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
  75. .rail__new:hover{background:var(--primary-deep)}
  76. .rail__sec{font-size:10.5px;color:var(--text-3);letter-spacing:.06em;margin:14px 14px 5px;font-weight:600}
  77. .sess{position:relative}
  78. .sess__more{position:absolute;right:6px;top:8px;width:22px;height:22px;border-radius:6px;display:none;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer}
  79. .sess:hover .sess__more,.sess.on .sess__more{display:flex}
  80. .sess__more:hover{background:#e3e7ef;color:var(--primary)}
  81. .sess.is-renaming{background:#fff;border:1px solid var(--primary);padding:7px 8px}
  82. .sess__rename{width:100%;height:26px;border:1px solid var(--border);border-radius:5px;font:inherit;font-size:12.5px;padding:0 7px;outline:none}
  83. .sess__rename:focus{border-color:var(--primary)}
  84. .sess__rename-acts{display:flex;gap:5px;margin-top:6px}
  85. .rk{height:22px;padding:0 10px;border-radius:5px;border:none;background:var(--primary);color:#fff;font-size:11px;cursor:pointer}
  86. .rk--cancel{background:#f2f4f8;color:var(--text-2)}
  87. .sess-menu{position:fixed;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-pop);padding:4px;z-index:20;min-width:110px}
  88. .sess-menu button{display:flex;align-items:center;gap:7px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:6px;font-size:12.5px;color:var(--text-1);cursor:pointer;text-align:left}
  89. .sess-menu button:hover{background:#f2f4f8}
  90. .sess-menu button.danger{color:var(--err)}
  91. .sess-menu button.danger:hover{background:var(--err-soft)}
  92. .sess{margin:0 8px;padding:8px 10px;border-radius:8px;cursor:default}
  93. .sess:hover{background:#eef0f4}
  94. .sess.on{background:var(--primary-soft)}
  95. .sess__t{font-size:13px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
  96. .sess__t time{margin-left:auto;font-size:10.5px;color:var(--text-3);font-weight:400}
  97. .sess.on .sess__t{color:var(--primary);font-weight:600}
  98. .sess__m{font-size:11px;color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  99. .eng{font-size:9.5px;padding:0 6px;border-radius:4px;font-weight:700;flex:none}
  100. .eng--local{color:#0e7c86;background:rgba(14,124,134,.1)}
  101. .eng--cloud{color:#7b46ec;background:rgba(123,70,236,.1)}
  102. .rail__foot{margin-top:auto;border-top:1px solid var(--border);padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  103. .rf{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:8px;color:var(--text-2);font-size:10.5px;cursor:pointer;border:none;background:transparent}
  104. .rf:hover{background:#eef0f4;color:var(--primary)}
  105. .rf .i{font-size:16px}
  106. .wb-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
  107. .wb-msgs{flex:1;overflow:hidden;padding:22px 26px 8px;background:var(--canvas)}
  108. .wb-col{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
  109. .wb-composer{flex:none;padding:8px 26px 16px}
  110. /* 右栏 */
  111. .wb-aside{width:328px;flex:none;border-left:1px solid var(--border);background:#f7f8fa;display:flex;flex-direction:column;padding:12px;gap:12px}
  112. .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-block)}
  113. .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)}
  114. .panel__head .i{color:var(--primary);font-size:14px}
  115. .panel__head .n{margin-left:auto;font-size:11px;color:var(--text-3)}
  116. .pin{margin:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
  117. .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)}
  118. .pin .bars{height:64px;display:flex;align-items:flex-end;gap:5px;padding:8px 14px}
  119. .pin .bars b{flex:1;background:var(--primary);border-radius:3px 3px 0 0;opacity:.85}
  120. /* 折叠右栏按钮 */
  121. .collapse-rail{position:absolute;right:0;top:50%;transform:translateY(-50%);width:18px;height:56px;border:1px solid var(--border);border-right:none;border-radius:9px 0 0 9px;background:#fff;color:var(--text-3);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4}
  122. /* 弹层:模型管理(智能模式里做成抽屉/弹层,不再占菜单) */
  123. .pop{position:absolute;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);z-index:9}
  124. .pop__head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:13.5px}
  125. .pop__head .i{color:var(--primary)}
  126. .pop__head .x{margin-left:auto;color:var(--text-3);cursor:pointer}
  127. .model-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
  128. .mc{border:1px solid var(--border);border-radius:10px;padding:10px 12px;position:relative}
  129. .mc.on{border-color:var(--primary);background:var(--primary-soft)}
  130. .mc__n{font-size:13px;font-weight:650;display:flex;align-items:center;gap:6px}
  131. .mc__n .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
  132. .mc__u{font-size:11px;color:var(--text-3);margin-top:3px;font-family:var(--mono)}
  133. .mc__tag{position:absolute;top:8px;right:8px;font-size:9.5px;padding:1px 7px;border-radius:99px;background:var(--primary);color:#fff;font-weight:600}
  134. .pop__foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
  135. .pbtn{height:28px;padding:0 14px;border-radius:7px;border:1px solid var(--border);background:#fff;font-size:12.5px;color:var(--text-2);cursor:pointer}
  136. .pbtn--p{background:var(--primary);color:#fff;border:none;font-weight:600}
  137. /* ── 设计说明 ── */
  138. .notes{max-width:1500px;margin:24px auto 60px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  139. .note{background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px 17px}
  140. .note h3{font-size:13.5px;margin-bottom:7px;display:flex;align-items:center;gap:7px}
  141. .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;flex:none}
  142. .note p{font-size:12.5px;color:var(--text-2);line-height:1.75}
  143. .note code{font-family:var(--mono);font-size:11.5px;background:#f2f4f8;border-radius:4px;padding:1px 5px;color:#1f3a8f}
  144. /* ══════════ 工作台内页面(模型/插件/看板) ══════════ */
  145. .page{flex:1;min-width:0;padding:22px 30px;overflow:auto}
  146. .page__head{display:flex;align-items:flex-start;gap:14px;max-width:1060px;margin:0 auto 18px}
  147. .page__head h3{font-size:17px;font-weight:700;margin:0}
  148. .page__head p{font-size:12.5px;color:var(--text-3);margin:3px 0 0}
  149. .page__head .sp{flex:1}
  150. .page__body{max-width:1060px;margin:0 auto}
  151. .mtabs{display:flex;gap:6px;margin-bottom:14px}
  152. .mtabs span{height:30px;padding:0 14px;border-radius:99px;border:1px solid var(--border);background:#fff;font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;cursor:pointer}
  153. .mtabs span.on{color:var(--primary);border-color:var(--primary);background:var(--primary-soft);font-weight:600}
  154. .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  155. .mcard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:13px 15px;position:relative}
  156. .mcard.on{border-color:var(--primary);background:var(--primary-soft)}
  157. .mcard__n{font-size:14px;font-weight:650;display:flex;align-items:center;gap:7px}
  158. .mcard__n .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  159. .mcard__u{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:4px}
  160. .mcard__k{font-size:11.5px;color:var(--text-2);margin-top:2px}
  161. .mcard__tag{position:absolute;top:10px;right:11px;font-size:9.5px;padding:1px 8px;border-radius:99px;background:var(--primary);color:#fff;font-weight:700}
  162. .mcard__acts{display:flex;gap:5px;margin-top:9px;opacity:.85}
  163. .mcard__acts .ab{height:24px;padding:0 9px;border-radius:6px;display:inline-flex;align-items:center;font-size:11.5px;color:var(--text-2);cursor:pointer;border:1px solid var(--border);background:transparent}
  164. .mcard__acts .ab:hover{background:#eef0f4;color:var(--primary);border-color:var(--primary)}
  165. .mcard__acts .ab--danger{color:var(--err)}
  166. .mcard__acts .ab--danger:hover{background:var(--err-soft);color:var(--err);border-color:var(--err)}
  167. .psec{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden}
  168. .psec__head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:650}
  169. .psec__head .n{margin-left:auto;font-size:11px;color:var(--text-3);font-weight:400}
  170. .prow{display:grid;grid-template-columns:16px 1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px dashed var(--border)}
  171. .prow:last-child{border-bottom:none}
  172. .prow .i{color:var(--text-3);font-size:14px}
  173. .prow__n{font-size:13px;font-weight:600;color:var(--text-1)}
  174. .prow__d{font-size:11.5px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
  175. .prow__meta{font-size:11px;color:var(--text-3)}
  176. .sw{width:34px;height:19px;border-radius:99px;background:var(--primary);position:relative;flex:none}
  177. .sw::after{content:'';position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  178. .sw.off{background:#cfd4dd}.sw.off::after{right:auto;left:2px}
  179. .tchip{font-size:10px;padding:1px 7px;border-radius:4px;font-weight:600}
  180. .tchip--http{color:#0e7c86;background:rgba(14,124,134,.09)}
  181. .tchip--cmd{color:#7b46ec;background:rgba(123,70,236,.09)}
  182. .tchip--scope{color:var(--text-2);background:#f2f4f8}
  183. .bgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  184. .bslot{border:1.5px dashed var(--border);border-radius:10px;min-height:150px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12.5px;flex-direction:column;gap:6px}
  185. .page__empty-hint{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 14px;background:var(--primary-soft);border-radius:8px;font-size:12.5px;color:var(--text-2)}
  186. </style>
  187. </head>
  188. <body>
  189. <svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  190. <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>
  191. <symbol id="i-send" viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2z"/></symbol>
  192. <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>
  193. <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>
  194. <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>
  195. <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>
  196. <symbol id="i-chart" viewBox="0 0 24 24"><path d="M3 3h2v16h16v2H3zm4 12v-6h3v6zm5 0V7h3v8zm5 0V4h3v11z"/></symbol>
  197. <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>
  198. <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>
  199. <symbol id="i-board" viewBox="0 0 24 24"><path d="M3 3h8v10H3zm10 0h8v6h-8zM3 15h8v6H3zm10-4h8v10h-8z"/></symbol>
  200. <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>
  201. <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>
  202. <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>
  203. <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>
  204. <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>
  205. <symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 1l2.4 6.6L21 10l-6.6 2.4L12 19l-2.4-6.6L3 10l6.6-2.4zm7 12l1.2 3.3L23.5 17.5l-3.3 1.2L19 22l-1.2-3.3L14.5 17.5l3.3-1.2zM5 2l.9 2.6L8.5 5.5 5.9 6.4 5 9l-.9-2.6L1.5 5.5 4.1 4.6z"/></symbol>
  206. <symbol id="i-trad" viewBox="0 0 24 24"><path d="M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z"/></symbol>
  207. <symbol id="i-case" viewBox="0 0 24 24"><path d="M9 4h6a1 1 0 0 1 1 1v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4V5a1 1 0 0 1 1-1m1 3h4V6h-4z"/></symbol>
  208. <symbol id="i-plugin" viewBox="0 0 24 24"><path d="M20 11V9h-2V7a2 2 0 0 0-2-2h-2V3h-4v2H8a2 2 0 0 0-2 2v2H4v4h2v2a2 2 0 0 0 2 2h2v2h4v-2h2a2 2 0 0 0 2-2v-2h2v-4z"/></symbol>
  209. <symbol id="i-user" viewBox="0 0 24 24"><path d="M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 10c4.4 0 8 1.8 8 4v2H4v-2c0-2.2 3.6-4 8-4"/></symbol>
  210. <symbol id="i-close" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7l1.4-1.4L10.6 10.6l6.3-6.3z" transform="translate(1.4)"/></symbol>
  211. <symbol id="i-more" viewBox="0 0 24 24"><path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/></symbol>
  212. <symbol id="i-panel" viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m10 2v12h6V6z"/></symbol>
  213. </svg>
  214. <!-- ════════ ① 传统模式 + 切换入口 ══════════ -->
  215. <div class="doc-head">
  216. <span class="num">①</span>
  217. <h1>传统模式(现状)</h1>
  218. <span class="tag">默认保留</span>
  219. <span class="sub">布局与逻辑完全不变 · 仅隐藏「AI 数据分析」菜单组 · 顶栏新增模式切换入口(右上角)</span>
  220. </div>
  221. <div class="frame">
  222. <div class="window">
  223. <div class="shell-top">
  224. <div class="logo"><span class="mark">清</span>清鉴</div>
  225. <div class="top-menu" style="background:var(--sider);border-radius:8px;padding:3px;margin-left:8px">
  226. <span>案件数据</span><span>数据画像</span><span>通信分析</span><span>交易分析</span><span>活动轨迹</span><span>基站查询</span>
  227. </div>
  228. <span class="case-chip"><svg class="i"><use href="#i-case"/></svg>当前案件 <b>客户投诉案(9)</b></span>
  229. <div class="actions">
  230. <!-- 模式切换:设计核心件 -->
  231. <div class="mode-switch">
  232. <button class="on"><svg class="i"><use href="#i-trad"/></svg>传统</button>
  233. <button><svg class="i"><use href="#i-spark"/></svg>智能</button>
  234. </div>
  235. <button class="iconbtn"><svg class="i"><use href="#i-slug"/></svg></button>
  236. <span class="avatar">C</span>
  237. </div>
  238. </div>
  239. <div class="shell-body">
  240. <div class="mix-sider">
  241. <div class="ms-sec">业务分析</div>
  242. <div class="ms-item on"><svg class="i"><use href="#i-folder"/></svg>案件数据</div>
  243. <div class="ms-item"><svg class="i"><use href="#i-user"/></svg>数据画像</div>
  244. <div class="ms-item"><svg class="i"><use href="#i-chart"/></svg>通信分析</div>
  245. <div class="ms-item"><svg class="i"><use href="#i-chart"/></svg>交易分析</div>
  246. <div class="ms-item"><svg class="i"><use href="#i-chart"/></svg>活动轨迹分析</div>
  247. <div class="ms-item"><svg class="i"><use href="#i-chart"/></svg>行为时空分析</div>
  248. <div class="ms-item"><svg class="i"><use href="#i-chart"/></svg>对象关系分析</div>
  249. <div class="ms-sec">AI 数据分析(已隐藏)</div>
  250. <div class="ms-item disabled"><svg class="i"><use href="#i-robot"/></svg>AI 数据分析</div>
  251. <div class="ms-item disabled"><svg class="i"><use href="#i-robot"/></svg>模型管理</div>
  252. <div class="ms-item disabled"><svg class="i"><use href="#i-robot"/></svg>插件</div>
  253. <div class="ms-item disabled"><svg class="i"><use href="#i-robot"/></svg>Codex 分析</div>
  254. <div style="margin-top:auto;padding:8px 10px;font-size:11px;color:#6b7899;line-height:1.6">传统模式下整个「AI 数据分析」菜单组隐藏,其余菜单、多标签、案件逻辑零改动</div>
  255. </div>
  256. <div style="flex:1;display:flex;flex-direction:column;min-width:0">
  257. <div class="tabs">
  258. <span class="tab on">案件数据</span>
  259. <span class="tab">通信分析</span>
  260. <span class="tab">交易分析</span>
  261. <span class="tab">+</span>
  262. </div>
  263. <div class="shell-content">
  264. <div class="content-hint">传统模式内容区 = <b>现有页面原样渲染</b>(多标签 + 各业务分析页)<br>AI 能力整体让位给「智能模式」</div>
  265. <div class="callout tr" style="right:14px;top:8px;width:190px">↑ 模式切换放顶栏右上角:两模式共用同一入口,点击即切,偏好按用户记住(localStorage)</div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. <!-- ════════ ② 智能模式工作台 ══════════ -->
  272. <div class="doc-head">
  273. <span class="num">②</span>
  274. <h1>智能模式 · AI 工作台</h1>
  275. <span class="tag">全新布局</span>
  276. <span class="sub">不套传统壳(全屏路由)· 以 Codex 分析为内核 · 模型/插件收进弹层与抽屉 · aiAnalysis 备份页不并入 · 主流 AI 工具布局</span>
  277. </div>
  278. <div class="frame">
  279. <div class="window wb">
  280. <!-- 工作台顶栏 -->
  281. <div class="wb-top">
  282. <div class="logo"><span class="mark">清</span>清鉴 · 智能工作台</div>
  283. <span class="case-chip" title="切换案件请退出当前案件后,从案件管理重新进入"><svg class="i"><use href="#i-case"/></svg>案件:<b>客户投诉案(9)</b><svg class="i" style="color:var(--text-3)"><use href="#i-close"/></svg><span style="color:var(--text-3)">退出</span></span>
  284. <span class="case-chip" style="color:var(--text-3)">数据就绪 · 18 个文件</span>
  285. <div class="actions">
  286. <span class="chip--route case-chip"><svg class="i"><use href="#i-slug"/></svg>路由层 · 10.66.66.66</span>
  287. <span class="case-chip" style="color:var(--primary);border-color:transparent;background:var(--primary-soft);font-weight:600"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
  288. <div class="mode-switch">
  289. <button><svg class="i"><use href="#i-trad"/></svg>传统</button>
  290. <button class="on"><svg class="i"><use href="#i-spark"/></svg>智能</button>
  291. </div>
  292. <button class="iconbtn"><svg class="i"><use href="#i-slug"/></svg></button>
  293. <span class="avatar">C</span>
  294. </div>
  295. </div>
  296. <div class="wb-body">
  297. <!-- 左栏:会话 + 入口 -->
  298. <div class="rail">
  299. <!-- 左栏顶部菜单:模型 / 插件 / 案件 / 看板 -->
  300. <div class="rail__menu">
  301. <button class="rm on"><svg class="i"><use href="#i-robot"/></svg>对话</button>
  302. <button class="rm"><svg class="i"><use href="#i-model"/></svg>模型管理</button>
  303. <button class="rm"><svg class="i"><use href="#i-plugin"/></svg>插件与技能</button>
  304. </div>
  305. <button class="rail__new"><svg class="i"><use href="#i-send"/></svg>新建分析会话</button>
  306. <div class="rail__sec">会话</div>
  307. <div class="sess on">
  308. <div class="sess__t">客户投诉激增分析<time>2m</time></div>
  309. <div class="sess__m">qwen · 已生成分析报告与趋势图</div>
  310. </div>
  311. <div class="sess">
  312. <div class="sess__t">退费渠道拆解<time>14:06</time></div>
  313. <div class="sess__m">qwen · 3 轮对话</div>
  314. </div>
  315. </div>
  316. <!-- 中栏:对话 -->
  317. <div class="wb-main">
  318. <div class="wb-msgs">
  319. <div class="wb-col">
  320. <!-- 用户 -->
  321. <div class="turn--user" style="display:flex;justify-content:flex-end">
  322. <div style="max-width:76%;background:var(--primary);color:#fff;border-radius:12px 12px 3px 12px;padding:10px 14px;box-shadow:0 2px 8px rgba(42,80,236,.22)">
  323. 分析近 30 天客户投诉数据,找出激增原因并生成报告。
  324. <div style="margin-top:5px;font-size:11px;color:rgba(255,255,255,.62);text-align:right">14:02</div>
  325. </div>
  326. </div>
  327. <!-- AI 回合 -->
  328. <div class="turn--ai" style="display:grid;grid-template-columns:28px 1fr;gap:12px">
  329. <div class="ai-avatar" style="width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center"><svg class="i"><use href="#i-robot"/></svg></div>
  330. <div style="display:flex;flex-direction:column;gap:10px;min-width:0">
  331. <div class="think" style="background:rgba(123,70,236,.045);border:1px solid rgba(123,70,236,.14);border-radius:8px;padding:8px 12px;font-size:12.5px;color:#6a3fd8;display:flex;gap:8px;align-items:center">
  332. <svg class="i" style="color:#7b46ec"><use href="#i-brain"/></svg><b>思考过程</b><span style="color:var(--text-3)">已完成 · 8.2s</span>
  333. <svg class="i" style="margin-left:auto;color:var(--text-3)"><use href="#i-chev"/></svg>
  334. </div>
  335. <div style="border:1px solid var(--border);border-radius:8px;background:#fff;overflow:hidden">
  336. <div style="display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12.5px">
  337. <svg class="i" style="color:var(--primary)"><use href="#i-terminal"/></svg><b>执行过程</b><span style="color:var(--text-3)">3 个步骤</span>
  338. <span style="margin-left:auto;color:var(--ok);font-size:11.5px;display:flex;align-items:center;gap:4px"><svg class="i"><use href="#i-check"/></svg>已完成</span>
  339. </div>
  340. <div style="display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:8px 12px;align-items:start">
  341. <span style="width:22px;height:22px;border-radius:6px;background:#2a50ec;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px"><svg class="i"><use href="#i-terminal"/></svg></span>
  342. <div><div style="font-size:13px">读取投诉明细并按日聚合</div>
  343. <div class="mono" style="font-size:11.5px;color:var(--text-3)">SELECT date, count(*) FROM complaints …</div></div>
  344. <span style="font-size:11px;color:var(--text-3)">2.6s <svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg></span>
  345. </div>
  346. <div style="display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:8px 12px;border-top:1px dashed var(--border);align-items:start">
  347. <span style="width:22px;height:22px;border-radius:6px;background:#7b46ec;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px"><svg class="i"><use href="#i-chart"/></svg></span>
  348. <div><div style="font-size:13px">生成 30 天趋势图</div><div style="font-size:11.5px;color:var(--text-3)">已钉到看板</div></div>
  349. <span style="font-size:11px;color:var(--text-3)">0.4s <svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg></span>
  350. </div>
  351. </div>
  352. <div style="font-size:14px;line-height:1.8">
  353. <b style="color:var(--primary-deep)">投诉激增的直接原因:9/03 v2.6 版本上线后退费流程批量超时</b>,占新增投诉 62.4%。
  354. </div>
  355. <div style="display:flex;gap:10px;align-items:flex-start;background:var(--primary-soft);border-left:3px solid var(--primary);border-radius:8px;padding:10px 14px;font-size:13.5px">
  356. <svg class="i" style="color:var(--primary);margin-top:2px"><use href="#i-idea"/></svg>
  357. <span><b style="color:var(--primary-deep)">关键结论</b>:拐点与 v2.6 发版完全吻合;退费工单平均处理时长 6h → 41h。建议优先回滚退费网关。</span>
  358. </div>
  359. <div style="display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text-3)">
  360. <span style="display:flex;align-items:center;gap:4px"><svg class="i" style="color:var(--ok)"><use href="#i-check"/></svg>已完成</span>
  361. <span style="width:1px;height:10px;background:var(--border)"></span>
  362. <span style="display:flex;align-items:center;gap:4px"><svg class="i"><use href="#i-clock"/></svg>2m 14s</span>
  363. <span style="display:flex;align-items:center;gap:4px"><svg class="i"><use href="#i-token"/></svg>48.2k / 1.9k</span>
  364. <span style="margin-left:auto;display:flex;gap:2px;opacity:.6">
  365. <span style="width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center"><svg class="i"><use href="#i-doc"/></svg></span>
  366. <span style="width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center"><svg class="i"><use href="#i-terminal"/></svg></span>
  367. </span>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. <span class="collapse-rail"><svg class="i"><use href="#i-chev"/></svg></span>
  374. <div class="wb-composer">
  375. <div style="max-width:860px;margin:0 auto 8px;display:flex;gap:8px">
  376. <span style="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">按赔付金额再排一遍 TOP 渠道</span>
  377. <span style="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">生成管理层简要版</span>
  378. </div>
  379. <div style="max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-pop);padding:12px 14px 10px">
  380. <div style="min-height:40px;color:var(--text-3);font-size:13.5px">继续追问,或描述新的分析任务…</div>
  381. <div style="display:flex;align-items:center;gap:8px;margin-top:8px">
  382. <span style="display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--border);font-size:12.5px;color:var(--text-1)"><svg class="i" style="color:var(--text-3)"><use href="#i-model"/></svg>qwen · 本地模型<svg class="i" style="color:var(--text-3)"><use href="#i-chev"/></svg></span>
  383. <span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:12px;color:var(--text-2)"><svg class="i"><use href="#i-slug"/></svg>权限:默认</span>
  384. <span style="flex:1"></span>
  385. <span style="width:32px;height:32px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center"><svg class="i"><use href="#i-send"/></svg></span>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. <!-- 右栏 -->
  391. <div class="wb-aside">
  392. <div class="panel">
  393. <div class="panel__head"><svg class="i"><use href="#i-board"/></svg>看板<span class="n">已钉 2 / 6</span></div>
  394. <div class="pin">
  395. <div class="pin__t"><svg class="i" style="color:#7b46ec"><use href="#i-chart"/></svg>近 30 天投诉量趋势</div>
  396. <div class="bars"><b style="height:24%"></b><b style="height:26%"></b><b style="height:92%"></b><b style="height:70%"></b><b style="height:46%"></b><b style="height:32%"></b><b style="height:26%"></b></div>
  397. </div>
  398. <div class="pin">
  399. <div class="pin__t"><svg class="i" style="color:#0e7c86"><use href="#i-doc"/></svg>投诉类型 TOP 5</div>
  400. <div class="bars" style="align-items:center"><b style="height:16px"></b><b style="height:10px;opacity:.6"></b><b style="height:7px;opacity:.4"></b></div>
  401. </div>
  402. </div>
  403. <div class="panel">
  404. <div class="panel__head"><svg class="i"><use href="#i-folder"/></svg>本会话产物<span class="n">本轮变更 2</span></div>
  405. <div style="padding:4px 0">
  406. <div style="display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:12.5px;color:var(--text-2)"><svg class="i" style="color:var(--ok)"><use href="#i-doc"/></svg>投诉激增分析报告.md<span style="margin-left:auto;font-size:11px;color:var(--text-3)">18 KB</span></div>
  407. <div style="display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:12.5px;color:var(--text-2)"><svg class="i" style="color:var(--ok)"><use href="#i-chart"/></svg>trend_30d.echarts.json<span style="margin-left:auto;font-size:11px;color:var(--text-3)">4 KB</span></div>
  408. <div style="display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:12.5px;color:var(--text-2)"><svg class="i"><use href="#i-folder"/></svg>complaints_202608.csv<span style="margin-left:auto;font-size:11px;color:var(--text-3)">2.1 MB</span></div>
  409. </div>
  410. </div>
  411. </div>
  412. </div>
  413. </div>
  414. </div>
  415. <!-- ══════════ ③ 工作台 · 模型管理页 ══════════ -->
  416. <div class="doc-head">
  417. <span class="num">③</span>
  418. <h1>工作台内页面 · 模型管理</h1>
  419. <span class="tag">工作台内视图</span>
  420. <span class="sub">左栏菜单切换视图 · 数据与现有「模型管理」页同源(后端模型管理)· 默认模型用于新会话</span>
  421. </div>
  422. <div class="frame">
  423. <div class="window wb">
  424. <div class="wb-top">
  425. <div class="logo"><span class="mark">清</span>清鉴 · 智能工作台</div>
  426. <span class="case-chip" title="切换案件请退出当前案件后,从案件管理重新进入"><svg class="i"><use href="#i-case"/></svg>案件:<b>客户投诉案(9)</b><svg class="i" style="color:var(--text-3)"><use href="#i-close"/></svg><span style="color:var(--text-3)">退出</span></span>
  427. <span class="case-chip" style="color:var(--text-3)">数据就绪 · 18 个文件</span>
  428. <div class="actions">
  429. <span class="chip--route case-chip"><svg class="i"><use href="#i-slug"/></svg>路由层 · 10.66.66.66</span>
  430. <span class="case-chip" style="color:var(--primary);border-color:transparent;background:var(--primary-soft);font-weight:600"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
  431. <div class="mode-switch">
  432. <button><svg class="i"><use href="#i-trad"/></svg>传统</button>
  433. <button class="on"><svg class="i"><use href="#i-spark"/></svg>智能</button>
  434. </div>
  435. <button class="iconbtn"><svg class="i"><use href="#i-slug"/></svg></button>
  436. <span class="avatar">C</span>
  437. </div>
  438. </div>
  439. <div class="wb-body">
  440. <div class="rail">
  441. <div class="rail__menu">
  442. <button class="rm"><svg class="i"><use href="#i-robot"/></svg>对话</button>
  443. <button class="rm on"><svg class="i"><use href="#i-model"/></svg>模型管理</button>
  444. <button class="rm"><svg class="i"><use href="#i-plugin"/></svg>插件与技能</button>
  445. </div>
  446. <button class="rail__new"><svg class="i"><use href="#i-send"/></svg>新建分析会话</button>
  447. <div class="rail__sec">会话</div>
  448. <div class="sess on">
  449. <div class="sess__t">客户投诉激增分析<time>2m</time></div>
  450. <div class="sess__m">qwen · 已生成分析报告与趋势图</div>
  451. <span class="sess__more"><svg class="i"><use href="#i-more"/></svg></span>
  452. <div class="sess-menu" style="position:absolute;right:2px;top:30px">
  453. <button><svg class="i"><use href="#i-doc"/></svg>重命名</button>
  454. <button class="danger"><svg class="i"><use href="#i-close"/></svg>删除会话</button>
  455. </div>
  456. </div>
  457. <div class="sess is-renaming">
  458. <input class="sess__rename" value="退费渠道拆解">
  459. <div class="sess__rename-acts"><button class="rk">确认</button><button class="rk rk--cancel">取消</button></div>
  460. </div>
  461. </div>
  462. <div class="wb-main">
  463. <div class="page">
  464. <div class="page__head">
  465. <div>
  466. <h3>模型管理</h3>
  467. <p>聊天用模型与嵌入模型统一维护;模型同时供输入区下拉选择</p>
  468. </div>
  469. <span class="sp"></span>
  470. <button class="pbtn pbtn--p">新增模型</button>
  471. </div>
  472. <div class="page__body">
  473. <div class="mtabs"><span class="on">对话模型(LLM)· 3</span><span>嵌入模型 · 1</span></div>
  474. <div class="mgrid">
  475. <div class="mcard on">
  476. <span class="mcard__tag">默认</span>
  477. <div class="mcard__n"><span class="dot"></span>本地模型</div>
  478. <div class="mcard__u">http://127.0.0.1:7987/v1 · qwen</div>
  479. <div class="mcard__k">经路由层桥接 · 支持工具调用</div>
  480. <div class="mcard__acts"><button class="ab" title="设为默认模型">设为默认</button><button class="ab">编辑</button><button class="ab ab--danger">删除</button></div>
  481. </div>
  482. <div class="mcard">
  483. <div class="mcard__n"><span class="dot" style="background:var(--err)"></span>DeepSeek</div>
  484. <div class="mcard__u">https://api.deepseek.com · deepseek-chat</div>
  485. <div class="mcard__k">直连 · Chat 协议经路由层转 Responses</div>
  486. <div class="mcard__acts"><button class="ab" title="设为默认模型">设为默认</button><button class="ab">编辑</button><button class="ab ab--danger">删除</button></div>
  487. </div>
  488. <div class="mcard">
  489. <div class="mcard__n"><span class="dot" style="background:var(--err)"></span>通义千问</div>
  490. <div class="mcard__u">dashscope.aliyuncs.com/compatible-mode/v1 · deepseek-v4.1-flash</div>
  491. <div class="mcard__k">直连 · Chat 协议经路由层转 Responses</div>
  492. <div class="mcard__acts"><button class="ab" title="设为默认模型">设为默认</button><button class="ab">编辑</button><button class="ab ab--danger">删除</button></div>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. <!-- ══════════ ④ 工作台 · 插件与技能页 ══════════ -->
  502. <div class="doc-head">
  503. <span class="num">④</span>
  504. <h1>工作台内页面 · 插件与技能</h1>
  505. <span class="tag">工作台内视图</span>
  506. <span class="sub">MCP 服务 + 本机 Codex 技能 · 写入本机 CODEX_HOME,重启运行时生效</span>
  507. </div>
  508. <div class="frame">
  509. <div class="window wb">
  510. <div class="wb-top">
  511. <div class="logo"><span class="mark">清</span>清鉴 · 智能工作台</div>
  512. <span class="case-chip" title="切换案件请退出当前案件后,从案件管理重新进入"><svg class="i"><use href="#i-case"/></svg>案件:<b>客户投诉案(9)</b><svg class="i" style="color:var(--text-3)"><use href="#i-close"/></svg><span style="color:var(--text-3)">退出</span></span>
  513. <span class="case-chip" style="color:var(--text-3)">数据就绪 · 18 个文件</span>
  514. <div class="actions">
  515. <span class="chip--route case-chip"><svg class="i"><use href="#i-slug"/></svg>路由层 · 10.66.66.66</span>
  516. <span class="case-chip" style="color:var(--primary);border-color:transparent;background:var(--primary-soft);font-weight:600"><svg class="i"><use href="#i-model"/></svg>qwen · 本地模型</span>
  517. <div class="mode-switch">
  518. <button><svg class="i"><use href="#i-trad"/></svg>传统</button>
  519. <button class="on"><svg class="i"><use href="#i-spark"/></svg>智能</button>
  520. </div>
  521. <button class="iconbtn"><svg class="i"><use href="#i-slug"/></svg></button>
  522. <span class="avatar">C</span>
  523. </div>
  524. </div>
  525. <div class="wb-body">
  526. <div class="rail">
  527. <div class="rail__menu">
  528. <button class="rm"><svg class="i"><use href="#i-robot"/></svg>对话</button>
  529. <button class="rm"><svg class="i"><use href="#i-model"/></svg>模型管理</button>
  530. <button class="rm on"><svg class="i"><use href="#i-plugin"/></svg>插件与技能</button>
  531. </div>
  532. <button class="rail__new"><svg class="i"><use href="#i-send"/></svg>新建分析会话</button>
  533. <div class="rail__sec">会话</div>
  534. <div class="sess">
  535. <div class="sess__t">客户投诉激增分析<time>2m</time></div>
  536. <div class="sess__m">qwen · 已生成分析报告与趋势图</div>
  537. </div>
  538. <div class="sess">
  539. <div class="sess__t">退费渠道拆解<time>14:06</time></div>
  540. <div class="sess__m">qwen · 3 轮对话</div>
  541. </div>
  542. </div>
  543. <div class="wb-main">
  544. <div class="page">
  545. <div class="page__head">
  546. <div>
  547. <h3>插件与技能</h3>
  548. <p>MCP 服务与本机 Codex 技能的启用 / 停用 · 仅桌面客户端可用</p>
  549. </div>
  550. <span class="sp"></span>
  551. <button class="pbtn pbtn--p">新增 MCP 服务</button>
  552. </div>
  553. <div class="page__body">
  554. <div class="mtabs"><span class="on">MCP 服务 · 2</span><span>技能(Skills)· 6</span></div>
  555. <div class="mgrid">
  556. <div class="mcard">
  557. <div class="mcard__n"><span class="dot" style="background:var(--ok)"></span>清鉴后端 MCP</div>
  558. <div class="mcard__u">http://127.0.0.1:8980/js/a/mcpstreamable</div>
  559. <div class="mcard__k"><span class="tchip tchip--http">streamable-http</span>&nbsp; 已启用 · 下一回合生效</div>
  560. <div class="mcard__acts"><button class="ab">编辑</button><button class="ab ab--danger">删除</button></div>
  561. </div>
  562. <div class="mcard">
  563. <div class="mcard__n"><span class="dot" style="background:var(--text-3)"></span>数据库直查</div>
  564. <div class="mcard__u">node db-mcp.js --readonly</div>
  565. <div class="mcard__k"><span class="tchip tchip--cmd">stdio</span>&nbsp; 已停用</div>
  566. <div class="mcard__acts"><button class="ab">编辑</button><button class="ab ab--danger">删除</button></div>
  567. </div>
  568. <div class="mcard">
  569. <div class="mcard__n"><span class="dot" style="background:var(--ok)"></span>报表生成</div>
  570. <div class="mcard__k"><span class="tchip tchip--scope">技能 · 用户安装</span>&nbsp; 已启用</div>
  571. <div class="mcard__u">按模板把会话结果整理成 Markdown 报告</div>
  572. <div class="mcard__acts"><button class="ab">停用</button></div>
  573. </div>
  574. <div class="mcard">
  575. <div class="mcard__n"><span class="dot" style="background:var(--text-3)"></span>SQL 审查</div>
  576. <div class="mcard__k"><span class="tchip tchip--scope">技能 · 内置</span>&nbsp; 已启用</div>
  577. <div class="mcard__u">危险语句拦截与只读校验</div>
  578. <div class="mcard__acts"><button class="ab">停用</button></div>
  579. </div>
  580. </div>
  581. <div class="page__empty-hint">
  582. <svg class="i" style="color:var(--primary)"><use href="#i-idea"/></svg>
  583. 停用 / 启用会写入本机 Codex 配置,下一回合生效;新增 MCP 后需要重启运行时。
  584. </div>
  585. </div>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591. <!-- ════════ 设计说明 ══════════ -->
  592. <div class="notes">
  593. <div class="note">
  594. <h3><span class="n">1</span>切换入口:顶栏右上角分段控件</h3>
  595. <p><code>传统 ⇄ 智能</code> 分段控件放顶栏 action 区(搜索框旁、模板库之前)——两个模式的顶栏都有它,单击即切、偏好按用户持久化(localStorage <code>APP_WORKBENCH_MODE__</code>,仿暗色模式惯例)。业务人员日常停在自己常用的模式,不被打扰。</p>
  596. </div>
  597. <div class="note">
  598. <h3><span class="n">2</span>传统模式 = 现状减 AI 菜单</h3>
  599. <p>布局、多标签、案件逻辑零改动;唯一变化是「AI 数据分析」菜单组(AI 数据分析/模型管理/插件/Codex 分析)从混合侧边栏隐藏(菜单过滤 + 路由仍注册,直接敲 URL 会引导切模式)。</p>
  600. </div>
  601. <div class="note">
  602. <h3><span class="n">3</span>智能模式 = 全屏工作台路由</h3>
  603. <p>注册不套 LAYOUT 的全屏路由 <code>/workbench</code>(照 /case 案件管理页先例),覆盖整个视口。实现上新增一个 Workbench.vue 装配页 + 顶部/侧栏两个薄组件,复用 codexAnalysis 已重做的全部消息组件。</p>
  604. </div>
  605. <div class="note">
  606. <h3><span class="n">4</span>智能模式的内核 = Codex 分析</h3>
  607. <p>工作台即现有 Codex 分析页的组件整体复用(回合化排版、思考卡、步骤栈、内联审批、权限下拉、看板/产物)。<code>aiAnalysis</code> 为无效备份页不并入;其菜单在传统模式下同样隐藏。</p>
  608. </div>
  609. <div class="note">
  610. <h3><span class="n">5</span>菜单功能去向</h3>
  611. <p>左栏顶部菜单 = <b>视图切换</b>:对话 / 模型管理 / 插件与技能 / 看板,三页都在工作台内呈现(②③④);看板只保留在对话右栏。模型管理数据与现有页同源;<b>案件管理不做进工作台</b>——退出案件后走传统模式案件页。聊天选模型 = 输入区普通下拉框。顶栏案件 chip <b>只读</b>——不允许在工作台直接切换案件,必须退出案件后从案件管理重新进入(与业务口径一致)。</p>
  612. </div>
  613. <div class="note">
  614. <h3><span class="n">6</span>会话重命名与删除</h3>
  615. <p>会话行悬停出现 <code>⋯</code> 菜单:重命名(行内输入,Enter 确认 / Esc 取消)与删除(需确认;调用 Codex 归档接口并清理本地记录)。删除只影响该会话自身,案件产物目录不清理。</p>
  616. </div>
  617. <div class="note">
  618. <h3><span class="n">7</span>不动的东西</h3>
  619. <p>案件管理整套页面、业务分析各页面、后端与主进程 IPC 全部不变;codex 聊天页已完成的回合化排版/内联审批/权限下拉组件原样搬进工作台(组件级复用,不是复制)。</p>
  620. </div>
  621. </div>
  622. </body>
  623. </html>