* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; background: #f5f6f7; height: 100vh; overflow: hidden; } .app-layout { display: flex; height: 100vh; width: 100%; margin: 0 auto; background: transparent; gap: 0; } .sidebar { width: 220px; background: #ffffff; border-right: 1px solid #e6e6e6; display: flex; flex-direction: column; padding: 16px; } .sidebar .logo { font-size: 16px; color: #222; margin-bottom: 12px; } .conversations { flex: 1; margin-top: 8px; } .conv-item { padding: 10px; border-radius: 6px; color: #333; font-size: 14px; cursor: pointer; } .conv-item.active { background: #f0f0f0; } .auth-panel { border-top: 1px solid #eee; padding-top: 12px; margin-top: 12px; } .login-form, .user-panel { display: flex; flex-direction: column; gap: 8px; } .auth-input { width: 100%; border: 1px solid #e6e6e6; border-radius: 6px; padding: 9px 10px; font-size: 13px; outline: none; } .auth-input:focus { border-color: #cfcfcf; } .auth-btn { width: 100%; background: #222; color: #fff; border: none; border-radius: 6px; padding: 9px 10px; cursor: pointer; font-size: 13px; } .auth-btn.secondary { background: #f0f0f0; color: #333; } .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; } .user-name { color: #333; font-size: 13px; line-height: 1.4; word-break: break-word; } .sidebar-foot { font-size: 12px; color: #999; text-align: center; padding: 8px 0; } /* ===== 登录态预判：由 脚本设置 data-authed / data-admin，避免 UI 跳动 ===== */ /* 未登录：隐藏主面板、会话列表、用户面板；显示登录表单 */ html:not([data-authed="true"]) .main-panel, html:not([data-authed="true"]) .conversations, html:not([data-authed="true"]) .user-panel { display: none; } html:not([data-authed="true"]) .login-form { display: flex; } /* 已登录：显示主面板、会话列表、用户面板；隐藏登录表单 */ html[data-authed="true"] .main-panel { display: flex; } html[data-authed="true"] .conversations { display: block; } html[data-authed="true"] .user-panel { display: flex; } html[data-authed="true"] .login-form { display: none; } /* 用户管理按钮：仅管理员可见 */ #userManagementBtn { display: none; } html[data-admin="true"] #userManagementBtn { display: block; } .main-panel { flex: 1; display: flex; flex-direction: column; background: #fff; border-left: 0; box-shadow: 0 0 0 rgba(0,0,0,0); padding: 0; overflow: hidden; height: 100%; min-height: 0; } #chatView, #agentView, #kbView, #userManagementView { display: none; /* 默认隐藏，由 data-active-view 控制 */ flex-direction: column; flex: 1; width: 100%; overflow: hidden; min-height: 0; } /* 页面渲染前由 脚本写入，避免视图闪烁 */ html[data-active-view="chat"] #chatView, html[data-active-view="agent"] #agentView, html[data-active-view="knowledge"] #kbView, html[data-active-view="user-management"] #userManagementView { display: flex; } #chatView, #agentView { /* 外层不滚动，由内部 .chat-messages 滚动 */ } /* 聊天 / 智能体视图滚动条样式（靠右侧边缘） */ .chat-messages::-webkit-scrollbar { width: 7px; } .chat-messages::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(97, 97, 97, 0.24); border-radius: 999px; } .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(97, 97, 97, 0.4); } #kbView, #userManagementView { max-width: none; margin: 0; } .chat-messages, .kb-container, .user-management-container { -webkit-overflow-scrolling: touch; } .main-header { padding: 16px 20px; border-bottom: 1px solid #eee; background: #fff; } .main-header h3 { font-size: 16px; color: #111; } .sidebar-toggle-btn { display: none; border: none; background: transparent; color: #222; font-size: 22px; cursor: pointer; padding: 6px 10px; margin-left: auto; } .chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; background: #fff; min-height: 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(97, 97, 97, 0.24) transparent; /* 撑满宽度让滚动条在最右侧，用动态 padding 让内容与输入区对齐 */ width: 100%; padding: 20px max(20px, calc((100% - 860px) / 2)); } .message { display: flex; flex-direction: column; margin-bottom: 6px; align-items: flex-start; /* 默认左对齐单条消息容器，用户消息通过子元素右对齐 */ } .bot-message .message-content, .user-message .message-content { padding: 8px 14px; border-radius: 8px; max-width: 720px; /* 固定最大宽度，配合左右留白使内容更紧凑 */ width: auto; word-break: break-word; white-space: pre-wrap; font-size: 14px; line-height: 1.5; box-sizing: border-box; } .bot-message .message-content { align-self: flex-start; } .user-message .message-content { align-self: flex-end; } .message-content.markdown-body { white-space: normal; } .bot-message .message-loading-content { display: flex; align-items: center; justify-content: center; padding: 10px 16px; } /* 移除段落自带的上下边距，防止 pre-wrap 叠加多余空行 */ .message-content p { margin: 0; } .markdown-body { font-size: 14px; line-height: 1.7; color: #222; } .markdown-body > *:first-child { margin-top: 0; } .markdown-body > *:last-child { margin-bottom: 0; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 12px 0 8px; font-weight: 700; line-height: 1.3; color: #111; } .markdown-body h1 { font-size: 1.35em; } .markdown-body h2 { font-size: 1.2em; } .markdown-body h3 { font-size: 1.08em; } .markdown-body p { margin: 0 0 6px; } /* 响应式：窄屏设备去掉两侧大留白，消息最大宽度回退为 100% */ @media (max-width: 900px) { .chat-messages { padding: 16px 20px; } .bot-message .message-content, .user-message .message-content { max-width: 100%; } } .markdown-body ul, .markdown-body ol { margin: 4px 0 6px 18px; padding: 0; } .markdown-body li { margin: 0 0 4px 0; line-height: 1.55; } .markdown-body ul > li:last-child, .markdown-body ol > li:last-child { margin-bottom: 0; } .markdown-body blockquote { margin: 10px 0; padding: 8px 12px; border-left: 4px solid #d0d7de; color: #57606a; background: #f6f8fa; border-radius: 0 6px 6px 0; } .markdown-body table { width: 100%; border-collapse: collapse; margin: 10px 0; overflow: hidden; border-radius: 6px; } .markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; } .markdown-body th { background: #f6f8fa; font-weight: 600; } .markdown-body hr { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; } .markdown-body strong { font-weight: 700; } .markdown-body em { font-style: italic; } .markdown-body a { color: #0969da; text-decoration: underline; } .markdown-body code { background: rgba(175, 184, 193, 0.2); color: #c7254e; padding: 2px 6px; border-radius: 5px; font-family: Consolas, Monaco, monospace; font-size: 12px; } .markdown-body pre { background: #0d1117; color: #e6edf3; padding: 12px; border-radius: 8px; overflow-x: auto; margin: 10px 0; } .markdown-body pre code { background: transparent; padding: 0; color: #e6edf3; font-size: 12px; } .markdown-body input[type="checkbox"] { margin-right: 6px; } .markdown-body img { max-width: 100%; border-radius: 6px; margin: 8px 0; } .bot-message .message-content { background: #f4f4f4; color: #222; align-self: flex-start; min-height: 41px; /* 保证加载状态也和单行文字有相近的高度 */ } .user-message .message-content { background: #222; color: #fff; align-self: flex-end; } .bot-message .message-time { align-self: flex-start; } .user-message .message-time { align-self: flex-end; } .message-time { font-size: 12px; color: #9b9b9b; margin-top: 6px; } .chat-toolbar { display: flex; justify-content: flex-end; padding: 10px 0 0; } .chat-input-area { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #ffffff; border-radius: 18px; box-shadow: 0 10px 30px rgba(23, 30, 42, 0.08); border: 1px solid rgba(228, 231, 235, 0.9); width: calc(100% - 40px); max-width: 860px; margin: 16px auto 20px; z-index: 2; } .chat-input-block { width: 100%; } .toolbar { display: flex; gap: 8px; flex-shrink: 0; } .action-toolbar-right { align-items: center; } .tool-pill { border: 1px solid rgba(34, 34, 34, 0.08); background: rgba(248, 249, 250, 0.95); color: #666; border-radius: 16px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .tool-pill:not([disabled]):hover { background: rgba(232, 233, 235, 0.9); border-color: rgba(34, 34, 34, 0.15); color: #333; } .tool-pill[disabled] { opacity: 0.6; cursor: not-allowed; } .chat-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .chat-input-container { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; background: #f7f8fb; border: 1px solid #e5e7eb; border-radius: 20px; padding: 8px 12px; } .chat-input { width: 100%; border: none; background: transparent; border-radius: 0; padding: 10px 0; font-size: 14px; outline: none; color: #202124; line-height: 1.6; } input.chat-input { border: 1px solid #e6e6e6; background: #fff; border-radius: 10px; padding: 10px 12px; min-height: 40px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); } input.chat-input:focus { border-color: #cfcfcf; box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.06); } input.chat-input[type="file"] { padding: 8px 12px; cursor: pointer; } textarea.chat-input { min-height: 42px; max-height: 140px; resize: none; line-height: 1.6; overflow-y: auto; padding-right: 4px; width: 100%; } textarea.chat-input::-webkit-scrollbar { width: 7px; } textarea.chat-input::-webkit-scrollbar-track { background: transparent; } textarea.chat-input::-webkit-scrollbar-thumb { background: rgba(97, 97, 97, 0.24); border-radius: 999px; } textarea.chat-input { scrollbar-width: thin; scrollbar-color: rgba(97, 97, 97, 0.24) transparent; } .chat-input:focus { border-color: #cfcfcf; } .send-btn { background: #222; color: #fff; border: none; padding: 10px 14px; border-radius: 6px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .input-send-btn { width: 46px; height: 46px; border-radius: 50%; padding: 0; min-width: 46px; background: #9ca3af; color: #fff; box-shadow: none; transition: background 0.2s ease, transform 0.2s ease; align-self: flex-end; } .input-send-btn.active { background: #111; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16); } .input-send-btn.active:hover { transform: translateY(-1px); } .input-send-btn:hover { background: #9ca3af; } .send-icon { font-size: 18px; line-height: 1; } .send-btn:disabled, .input-send-btn:disabled { opacity: 0.7; cursor: not-allowed; } .delete-doc-btn { line-height: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } /* loading dots */ .loading { display:none; justify-content:center; gap:6px; padding:10px; } .inline-loading { display:flex; align-items:center; justify-content:center; gap:6px; height: 100%; min-height: 21px; } .dot { width:6px; height:6px; border-radius:50%; background:#888; animation: bounce 1.2s infinite; } .user-management-container { display: flex; flex-direction: column; padding: 20px 20px; } .user-management-loading { text-align: center; color: #666; padding: 40px; } .user-management-list { display: flex; flex-direction: column; gap: 16px; padding: 10px 0; } .user-management-table { width: 100%; border-collapse: collapse; background: #fff; } .user-management-table th, .user-management-table td { border-bottom: 1px solid #eee; padding: 10px 12px; text-align: left; font-size: 14px; } .user-management-table th { background: #f8f9fa; color: #444; font-weight: 600; } .user-management-table tr:last-child td { border-bottom: none; } .user-role-badge { display: inline-block; padding: 4px 8px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: 12px; font-weight: 600; color: #2563eb; background: #e8f0ff; border: 1px solid #cfe0ff; } .user-role-badge.admin { color: #991b1b; background: #fee2e2; border-color: #fecaca; } .user-role-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .user-role-option { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d9d9d9; border-radius: 999px; font-size: 13px; color: #333; background: #fff; cursor: pointer; } .user-role-option input { cursor: pointer; } .user-role-option.active { background: #e8f0ff; border-color: #cfe0ff; color: #2563eb; } .user-management-actions { margin-top: 12px; display: flex; gap: 8px; align-items: center; } .user-action-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; } .user-action-group button { white-space: nowrap; word-break: keep-all; } .user-role-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 20px; } .user-role-modal-card { width: min(560px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); padding: 18px 20px 20px; } .user-role-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #222; } .user-role-modal-close { border: none; background: transparent; font-size: 22px; color: #666; cursor: pointer; } .user-role-modal-body { display: flex; flex-direction: column; gap: 12px; } .user-role-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; } .user-role-modal-footer .send-btn { display: inline-flex; align-items: center; justify-content: center; } @keyframes bounce { 0%,80%,100%{ transform:scale(0.8); opacity:0.6 } 40%{ transform:scale(1); opacity:1 } } /* responsive */ @media (max-width: 800px) { .app-layout { flex-direction: column; margin: 12px; } .sidebar { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-height: 85vh; overflow-y: auto; background: #fff; z-index: 100; box-shadow: 0 12px 28px rgba(0,0,0,0.16); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease; display: flex; flex-direction: column; } body.sidebar-open .sidebar { transform: translateY(0); opacity: 1; visibility: visible; } .sidebar-toggle-btn { display: inline-flex; } .conversations { display:none; } .auth-panel { margin-top: 0; padding-top: 0; border-top: none; margin-left: auto; min-width: 180px; } .login-form { flex-direction: row; align-items: center; } .auth-input { min-width: 0; } } @media (max-width: 600px) { .app-layout { margin: 0; } .sidebar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; } .sidebar .logo { margin-bottom: 0; } .auth-panel { margin-left: 0; min-width: 0; } .login-form { flex-direction: column; align-items: stretch; } .auth-input { width: 100%; } .main-panel { padding: 0 12px; } .main-panel > div { width: 100%; max-width: 100%; margin: 0; } .main-header { padding: 14px 10px; } .chat-messages { padding: 16px 10px; } .chat-input-area { width: 100%; max-width: 100%; margin: 16px 0 20px; } .chat-actions-row { flex-wrap: wrap; gap: 10px; } .toolbar { width: 100%; justify-content: flex-start; } .input-send-btn { align-self: flex-end; } } .kb-container { display: flex; flex-direction: column; padding: 20px 20px; } .kb-loading { text-align: center; color: #666; padding: 40px; } .kb-list { display: flex; flex-direction: column; gap: 16px; padding: 10px 0; } .kb-item { background: #ffffff; border: 1px solid #eaeaea; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; } .kb-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .kb-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #f0f0f0; font-size: 13px; color: #888; } .delete-doc-btn { margin-left: 16px; background-color: #ffe6e6; color: #ff4d4f; border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s; } .delete-doc-btn:hover { background-color: #ff4d4f; color: #ffffff; border-color: #ff4d4f; } .kb-item-id { font-weight: 600; color: #444; display: inline-flex; align-items: center; gap: 6px; } .kb-item-id::before { content: "🏷️"; } .kb-item-docid { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; padding: 4px 10px; border-radius: 12px; color: #666; } .kb-item-content { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: #fafafa; padding: 12px 16px; border-radius: 8px; border-left: 3px solid #ccc; } /* Toast 通知样式 */ .toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; pointer-events: none; } .toast { min-width: 250px; background-color: #333; color: #fff; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 14px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateX(100%); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .toast.show { opacity: 1; transform: translateX(0); } .toast.success { background-color: #28a745; } .toast.error { background-color: #dc3545; } .toast.info { background-color: #17a2b8; } /* 模态框内的标签栏 */ .modal-tabs { display: flex; gap: 8px; background: #f0f0f0; padding: 4px; border-radius: 6px; } .tab-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #666; transition: all 0.2s; } .tab-btn.active { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 500; } /* Markdown 预览内容基本排版 */ .markdown-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; color: #24292e; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; } .markdown-body h1 { font-size: 1.8em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; } .markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; } .markdown-body h3 { font-size: 1.25em; } .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin-top: 0; margin-bottom: 16px; } .markdown-body blockquote { padding: 0 1em; color: #6a737d; border-left: 0.25em solid #dfe2e5; } .markdown-body ul, .markdown-body ol { padding-left: 2em; } .markdown-body code { padding: 0.2em 0.4em; margin: 0; font-size: 85%; color: #c7254e; background-color: rgba(27,31,35,0.05); border-radius: 3px; font-family: "Consolas", monospace; } .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: #e6edf3; background-color: #0d1117; border-radius: 8px; } .markdown-body pre code { padding: 0; color: #e6edf3; background-color: transparent; } /* 知识库表格样式 */ .kb-table-container { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); margin-bottom: 24px; } .kb-table { width: 100%; border-collapse: collapse; text-align: left; } .kb-table th, .kb-table td { padding: 12px 16px; border-bottom: 1px solid #eee; vertical-align: top; } .kb-table th { background-color: #f8f9fa; font-weight: 600; color: #444; font-size: 14px; } .kb-table td { color: #333; font-size: 14px; line-height: 1.5; } .kb-table tr:last-child td { border-bottom: none; } .kb-content-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #555; } .kb-content-full { display: none; } .kb-content-wrapper.expanded .kb-content-summary { display: none; } .kb-content-wrapper.expanded .kb-content-full { display: block; } .expand-toggle-btn { background: none; border: none; color: #0066cc; cursor: pointer; font-size: 12px; padding: 4px 0 0 0; } .expand-toggle-btn:hover { text-decoration: underline; } /* Modal Styles (重写用于长文本弹窗) */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; } .modal.show { display: flex; } .modal-content { background-color: #fefefe; border-radius: 12px; width: 80%; max-width: 800px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0,0,0,0.15); } .modal-header { padding: 16px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { font-size: 18px; color: #333; } .close-modal { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; } .close-modal:hover { color: #333; } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .kb-container { display: flex; flex-direction: column; }