feat:实现一键优化的前端效果
This commit is contained in:
Roe-xin
@ -163,6 +163,32 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
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;
|
||||||
|
align-self: flex-end;
|
||||||
|
margin-bottom: -6px;
|
||||||
|
}
|
||||||
|
.optimize-button:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.optimize-button svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.optimize-button-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
.quick-actions {
|
.quick-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@ -491,6 +517,14 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 一键优化按钮 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
<button onclick="sendMessage()">发送</button>
|
<button onclick="sendMessage()">发送</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -509,6 +543,8 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
const editingFileName = document.getElementById('editingFileName');
|
const editingFileName = document.getElementById('editingFileName');
|
||||||
|
|
||||||
let currentEditingFile = null;
|
let currentEditingFile = null;
|
||||||
|
let originalText = ''; // 保存原始文本用于撤回
|
||||||
|
let isOptimized = false; // 标记是否已优化
|
||||||
|
|
||||||
function sendMessage() {
|
function sendMessage() {
|
||||||
const text = messageInput.value.trim();
|
const text = messageInput.value.trim();
|
||||||
@ -519,6 +555,56 @@ export function getWebviewContent(iconUri?: string): string {
|
|||||||
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
|
vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
|
||||||
messageInput.value = '';
|
messageInput.value = '';
|
||||||
messageInput.focus();
|
messageInput.focus();
|
||||||
|
|
||||||
|
// 重置优化状态
|
||||||
|
resetOptimizeButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOptimizeButton() {
|
||||||
|
const optimizeIcon = document.getElementById('optimizeIcon');
|
||||||
|
const optimizeTooltip = document.getElementById('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');
|
||||||
|
|
||||||
|
// 切换回优化图标（星星图标）
|
||||||
|
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 = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function readFile() {
|
function readFile() {
|
||||||
|
|||||||
Reference in New Issue
Block a user