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

/**
 * 获取通用设置组件的 HTML 内容
 */
export function getGeneralSettingsComponentContent(): string {
  return `
    <div class="general-settings">
      <h3 class="settings-section-title">后端服务配置</h3>

      <div class="settings-section">
        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">后端服务地址</label>
            <span class="settings-item-description">自定义后端 API 地址</span>
          </div>
          <input type="text" class="settings-input-text" id="backendUrlInput" placeholder="https://iccoder.com">
        </div>
      </div>

      <div class="settings-actions">
        <button class="settings-button settings-button-primary" onclick="saveGeneralSettings()">
          保存设置
        </button>
        <button class="settings-button settings-button-secondary" onclick="resetGeneralSettings()">
          重置为默认
        </button>
      </div>
    </div>
  `;
}

/**
 * 获取通用设置组件的 CSS 样式
 */
export function getGeneralSettingsComponentStyles(): string {
  return `
    .general-settings {
      max-width: 600px;
    }

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

    .settings-section {
      margin-bottom: 32px;
    }

    .settings-subsection-title {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--vscode-foreground);
      opacity: 0.9;
    }

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

    .settings-item:last-child {
      border-bottom: none;
    }

    .settings-item-header {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .settings-item-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
    }

    .settings-item-description {
      font-size: 12px;
      color: var(--vscode-descriptionForeground);
    }

    .settings-select {
      padding: 6px 12px;
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      outline: none;
    }

    .settings-select:focus {
      border-color: var(--vscode-focusBorder);
    }

    .settings-input {
      width: 80px;
      padding: 6px 12px;
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 13px;
      outline: none;
    }

    .settings-input:focus {
      border-color: var(--vscode-focusBorder);
    }

    .settings-input-text {
      width: 300px;
      padding: 6px 12px;
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 13px;
      outline: none;
    }

    .settings-input-text:focus {
      border-color: var(--vscode-focusBorder);
    }

    .settings-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      cursor: pointer;
    }

    .settings-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .settings-switch-slider {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--vscode-input-background);
      border: 1px solid var(--vscode-input-border);
      border-radius: 24px;
      transition: all 0.3s ease;
    }

    .settings-switch-slider:before {
      content: "";
      position: absolute;
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background: var(--vscode-foreground);
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .settings-switch input:checked + .settings-switch-slider {
      background: var(--vscode-button-background);
      border-color: var(--vscode-button-background);
    }

    .settings-switch input:checked + .settings-switch-slider:before {
      transform: translateX(20px);
      background: var(--vscode-button-foreground);
    }

    .settings-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--vscode-panel-border);
    }

    .settings-button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .settings-button-primary {
      background: var(--vscode-button-background);
      color: var(--vscode-button-foreground);
    }

    .settings-button-primary:hover {
      background: var(--vscode-button-hoverBackground);
    }

    .settings-button-secondary {
      background: var(--vscode-button-secondaryBackground);
      color: var(--vscode-button-secondaryForeground);
    }

    .settings-button-secondary:hover {
      background: var(--vscode-button-secondaryHoverBackground);
    }
  `;
}

/**
 * 获取通用设置组件的 JavaScript 脚本
 */
export function getGeneralSettingsComponentScript(): string {
  return `
    // 保存通用设置
    function saveGeneralSettings() {
      const settings = {
        backendUrl: document.getElementById('backendUrlInput').value,
      };

      vscode.postMessage({
        command: 'saveGeneralSettings',
        settings: settings
      });

      console.log('通用设置已保存', settings);
      closeSettingsModal();
    }

    // 重置通用设置
    function resetGeneralSettings() {
      document.getElementById('backendUrlInput').value = '';

      // 清空保存的配置
      vscode.postMessage({
        command: 'saveGeneralSettings',
        settings: { backendUrl: '' }
      });

      console.log('通用设置已重置为默认值');
      closeSettingsModal();
    }

    // 加载通用设置
    function loadGeneralSettings(settings) {
      if (!settings) return;
      if (settings.backendUrl) {
        document.getElementById('backendUrlInput').value = settings.backendUrl;
      }
    }
  `;
}