style:调整对话样式

This commit is contained in:
Roe-xin
2026-01-08 20:25:51 +08:00
parent 4b2f6967dc
commit 4037e9e2d7
4 changed files with 56 additions and 24 deletions

View File

@ -23,6 +23,7 @@ import {
waveformIconSvg,
knowledgeLoadIconSvg,
stateTransitionIconSvg,
userQuestionIconSvg,
} from "../constants/toolIcons";
import {
getWaveformPreviewContent,
@ -298,7 +299,7 @@ export function getMessageAreaStyles(): string {
padding: 0;
}
.message-segment {
padding: 10px 20px;
padding: 10px 0;
}
.segment-text {
line-height: 1.6;
@ -307,48 +308,69 @@ export function getMessageAreaStyles(): string {
/* Markdown 样式 */
.segment-text h1,
.segment-text h2,
.segment-text h3 {
margin: 16px 0 8px 0;
.segment-text h3,
.question-text h1,
.question-text h2,
.question-text h3 {
margin: 0px 0 -10px 0;
font-weight: 600;
line-height: 1.3;
}
.segment-text h1 {
.segment-text h1,
.question-text h1 {
font-size: 1.5em;
border-bottom: 1px solid var(--vscode-panel-border);
padding-bottom: 8px;
}
.segment-text h2 {
.segment-text h2,
.question-text h2 {
font-size: 1.3em;
}
.segment-text h3 {
.segment-text h3,
.question-text h3 {
font-size: 1.1em;
}
.segment-text ul,
.segment-text ol {
.segment-text ol,
.question-text ul,
.question-text ol {
margin: 8px 0;
padding-left: 24px;
}
.segment-text li {
margin: 0;
line-height: 0.4;
.segment-text li,
.question-text li {
line-height: 1;
}
.segment-text strong {
.segment-text strong,
.question-text strong {
font-weight: 600;
color: var(--vscode-foreground);
}
.segment-text em {
.segment-text em,
.question-text em {
font-style: italic;
}
.segment-text a {
.segment-text a,
.question-text a {
color: var(--vscode-textLink-foreground);
text-decoration: none;
}
.segment-text a:hover {
.segment-text a:hover,
.question-text a:hover {
text-decoration: underline;
}
.segment-text p {
.segment-text p,
.question-text p {
margin: 8px 0;
}
.segment-text code,
.question-text code {
background: var(--vscode-textCodeBlock-background);
padding: 2px 6px;
border-radius: 3px;
font-family: var(--vscode-editor-font-family);
font-size: 0.9em;
}
.segment-tool {
margin: 4px 0;
@ -356,7 +378,7 @@ export function getMessageAreaStyles(): string {
}
/* 低调显示的工具调用 - 移除边距和背景 */
.segment-tool.low-profile {
margin: 2px 20px;
margin: 2px 0px;
padding: 0;
background: none;
}
@ -540,7 +562,7 @@ export function getMessageAreaStyles(): string {
background: var(--vscode-textBlockQuote-background);
border-radius: 6px;
margin: 8px 0;
padding: 12px 14px;
padding: 12px 35px;
border-left: 3px solid var(--vscode-charts-orange);
}
.segment-question .question-text {
@ -588,6 +610,7 @@ export function getMessageAreaStyles(): string {
border: 1px solid var(--vscode-input-border);
border-radius: 6px;
font-size: 13px;
margin-left: -20px;
}
.segment-question .custom-submit {
padding: 8px 16px;
@ -646,6 +669,7 @@ export function getMessageAreaScript(): string {
const waveformIconSvg = \`${waveformIconSvg}\`;
const knowledgeLoadIconSvg = \`${knowledgeLoadIconSvg}\`;
const stateTransitionIconSvg = \`${stateTransitionIconSvg}\`;
const userQuestionIconSvg = \`${userQuestionIconSvg}\`;
${getAgentCardScript()}
@ -675,7 +699,8 @@ export function getMessageAreaScript(): string {
'showPlan': searchCodeIconSvg,
'addRule': fileWriteIconSvg,
'updateNode': fileWriteIconSvg,
'addStateTransition': stateTransitionIconSvg
'addStateTransition': stateTransitionIconSvg,
'askUser': userQuestionIconSvg,
};
return iconMap[toolName] || '';
}
@ -705,7 +730,9 @@ export function getMessageAreaScript(): string {
'addRule': '已添加规则',
'updateNode': '已更新节点',
'addStateTransition': '已添加状态转换',
'spawnExplorer': '代码探索'
'spawnExplorer': '代码探索',
'spawnDebugger': '波形调试',
'askUser': '用户提问',
};
return toolNameMap[toolName] || toolName;
}
@ -1073,7 +1100,7 @@ export function getMessageAreaScript(): string {
: '';
segmentDiv.innerHTML = \`
<div class="question-text">\${segment.question || ''}</div>
<div class="question-text">\${formatText(segment.question || '')}</div>
\${hasOptions ? \`<div class="question-options" data-ask-id="\${segment.askId}">\${optionsHtml}</div>\` : ''}
<div class="custom-input-container" style="display: \${isAnswered ? 'none' : 'flex'};">
<input type="text" class="custom-input" placeholder="\${hasOptions ? '输入其他答案...' : '请输入您的答案...'}" />
@ -1301,7 +1328,7 @@ export function getMessageAreaScript(): string {
} else if (segment.type === 'question') {
segmentDiv.innerHTML = \`
<div class="question-segment">
<div class="question-text">\${segment.question || ''}</div>
<div class="question-text">\${formatText(segment.question || '')}</div>
<div class="question-options">
\${(segment.options || []).map(opt => \`<span class="question-opt">\${opt}</span>\`).join('')}
</div>

View File

@ -271,7 +271,7 @@ export function getWebviewContent(
padding: 0;
}
.message-segment {
padding: 10px 20px;
padding: 10px 0;
}
.segment-text {
line-height: 1.6;
@ -314,7 +314,7 @@ export function getWebviewContent(
background: var(--vscode-textBlockQuote-background);
border-radius: 6px;
margin: 8px 0;
padding: 12px 14px;
padding: 12px 35px;
border-left: 3px solid var(--vscode-charts-orange);
}
.question-segment .question-text {