index.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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>市民请集合智能助手 Web 测试版</title>
  7. <link rel="stylesheet" href="/styles.css?v=wabi-sabi-2" />
  8. </head>
  9. <body>
  10. <div class="paper-grain"></div>
  11. <header class="top-nav">
  12. <div class="brand">
  13. <img src="/assets/logo.png" alt="" />
  14. <div>
  15. <strong>市民请集合</strong>
  16. </div>
  17. </div>
  18. <nav class="nav">
  19. <button class="nav-item active" type="button">对话</button>
  20. <button class="nav-item" type="button" data-scroll-tools>工具</button>
  21. <button class="nav-item" type="button" data-scroll-trace>轨迹</button>
  22. </nav>
  23. <div class="session-card">
  24. <span class="status-dot" id="statusDot"></span>
  25. <div>
  26. <strong id="sessionStatus">检查中</strong>
  27. <span id="mcpStatus">MCP 连接检测中</span>
  28. </div>
  29. </div>
  30. </header>
  31. <main class="shell">
  32. <section class="workspace">
  33. <section class="chat-card retro-window">
  34. <div class="window-bar">
  35. <span></span>
  36. </div>
  37. <div id="messages" class="messages"></div>
  38. <form id="chatForm" class="composer">
  39. <textarea
  40. id="messageInput"
  41. rows="3"
  42. placeholder="输入管理员想完成的操作,例如:当前百事可乐 500ml 的商品描述是什么,或生成铜仁移动 2026-05 月结报告"
  43. ></textarea>
  44. <div class="composer-footer">
  45. <span id="inputCount">0 字</span>
  46. <button id="sendBtn" class="send-button" type="submit">
  47. <span class="send-icon">↗</span>
  48. <span class="send-text">发送</span>
  49. </button>
  50. </div>
  51. </form>
  52. </section>
  53. <aside class="inspector">
  54. <section class="panel" id="toolsPanel">
  55. <div class="panel-title">
  56. <h2>可用工具</h2>
  57. </div>
  58. <div id="toolList" class="tool-list"></div>
  59. </section>
  60. <section class="panel" id="tracePanel">
  61. <div class="panel-title">
  62. <h2>执行轨迹</h2>
  63. </div>
  64. <div id="traceList" class="trace-list"></div>
  65. </section>
  66. </aside>
  67. </section>
  68. </main>
  69. <script src="/app.js" type="module"></script>
  70. </body>
  71. </html>