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

import {
  getGeneralSettingsComponentContent,
  getGeneralSettingsComponentStyles,
  getGeneralSettingsComponentScript,
} from "./generalSettingsComponent";
import {
  getRulesSettingsComponentContent,
  getRulesSettingsComponentStyles,
  getRulesSettingsComponentScript,
} from "./rulesSettingsComponent";

/**
 * 获取设置面板的 HTML 内容
 */
export function getSettingsComponentContent(): string {
  return `
    <div class="settings-modal" id="settingsModal">
      <div class="settings-modal-overlay" onclick="closeSettingsModal()"></div>
      <div class="settings-modal-content">
        <div class="settings-modal-header">
          <h2 class="settings-modal-title">设置</h2>
          <button class="settings-modal-close" onclick="closeSettingsModal()" title="关闭">
            <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="settings-modal-body">
          <div class="settings-nav">
            <button class="settings-nav-item active" data-tab="general" onclick="switchSettingsTab('general')">
              通用
            </button>
            <button class="settings-nav-item" data-tab="rules" onclick="switchSettingsTab('rules')">
              规则
            </button>
          </div>

          <div class="settings-content">
            <div class="settings-tab-content active" id="generalSettings">
              ${getGeneralSettingsComponentContent()}
            </div>
            <div class="settings-tab-content" id="rulesSettings">
              ${getRulesSettingsComponentContent()}
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
}

/**
 * 获取设置面板的 CSS 样式
 */
export function getSettingsComponentStyles(): string {
  return `
    .settings-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }

    .settings-modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .settings-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .settings-modal-content {
      position: relative;
      width: 90%;
      max-width: 800px;
      height: 80%;
      max-height: 600px;
      background: var(--vscode-editor-background);
      border: 1px solid var(--vscode-panel-border);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .settings-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--vscode-panel-border);
      flex-shrink: 0;
    }

    .settings-modal-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--vscode-foreground);
    }

    .settings-modal-close {
      width: 32px;
      height: 32px;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--vscode-foreground);
      transition: all 0.2s ease;
    }

    .settings-modal-close:hover {
      background: var(--vscode-toolbar-hoverBackground);
    }

    .settings-modal-close svg {
      width: 20px;
      height: 20px;
    }

    .settings-modal-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .settings-nav {
      width: 180px;
      padding: 16px 0;
      border-right: 1px solid var(--vscode-panel-border);
      flex-shrink: 0;
      overflow-y: auto;
    }

    .settings-nav-item {
      width: 100%;
      padding: 10px 20px;
      background: transparent;
      border: none;
      text-align: left;
      font-size: 14px;
      color: var(--vscode-foreground);
      cursor: pointer;
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
    }

    .settings-nav-item:hover {
      background: var(--vscode-list-hoverBackground);
    }

    .settings-nav-item.active {
      background: var(--vscode-list-activeSelectionBackground);
      color: var(--vscode-list-activeSelectionForeground);
      border-left-color: var(--vscode-focusBorder);
    }

    .settings-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .settings-tab-content {
      display: none;
    }

    .settings-tab-content.active {
      display: block;
    }

    ${getGeneralSettingsComponentStyles()}
    ${getRulesSettingsComponentStyles()}
  `;
}

/**
 * 获取设置面板的 JavaScript 脚本
 */
export function getSettingsComponentScript(): string {
  return `
    ${getGeneralSettingsComponentScript()}
    ${getRulesSettingsComponentScript()}

    // 打开设置面板
    function openSettingsModal() {
      const modal = document.getElementById('settingsModal');
      if (modal) {
        modal.classList.add('active');
      }
    }

    // 关闭设置面板
    function closeSettingsModal() {
      const modal = document.getElementById('settingsModal');
      if (modal) {
        modal.classList.remove('active');
      }
    }

    // 切换设置标签页
    function switchSettingsTab(tabName) {
      // 更新导航项状态
      const navItems = document.querySelectorAll('.settings-nav-item');
      navItems.forEach(item => {
        if (item.dataset.tab === tabName) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });

      // 更新内容区域
      const tabContents = document.querySelectorAll('.settings-tab-content');
      tabContents.forEach(content => {
        if (content.id === tabName + 'Settings') {
          content.classList.add('active');
        } else {
          content.classList.remove('active');
        }
      });
    }

    // 阻止点击模态框内容时关闭
    document.addEventListener('click', (event) => {
      const modalContent = document.querySelector('.settings-modal-content');
      if (modalContent && modalContent.contains(event.target)) {
        event.stopPropagation();
      }
    });
  `;
}