init: AI-webUI-V1 first backup

2026-02-15 23:08:47 +08:00
commit f372004545
9 changed files with 1882 additions and 0 deletions
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,247 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont;
+  background: #f7f7f8;
+}
+
+.app {
+  display: flex;
+  height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 260px;
+  background: #202123;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header button {
+  background: #444;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+#chatList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+}
+
+#chatList li {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid #333;
+}
+
+#chatList li.active {
+  background: #343541;
+}
+
+/* Main */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  padding: 10px;
+  background: #fff;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+}
+
+.messages {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+
+.message {
+  margin-bottom: 16px;
+  max-width: 800px;
+}
+
+.message {
+  max-width: 78%;
+  padding: 12px 14px;
+  border-radius: 16px;
+  line-height: 1.6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+
+.message.user {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #6fa8ff, #000000);
+  color: #03173e;
+}
+
+.message.assistant {
+  align-self: flex-start;
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+
+.message.user {
+  align-self: flex-end;
+  background: #daf1ff;
+  padding: 12px;
+  border-radius: 12px;
+}
+
+.message.assistant {
+  background: #fff;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid #eee;
+}
+
+.message.thinking {
+  color: #888;
+  font-style: italic;
+}
+
+.inputbar {
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+  border-top: 1px solid #ddd;
+  background: #fff;
+}
+
+textarea {
+  flex: 1;
+  resize: none;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid #ddd;
+  min-height: 48px;
+  max-height: 180px;
+  outline: none;
+}
+
+textarea:focus {
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
+}
+
+#sendBtn {
+  min-width: 88px;
+  border-radius: 14px;
+}
+
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.topbar select,
+.topbar input {
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  padding: 0 10px;
+}
+
+.topbar label {
+  color: #555;
+  font-size: 14px;
+}
+
+
+textarea {
+  flex: 1;
+  resize: none;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+}
+
+button {
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: none;
+  background: #10a37f;
+  color: white;
+  cursor: pointer;
+}
+
+/* 左侧 chat item：标题+日期+删除按钮 */
+#chatList li.chat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.chat-item-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.chat-title {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-date {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.chat-del {
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.75);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+}
+
+.chat-del:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+/* 消息：内容 + 时间戳 */
+.message .msg-meta {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+/* 让 user 的时间戳靠右一点更像聊天软件 */
+.message.user .msg-meta {
+  text-align: right;
+}