diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index 0ef2653..638eb96 100644 --- a/src/views/inputArea.ts +++ b/src/views/inputArea.ts @@ -24,6 +24,11 @@ import { getPlanToggleStyles, getPlanToggleScript } from "./planToggle"; +import { + getOptimizeButtonContent, + getOptimizeButtonStyles, + getOptimizeButtonScript +} from "./optimizeButton"; /** * 获取输入区域的 HTML 内容 @@ -50,15 +55,7 @@ export function getInputAreaContent(): string {
${getContextCompressContent()} - - -
- - 一键优化 -
- + ${getOptimizeButtonContent()}
@@ -78,6 +75,7 @@ export function getInputAreaStyles(): string { ${getContextButtonStyles()} ${getContextCompressStyles()} ${getPlanToggleStyles()} + ${getOptimizeButtonStyles()} .input-area { border-top: 1px solid var(--vscode-panel-border); padding-top: 15px; @@ -224,30 +222,6 @@ export function getInputAreaStyles(): string { border-radius: 4px; cursor: pointer; } - .optimize-button { - padding: 8px; - background: transparent; - color: var(--vscode-foreground); - border: none; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.2s ease; - width: 32px; - height: 32px; - } - .optimize-button:hover { - opacity: 0.7; - } - .optimize-button svg { - width: 16px; - height: 16px; - } - .optimize-button-wrapper { - display: flex; - align-items: flex-end; - } `; } @@ -261,6 +235,7 @@ export function getInputAreaScript(): string { ${getContextButtonScript()} ${getContextCompressScript()} ${getPlanToggleScript()} + ${getOptimizeButtonScript()} // 自动调整 textarea 高度 function autoResizeTextarea() { @@ -297,61 +272,5 @@ export function getInputAreaScript(): string { // 重置优化状态 resetOptimizeButton(); } - - let isOptimized = false; // 标记是否已优化 - let originalText = ''; // 保存原始文本用于撤回 - - function handleOptimize() { - if (isOptimized) { - // 撤回操作 - messageInput.value = originalText; - resetOptimizeButton(); - } else { - // 优化操作 - originalText = messageInput.value; // 保存原始文本 - - // 使用死数据替换输入框内容 - const optimizedTexts = [ - '请帮我优化这段代码，提高性能和可读性', - '请分析这个问题并给出最佳解决方案', - '请帮我重构这段代码，使其更加简洁高效', - '请检查代码中的潜在问题并提供改进建议' - ]; - const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)]; - messageInput.value = randomText; - - // 切换到撤回状态 - isOptimized = true; - updateOptimizeButton(); - } - - messageInput.focus(); - autoResizeTextarea(); - } - - function updateOptimizeButton() { - const optimizeIcon = document.getElementById('optimizeIcon'); - const optimizeTooltip = document.getElementById('optimizeTooltip'); - - if (optimizeIcon && optimizeTooltip) { - // 切换为撤回图标 - optimizeIcon.innerHTML = ''; - optimizeTooltip.textContent = '撤回'; - } - } - - function resetOptimizeButton() { - const optimizeIcon = document.getElementById('optimizeIcon'); - const optimizeTooltip = document.getElementById('optimizeTooltip'); - - if (optimizeIcon && optimizeTooltip) { - // 切换回优化图标（星星图标） - optimizeIcon.innerHTML = ''; - optimizeTooltip.textContent = '一键优化'; - } - - isOptimized = false; - originalText = ''; - } `; } diff --git a/src/views/optimizeButton.ts b/src/views/optimizeButton.ts new file mode 100644 index 0000000..5043be9 --- /dev/null +++ b/src/views/optimizeButton.ts @@ -0,0 +1,117 @@ +/** + * 一键优化按钮组件 + */ + +/** + * 获取一键优化按钮的 HTML 内容 + */ +export function getOptimizeButtonContent(): string { + return ` + +
+ + 一键优化 +
+ `; +} + +/** + * 获取一键优化按钮的样式 + */ +export function getOptimizeButtonStyles(): string { + return ` + /* 一键优化按钮样式 */ + .optimize-button { + padding: 8px; + background: transparent; + color: var(--vscode-foreground); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.2s ease; + width: 32px; + height: 32px; + } + + .optimize-button:hover { + opacity: 0.7; + } + + .optimize-button svg { + width: 16px; + height: 16px; + } + + .optimize-button-wrapper { + display: flex; + align-items: flex-end; + } + `; +} + +/** + * 获取一键优化按钮的脚本 + */ +export function getOptimizeButtonScript(): string { + return ` + let isOptimized = false; // 标记是否已优化 + let originalText = ''; // 保存原始文本用于撤回 + + function handleOptimize() { + if (isOptimized) { + // 撤回操作 + messageInput.value = originalText; + resetOptimizeButton(); + } else { + // 优化操作 + originalText = messageInput.value; // 保存原始文本 + + // 使用死数据替换输入框内容 + const optimizedTexts = [ + '请帮我优化这段代码，提高性能和可读性', + '请分析这个问题并给出最佳解决方案', + '请帮我重构这段代码，使其更加简洁高效', + '请检查代码中的潜在问题并提供改进建议' + ]; + const randomText = optimizedTexts[Math.floor(Math.random() * optimizedTexts.length)]; + messageInput.value = randomText; + + // 切换到撤回状态 + isOptimized = true; + updateOptimizeButton(); + } + + messageInput.focus(); + autoResizeTextarea(); + } + + function updateOptimizeButton() { + const optimizeIcon = document.getElementById('optimizeIcon'); + const optimizeTooltip = document.getElementById('optimizeTooltip'); + + if (optimizeIcon && optimizeTooltip) { + // 切换为撤回图标 + optimizeIcon.innerHTML = ''; + optimizeTooltip.textContent = '撤回'; + } + } + + function resetOptimizeButton() { + const optimizeIcon = document.getElementById('optimizeIcon'); + const optimizeTooltip = document.getElementById('optimizeTooltip'); + + if (optimizeIcon && optimizeTooltip) { + // 切换回优化图标（星星图标） + optimizeIcon.innerHTML = ''; + optimizeTooltip.textContent = '一键优化'; + } + + isOptimized = false; + originalText = ''; + } + `; +}