IC-Coder-Plugin/src/views/moreOptionsComponent.ts

/**
 * 更多选项组件
 * 包含用户手册入口
 */

/**
 * 获取更多选项组件的 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>
        </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;
    }
  `;
}

/**
 * 获取更多选项组件的 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();
    }

    // 绑定更多选项事件
    document.addEventListener('DOMContentLoaded', () => {
      // 绑定用户手册选项
      const userManualOption = document.getElementById('userManualOption');
      if (userManualOption) {
        userManualOption.addEventListener('click', openUserManual);
      }

      // 点击页面其他地方关闭下拉面板
      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();
        });
      }
    });
  `;
}