feat:新增高级特性的按钮
- 里面包含用户手册 - 用户反馈 点击之后弹窗显示微信二维码
This commit is contained in:
Roe-xin
BIN
src/assets/QRCode/wx.png
Normal file
BIN
src/assets/QRCode/wx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
@ -184,4 +184,9 @@ export const userAvatarIconSvg = `<svg t="1767947405083" class="icon" viewBox="0
|
|||||||
/**
|
/**
|
||||||
* 更新阶段图标 SVG
|
* 更新阶段图标 SVG
|
||||||
*/
|
*/
|
||||||
export const updateStageIconSvg = `<svg t="1768188846282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7848" width="14" height="14"><path d="M83.712 1024c-0.256 0-0.768 0-1.024-0.256-17.408-0.512-31.488-14.848-31.488-32.512V32.512C51.2 14.592 65.792 0 83.712 0h745.472c17.92 0 32.512 14.592 32.512 32.512v280.576c0 18.432-14.592 33.28-32.512 33.28-1.536 0-3.072 0-4.608-0.256-16.128-2.304-27.648-15.872-27.648-32V77.056c0-6.912-5.632-12.288-12.288-12.288H128.256c-6.912 0-12.288 5.632-12.288 12.288v869.632c0 6.912 5.632 12.288 12.288 12.288h238.08c9.728 0 18.944 4.096 25.344 11.52 6.144 7.168 8.96 16.384 7.68 25.6-2.304 16.128-15.872 27.648-32 27.648H83.712v0.256zM534.784 1024c-6.144 0-12.032-2.816-15.616-7.424-3.84-4.352-5.376-10.496-4.352-16.64l27.648-147.968c0-0.512 0.512-1.024 0.768-1.536L867.84 558.336c11.52-11.264 26.624-17.664 42.24-17.664 16.384 0 31.488 6.4 42.752 17.664l53.76 53.504c23.296 23.04 23.552 60.928 0.768 84.736l-0.768 0.768-323.584 294.912c-2.816 2.56-6.4 4.352-9.984 5.12l-134.656 26.368c-0.512 0-2.048 0.256-3.584 0.256z m95.488-182.528c-1.024 0-1.792 0.256-2.56 1.024L590.848 875.52c-0.512 0.512-1.024 1.28-1.28 2.048l-15.104 81.152c-0.256 1.792 0.768 3.072 0.768 3.072 0.768 0.768 1.792 1.28 2.816 1.28H578.816l73.984-14.336c0.768-0.256 1.28-0.512 1.792-0.768l38.4-34.816c0.768-0.768 1.024-1.536 1.024-2.56s-0.256-2.304-1.024-3.072l-60.416-64.768-0.256-0.256c0-0.512-1.024-1.024-2.048-1.024z m217.088-194.56c-1.024 0-1.792 0.256-2.56 1.024l-172.8 155.392c-0.768 0.768-1.28 1.536-1.28 2.816 0 1.024 0.256 2.048 1.024 2.56l60.16 64.768c0.768 0.768 1.792 1.28 2.816 1.28s1.792-0.256 2.56-1.024l173.568-157.952c0.768-0.768 1.024-1.536 1.024-2.56s-0.256-2.048-1.28-3.072L849.92 647.936c-0.512-0.256-1.536-1.024-2.56-1.024z m101.376 28.928c0.768 0.768 1.536 1.024 2.816 1.024 1.024 0 1.792-0.256 2.56-1.024l16.384-14.848 0.512-0.512c3.072-3.584 2.816-8.704-0.512-12.032L916.48 594.944c-1.536-1.536-4.096-2.56-6.144-2.56-2.56 0-4.864 1.024-6.4 2.56-0.256 0.256-0.512 0.512-0.768 0.512l-17.664 15.872 63.232 64.512z" p-id="7849" fill="#8a8a8a"></path><path d="M212.48 419.584h118.016v39.424H212.48v-39.424z m137.472-118.016h118.016v39.424h-118.016v-39.424z m137.728-118.016h196.608v39.424h-196.608V183.552z m0 0" fill="#8a8a8a" p-id="7850"></path><path d="M664.576 242.688h-157.184c-11.776 0-19.712 7.936-19.712 19.712v98.304h-118.016c-11.776 0-19.712 7.936-19.712 19.712V478.72h-117.76c-11.776 0-19.712 7.936-19.712 19.712v118.016c0 11.776 7.936 19.712 19.712 19.712h432.384c11.776 0 19.712-7.936 19.712-19.712V262.144c-0.256-11.776-7.936-19.456-19.712-19.456zM369.664 576.768h-117.76v-39.424h118.016v39.424z m137.728-118.016h-118.016v-39.424h118.016v39.424z m137.472-117.76h-118.016v-39.424h118.016v39.424z m0 0" fill="#8a8a8a" p-id="7851"></path></svg>`;
|
export const updateStageIconSvg = `<svg t="1768188846282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7848" width="14" height="14"><path d="M83.712 1024c-0.256 0-0.768 0-1.024-0.256-17.408-0.512-31.488-14.848-31.488-32.512V32.512C51.2 14.592 65.792 0 83.712 0h745.472c17.92 0 32.512 14.592 32.512 32.512v280.576c0 18.432-14.592 33.28-32.512 33.28-1.536 0-3.072 0-4.608-0.256-16.128-2.304-27.648-15.872-27.648-32V77.056c0-6.912-5.632-12.288-12.288-12.288H128.256c-6.912 0-12.288 5.632-12.288 12.288v869.632c0 6.912 5.632 12.288 12.288 12.288h238.08c9.728 0 18.944 4.096 25.344 11.52 6.144 7.168 8.96 16.384 7.68 25.6-2.304 16.128-15.872 27.648-32 27.648H83.712v0.256zM534.784 1024c-6.144 0-12.032-2.816-15.616-7.424-3.84-4.352-5.376-10.496-4.352-16.64l27.648-147.968c0-0.512 0.512-1.024 0.768-1.536L867.84 558.336c11.52-11.264 26.624-17.664 42.24-17.664 16.384 0 31.488 6.4 42.752 17.664l53.76 53.504c23.296 23.04 23.552 60.928 0.768 84.736l-0.768 0.768-323.584 294.912c-2.816 2.56-6.4 4.352-9.984 5.12l-134.656 26.368c-0.512 0-2.048 0.256-3.584 0.256z m95.488-182.528c-1.024 0-1.792 0.256-2.56 1.024L590.848 875.52c-0.512 0.512-1.024 1.28-1.28 2.048l-15.104 81.152c-0.256 1.792 0.768 3.072 0.768 3.072 0.768 0.768 1.792 1.28 2.816 1.28H578.816l73.984-14.336c0.768-0.256 1.28-0.512 1.792-0.768l38.4-34.816c0.768-0.768 1.024-1.536 1.024-2.56s-0.256-2.304-1.024-3.072l-60.416-64.768-0.256-0.256c0-0.512-1.024-1.024-2.048-1.024z m217.088-194.56c-1.024 0-1.792 0.256-2.56 1.024l-172.8 155.392c-0.768 0.768-1.28 1.536-1.28 2.816 0 1.024 0.256 2.048 1.024 2.56l60.16 64.768c0.768 0.768 1.792 1.28 2.816 1.28s1.792-0.256 2.56-1.024l173.568-157.952c0.768-0.768 1.024-1.536 1.024-2.56s-0.256-2.048-1.28-3.072L849.92 647.936c-0.512-0.256-1.536-1.024-2.56-1.024z m101.376 28.928c0.768 0.768 1.536 1.024 2.816 1.024 1.024 0 1.792-0.256 2.56-1.024l16.384-14.848 0.512-0.512c3.072-3.584 2.816-8.704-0.512-12.032L916.48 594.944c-1.536-1.536-4.096-2.56-6.144-2.56-2.56 0-4.864 1.024-6.4 2.56-0.256 0.256-0.512 0.512-0.768 0.512l-17.664 15.872 63.232 64.512z" p-id="7849" fill="#8a8a8a"></path><path d="M212.48 419.584h118.016v39.424H212.48v-39.424z m137.472-118.016h118.016v39.424h-118.016v-39.424z m137.728-118.016h196.608v39.424h-196.608V183.552z m0 0" fill="#8a8a8a" p-id="7850"></path><path d="M664.576 242.688h-157.184c-11.776 0-19.712 7.936-19.712 19.712v98.304h-118.016c-11.776 0-19.712 7.936-19.712 19.712V478.72h-117.76c-11.776 0-19.712 7.936-19.712 19.712v118.016c0 11.776 7.936 19.712 19.712 19.712h432.384c11.776 0 19.712-7.936 19.712-19.712V262.144c-0.256-11.776-7.936-19.456-19.712-19.456zM369.664 576.768h-117.76v-39.424h118.016v39.424z m137.728-118.016h-118.016v-39.424h118.016v39.424z m137.472-117.76h-118.016v-39.424h118.016v39.424z m0 0" fill="currentColor" p-id="7851"></path></svg>`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更多的图标svg
|
||||||
|
*/
|
||||||
|
export const moreIconSvg = `<svg t="1768457083546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4635" width="16" height="16"><path d="M256 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#8a8a8a" p-id="4636"></path><path d="M512 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#8a8a8a" p-id="4637"></path><path d="M768 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#8a8a8a" p-id="4638"></path></svg>`;
|
||||||
|
|||||||
@ -131,13 +131,19 @@ export async function showICHelperPanel(
|
|||||||
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
|
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 获取二维码图片URI
|
||||||
|
const qrCodeUri = panel.webview.asWebviewUri(
|
||||||
|
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "QRCode", "wx.png")
|
||||||
|
);
|
||||||
|
|
||||||
// 设置HTML内容
|
// 设置HTML内容
|
||||||
panel.webview.html = getWebviewContent(
|
panel.webview.html = getWebviewContent(
|
||||||
iconUri.toString(),
|
iconUri.toString(),
|
||||||
autoIconUri.toString(),
|
autoIconUri.toString(),
|
||||||
liteIconUri.toString(),
|
liteIconUri.toString(),
|
||||||
syIconUri.toString(),
|
syIconUri.toString(),
|
||||||
maxIconUri.toString()
|
maxIconUri.toString(),
|
||||||
|
qrCodeUri.toString()
|
||||||
);
|
);
|
||||||
|
|
||||||
// 获取并发送用户信息到 webview
|
// 获取并发送用户信息到 webview
|
||||||
@ -344,6 +350,16 @@ export async function showICHelperPanel(
|
|||||||
// 退出登录
|
// 退出登录
|
||||||
vscode.commands.executeCommand("ic-coder.logout");
|
vscode.commands.executeCommand("ic-coder.logout");
|
||||||
break;
|
break;
|
||||||
|
case "openUserManual":
|
||||||
|
// 打开用户手册
|
||||||
|
vscode.env.openExternal(vscode.Uri.parse("https://www.iccoder.com"));
|
||||||
|
break;
|
||||||
|
case "openUserFeedback":
|
||||||
|
// 打开用户反馈二维码弹窗
|
||||||
|
panel.webview.postMessage({
|
||||||
|
command: "showFeedbackQRCode"
|
||||||
|
});
|
||||||
|
break;
|
||||||
// 处理计划操作（只做模式切换，响应已通过 submitAnswer 发送）
|
// 处理计划操作（只做模式切换，响应已通过 submitAnswer 发送）
|
||||||
case "planAction":
|
case "planAction":
|
||||||
if (message.action === "confirm") {
|
if (message.action === "confirm") {
|
||||||
|
|||||||
@ -3,7 +3,12 @@ import {
|
|||||||
getUserInfoComponentStyles,
|
getUserInfoComponentStyles,
|
||||||
getUserInfoComponentScript,
|
getUserInfoComponentScript,
|
||||||
} from "./userInfoComponent";
|
} from "./userInfoComponent";
|
||||||
import { userAvatarIconSvg } from "../constants/toolIcons";
|
import {
|
||||||
|
getMoreOptionsComponentContent,
|
||||||
|
getMoreOptionsComponentStyles,
|
||||||
|
getMoreOptionsComponentScript,
|
||||||
|
} from "./moreOptionsComponent";
|
||||||
|
import { userAvatarIconSvg, moreIconSvg } from "../constants/toolIcons";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取会话历史栏的 HTML 内容
|
* 获取会话历史栏的 HTML 内容
|
||||||
@ -39,6 +44,13 @@ export function getConversationHistoryBarContent(): string {
|
|||||||
</button>
|
</button>
|
||||||
${getUserInfoComponentContent()}
|
${getUserInfoComponentContent()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class='more-container'>
|
||||||
|
<button class="more-button" title="更多选项" onclick="toggleMoreOptionsDropdown()">
|
||||||
|
${moreIconSvg}
|
||||||
|
</button>
|
||||||
|
${getMoreOptionsComponentContent()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -111,6 +123,41 @@ export function getConversationHistoryBarStyles(): string {
|
|||||||
|
|
||||||
${getUserInfoComponentStyles()}
|
${getUserInfoComponentStyles()}
|
||||||
|
|
||||||
|
.more-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button:hover {
|
||||||
|
background: var(--vscode-toolbar-hoverBackground);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button.active {
|
||||||
|
background: var(--vscode-toolbar-hoverBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
${getMoreOptionsComponentStyles()}
|
||||||
|
|
||||||
.history-dropdown-button {
|
.history-dropdown-button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -275,6 +322,8 @@ export function getConversationHistoryBarScript(): string {
|
|||||||
return `
|
return `
|
||||||
${getUserInfoComponentScript()}
|
${getUserInfoComponentScript()}
|
||||||
|
|
||||||
|
${getMoreOptionsComponentScript()}
|
||||||
|
|
||||||
// 更新用户头像图标按钮显示
|
// 更新用户头像图标按钮显示
|
||||||
function updateUserAvatarIconButton(userInfo) {
|
function updateUserAvatarIconButton(userInfo) {
|
||||||
const userAvatarIconButton = document.getElementById('userAvatarIconButton');
|
const userAvatarIconButton = document.getElementById('userAvatarIconButton');
|
||||||
|
|||||||
394
src/views/moreOptionsComponent.ts
Normal file
394
src/views/moreOptionsComponent.ts
Normal file
@ -0,0 +1,394 @@
|
|||||||
|
/**
|
||||||
|
* 更多选项组件
|
||||||
|
* 包含用户手册和用户反馈入口
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取更多选项组件的 HTML 内容
|
||||||
|
*/
|
||||||
|
export function getMoreOptionsComponentContent(): string {
|
||||||
|
return `
|
||||||
|
<div class="more-options-wrapper">
|
||||||
|
<!-- 更多选项下拉面板 -->
|
||||||
|
<div class="more-options-dropdown" id="moreOptionsDropdown">
|
||||||
|
<div class="more-options-content">
|
||||||
|
<div class="more-options-header">
|
||||||
|
<span class="more-options-title">更多选项</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="more-options-body">
|
||||||
|
<div class="more-option-item" id="userManualOption">
|
||||||
|
<div class="option-icon">
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="option-text">
|
||||||
|
<div class="option-label">用户手册</div>
|
||||||
|
<div class="option-desc">查看使用文档和帮助</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="more-option-item" id="userFeedbackOption">
|
||||||
|
<div class="option-icon">
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="option-text">
|
||||||
|
<div class="option-label">用户反馈</div>
|
||||||
|
<div class="option-desc">提交问题和建议</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户反馈二维码弹窗 -->
|
||||||
|
<div class="feedback-qrcode-modal" id="feedbackQRCodeModal">
|
||||||
|
<div class="feedback-qrcode-overlay" onclick="closeFeedbackQRCode()"></div>
|
||||||
|
<div class="feedback-qrcode-content">
|
||||||
|
<div class="feedback-qrcode-header">
|
||||||
|
<span class="feedback-qrcode-title">用户反馈</span>
|
||||||
|
<button class="feedback-qrcode-close" onclick="closeFeedbackQRCode()">
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="feedback-qrcode-body">
|
||||||
|
<img class="feedback-qrcode-image" id="feedbackQRCodeImage" alt="微信二维码" />
|
||||||
|
<p class="feedback-qrcode-text">扫描二维码添加微信反馈</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取更多选项组件的 CSS 样式
|
||||||
|
*/
|
||||||
|
export function getMoreOptionsComponentStyles(): string {
|
||||||
|
return `
|
||||||
|
.more-options-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 更多选项下拉面板 */
|
||||||
|
.more-options-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
right: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-options-dropdown.active {
|
||||||
|
display: block;
|
||||||
|
animation: dropdownSlideIn 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dropdownSlideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-8px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-options-content {
|
||||||
|
background: var(--vscode-dropdown-background);
|
||||||
|
border: 1px solid var(--vscode-dropdown-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-options-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-options-body {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-option-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-option-item:hover {
|
||||||
|
background: var(--vscode-list-hoverBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-option-item:active {
|
||||||
|
background: var(--vscode-list-activeSelectionBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-icon svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-desc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户反馈二维码弹窗 */
|
||||||
|
.feedback-qrcode-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 20000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-modal.active {
|
||||||
|
display: flex;
|
||||||
|
animation: fadeIn 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-content {
|
||||||
|
position: relative;
|
||||||
|
background: var(--vscode-editor-background);
|
||||||
|
border: 1px solid var(--vscode-widget-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
animation: slideUp 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid var(--vscode-widget-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-close {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-close:hover {
|
||||||
|
background: var(--vscode-toolbar-hoverBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-close svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-body {
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-image {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid var(--vscode-widget-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback-qrcode-text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取更多选项组件的 JavaScript 脚本
|
||||||
|
*/
|
||||||
|
export function getMoreOptionsComponentScript(): string {
|
||||||
|
return `
|
||||||
|
// 切换更多选项下拉面板
|
||||||
|
function toggleMoreOptionsDropdown() {
|
||||||
|
const dropdown = document.getElementById('moreOptionsDropdown');
|
||||||
|
const moreButton = document.querySelector('.more-button');
|
||||||
|
|
||||||
|
if (dropdown) {
|
||||||
|
const isActive = dropdown.classList.contains('active');
|
||||||
|
if (isActive) {
|
||||||
|
dropdown.classList.remove('active');
|
||||||
|
if (moreButton) {
|
||||||
|
moreButton.classList.remove('active');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dropdown.classList.add('active');
|
||||||
|
if (moreButton) {
|
||||||
|
moreButton.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭更多选项下拉面板
|
||||||
|
function closeMoreOptionsDropdown() {
|
||||||
|
const dropdown = document.getElementById('moreOptionsDropdown');
|
||||||
|
const moreButton = document.querySelector('.more-button');
|
||||||
|
|
||||||
|
if (dropdown) {
|
||||||
|
dropdown.classList.remove('active');
|
||||||
|
}
|
||||||
|
if (moreButton) {
|
||||||
|
moreButton.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开用户手册
|
||||||
|
function openUserManual() {
|
||||||
|
console.log('打开用户手册');
|
||||||
|
vscode.postMessage({ command: 'openUserManual' });
|
||||||
|
closeMoreOptionsDropdown();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开用户反馈
|
||||||
|
function openUserFeedback() {
|
||||||
|
console.log('打开用户反馈');
|
||||||
|
vscode.postMessage({ command: 'openUserFeedback' });
|
||||||
|
closeMoreOptionsDropdown();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示用户反馈二维码弹窗
|
||||||
|
function showFeedbackQRCode() {
|
||||||
|
const modal = document.getElementById('feedbackQRCodeModal');
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭用户反馈二维码弹窗
|
||||||
|
function closeFeedbackQRCode() {
|
||||||
|
const modal = document.getElementById('feedbackQRCodeModal');
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绑定更多选项事件
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// 绑定用户手册选项
|
||||||
|
const userManualOption = document.getElementById('userManualOption');
|
||||||
|
if (userManualOption) {
|
||||||
|
userManualOption.addEventListener('click', openUserManual);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绑定用户反馈选项
|
||||||
|
const userFeedbackOption = document.getElementById('userFeedbackOption');
|
||||||
|
if (userFeedbackOption) {
|
||||||
|
userFeedbackOption.addEventListener('click', openUserFeedback);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击页面其他地方关闭下拉面板
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
const dropdown = document.getElementById('moreOptionsDropdown');
|
||||||
|
const moreButton = document.querySelector('.more-button');
|
||||||
|
const moreContainer = document.querySelector('.more-container');
|
||||||
|
|
||||||
|
if (dropdown && dropdown.classList.contains('active')) {
|
||||||
|
// 如果点击的不是更多按钮和下拉面板内容，则关闭
|
||||||
|
if (!moreContainer?.contains(e.target)) {
|
||||||
|
closeMoreOptionsDropdown();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 阻止下拉面板内容点击事件冒泡
|
||||||
|
const dropdownContent = document.querySelector('.more-options-content');
|
||||||
|
if (dropdownContent) {
|
||||||
|
dropdownContent.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`;
|
||||||
|
}
|
||||||
@ -33,7 +33,8 @@ export function getWebviewContent(
|
|||||||
autoIconUri?: string,
|
autoIconUri?: string,
|
||||||
liteIconUri?: string,
|
liteIconUri?: string,
|
||||||
syIconUri?: string,
|
syIconUri?: string,
|
||||||
maxIconUri?: string
|
maxIconUri?: string,
|
||||||
|
qrCodeUri?: string
|
||||||
): string {
|
): string {
|
||||||
// 获取当前环境，只在 dev 和 test 环境下显示快速操作按钮
|
// 获取当前环境，只在 dev 和 test 环境下显示快速操作按钮
|
||||||
const currentEnv = getCurrentEnv();
|
const currentEnv = getCurrentEnv();
|
||||||
@ -439,6 +440,12 @@ export function getWebviewContent(
|
|||||||
let loadingIndicator = null;
|
let loadingIndicator = null;
|
||||||
let currentSegmentedMessage = null; // 当前分段消息容器
|
let currentSegmentedMessage = null; // 当前分段消息容器
|
||||||
|
|
||||||
|
// 设置二维码图片
|
||||||
|
const feedbackQRCodeImage = document.getElementById('feedbackQRCodeImage');
|
||||||
|
if (feedbackQRCodeImage && '${qrCodeUri}') {
|
||||||
|
feedbackQRCodeImage.src = '${qrCodeUri}';
|
||||||
|
}
|
||||||
|
|
||||||
// ========== 模式选择器脚本（直接内联，避免模板字符串嵌套问题）==========
|
// ========== 模式选择器脚本（直接内联，避免模板字符串嵌套问题）==========
|
||||||
let currentMode = 'agent';
|
let currentMode = 'agent';
|
||||||
|
|
||||||
@ -612,6 +619,14 @@ export function getWebviewContent(
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'showFeedbackQRCode':
|
||||||
|
// 显示用户反馈二维码弹窗
|
||||||
|
console.log('[WebView] 显示用户反馈二维码弹窗');
|
||||||
|
if (typeof showFeedbackQRCode === 'function') {
|
||||||
|
showFeedbackQRCode();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
case 'resetSegmentedMessage':
|
case 'resetSegmentedMessage':
|
||||||
// 重置分段消息容器（停止对话时调用）
|
// 重置分段消息容器（停止对话时调用）
|
||||||
console.log('[WebView] 重置分段消息容器');
|
console.log('[WebView] 重置分段消息容器');
|
||||||
|
|||||||
Reference in New Issue
Block a user