kexueadmin
/
paper-burner
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(chatbot): 调整思考过程折叠块样式

This commit is contained in:
肖应宇 2026-04-13 17:53:40 +08:00
parent 6c78f08769
commit 869e15d4ce
3 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/history_detail/03-components/chatbot/index.css
View File

@ -381,10 +381,17 @@ body.dark #chatbot-toast {
/* ==================== 思考过程块样式 (Redesigned) ==================== */
.reasoning-block {
background: rgba(248, 250, 252, 0.6); /* Slate-50 with opacity */
display: inline-flex;
padding: 10px 15px;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
max-width: 100%;
background: #F8F9FA; /* Slate-50 with opacity */
color: var(--slate-500);
padding: 8px 12px;
border: 1px solid var(--slate-200); /* 更细腻的边框 */
border-radius: 8px; /* 圆角 */
/*
margin-top removed because .assistant-message padding handles the offset now.
@ -392,58 +399,52 @@ body.dark #chatbot-toast {
*/
margin: 0 0 16px 0;
position: relative;
font-size: 13px; /* 稍微小一点的字体 */
}
.reasoning-header {
display: flex;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.reasoning-title {
font-weight: 600;
font-size: 12px;
color: var(--slate-400);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.reasoning-title::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--slate-300);
border-radius: 50%;
.reasoning-title {
color: var(--666666, #666);
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.reasoning-toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--slate-400);
font-size: 12px;
transition: color var(--transition-fast);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.reasoning-toggle-btn:hover {
color: var(--slate-600);
.reasoning-toggle-icon {
display: block;
transform: rotate(180deg);
transition: transform var(--transition-fast);
}
.reasoning-block.is-collapsed .reasoning-toggle-icon {
transform: rotate(0deg);
}
.reasoning-content {
margin-top: 8px;
color: var(--slate-600);
font-size: 13px;
line-height: 1.6;
padding-top: 4px;
border-top: 1px solid var(--slate-100); /* 内部细线分隔 */
font-family: var(--font-family-monospace); /* 使用等宽字体或更加技术感的字体 */
color: var(--999999, #999);
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
}
/* ==================== 输入指示器动画 ==================== */

14
css/history_detail/03-components/chatbot/message-actions.css
View File

@ -159,19 +159,19 @@
background: none;
border: none;
cursor: pointer;
padding: 2px 6px;
color: #64748b;
font-size: 15px;
transition: all var(--transition-fast) ease;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-fast) ease;
}
.reasoning-toggle-btn:hover {
color: #475569;
transform: scale(1.1);
opacity: 0.8;
}
.reasoning-toggle-btn:active {
transform: scale(0.95);
opacity: 0.65;
}
/* ==================== 9. 思维导图打开按钮 ==================== */

17
js/chatbot/ui/chatbot-message-renderer.js
View File

@ -310,6 +310,7 @@ window.ChatbotMessageRenderer = {
if (m.reasoningContent) {
const reasoningId = `reasoning-block-${index}`;
const collapsed = window[`reasoningCollapsed_${index}`] === true;
const collapsedClass = collapsed ? ' is-collapsed' : '';
let renderedReasoningContent = '';
try {
if (typeof renderWithKatexStreaming === 'function') {
@ -324,13 +325,17 @@ window.ChatbotMessageRenderer = {
// Phase 3: 思考过程折叠按钮事件委托
if (USE_EVENT_DELEGATION) {
reasoningBlock = `
<div id="${reasoningId}" class="reasoning-block">
<div id="${reasoningId}" class="reasoning-block${collapsedClass}">
<div class="reasoning-header">
<span class="reasoning-title">思考过程</span>
<button class="reasoning-toggle-btn"
data-action="toggle-reasoning"
data-index="${index}">
${collapsed ? '▼' : '▲'}
data-index="${index}"
aria-label="展开/收起思考过程"
aria-expanded="${collapsed ? 'false' : 'true'}">
<svg class="reasoning-toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6L8 10L4 6" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">
@ -341,11 +346,13 @@ window.ChatbotMessageRenderer = {
} else {
// 旧版本：内联事件
reasoningBlock = `
<div id="${reasoningId}" class="reasoning-block">
<div id="${reasoningId}" class="reasoning-block${collapsedClass}">
<div class="reasoning-header">
<span class="reasoning-title">思考过程</span>
<button class="reasoning-toggle-btn" onclick="(function(){window['reasoningCollapsed_${index}']=!window['reasoningCollapsed_${index}'];window.ChatbotUI.updateChatbotUI();})()">
${collapsed ? '▼' : '▲'}
<svg class="reasoning-toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6L8 10L4 6" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">