318d3964bd
- 新增上下文按钮组件及其 HTML 内容、样式和脚本代码 - 在输入区域中集成上下文按钮组件，替换原内联代码 - 将上下文按钮样式从输入区域样式中移除并统一管理 - 将上下文按钮事件处理函数移入独立脚本并集成至输入区域脚本 - 保持输入区域功能完整性，简化代码结构，提高可维护性
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
/**
|
|
* 添加上下文按钮组件
|
|
*/
|
|
|
|
/**
|
|
* 获取添加上下文按钮的 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' });
|
|
}
|
|
`;
|
|
}
|