/* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; color: #e0e0e0; line-height: 1.6; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* 头部样式 */ .header { text-align: center; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 30px; } .header h1 { font-size: 2.2rem; color: #00d4ff; margin-bottom: 10px; text-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } .subtitle { color: #888; font-size: 1rem; } /* 上传区域 */ .upload-section { margin-bottom: 30px; } .upload-area { border: 2px dashed #4a4a6a; border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02); } .upload-area:hover { border-color: #00d4ff; background: rgba(0, 212, 255, 0.05); } .upload-area.dragover { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); } .upload-icon { font-size: 3rem; margin-bottom: 15px; } .upload-area p { margin: 5px 0; } .upload-area .hint { font-size: 0.85rem; color: #666; } .sample-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 15px; } /* 按钮样式 */ .btn { padding: 12px 28px; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .btn-primary { background: linear-gradient(135deg, #0099ff, #0066cc); color: white; } .btn-primary:hover { background: linear-gradient(135deg, #00b3ff, #0077dd); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 153, 255, 0.4); } .btn-secondary { background: rgba(255, 255, 255, 0.08); color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.15); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); } .btn-success { background: linear-gradient(135deg, #00d98e, #00a86b); color: white; } .btn-success:hover { background: linear-gradient(135deg, #00ff9f, #00bf7d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 217, 142, 0.4); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn-icon { font-size: 1.1rem; } /* 概览卡片 */ .pipeline-overview { margin-bottom: 30px; } .pipeline-overview h2, .pipeline-flow h2, .detail-panel h2, .stages-detail h2 { color: #00d4ff; margin-bottom: 20px; font-size: 1.3rem; } .overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .overview-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(255, 255, 255, 0.1); } .card-icon { font-size: 2rem; } .card-content { display: flex; flex-direction: column; } .card-label { font-size: 0.85rem; color: #888; } .card-value { font-size: 1.2rem; font-weight: 600; color: #00ff88; } /* 流程图样式 */ .flow-container { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; overflow-x: auto; } .flow-node { background: rgba(255, 255, 255, 0.05); border: 2px solid #4a4a6a; border-radius: 12px; padding: 20px; min-width: 200px; cursor: pointer; transition: all 0.3s ease; position: relative; } .flow-node:hover { border-color: #00d4ff; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2); } .flow-node.active { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); } .flow-node::after { content: '→'; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: #4a4a6a; } .flow-node:last-child::after { display: none; } .node-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .node-icon { font-size: 1.5rem; } .node-title { font-weight: 600; color: #00d4ff; } .node-step { font-size: 0.75rem; background: rgba(0, 212, 255, 0.2); padding: 2px 8px; border-radius: 10px; color: #00d4ff; } .node-stats { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: #888; } .node-stat { display: flex; justify-content: space-between; } .node-stat-value { color: #00ff88; } /* 标签页样式 */ .tabs { display: flex; gap: 5px; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .tab-btn { padding: 10px 20px; background: transparent; border: none; color: #888; cursor: pointer; border-radius: 6px 6px 0 0; transition: all 0.3s ease; } .tab-btn:hover { color: #e0e0e0; background: rgba(255, 255, 255, 0.05); } .tab-btn.active { color: #00d4ff; background: rgba(0, 212, 255, 0.1); border-bottom: 2px solid #00d4ff; } .tab-content { background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 20px; } .tab-pane { display: none; } .tab-pane.active { display: block; } /* JSON查看器样式 */ .json-viewer { background: rgba(0, 0, 0, 0.4); border-radius: 8px; padding: 15px; overflow-x: auto; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.85rem; line-height: 1.5; max-height: 500px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } .json-key { color: #ff79c6; } .json-string { color: #50fa7b; } .json-number { color: #bd93f9; } .json-boolean { color: #ffb86c; } .json-null { color: #6272a4; } /* 手风琴样式 */ .accordion { display: flex; flex-direction: column; gap: 10px; } .accordion-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden; } .accordion-header { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s ease; } .accordion-header:hover { background: rgba(255, 255, 255, 0.05); } .accordion-header.active { background: rgba(0, 212, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .accordion-title { display: flex; align-items: center; gap: 10px; } .accordion-icon { transition: transform 0.3s ease; } .accordion-header.active .accordion-icon { transform: rotate(180deg); } .accordion-content { display: none; padding: 20px; } .accordion-content.active { display: block; } /* 数据流展示 */ .data-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .data-section { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 15px; } .data-section h4 { color: #00d4ff; margin-bottom: 10px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .data-section h4::before { content: ''; width: 8px; height: 8px; border-radius: 50%; } .data-section.input h4::before { background: #ffb86c; } .data-section.output h4::before { background: #50fa7b; } /* 子步骤样式 */ .sub-steps { margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(255, 255, 255, 0.1); } .sub-step { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 15px; margin-bottom: 10px; border-left: 3px solid #00d4ff; } .sub-step-header { font-weight: 600; color: #00d4ff; margin-bottom: 10px; } /* 响应式设计 */ @media (max-width: 768px) { .data-flow { grid-template-columns: 1fr; } .flow-container { flex-direction: column; } .flow-node::after { content: '↓'; right: 50%; top: auto; bottom: -25px; transform: translateX(50%); } .overview-cards { grid-template-columns: 1fr; } } /* 滚动条样式 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #5a5a7a; } /* 加载动画 */ .loading { display: flex; justify-content: center; align-items: center; padding: 40px; } .loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(0, 212, 255, 0.2); border-top-color: #00d4ff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* 空状态 */ .empty-state { text-align: center; padding: 60px 20px; color: #666; } .empty-state-icon { font-size: 4rem; margin-bottom: 20px; } /* RAG输入区域样式 */ .rag-input-section { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 25px; margin-bottom: 30px; position: relative; } .rag-input-section h2 { color: #00d4ff; margin-bottom: 15px; font-size: 1.3rem; } .server-status { position: absolute; top: 25px; right: 25px; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .status-dot { width: 10px; height: 10px; border-radius: 50%; animation: pulse 2s infinite; } .status-dot.online { background: #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } .status-dot.warning { background: #ffb86c; box-shadow: 0 0 10px rgba(255, 184, 108, 0.5); } .status-dot.offline { background: #ff5555; box-shadow: 0 0 10px rgba(255, 85, 85, 0.5); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .input-area { margin-bottom: 20px; } .input-area textarea { width: 100%; min-height: 180px; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 18px; color: #e8e8e8; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95rem; line-height: 1.7; resize: vertical; transition: all 0.3s ease; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3); } .input-area textarea:focus { outline: none; border-color: #00d4ff; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(0, 212, 255, 0.15); } .input-area textarea::placeholder { color: #666; font-style: italic; } .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .btn-icon { margin-right: 5px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(26, 26, 46, 0.95); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; z-index: 10; } .loading-overlay p { color: #00d4ff; font-size: 1rem; } /* 调整上传区域样式 */ .upload-section { margin-bottom: 30px; } .upload-area { border: 2px dashed #4a4a6a; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02); } .upload-area .upload-icon { font-size: 2rem; margin-bottom: 10px; } .upload-area p { font-size: 0.9rem; color: #888; } /* 流程节点执行时间显示 */ .node-time { font-size: 0.75rem; color: #ffb86c; margin-top: 5px; } /* ==================== 功能切换Tab样式 ==================== */ .function-tabs { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .function-tab { padding: 12px 24px; border: none; background: rgba(255, 255, 255, 0.05); color: #888; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; border-bottom: 3px solid transparent; } .function-tab:hover { background: rgba(0, 212, 255, 0.1); color: #00d4ff; } .function-tab.active { background: rgba(0, 212, 255, 0.2); color: #00d4ff; border-bottom-color: #00d4ff; } /* ==================== 专业性审查区域样式 ==================== */ .professional-review-section { background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 25px; margin-bottom: 30px; position: relative; } .review-type-selector { display: flex; align-items: center; gap: 25px; margin: 15px 0 20px 0; padding: 18px 20px; background: linear-gradient(135deg, rgba(0, 153, 255, 0.08), rgba(0, 212, 255, 0.05)); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .review-type-selector > label:first-child { color: #00d4ff; font-weight: 600; font-size: 0.95rem; } .radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #e0e0e0 !important; font-weight: normal !important; padding: 6px 12px; border-radius: 6px; transition: all 0.2s ease; } .radio-label:hover { background: rgba(0, 212, 255, 0.1); } .radio-label input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: #00d4ff; } .radio-label input[type="radio"]:checked + span { color: #00ff88; font-weight: 500; } /* ==================== 专业性审查结果样式 ==================== */ .professional-results { margin-top: 30px; } .result-section { background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .result-section h3 { color: #00d4ff; margin-bottom: 15px; font-size: 1.2rem; } /* RAG召回摘要卡片 */ .rag-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } .summary-card { background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 15px; } .summary-card-title { color: #888; font-size: 0.85rem; margin-bottom: 8px; } .summary-card-value { color: #00d4ff; font-size: 1.5rem; font-weight: bold; } /* 审查结果项 */ .review-results-list { display: flex; flex-direction: column; gap: 20px; } .review-result-item { background: rgba(255, 255, 255, 0.05); border-left: 4px solid #00d4ff; border-radius: 8px; padding: 20px; } .result-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .result-entity-name { color: #00d4ff; font-size: 1.1rem; font-weight: bold; } .result-rag-score { background: rgba(255, 182, 108, 0.2); color: #ffb86c; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; } .result-item-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .review-result-box { background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 15px; } .result-box-title { color: #ffb86c; font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .result-box-content { color: #e0e0e0; font-size: 0.9rem; line-height: 1.6; } .result-json { background: rgba(0, 0, 0, 0.3); border-radius: 6px; padding: 12px; max-height: 300px; overflow-y: auto; } .result-json pre { margin: 0; color: #e0e0e0; font-size: 0.85rem; white-space: pre-wrap; word-wrap: break-word; } /* 状态标签 */ .status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; } .status-success { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .status-warning { background: rgba(255, 182, 108, 0.2); color: #ffb86c; } .status-error { background: rgba(255, 85, 85, 0.2); color: #ff5555; } /* 问题详情样式 */ .issue-details { margin-top: 15px; padding: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border-left: 3px solid #ffb86c; } .issue-item { margin-bottom: 15px; } .issue-item:last-child { margin-bottom: 0; } .issue-item strong { display: block; color: #00d4ff; font-size: 0.9rem; margin-bottom: 6px; } .issue-item p { margin: 0; color: #e0e0e0; line-height: 1.6; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, 0.1); } /* 风险等级标签 */ .risk-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: bold; margin-left: 10px; } .risk-badge.risk-high { background: rgba(255, 85, 85, 0.2); color: #ff5555; border: 1px solid #ff5555; } .risk-badge.risk-medium { background: rgba(255, 182, 108, 0.2); color: #ffb86c; border: 1px solid #ffb86c; } .risk-badge.risk-low { background: rgba(80, 250, 123, 0.2); color: #50fa7b; border: 1px solid #50fa7b; } /* 查看审查依据按钮 */ .view-reference-btn { background: linear-gradient(135deg, #00d4ff, #0099cc); color: #ffffff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 212, 255, 0.3); margin-left: 10px; } .view-reference-btn:hover { background: linear-gradient(135deg, #00e5ff, #00aadd); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4); } /* 审查依据侧边栏 */ .reference-sidebar { position: fixed; top: 0; right: -600px; width: 600px; height: 100vh; background: rgba(20, 20, 30, 0.98); backdrop-filter: blur(10px); border-left: 1px solid rgba(0, 212, 255, 0.3); box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5); transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; overflow: hidden; display: flex; flex-direction: column; } .reference-sidebar.active { right: 0; } .sidebar-header { padding: 20px 25px; background: linear-gradient(135deg, rgba(0, 153, 255, 0.15), rgba(0, 212, 255, 0.1)); border-bottom: 2px solid rgba(0, 212, 255, 0.3); display: flex; justify-content: space-between; align-items: center; } .sidebar-header h3 { margin: 0; color: #00d4ff; font-size: 1.3rem; } .sidebar-close-btn { background: rgba(255, 85, 85, 0.2); border: 1px solid #ff5555; color: #ff5555; width: 32px; height: 32px; border-radius: 6px; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .sidebar-close-btn:hover { background: rgba(255, 85, 85, 0.3); transform: scale(1.1); } .sidebar-content { flex: 1; padding: 25px; overflow-y: auto; color: #e0e0e0; line-height: 1.8; } /* Markdown内容样式 */ .sidebar-content h1, .sidebar-content h2, .sidebar-content h3 { color: #00d4ff; margin-top: 20px; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.2); padding-bottom: 8px; } .sidebar-content h1 { font-size: 1.6rem; } .sidebar-content h2 { font-size: 1.3rem; } .sidebar-content h3 { font-size: 1.1rem; } .sidebar-content p { margin: 10px 0; } .sidebar-content code { background: rgba(0, 0, 0, 0.3); padding: 2px 6px; border-radius: 3px; color: #ffb86c; font-family: 'Consolas', monospace; } .sidebar-content pre { background: rgba(0, 0, 0, 0.4); padding: 15px; border-radius: 8px; overflow-x: auto; border-left: 3px solid #00d4ff; } .sidebar-content pre code { background: none; padding: 0; } .sidebar-content ul, .sidebar-content ol { padding-left: 25px; margin: 10px 0; } .sidebar-content li { margin: 5px 0; } .sidebar-content blockquote { border-left: 4px solid #00d4ff; padding-left: 15px; margin: 15px 0; color: #b8b8b8; font-style: italic; } .sidebar-content table { width: 100%; border-collapse: collapse; margin: 15px 0; } .sidebar-content th, .sidebar-content td { border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px; text-align: left; } .sidebar-content th { background: rgba(0, 212, 255, 0.1); color: #00d4ff; font-weight: 600; } .sidebar-content td { background: rgba(0, 0, 0, 0.2); } .reference-source { background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.3); padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; color: #00d4ff; font-weight: 500; } /* 侧边栏遮罩层 */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* LaTeX公式样式优化 */ .sidebar-content .katex { color: #e0e0e0; } .sidebar-content .katex-display { margin: 20px 0; } /* 查询对信息 */ .query-info { background: rgba(0, 212, 255, 0.05); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 6px; padding: 10px; margin-top: 10px; font-size: 0.85rem; color: #888; } .query-info strong { color: #00d4ff; } /* 空状态提示 */ .empty-state { text-align: center; padding: 60px 20px; color: #666; } .empty-state-icon { font-size: 4rem; margin-bottom: 20px; } .empty-state-text { font-size: 1.1rem; margin-bottom: 10px; } .empty-state-hint { font-size: 0.9rem; color: #555; }