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

feat(planToggle): 添加 Plan 开关组件及其集成到输入区域

Browse Source
This commit is contained in:
Roe-xin
2025-12-29 12:00:43 +08:00
parent 94d41c3da9
commit 83db55c790
2 changed files with 108 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/inputArea.ts
View File

@ -19,6 +19,11 @@ import {
getContextCompressStyles,
getContextCompressScript
} from "./contextCompress";
import {
getPlanToggleContent,
getPlanToggleStyles,
getPlanToggleScript
} from "./planToggle";
/**
* 获取输入区域的 HTML 内容
@ -31,16 +36,7 @@ export function getInputAreaContent(): string {
<!-- 顶部工具栏 -->
<div class="input-top-toolbar">
${getContextButtonContent()}
<!-- Plan 开关 -->
<div class="tooltip">
<label class="plan-toggle">
<input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
<span class="plan-toggle-slider"></span>
<span class="plan-toggle-label">Plan</span>
</label>
<span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
</div>
${getPlanToggleContent()}
</div>
<textarea
id="messageInput"
@ -81,6 +77,7 @@ export function getInputAreaStyles(): string {
${getModelSelectorStyles()}
${getContextButtonStyles()}
${getContextCompressStyles()}
${getPlanToggleStyles()}
.input-area {
border-top: 1px solid var(--vscode-panel-border);
padding-top: 15px;
@ -118,49 +115,6 @@ export function getInputAreaStyles(): string {
margin-bottom: 8px;
gap: 12px;
}
.plan-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.plan-toggle input[type="checkbox"] {
display: none;
}
.plan-toggle-slider {
position: relative;
width: 36px;
height: 20px;
background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border);
border-radius: 10px;
transition: all 0.3s ease;
}
.plan-toggle-slider::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
left: 2px;
top: 2px;
background: var(--vscode-foreground);
border-radius: 50%;
transition: all 0.3s ease;
}
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
background: #409eff;
border-color: #409eff;
}
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
transform: translateX(16px);
background: white;
}
.plan-toggle-label {
font-size: 13px;
font-weight: 500;
color: var(--vscode-foreground);
}
.input-bottom-row {
display: flex;
align-items: center;
@ -306,6 +260,7 @@ export function getInputAreaScript(): string {
${getModelSelectorScript()}
${getContextButtonScript()}
${getContextCompressScript()}
${getPlanToggleScript()}
// 自动调整 textarea 高度
function autoResizeTextarea() {
@ -343,22 +298,6 @@ export function getInputAreaScript(): string {
resetOptimizeButton();
}
// Plan 开关处理函数
function handlePlanToggle() {
const planToggle = document.getElementById('planToggle');
const planTooltip = document.getElementById('planTooltip');
if (planToggle && planTooltip) {
if (planToggle.checked) {
// 开启 Plan 模式
planTooltip.textContent = '关闭 Plan 模式';
} else {
// 关闭 Plan 模式
planTooltip.textContent = '启用 Plan 模式';
}
}
}
let isOptimized = false; // 标记是否已优化
let originalText = ''; // 保存原始文本用于撤回

100
src/views/planToggle.ts Normal file
View File

@ -0,0 +1,100 @@
/**
* Plan 开关组件
*/
/**
* 获取 Plan 开关的 HTML 内容
*/
export function getPlanToggleContent(): string {
return `
<div class="tooltip">
<label class="plan-toggle">
<input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
<span class="plan-toggle-slider"></span>
<span class="plan-toggle-label">Plan</span>
</label>
<span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
</div>
`;
}
/**
* 获取 Plan 开关的样式
*/
export function getPlanToggleStyles(): string {
return `
/* Plan 开关样式 */
.plan-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.plan-toggle input[type="checkbox"] {
display: none;
}
.plan-toggle-slider {
position: relative;
width: 36px;
height: 20px;
background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border);
border-radius: 10px;
transition: all 0.3s ease;
}
.plan-toggle-slider::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
left: 2px;
top: 2px;
background: var(--vscode-foreground);
border-radius: 50%;
transition: all 0.3s ease;
}
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
background: #409eff;
border-color: #409eff;
}
.plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
transform: translateX(16px);
background: white;
}
.plan-toggle-label {
font-size: 13px;
font-weight: 500;
color: var(--vscode-foreground);
}
`;
}
/**
* 获取 Plan 开关的脚本
*/
export function getPlanToggleScript(): string {
return `
// Plan 开关处理函数
function handlePlanToggle() {
const planToggle = document.getElementById('planToggle');
const planTooltip = document.getElementById('planTooltip');
if (planToggle && planTooltip) {
if (planToggle.checked) {
// 开启 Plan 模式
planTooltip.textContent = '关闭 Plan 模式';
} else {
// 关闭 Plan 模式
planTooltip.textContent = '启用 Plan 模式';
}
}
}
`;
}