395 lines
10 KiB
TypeScript
395 lines
10 KiB
TypeScript
/**
|
|
* 更多选项组件
|
|
* 包含用户手册和用户反馈入口
|
|
*/
|
|
|
|
/**
|
|
* 获取更多选项组件的 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();
|
|
});
|
|
}
|
|
});
|
|
`;
|
|
}
|