index.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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>ChatGPT-like Clone</title>
  7. <link rel="stylesheet" href="/static/styles.css">
  8. </head>
  9. <body>
  10. <div id="auth-view" class="auth-view">
  11. <div class="auth-card">
  12. <h1>欢迎使用聊天系统</h1>
  13. <p class="auth-hint">系统分为管理员与普通用户,默认管理员:admin / Admin@123</p>
  14. <form id="login-form" class="auth-form">
  15. <label>用户名
  16. <input type="text" name="username" required autocomplete="username">
  17. </label>
  18. <label>密码
  19. <input type="password" name="password" required autocomplete="current-password">
  20. </label>
  21. <button type="submit" class="primary-button">登录</button>
  22. </form>
  23. <form id="register-form" class="auth-form hidden">
  24. <label>用户名
  25. <input type="text" name="username" required autocomplete="username">
  26. </label>
  27. <label>密码
  28. <input type="password" name="password" required autocomplete="new-password">
  29. </label>
  30. <button type="submit" class="primary-button">注册并登录</button>
  31. </form>
  32. <div class="auth-switch">
  33. <button type="button" class="secondary-button" data-auth-mode="login">已有账号?去登录</button>
  34. <button type="button" class="secondary-button" data-auth-mode="register">没有账号?去注册</button>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="app-shell hidden" id="app-shell">
  39. <aside class="sidebar">
  40. <div class="sidebar-scroll">
  41. <section class="sidebar-section">
  42. <label for="model-select" class="sidebar-label">选择模型</label>
  43. <select id="model-select" class="sidebar-input"></select>
  44. </section>
  45. <section class="sidebar-section">
  46. <label for="output-mode" class="sidebar-label">选择输出模式</label>
  47. <select id="output-mode" class="sidebar-input"></select>
  48. </section>
  49. <section class="sidebar-section">
  50. <label for="search-input" class="sidebar-label">搜索当前对话内容</label>
  51. <input id="search-input" type="text" class="sidebar-input" placeholder="输入关键字...">
  52. <div id="search-feedback" class="sidebar-help">无匹配。</div>
  53. </section>
  54. <section class="sidebar-section">
  55. <label for="history-range" class="sidebar-label" id="history-range-label">选择使用的历史消息数量</label>
  56. <input id="history-range" type="range" min="0" max="0" value="0" class="sidebar-range">
  57. <div id="history-range-value" class="sidebar-help">您选择的历史消息数量是: 0</div>
  58. </section>
  59. <section class="sidebar-section sidebar-actions">
  60. <button id="new-chat-btn" class="primary-button">New Chat</button>
  61. </section>
  62. </div>
  63. <div class="sidebar-history" aria-label="历史聊天记录">
  64. <div class="sidebar-history-header">
  65. <h3 class="sidebar-heading">历史聊天记录</h3>
  66. <span id="history-count" class="history-count" aria-live="polite"></span>
  67. </div>
  68. <div id="history-list" class="history-list" role="list"></div>
  69. <div class="history-pagination">
  70. <button id="history-prev" class="secondary-button">上一页</button>
  71. <button id="history-next" class="secondary-button">下一页</button>
  72. </div>
  73. </div>
  74. </aside>
  75. <main class="main-panel">
  76. <header class="app-header">
  77. <div class="header-title">
  78. <h1>ChatGPT-like Clone</h1>
  79. <span id="session-indicator" class="session-indicator hidden"></span>
  80. </div>
  81. <div class="header-actions">
  82. <div id="admin-role-indicator" class="admin-role-indicator hidden" title="管理员">
  83. <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  84. <path d="M12 2 4 6v6c0 5.25 3.4 10.74 8 12 4.6-1.26 8-6.75 8-12V6l-8-4zm0 2.18L18 7v4.99c0 4.38-2.84 8.98-6 10.1-3.16-1.12-6-5.72-6-10.1V7l6-2.82z" fill="currentColor"/>
  85. <path d="M12 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" fill="currentColor"/>
  86. </svg>
  87. </div>
  88. <span id="user-badge" class="user-badge"></span>
  89. <div id="user-menu" class="user-menu hidden">
  90. <button type="button" id="user-menu-toggle" class="avatar-button" aria-haspopup="true" aria-expanded="false">
  91. <span id="user-avatar-initials" class="avatar-initials">A</span>
  92. <svg class="avatar-caret" viewBox="0 0 24 24" aria-hidden="true">
  93. <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
  94. </svg>
  95. </button>
  96. <div id="user-menu-dropdown" class="user-menu-dropdown hidden" role="menu" aria-label="用户菜单">
  97. <button id="export-btn" class="menu-item" type="button" role="menuitem" disabled>我的导出</button>
  98. <button id="admin-btn" class="menu-item hidden" type="button" role="menuitem">用户管理</button>
  99. <button id="logout-btn" class="menu-item" type="button" role="menuitem" disabled>退出登录</button>
  100. </div>
  101. </div>
  102. </div>
  103. </header>
  104. <section id="chat-messages" class="chat-messages"></section>
  105. <form id="chat-form" class="chat-form">
  106. <textarea id="chat-input" placeholder="What is up?" rows="3" class="chat-textarea"></textarea>
  107. <div class="chat-form-footer">
  108. <label for="file-input" class="file-input-label">选择文件</label>
  109. <input id="file-input" type="file" multiple accept=".jpg,.jpeg,.png,.txt,.pdf,.doc,.docx" class="file-input">
  110. <button type="submit" id="send-btn" class="primary-button">发送</button>
  111. <button type="button" id="end-chat-btn" class="secondary-button danger hidden" title="提前结束此次对话">提前结束</button>
  112. </div>
  113. <div id="chat-status" class="chat-status" aria-live="polite"></div>
  114. </form>
  115. </main>
  116. </div>
  117. <div id="admin-panel" class="overlay hidden">
  118. <div class="overlay-content">
  119. <div class="overlay-header">
  120. <h2>用户管理</h2>
  121. <button id="admin-close" class="icon-button overlay-close" type="button" aria-label="关闭弹窗">
  122. <svg class="icon-close" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  123. <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  124. </svg>
  125. </button>
  126. </div>
  127. <form id="admin-create-form" class="admin-form">
  128. <h3>新增普通用户</h3>
  129. <div class="admin-form-grid">
  130. <input type="text" name="username" placeholder="用户名" required>
  131. <input type="password" name="password" placeholder="密码" required>
  132. <button type="submit" class="primary-button">创建</button>
  133. </div>
  134. </form>
  135. <div class="admin-section">
  136. <h3>用户列表</h3>
  137. <div id="admin-user-list" class="admin-list"></div>
  138. </div>
  139. <div class="admin-section">
  140. <div class="admin-section-header">
  141. <h3>导出记录</h3>
  142. <form class="admin-search">
  143. <input id="admin-export-search" type="text" placeholder="按用户名搜索">
  144. <button id="admin-export-refresh" class="secondary-button" type="button">查询</button>
  145. </form>
  146. </div>
  147. <div id="admin-export-list" class="admin-list"></div>
  148. </div>
  149. </div>
  150. </div>
  151. <div id="export-panel" class="overlay hidden">
  152. <div class="overlay-content">
  153. <div class="overlay-header">
  154. <h2>我的导出</h2>
  155. <button id="export-close" class="icon-button overlay-close" type="button" aria-label="关闭弹窗">
  156. <svg class="icon-close" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  157. <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  158. </svg>
  159. </button>
  160. </div>
  161. <div id="export-list" class="admin-list"></div>
  162. </div>
  163. </div>
  164. <div id="toast" class="toast hidden"></div>
  165. <script defer src="/static/app.js"></script>
  166. </body>
  167. </html>