feat(optimizeButton): 添加一键优化按钮组件及其集成到输入区域
This commit is contained in:
Roe-xin
@ -24,6 +24,11 @@ import {
|
||||
getPlanToggleStyles,
|
||||
getPlanToggleScript
|
||||
} from "./planToggle";
|
||||
import {
|
||||
getOptimizeButtonContent,
|
||||
getOptimizeButtonStyles,
|
||||
getOptimizeButtonScript
|
||||
} from "./optimizeButton";
|
||||
|
||||
/**
|
||||
* 获取输入区域的 HTML 内容
|
||||
@ -50,15 +55,7 @@ export function getInputAreaContent(): string {
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
${getContextCompressContent()}
|
||||
|
||||
<!-- 一键优化按钮 -->
|
||||
<div class="tooltip">
|
||||
<button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
|
||||
<svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
|
||||
</button>
|
||||
<span class="tooltiptext" id="optimizeTooltip">一键优化</span>
|
||||
</div>
|
||||
|
||||
${getOptimizeButtonContent()}
|
||||
<button onclick="sendMessage()">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -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 = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
|
||||
optimizeTooltip.textContent = '撤回';
|
||||
}
|
||||
}
|
||||
|
||||
function resetOptimizeButton() {
|
||||
const optimizeIcon = document.getElementById('optimizeIcon');
|
||||
const optimizeTooltip = document.getElementById('optimizeTooltip');
|
||||
|
||||
if (optimizeIcon && optimizeTooltip) {
|
||||
// 切换回优化图标（星星图标）
|
||||
optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
|
||||
optimizeTooltip.textContent = '一键优化';
|
||||
}
|
||||
|
||||
isOptimized = false;
|
||||
originalText = '';
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
117
src/views/optimizeButton.ts
Normal file
117
src/views/optimizeButton.ts
Normal file
@ -0,0 +1,117 @@
|
||||
/**
|
||||
* 一键优化按钮组件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取一键优化按钮的 HTML 内容
|
||||
*/
|
||||
export function getOptimizeButtonContent(): string {
|
||||
return `
|
||||
<!-- 一键优化按钮 -->
|
||||
<div class="tooltip">
|
||||
<button id="optimizeButton" class="optimize-button" onclick="handleOptimize()">
|
||||
<svg t="1765867478136" id="optimizeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314"><path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" p-id="2315" fill="#409eff"></path></svg>
|
||||
</button>
|
||||
<span class="tooltiptext" id="optimizeTooltip">一键优化</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一键优化按钮的样式
|
||||
*/
|
||||
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 = '<path d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z" fill="currentColor"/><path d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" fill="currentColor"/>';
|
||||
optimizeTooltip.textContent = '撤回';
|
||||
}
|
||||
}
|
||||
|
||||
function resetOptimizeButton() {
|
||||
const optimizeIcon = document.getElementById('optimizeIcon');
|
||||
const optimizeTooltip = document.getElementById('optimizeTooltip');
|
||||
|
||||
if (optimizeIcon && optimizeTooltip) {
|
||||
// 切换回优化图标（星星图标）
|
||||
optimizeIcon.innerHTML = '<path d="M490.048929 399.773864c7.042381-21.120144 36.85976-21.120144 43.902142 0l41.273372 123.957105A184.967743 184.967743 0 0 0 692.274156 640.713687l123.890111 41.273373c21.119144 7.042381 21.119144 36.85976 0 43.902141L692.207161 767.162574A184.967743 184.967743 0 0 0 575.224443 884.212286l-41.273372 123.890111A23.09997 23.09997 0 0 1 512 1024c-9.983123 0-18.838344-6.409437-21.951071-15.897603L448.775557 884.145292A184.946745 184.946745 0 0 0 331.792839 767.162574L207.836733 725.889201A23.09997 23.09997 0 0 1 191.93813 703.93813c0-9.983123 6.409437-18.838344 15.897603-21.95107l123.957106-41.273373A184.946745 184.946745 0 0 0 448.775557 523.730969zM242.840657 73.466543A13.888779 13.888779 0 0 1 256.022498 63.94338c5.987474 0 11.299007 3.839663 13.182841 9.523163l24.767824 74.360464a111.070238 111.070238 0 0 0 70.19983 70.20083l74.360464 24.767824A13.888779 13.888779 0 0 1 448.05662 255.977502c0 5.987474-3.839663 11.299007-9.523163 13.182841l-74.360464 24.767823a110.947249 110.947249 0 0 0-70.20083 70.199831l-24.767824 74.360464A13.888779 13.888779 0 0 1 256.022498 448.011624a13.888779 13.888779 0 0 1-13.182841-9.523163l-24.767823-74.360464a110.947249 110.947249 0 0 0-70.199831-70.20083l-74.360464-24.767824A13.888779 13.888779 0 0 1 63.988376 255.977502c0-5.987474 3.839663-11.299007 9.523163-13.182841l74.360464-24.767824a110.947249 110.947249 0 0 0 70.20083-70.19983zM695.213897 6.335443a9.283184 9.283184 0 0 1 17.538459 0L729.260905 55.86509a73.889506 73.889506 0 0 0 46.843883 46.843883l49.530646 16.509549a9.283184 9.283184 0 0 1 0 17.538458L776.106787 153.266529a73.9585 73.9585 0 0 0-46.843882 46.843883l-16.509549 49.530647a9.283184 9.283184 0 0 1-17.538459 0L678.705348 200.112412a73.9585 73.9585 0 0 0-46.843883-46.843883l-49.468652-16.509549a9.283184 9.283184 0 0 1 0-17.538458l49.535646-16.509549a73.897505 73.897505 0 0 0 46.842883-46.843883L695.213897 6.397438z m0 0" fill="#409eff"/>';
|
||||
optimizeTooltip.textContent = '一键优化';
|
||||
}
|
||||
|
||||
isOptimized = false;
|
||||
originalText = '';
|
||||
}
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user