feat(contextButton): 添加上下文按钮组件及相关集成

- 新增上下文按钮组件及其 HTML 内容、样式和脚本代码
- 在输入区域中集成上下文按钮组件,替换原内联代码
- 将上下文按钮样式从输入区域样式中移除并统一管理
- 将上下文按钮事件处理函数移入独立脚本并集成至输入区域脚本
- 保持输入区域功能完整性,简化代码结构,提高可维护性
This commit is contained in:
Roe-xin
2025-12-29 11:26:15 +08:00
parent 770da72ce3
commit 318d3964bd
2 changed files with 79 additions and 45 deletions

View File

@ -0,0 +1,71 @@
/**
* 添加上下文按钮组件
*/
/**
* 获取添加上下文按钮的 HTML 内容
*/
export function getContextButtonContent(): string {
return `
<div class="tooltip">
<button class="add-context-button" onclick="handleAddContext()">
<svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
<path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
</svg>
<span class="add-context-label">添加上下文</span>
</button>
<span class="tooltiptext">添加文件或代码片段作为上下文</span>
</div>
`;
}
/**
* 获取添加上下文按钮的样式
*/
export function getContextButtonStyles(): string {
return `
/* 添加上下文按钮样式 */
.add-context-button {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(128, 128, 128, 0.2);
border: 1px solid var(--vscode-input-border);
border-radius: 6px;
color: var(--vscode-foreground);
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
font-weight: 500;
}
.add-context-button:hover {
background: rgba(128, 128, 128, 0.3);
border-color: var(--vscode-focusBorder);
}
.add-context-button svg {
width: 16px;
height: 16px;
color: #409eff;
}
.add-context-label {
white-space: nowrap;
}
`;
}
/**
* 获取添加上下文按钮的脚本
*/
export function getContextButtonScript(): string {
return `
// 添加上下文处理函数
function handleAddContext() {
// 发送添加上下文请求到扩展
vscode.postMessage({ command: 'addContext' });
}
`;
}