pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:调整对话样式

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/codeHighlight.ts
View File

@ -70,7 +70,7 @@ export function getCodeHighlightStyles(): string {
/* 代码块语言标签 */
.code-block-wrapper {
position: relative;
margin: 12px 0;
margin: -20px 0;
}
.code-language-label {

5
src/constants/toolIcons.ts
View File

@ -170,3 +170,8 @@ export const stateTransitionIconSvg = `
</svg>
</span>
`;
/**
* 用户提问图标 SVG
*/
export const userQuestionIconSvg = `<svg t="1767869230062" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" width="14" height="14"><path d="M563.645217 578.782609c2.537739-35.350261 6.322087-58.189913 11.397566-68.518957 7.568696-15.449043 24.175304-34.370783 49.775304-56.631652 35.172174-30.72 58.546087-53.960348 70.121739-69.810087 11.575652-15.805217 17.408-36.418783 17.408-61.885217 0-41.939478-15.805217-76.399304-47.37113-103.379479-31.610435-26.980174-73.638957-40.470261-126.130087-40.47026-56.765217 0-101.376 15.760696-133.921392 47.282086C372.424348 256.934957 356.173913 298.562783 356.173913 350.386087h71.145739c1.335652-31.165217 6.811826-55.02887 16.384-71.590957 17.051826-29.740522 47.86087-44.610783 92.338087-44.610782 35.973565 0 61.796174 8.637217 77.378783 25.911652 15.582609 17.274435 23.373913 37.665391 23.373913 61.128348 0 16.784696-5.342609 32.990609-16.027826 48.573217-5.787826 8.904348-13.534609 17.363478-23.151305 25.555478l-31.966608 28.40487c-30.675478 27.113739-50.487652 51.155478-59.570087 72.125217-6.054957 13.979826-10.551652 41.627826-13.579131 82.899479h71.145739z m15.137392 89.043478a44.521739 44.521739 0 1 0-89.043479 0 44.521739 44.521739 0 0 0 89.043479 0z" fill="#8a8a8a" p-id="4820"></path><path d="M934.912 0h-801.391304a133.565217 133.565217 0 0 0-133.565218 133.565217v623.304348l0.222609 7.835826A133.565217 133.565217 0 0 0 133.565217 890.434783h222.608696v89.043478a44.521739 44.521739 0 0 0 64.556522 39.713391L675.661913 890.434783h259.294609a133.565217 133.565217 0 0 0 133.565217-133.565218V133.565217a133.565217 133.565217 0 0 0-133.565217-133.565217z m-801.391304 89.043478h801.391304a44.521739 44.521739 0 0 1 44.521739 44.521739v623.304348a44.521739 44.521739 0 0 1-44.521739 44.521739h-269.801739a44.521739 44.521739 0 0 0-20.034783 4.763826l-199.902608 100.930783V845.913043a44.521739 44.521739 0 0 0-44.52174-44.521739h-267.130434a44.521739 44.521739 0 0 1-44.521739-44.521739V133.565217a44.521739 44.521739 0 0 1 44.521739-44.521739z" fill="#8a8a8a" p-id="4821"></path></svg>`;

69
src/views/messageArea.ts
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>

4
src/views/webviewContent.ts
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 {